/* ==========================================================================
   GCN.ONE Blog — theme glue + article typography
   Loaded after vendor.min.css and app.min.css. Only additive rules live here;
   every color/spacing token comes from app.min.css (the Quantum theme).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chakra Petch web fonts.

   app.min.css sets `--bs-body-font-family: "Chakra Petch", sans-serif` but
   never declares an @font-face, so the main site silently falls back to the
   generic sans-serif unless the font happens to be installed locally. The
   .woff2 files do ship in GCN.ONE_WebSite/wwwroot/fonts, so we declare them here.

   The URLs point at the MAIN SITE's /fonts/ rather than a copy under
   /blog/assets/fonts/ — the blog is served same-origin from www.gcn.one/blog,
   so there is no reason to ship these files twice.

   ⚠ That makes wwwroot/fonts/chakra-petch-*.woff2 load-bearing for the blog even
   though nothing in GCN.ONE_WebSite itself references them today. Don't prune
   them as "unused assets".
   -------------------------------------------------------------------------- */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/fonts/chakra-petch-latin-300-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/chakra-petch-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/chakra-petch-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/chakra-petch-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/chakra-petch-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* latin-ext (Bulgarian/CEE diacritics used in translated posts) */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Bootstrap ships text-opacity-25/50/75/100 only. The site adds 65 inline in
   _Layout.cshtml; mirror it here so post markup can be copy-pasted either way. */
.text-opacity-65 { --bs-text-opacity: 0.65 !important; }

/* --------------------------------------------------------------------------
   Post list
   -------------------------------------------------------------------------- */
.post-card { display: block; text-decoration: none; color: inherit; }
.post-card .card-body { transition: background .15s linear, transform .15s linear; }
.post-card:hover .card-body,
.post-card:focus-visible .card-body { background: rgba(var(--bs-theme-rgb), .10); }
.post-card:focus-visible { outline: 2px solid var(--bs-theme); outline-offset: 2px; }
.post-card .post-title { color: #fff; }
.post-card:hover .post-title { color: var(--bs-theme); }

/* Small uppercase metadata line: date · reading time */
.post-meta {
  font-size: .75rem;
  letter-spacing: .09375rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* Tag pills — theme-tinted, square like the rest of the theme */
.post-tag {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .6875rem;
  letter-spacing: .0625rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bs-theme);
  background: rgba(var(--bs-theme-rgb), .12);
  border: .5px solid rgba(var(--bs-theme-rgb), .35);
}
a.post-tag:hover { background: rgba(var(--bs-theme-rgb), .25); color: var(--bs-theme); }

/* --------------------------------------------------------------------------
   Article body
   Long-form reading measure + generous leading. Applied to the <article>.
   -------------------------------------------------------------------------- */
/* Centred so the reading measure sits in the middle of the full-width card
   rather than hugging the left edge with dead space beside it. */
.blog-prose { max-width: 46rem; margin-inline: auto; font-size: .9375rem; line-height: 1.9; color: rgba(255, 255, 255, .75); }
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose > *:last-child { margin-bottom: 0; }

.blog-prose p { margin-bottom: 1.25rem; }
.blog-prose .lead { font-size: 1.0625rem; line-height: 1.8; color: #fff; }

.blog-prose h2 { font-size: 1.375rem; font-weight: 600; color: #fff; margin: 2.5rem 0 .875rem; }
.blog-prose h3 { font-size: 1.0625rem; font-weight: 600; color: #fff; margin: 2rem 0 .75rem; }
.blog-prose h2 + h3 { margin-top: 1.25rem; }

.blog-prose a { color: var(--bs-theme); text-decoration: none; border-bottom: 1px solid rgba(var(--bs-theme-rgb), .4); }
.blog-prose a:hover { border-bottom-color: var(--bs-theme); }

.blog-prose ul, .blog-prose ol { margin-bottom: 1.25rem; padding-left: 1.25rem; }
.blog-prose li { margin-bottom: .5rem; }
.blog-prose li::marker { color: var(--bs-theme); }

.blog-prose strong, .blog-prose b { color: #fff; font-weight: 600; }

.blog-prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.125rem;
  border-left: 3px solid var(--bs-theme);
  color: #fff;
  font-size: 1rem;
}

.blog-prose code {
  font-family: var(--bs-font-monospace);
  font-size: .8125rem;
  color: var(--bs-theme);
  background: rgba(var(--bs-theme-rgb), .10);
  padding: .0625rem .3125rem;
  word-break: break-word;
}
.blog-prose pre {
  background: rgba(0, 0, 0, .45);
  border: .5px solid rgba(255, 255, 255, .15);
  padding: 1rem 1.125rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.7;
}
.blog-prose pre code { background: none; padding: 0; color: rgba(255, 255, 255, .85); }

.blog-prose hr { border-color: rgba(255, 255, 255, .18); margin: 2.5rem 0; }

/* Callout — a theme-tinted aside for "what this means for you" notes.
   Matches the sub-tile pattern used on the marketing pages. */
.blog-callout {
  background: rgba(var(--bs-theme-rgb), .08);
  border-left: 3px solid var(--bs-theme);
  padding: 1rem 1.125rem;
  margin: 1.75rem 0;
  font-size: .875rem;
  line-height: 1.8;
}
.blog-callout p:last-child { margin-bottom: 0; }

/* Tables inside posts must never widen the page on mobile. */
.blog-prose .table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.blog-prose table { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.blog-prose th, .blog-prose td { padding: .5rem .75rem; border-bottom: .5px solid rgba(255, 255, 255, .18); text-align: left; }
.blog-prose th { color: #fff; font-weight: 600; white-space: nowrap; }

@media (max-width: 575.98px) {
  .blog-prose { font-size: .875rem; line-height: 1.85; }
  .blog-prose h2 { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   iOS hairline fix.

   app.min.css sets the global --bs-border-width to 0.5px, and .btn borders
   inherit it (--bs-btn-border-width: var(--bs-border-width)). iOS WebKit
   snaps each border edge to the device-pixel grid independently, so a
   half-pixel edge that lands between pixels rounds down to nothing — in
   practice a button's bottom border disappears on iPhone. Desktop engines
   snap 0.5px up to a visible hairline, so only iOS shows it.

   Bump every hairline to a full pixel on iOS only, so desktop keeps the
   theme's 0.5px look. -webkit-touch-callout is implemented only by iOS /
   iPadOS WebKit, which makes it a reliable @supports gate for "iOS device".
   -------------------------------------------------------------------------- */
@supports (-webkit-touch-callout: none) {
  .btn { --bs-btn-border-width: 1px; }
  .post-tag { border-width: 1px; }
  .blog-prose pre { border-width: 1px; }
  .blog-prose th, .blog-prose td { border-bottom-width: 1px; }
}