/* =========================================================================
   fl-blog  -- ScheduleInterpreter / Flow blog theme
   Digital twin of scheduleinterpreter.com.
   Brand: purple #c40bff primary, Noto Sans body, Noto Mono code.
   Bootstrap 5 chrome (grid + components) is bundled as bootstrap.min.css;
   this file layers the brand tokens + blog-specific styling on top.
   ========================================================================= */

@import url("bootstrap.min.css");

/* ---- self-hosted corporate fonts (no third-party CDN) ------------------- */
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/NotoSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/NotoSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/NotoSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/NotoSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/NotoSansMono-Regular.woff2") format("woff2");
}

/* ---- brand tokens: override Bootstrap's blue with the SI purple --------- */
:root {
  --bs-primary: #c40bff;
  --bs-primary-rgb: 196, 11, 255;
  --bs-link-color: #c40bff;
  --bs-link-color-rgb: 196, 11, 255;
  --bs-link-hover-color: #a309d6;

  --fl-purple: #c40bff;
  --fl-purple-dark: #a309d6;
  /* AA-safe purple for NORMAL/small text (links, pill text). #c40bff fails 4.5:1 at body size.
     Light: #a309d6 = 5.9:1 on white. Overridden lighter in dark mode below. */
  --fl-purple-text: #a309d6;
  --fl-ink: #16121a;
  --fl-muted: #6b6675;
  --fl-border: #e8e4ee;
  --fl-bg-soft: #faf7fe;

  --bs-body-font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--fl-ink);
}

/* Bootstrap uses these compiled classes; repoint the key ones to purple */
.btn-primary {
  --bs-btn-bg: var(--fl-purple);
  --bs-btn-border-color: var(--fl-purple);
  --bs-btn-hover-bg: var(--fl-purple-dark);
  --bs-btn-hover-border-color: var(--fl-purple-dark);
  --bs-btn-active-bg: var(--fl-purple-dark);
  --bs-btn-active-border-color: var(--fl-purple-dark);
  --bs-btn-focus-shadow-rgb: 196, 11, 255;   /* purple focus glow, not Bootstrap's blue */
}
.btn-outline-primary {
  --bs-btn-color: var(--fl-purple);
  --bs-btn-border-color: var(--fl-purple);
  --bs-btn-hover-bg: var(--fl-purple);
  --bs-btn-hover-border-color: var(--fl-purple);
  --bs-btn-active-bg: var(--fl-purple);
  --bs-btn-focus-shadow-rgb: 196, 11, 255;
}
.text-primary { color: var(--fl-purple) !important; }
.bg-primary   { background-color: var(--fl-purple) !important; }
.border-primary { border-color: var(--fl-purple) !important; }

html, body { overflow-x: hidden; }   /* full-bleed .kg-width-full images must not scroll the page sideways */

body {
  font-family: var(--bs-body-font-family);
  color: var(--fl-ink);
  -webkit-font-smoothing: antialiased;
}

/* House style: bold/strong render at MEDIUM (500), not browser-default 700.
   Matches the marketing site's  strong { font-weight: 500 }  rule. */
strong, b, .fl-content strong, .fl-content b { font-weight: 500; }

/* ---- navbar (brand left, links right; Flow logo) ------------------------ */
.fl-navbar {
  border-bottom: 1px solid var(--fl-border); background: #fff; min-height: 64px;
  position: sticky; top: 0; z-index: 1030;          /* sticky toolbar */
}
:root[data-bs-theme="dark"] .fl-navbar,
:root:not([data-bs-theme="light"]) .fl-navbar { background: #16121a; }
/* keep the bar height fixed while the logo grows: the brand link doesn't add height */
.fl-navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
.fl-brand-logo { display: inline-block; height: 40px; width: auto; }
/* two logo files: dark-ink wordmark on light bg, light wordmark on dark bg.
   (CSS can't recolor an <img>-embedded SVG, so we swap the file.) */
.fl-brand-logo--dark { display: none; }
:root[data-bs-theme="dark"] .fl-brand-logo--light,
:root:not([data-bs-theme="light"]) .fl-brand-logo--light { display: none; }
:root[data-bs-theme="dark"] .fl-brand-logo--dark,
:root:not([data-bs-theme="light"]) .fl-brand-logo--dark { display: inline-block; }
.fl-navbar .nav-link { color: rgba(0,0,0,.65); font-weight: 400; }
.fl-navbar .nav-link:hover { color: var(--fl-purple); }
.fl-navbar .nav-link.active {
  color: #fff; background: var(--fl-purple); border-radius: .25rem;
}

/* light/dark toggle button */
.fl-theme-toggle {
  border: 1px solid var(--fl-border); background: transparent; color: var(--fl-ink);
  width: 40px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.fl-theme-toggle:hover { border-color: var(--fl-purple); color: var(--fl-purple); }
.fl-theme-icon { width: 18px; height: 18px; display: inline-block;
  background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  /* sun icon (light mode showing) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19'/%3E%3C/svg%3E");
}
/* dark mode shows a moon instead of the sun (both dark triggers) */
:root[data-bs-theme="dark"] .fl-theme-icon,
:root:not([data-bs-theme="light"]) .fl-theme-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}

/* ---- shared bits -------------------------------------------------------- */
.fl-muted { color: var(--fl-muted); }
.fl-lead  { font-size: 1.125rem; color: var(--fl-muted); margin-top: .5rem; }
.fl-main  { min-height: 60vh; }

.fl-page-header { background: var(--fl-bg-soft); border-bottom: 1px solid var(--fl-border); }
.fl-page-title  { font-weight: 600; letter-spacing: -.01em; }

/* section/tag pill -- inline, hugs its text (not a full-width bar) */
.fl-tag-pill {
  display: inline-block; width: auto; align-self: flex-start;
  font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  color: var(--fl-purple-text); background: rgba(196,11,255,.10);
  padding: .2rem .6rem; border-radius: 1rem; text-decoration: none; line-height: 1.4;
}
a.fl-tag-pill:hover { background: rgba(196,11,255,.18); color: var(--fl-purple-text); }
.fl-card-tags { display: flex; }        /* keeps the pill hugging left, not stretching */

/* ---- post cards (homepage + tag feeds) ---------------------------------- */
.fl-card { position: relative; border: 1px solid var(--fl-border); border-radius: .5rem; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.fl-card:hover { box-shadow: 0 .5rem 1.5rem rgba(22,18,26,.12); transform: translateY(-2px); border-color: rgba(196,11,255,.35); }
.fl-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.fl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.fl-card:hover .fl-card-media img { transform: scale(1.03); }
.fl-card-link { color: var(--fl-ink); text-decoration: none; }
.fl-card:hover .fl-card-link { color: var(--fl-purple); }
.fl-card-meta { font-size: .82rem; color: var(--fl-muted); }
.fl-meta-dot { margin: 0 .4rem; color: var(--fl-border); }
.fl-meta-author { font-weight: 600; color: var(--fl-ink); }

/* foot row: meta left, "Read more" right (reveals on hover) */
.fl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fl-readmore {
  font-size: .82rem; font-weight: 600; color: var(--fl-purple-text); white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
  position: relative; z-index: 2;                 /* above the stretched-link so it reads as the CTA */
}
.fl-card:hover .fl-readmore { opacity: 1; transform: translateX(0); }
/* touch devices have no hover -> always show it so mobile users get the affordance */
@media (hover: none) { .fl-readmore { opacity: 1; transform: none; } }

/* ---- single article ----------------------------------------------------- */
.fl-article-header { padding: 2.5rem 0 1.25rem; }
.fl-article-title  { font-weight: 600; letter-spacing: -.015em; }
.fl-article-meta   { font-size: .9rem; color: var(--fl-muted); margin-top: 1rem; }
.fl-article-hero   { margin: 1.5rem 0 2rem; }
.fl-article-hero img { width: 100%; border-radius: .5rem; }
.fl-article-hero figcaption { margin-top: .5rem; font-size: .85rem; }

/* article body typography (Bootstrap-flavored, brand purple links) */
.fl-content { font-size: 1.075rem; line-height: 1.75; }
.fl-content > * + * { margin-top: 1.15rem; }
.fl-content h2 { font-weight: 600; margin-top: 2.25rem; font-size: 1.6rem; }
.fl-content h3 { font-weight: 600; margin-top: 1.75rem; font-size: 1.3rem; }
.fl-content a  { color: var(--fl-purple-text); text-decoration: underline; text-underline-offset: 2px; }
.fl-content a:hover { color: var(--fl-purple); }
.fl-content img { max-width: 100%; height: auto; border-radius: .375rem; }
.fl-content blockquote {
  border-left: 3px solid var(--fl-purple); padding: .25rem 0 .25rem 1.25rem;
  margin-left: 0; color: var(--fl-muted); font-style: italic;
}
.fl-content pre {
  background: #16121a; color: #f5f2fa; border-radius: .5rem; padding: 1rem 1.25rem;
  overflow-x: auto; font-family: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; line-height: 1.6;
}
.fl-content code {
  font-family: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: rgba(196,11,255,.08); color: var(--fl-purple-dark);
  padding: .1rem .35rem; border-radius: .25rem;
}
.fl-content pre code { background: none; color: inherit; padding: 0; }
/* display:block + overflow-x makes the table its own scroll box so wide tables
   never push the page body sideways on mobile (Casper's approach). */
.fl-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.fl-content th, .fl-content td { padding: .5rem .65rem; border: 1px solid var(--fl-border); text-align: left; }
.fl-content th { text-transform: uppercase; font-weight: 600; font-size: .82rem; }

.fl-article-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--fl-border); }

/* ---- Koenig editor cards (GScan-required + correct wide/full rendering) --- */
/* Default cards stay within the text column. .kg-width-wide breaks out wider,
   .kg-width-full spans the viewport. Requires .fl-content to NOT clip overflow. */
.fl-content .kg-card { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.fl-content img { max-width: 100%; height: auto; }

.fl-content .kg-width-wide {
  position: relative;
  width: 75vw;
  min-width: 100%;                 /* never narrower than the text column */
  margin-left: 50%;
  transform: translateX(-50%);
}
.fl-content .kg-width-full {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.fl-content .kg-width-full img { width: 100%; border-radius: 0; }

/* image card: caption + alignment */
.fl-content .kg-image-card { text-align: center; }
.fl-content .kg-image-card img { display: inline-block; }
.fl-content figcaption { text-align: center; font-size: .85rem; color: var(--fl-muted); margin-top: .5rem; }

/* gallery, bookmark, embed, callout, button cards -- baseline sane defaults */
.fl-content .kg-gallery-container { display: flex; flex-direction: column; gap: .75rem; }
.fl-content .kg-gallery-row { display: flex; gap: .75rem; }
.fl-content .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.fl-content .kg-embed-card { display: flex; justify-content: center; }
.fl-content .kg-bookmark-card a.kg-bookmark-container {
  display: flex; text-decoration: none; color: inherit;
  border: 1px solid var(--fl-border); border-radius: .5rem; overflow: hidden;
}
.fl-content .kg-bookmark-content { padding: 1rem 1.25rem; }
.fl-content .kg-bookmark-title { font-weight: 600; color: var(--fl-ink); }
.fl-content .kg-callout-card {
  display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: .5rem;
  background: var(--fl-bg-soft); border: 1px solid var(--fl-border);
}
.fl-content .kg-btn {
  display: inline-block; padding: .5rem 1.25rem; border-radius: .375rem;
  background: var(--fl-purple); color: #fff; text-decoration: none; font-weight: 500;
}

/* ---- related / read-next ------------------------------------------------ */
.fl-related { background: var(--fl-bg-soft); border-top: 1px solid var(--fl-border); padding: 3rem 0; margin-top: 3.5rem; }
.fl-related-title { font-weight: 600; }

/* ---- pagination + footer ------------------------------------------------ */
.fl-pagination { font-size: .95rem; }
.fl-footer a { color: #d9c2ee; text-decoration: none; }
.fl-footer a:hover { color: #fff; text-decoration: underline; }
.fl-footer .fl-muted { color: #a9a2b5; }
.fl-footer hr { border-color: rgba(255,255,255,.12); }

/* ---- error -------------------------------------------------------------- */
.fl-error-code { color: var(--fl-purple); font-weight: 700; }

/* ---- responsive niceties ------------------------------------------------ */
@media (max-width: 767.98px) {
  .fl-navbar .nav-link.active { display: inline-block; }
  .fl-article-title { font-size: 1.7rem; }
}

/* =========================================================================
   DARK MODE
   Two triggers, both honored:
     1. OS preference        -> @media (prefers-color-scheme: dark)
     2. explicit toggle      -> <html data-bs-theme="dark">  (Bootstrap's own attr)
   The purple brand stays constant; only surfaces/ink invert.
   ========================================================================= */
:root[data-bs-theme="dark"],
:root[data-bs-theme="dark"] body {
  --fl-ink: #ece8f2;
  --fl-muted: #a49db4;
  --fl-border: #2b2630;
  --fl-bg-soft: #1a161f;
  --bs-body-color: #ece8f2;
  --bs-body-bg: #120f16;
  /* lighter purple for text on dark surfaces: #d98cff = 6.2:1 on #120f16 (AA pass) */
  --fl-purple-text: #d98cff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --fl-ink: #ece8f2;
    --fl-muted: #a49db4;
    --fl-border: #2b2630;
    --fl-bg-soft: #1a161f;
    --bs-body-color: #ece8f2;
    --bs-body-bg: #120f16;
    --fl-purple-text: #d98cff;
  }
}

/* dark surfaces derived from the tokens above */
:root[data-bs-theme="dark"] body,
:root:not([data-bs-theme="light"]) body { background: var(--bs-body-bg); }

:root[data-bs-theme="dark"] .fl-navbar,
:root:not([data-bs-theme="light"]) .fl-navbar { background: #16121a; border-bottom-color: var(--fl-border); }
:root[data-bs-theme="dark"] .fl-navbar .navbar-brand,
:root:not([data-bs-theme="light"]) .fl-navbar .navbar-brand { color: var(--fl-ink); }
:root[data-bs-theme="dark"] .fl-navbar .nav-link,
:root:not([data-bs-theme="light"]) .fl-navbar .nav-link { color: rgba(255,255,255,.7); }

:root[data-bs-theme="dark"] .fl-card,
:root:not([data-bs-theme="light"]) .fl-card { background: #17131d; border-color: var(--fl-border); }
:root[data-bs-theme="dark"] .fl-card-link,
:root:not([data-bs-theme="light"]) .fl-card-link { color: var(--fl-ink); }

/* the purple brand tokens intentionally do NOT change in dark mode:
   btn-primary, links, and .fl-tag-pill stay #c40bff for brand consistency.
   The tag-pill background tint reads fine on dark because it is a low-alpha purple. */