/* =============================================================================
   SecureFlag Blog — 2026 theming layer
   -----------------------------------------------------------------------------
   Scope (per product direction):
     • HEADER + FOOTER  → exact replica of landing-website-2026 (fonts, dropdown
       structure, typography, sizes). Theme-aware: light chrome in white mode,
       dark chrome in dark mode. Values lifted verbatim from that project's
       Header.jsx / Footer.jsx / tailwind.config.js / buttonStyles.js.
     • BODY / ARTICLE   → kept EXACTLY like the master branch. White theme is
       therefore untouched (master's own theme.css styles it). Dark theme only
       re-colors master's layout via html[data-theme="dark"] overrides.
     • FONTS            → the one change applied to the body in BOTH themes:
       Inter (body) / Poppins (headings) / IBM Plex Mono (code).
     • HERO LOGO        → master's dimensions untouched (theme.scss .hero-logo:
       width 660px); only the image is swapped per theme.
   Loaded LAST in _layouts/default.html so it wins. Remove that <link> to revert.
   ========================================================================== */

/* Exact font set from landing-website-2026 (public/index.html) — same families
   AND weights so header/footer typography renders identically. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600&family=Poppins:wght@400;500;600;700&display=swap");

/* ============================================================ tokens ======= */
/* Chrome (header/footer) tokens are theme-aware — defined in BOTH blocks and
   consumed by the l26 header/footer. Body tokens are consumed only inside the
   html[data-theme="dark"] overrides further down. */
:root,
html[data-theme="dark"] {
  --sf-bg:            #000000;
  --sf-bg-soft:       #05070d;
  --sf-surface:       #0c1120;   /* dark-inner */
  --sf-surface-2:     #141a2b;   /* dark-card  */
  --sf-panel:         #0e1320;   /* dark-panel */
  --sf-border:        rgba(255, 255, 255, 0.09);   /* border-dark */
  --sf-border-soft:   rgba(255, 255, 255, 0.06);
  --sf-text:          #e5e6e8;   /* subdued */
  --sf-heading:       #ffffff;
  --sf-muted:         rgba(255, 255, 255, 0.60);
  --sf-muted-2:       rgba(255, 255, 255, 0.44);
  --sf-primary:       #2f6fd6;
  --sf-primary-dark:  #245bb5;
  --sf-primary-light: #6ba4ff;

  /* theme-aware chrome */
  --sf-header-bg:        rgba(0, 0, 0, 0.64);       /* Header.jsx: top state */
  --sf-header-bg-scroll: rgba(0, 0, 0, 0.85);       /* Header.jsx: scrolled  */
  --sf-glass:            rgba(255, 255, 255, 0.08);
  --sf-glass-2:          rgba(255, 255, 255, 0.07);
  --sf-dropdown-bg:      rgba(15, 15, 15, 0.95);     /* #0f0f0f/95 */
  --sf-dropdown-border:  rgba(255, 255, 255, 0.27);  /* border-white/[0.27] */
  --sf-mobile-bg:        rgba(10, 10, 10, 0.98);
  --sf-nav-text:         rgba(255, 255, 255, 0.70);  /* text-white/70 */
  --sf-nav-hover-text:   #ffffff;                    /* hover:text-white */
  --sf-dropdown-text:    rgba(255, 255, 255, 0.60);  /* text-white/60 */
  --sf-footer-heading:   #ffffff;
  --sf-footer-text:      rgba(255, 255, 255, 0.70);
  --sf-footer-hover-text:#ffffff;
  --sf-footer-copyright: rgba(255, 255, 255, 0.50);
  --sf-btn-solid-bg:     #ffffff;
  --sf-btn-solid-text:   #1a1b1c;   /* `dark` token */
  --sf-btn-solid-hover:  rgba(255, 255, 255, 0.90);
  --sf-burger:           #ffffff;
  --sf-header-border:    rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] {
  --sf-header-bg:        rgba(255, 255, 255, 0.80);
  --sf-header-bg-scroll: rgba(255, 255, 255, 0.92);
  --sf-glass:            rgba(17, 20, 26, 0.06);
  --sf-glass-2:          rgba(17, 20, 26, 0.05);
  --sf-dropdown-bg:      rgba(255, 255, 255, 0.98);
  --sf-dropdown-border:  rgba(17, 20, 26, 0.12);
  --sf-mobile-bg:        rgba(255, 255, 255, 0.98);
  --sf-nav-text:         #14161a;   /* solid black for legibility on white */
  --sf-nav-hover-text:   #000000;
  --sf-dropdown-text:    #14161a;
  --sf-footer-heading:   #14161a;
  --sf-footer-text:      #14161a;   /* solid black footer links */
  --sf-footer-hover-text:#000000;
  --sf-footer-copyright: rgba(20, 24, 31, 0.70);
  --sf-btn-solid-bg:     #1a1b1c;
  --sf-btn-solid-text:   #ffffff;
  --sf-btn-solid-hover:  #2c2c2d;
  --sf-burger:           #14161a;
  --sf-header-border:    rgba(17, 20, 26, 0.10);
}

/* chrome cross-fades when the theme flips */
header.l26-header, .l26-dropdown, footer.l26-footer, .l26-mobile,
.l26-btn, .l26-nav__item, .l26-theme-toggle, .l26-fcol a {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================ blog font (both themes) ====== */
/* The ONLY change applied to the body in both themes. Colours, sizes and
   spacing stay as master — only the typeface changes. */
body,
body.layout-post,
body.layout-page,
.source-sans-font,
.article-post.source-sans-font,
p, li, span, td, th, dd, dt, blockquote, figcaption {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* landing base text rendering — crisp, no synthesized weights */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
/* the l26 chrome uses landing's exact type: Inter, light body weight */
header.l26-header, footer.l26-footer, .l26-mobile {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.posttitle, .card-title, .welcome-text, .section-title h2 {
  font-family: 'Poppins', 'Inter', sans-serif !important;
}
code, pre, tt, kbd, samp,
.highlight, .highlight pre, .highlight code,
.article-post code, .article-post pre {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* ===================================================== header (l26) ======= */
/* Exact landing-website-2026 Header.jsx: 78px, blurred, centered nav w/ 15px
   items and 13px dropdowns; theme-aware colours via the tokens above. */
header.l26-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* height removed intentionally; py-5 padding below yields landing's 78px
     (38px logo + 2×20px) without a fixed height + avoids width overflow */
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;                      /* landing: py-5 px-6 */
  background: var(--sf-header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);              /* landing: backdrop-blur-[8px] */
  border-bottom: 1px solid var(--sf-header-border);
  transition: background-color .2s ease, border-color .2s ease;
}
header.l26-header.is-scrolled { background: var(--sf-header-bg-scroll); }

.l26-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.l26-logo img { height: 38px; width: auto; display: block; }   /* landing: h-[38px] */
/* logo swap — !important + parent scope beats `.l26-logo img { display:block }` */
.l26-logo .l26-logo-light { display: none !important; }
html[data-theme="light"] .l26-logo .l26-logo-dark { display: none !important; }
html[data-theme="light"] .l26-logo .l26-logo-light { display: block !important; }

.l26-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;                                /* landing: gap-0.5 */
}
.l26-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;                         /* per request (landing base 15px) */
  font-weight: 400;                        /* a touch heavier so it reads on white */
  line-height: 1;
  color: var(--sf-nav-text);               /* solid black in light / white/70 in dark */
  background: transparent;
  border: none;
  border-radius: 999px;                    /* rounded-full */
  padding: 6px 12px;                       /* py-1.5 px-3 */
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* hover brightens text + tints bg (landing: hover:text-white hover:bg-white/[0.08]);
   !important beats theme.css `a:hover{color:#111!important}` */
.l26-nav__item:hover { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass); }
/* The `color`/`stroke` !important defeats theme.css's universal `* { color:#06053B }`,
   which otherwise paints the caret navy (invisible on the dark header). Full-contrast
   colour (white in dark, near-black in light) keeps the thin caret clearly visible. */
.l26-chevron {
  width: 13px; height: 13px;
  flex-shrink: 0;
  display: block;
  max-width: none;
  opacity: 1;
  color: var(--sf-nav-hover-text) !important;   /* #fff dark / #14161a light */
  stroke: var(--sf-nav-hover-text) !important;
  stroke-width: 2;
  transition: transform .2s ease, color .15s ease;
}

.l26-nav__group { position: relative; }
/* invisible hover bridge so the dropdown stays open across the gap */
.l26-nav__group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.l26-nav__group:hover .l26-nav__item { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass); }
.l26-nav__group:hover .l26-chevron { transform: rotate(180deg); }

.l26-dropdown {
  position: absolute;
  top: calc(100% + 10px);                  /* landing: pt-2.5 */
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;                        /* landing: min-w-[220px] */
  max-width: 340px;                        /* landing: max-w-[260px] */
  background: var(--sf-dropdown-bg);       /* #0f0f0f/95 */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);             /* backdrop-blur-xl */
  border: 1px solid var(--sf-dropdown-border);   /* border-white/[0.27] */
  border-radius: 12px;                     /* rounded-xl */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);   /* shadow-2xl */
  padding: 6px 0;                          /* py-1.5 */
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 60;
}
.l26-dropdown--wide { min-width: 240px; max-width: 300px; }
.l26-nav__group:hover .l26-dropdown { opacity: 1; pointer-events: auto; }
.l26-dropdown a {
  display: flex;
  align-items: center;
  margin: 2px 6px;                         /* landing: mx-1.5 my-0.5 */
  padding: 9px 12px;                       /* landing: px-3 py-[9px] */
  border-radius: 8px;                      /* rounded-lg */
  font-family: 'Inter', sans-serif;
  font-size: 15px;                         /* landing: text-[13px] */
  font-weight: 400;
  line-height: 1.375;                      /* leading-snug */
  color: var(--sf-dropdown-text);          /* text-white/60 */
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.l26-dropdown a:hover { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass-2); }

.l26-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }   /* gap-3 */
.l26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;                         /* landing: text-[14px] */
  font-weight: 500;                        /* font-semibold -> 500 (utility remap) */
  line-height: 1;
  border: none;
  border-radius: 999px;
  padding: 12px 12px;                       /* py-1.5 px-3 */
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.l26-btn--ghost { color: var(--sf-nav-text); background: transparent; font-weight: 500; }   /* Log in */
.l26-btn--ghost:hover { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass); }
.l26-btn--solid { color: var(--sf-btn-solid-text); background: var(--sf-btn-solid-bg); }     /* Book a demo */
.l26-btn--solid:hover { color: var(--sf-btn-solid-text) !important; background: var(--sf-btn-solid-hover); }

/* theme toggle — sun (dark mode → click for light) / moon (light mode → click for dark) */
.l26-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--sf-border);
  border-radius: 999px;
  background: transparent;
  color: var(--sf-nav-hover-text);   /* solid: #fff (sun, dark) / #14161a (moon, light) */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.l26-theme-toggle:hover { background: var(--sf-glass); color: var(--sf-nav-hover-text); }
.l26-theme-toggle svg { width: 20px; height: 20px; display: block; stroke: currentColor; }
/* Dark theme → SUN in white; light theme → MOON in black.
   !important + parent scope beats the generic `.l26-theme-toggle svg { display:block }`. */
.l26-theme-toggle .l26-icon-sun  { display: block !important; color: #ffffff; stroke: #ffffff; }   /* dark theme: white sun */
.l26-theme-toggle .l26-icon-moon { display: none !important; }
html[data-theme="light"] .l26-theme-toggle .l26-icon-sun  { display: none !important; }
html[data-theme="light"] .l26-theme-toggle .l26-icon-moon { display: block !important; }   /* light theme: moon */

/* hamburger */
.l26-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.l26-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--sf-burger);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.l26-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.l26-burger.is-open span:nth-child(2) { opacity: 0; }
.l26-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.l26-mobile {
  position: fixed;
  top: 78px; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--sf-mobile-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.l26-mobile.is-open { opacity: 1; pointer-events: auto; }
.l26-mobile__nav { display: flex; flex-direction: column; padding: 16px; }

/* top-level links + group triggers share the same row style */
.l26-mobile__nav > a,
.l26-mobile__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--sf-nav-text);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.l26-mobile__nav > a:hover,
.l26-mobile__trigger:hover { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass-2); }

.l26-mobile__group { display: flex; flex-direction: column; }
/* chevron: full-contrast colour (white in dark / near-black in light) with
   !important defeats theme.css `* { color:#06053B }` and keeps the thin caret
   clearly visible in both themes. */
.l26-mobile__chev {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--sf-nav-hover-text) !important;
  stroke: var(--sf-nav-hover-text) !important;
  stroke-width: 2;
  opacity: 1;
  transition: transform .2s ease, color .15s ease;
}
.l26-mobile__group.is-open .l26-mobile__chev { transform: rotate(180deg); }

/* sub-menu: collapsed by default; expands indented with a left border (landing) */
.l26-mobile__sub {
  display: none;
  flex-direction: column;
  margin: 2px 0 6px 16px;
  padding-left: 8px;
  border-left: 1px solid var(--sf-border);
}
.l26-mobile__group.is-open .l26-mobile__sub { display: flex; }
.l26-mobile__sub a {
  display: block;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--sf-dropdown-text);
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.l26-mobile__sub a:hover { color: var(--sf-nav-hover-text) !important; background: var(--sf-glass-2); }

.l26-mobile__login { margin-top: 12px; padding-top: 20px !important; border-top: 1px solid var(--sf-border); }

@media (min-width: 1101px) { .l26-burger, .l26-mobile { display: none !important; } }
@media (max-width: 1100px) {
  .l26-nav { display: none; }
  .l26-btn--ghost { display: none; }
  .l26-burger { display: flex; }
}

/* ===================================================== footer (l26) ======= */
/* Exact landing Footer.jsx: 5/6-column nav, 15px links, base headings. */
footer.l26-footer {
  background-color: var(--sf-bg);
  width: 100%;
  height: auto;
  padding: 0;
  display: block;
  position: relative;
  z-index: 103;
  border-top: 1px solid var(--sf-header-border);
  margin-top: 80px;
}
html[data-theme="light"] footer.l26-footer { background-color: #ffffff; }

.l26-fnav {
  max-width: 1300px;                       /* landing: max-w-[1300px] */
  margin: 0 auto;
  padding: 40px 24px;                      /* landing: px-6 py-10 */
  display: flex;
  flex-direction: column;
  gap: 40px;                               /* gap-10 */
}
.l26-fnav__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* brand + 4 nav columns */
  gap: 40px;
}
.l26-fnav__brand img { height: 37px; width: auto; display: block; }   /* landing logomark h-[37px] */
.l26-fnav__brand .l26-logo-light { display: none !important; }
html[data-theme="light"] .l26-fnav__brand .l26-logo-dark { display: none !important; }
html[data-theme="light"] .l26-fnav__brand .l26-logo-light { display: block !important; }
.l26-fcol { display: flex; flex-direction: column; gap: 8px; }        /* gap-2 */
.l26-fcol__heading {
  color: var(--sf-footer-heading);
  font-family: 'Inter', sans-serif;
  font-weight: 400;                        /* font-medium -> 400 */
  font-size: 16px;                         /* text-base */
  line-height: 1.5;                        /* leading-6 */
  margin: 0 0 4px;
}
.l26-fcol a {
  align-self: flex-start;
  color: var(--sf-footer-text);            /* solid black in light / white/70 in dark */
  font-family: 'Inter', sans-serif;
  font-weight: 400;                        /* font-medium -> 400 */
  font-size: 16px;                         /* per request (landing base 15px) */
  line-height: 1.6;                        /* leading-6 */
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: -8px;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
/* hover brightens text (landing: hover:text-white) + subtle bg tint */
.l26-fcol a:hover { color: var(--sf-footer-hover-text) !important; background: var(--sf-glass); }

/* kill the legacy theme underline on hover for all header/footer/menu links */
.l26-header a:hover, .l26-mobile a:hover, .l26-footer a:hover { text-decoration: none !important; }
.l26-fnav__divider { height: 1px; width: 100%; background: var(--sf-border); }   /* bg-white/10 */
.l26-fnav__bottom { display: flex; align-items: center; justify-content: space-between; }
.l26-fnav__bottom p { color: var(--sf-footer-copyright); font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; margin: 0; }   /* text-xs text-white/50 */

@media (max-width: 900px) {
  .l26-fnav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l26-fnav__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .l26-fnav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

/* ============================================================= hero ======== */
/* White theme keeps master's hero verbatim (clouds bg, 660px logo, 500px tall).
   Only the "Blog" typeface changes (handled by the font block above) and the
   logo image is swapped per theme. Dark theme swaps to a dark hero. */
.hero-content .hero-logo-dark { display: none !important; }             /* white logo, dark theme only */
html[data-theme="dark"] .hero-content .hero-logo-light { display: none !important; }
html[data-theme="dark"] .hero-content .hero-logo-dark  { display: inline-block !important; }

/* dark-theme hero: drop the light clouds, use a subtle blue glow on black */
html[data-theme="dark"] .hero {
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(42, 148, 255, 0.22), transparent 70%) !important;
}
html[data-theme="dark"] .hero::before { display: none !important; }
html[data-theme="dark"] #cloud-intro {
  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}
html[data-theme="dark"] .hero h1.welcome-text,
html[data-theme="dark"] .welcome-text { color: #ffffff !important; }

/* ============================================ responsive blog listing ====== */
/* Master's grid is `col-sm-6 col-md-4` → 3 cards from 768px up, which is cramped
   on phones/small tablets. Make it scale with the viewport instead:
     phones  (< 768px)      → 1 card per row (one blog at a time)
     tablets (768–991px)    → 2 cards per row
     desktop (≥ 992px)      → 3 cards per row
   Scoped to columns that actually hold a blog card so other .row layouts
   (e.g. the article + TOC grid) are untouched. Applies in both themes. */
@media (max-width: 767.98px) {
  .post-container .row > [class*="col-"]:has(.blog-tile-card) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .post-container .row > [class*="col-"]:has(.blog-tile-card) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .post-container .row > [class*="col-"]:has(.blog-tile-card) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* =================================================================================
   DARK THEME BODY
   Everything below applies ONLY in dark mode. White/light mode is left entirely
   to master's theme.css, so the white design is unchanged. These rules re-colour
   master's existing layout — they do not alter sizes or spacing.
   ================================================================================= */
html[data-theme="dark"] body,
html[data-theme="dark"] body.layout-post,
html[data-theme="dark"] body.layout-page {
  background-color: var(--sf-bg) !important;
  color: var(--sf-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"] main { background: transparent; }
/* Generic element colours are scoped to .post-container so they NEVER leak into
   the l26 header/footer/hero (which live outside it). This matters because
   `html[data-theme="dark"] a` (specificity 0,1,2) would otherwise beat
   `.l26-fcol a` (0,1,1) and repaint the footer links. */
html[data-theme="dark"] .post-container h1,
html[data-theme="dark"] .post-container h2,
html[data-theme="dark"] .post-container h3,
html[data-theme="dark"] .post-container h4,
html[data-theme="dark"] .post-container h5,
html[data-theme="dark"] .post-container h6 { color: var(--sf-heading) !important; }
html[data-theme="dark"] .post-container p,
html[data-theme="dark"] .post-container li,
html[data-theme="dark"] .post-container span,
html[data-theme="dark"] .post-container td,
html[data-theme="dark"] .post-container th,
html[data-theme="dark"] .post-container dd,
html[data-theme="dark"] .post-container dt { color: var(--sf-text); }
html[data-theme="dark"] .post-container a { color: var(--sf-primary-light); }
html[data-theme="dark"] .post-container a:hover { color: #a9cbff !important; }
html[data-theme="dark"] .post-container hr { border-color: var(--sf-border); }
html[data-theme="dark"] ::selection { background: rgba(47, 111, 214, 0.40); color: #fff; }

/* post cards / listing */
html[data-theme="dark"] .post-card-link { text-decoration: none !important; color: inherit !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .blog-tile-card {
  background: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
}
html[data-theme="dark"] .blog-tile-card:hover { border-color: rgba(47, 111, 214, 0.5) !important; }
html[data-theme="dark"] .blog-tile-card-image { border-bottom: 1px solid var(--sf-border); }
html[data-theme="dark"] .card-title { color: var(--sf-heading) !important; }
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .card-text.text-muted { color: var(--sf-muted) !important; }
html[data-theme="dark"] .blog-tile-meta-footer,
html[data-theme="dark"] .blog-tile-meta-footer.text-muted,
html[data-theme="dark"] .text-muted { color: var(--sf-muted-2) !important; }
html[data-theme="dark"] .blog-tile-meta-footer .post-name,
html[data-theme="dark"] .blog-tile-meta-footer .post-date { color: var(--sf-muted) !important; }

/* article / post */
html[data-theme="dark"] .post-container { color: var(--sf-text); }
html[data-theme="dark"] .mainheading h1.posttitle,
html[data-theme="dark"] .posttitle { color: var(--sf-heading) !important; }
html[data-theme="dark"] .after-post-tags .tags li a,
html[data-theme="dark"] .after-post-tags .tags a {
  color: var(--sf-primary-light) !important;
  background: rgba(47, 111, 214, 0.12);
  border: 1px solid rgba(47, 111, 214, 0.3);
}
html[data-theme="dark"] .after-post-tags .tags a:hover { background: rgba(47, 111, 214, 0.24); }
html[data-theme="dark"] .date-share-btns,
html[data-theme="dark"] .post-date-small,
html[data-theme="dark"] .post-date,
html[data-theme="dark"] .post-date time { color: var(--sf-muted) !important; }

html[data-theme="dark"] .article-post { color: var(--sf-text) !important; }
html[data-theme="dark"] .article-post p,
html[data-theme="dark"] .article-post li { color: var(--sf-text) !important; }
html[data-theme="dark"] .article-post h1,
html[data-theme="dark"] .article-post h2,
html[data-theme="dark"] .article-post h3,
html[data-theme="dark"] .article-post h4 { color: var(--sf-heading) !important; }
html[data-theme="dark"] .article-post strong,
html[data-theme="dark"] .article-post b { color: var(--sf-heading) !important; }
html[data-theme="dark"] .article-post a { color: var(--sf-primary-light) !important; }
html[data-theme="dark"] .article-post a:hover { color: #a9cbff !important; }
html[data-theme="dark"] .article-post img { border: 1px solid var(--sf-border); }
html[data-theme="dark"] .article-post blockquote {
  border-left: 3px solid var(--sf-primary);
  background: var(--sf-surface-2);
  color: var(--sf-muted);
}

/* tables */
html[data-theme="dark"] .article-post table { color: var(--sf-text); border-color: var(--sf-border); }
html[data-theme="dark"] .article-post table th,
html[data-theme="dark"] .article-post table td { border-color: var(--sf-border) !important; }
html[data-theme="dark"] .article-post thead th {
  background: var(--sf-surface-2);
  color: var(--sf-heading) !important;
  border-bottom: 2px solid var(--sf-border) !important;
}
html[data-theme="dark"] .article-post tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
html[data-theme="dark"] .article-post tbody tr:hover { background: rgba(107, 164, 255, 0.08); }

/* inline code */
html[data-theme="dark"] .article-post code,
html[data-theme="dark"] .article-post p code,
html[data-theme="dark"] .article-post li code {
  background: var(--sf-surface-2);
  color: #d6e2ff;
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* code blocks (dark theme only — white theme keeps master's rouge light theme) */
html[data-theme="dark"] .highlight,
html[data-theme="dark"] figure.highlight,
html[data-theme="dark"] pre.highlight,
html[data-theme="dark"] div.highlighter-rouge .highlight {
  background: #0c1120 !important;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  overflow-x: auto;
}
html[data-theme="dark"] .highlight pre,
html[data-theme="dark"] pre { background: transparent !important; color: #e5e6e8 !important; }
html[data-theme="dark"] .highlight code { background: transparent !important; border: none !important; padding: 0 !important; color: inherit; }
html[data-theme="dark"] .highlight .hll { background-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .highlight .c, html[data-theme="dark"] .highlight .ch, html[data-theme="dark"] .highlight .cm, html[data-theme="dark"] .highlight .c1, html[data-theme="dark"] .highlight .cs, html[data-theme="dark"] .highlight .cpf { color: #7f8b9e !important; font-style: italic; }
html[data-theme="dark"] .highlight .cp { color: #c8a24a !important; }
html[data-theme="dark"] .highlight .k, html[data-theme="dark"] .highlight .kc, html[data-theme="dark"] .highlight .kd, html[data-theme="dark"] .highlight .kn, html[data-theme="dark"] .highlight .kp, html[data-theme="dark"] .highlight .kr { color: #7aa2f7 !important; }
html[data-theme="dark"] .highlight .kt { color: #f7768e !important; }
html[data-theme="dark"] .highlight .o, html[data-theme="dark"] .highlight .ow { color: #89ddff !important; }
html[data-theme="dark"] .highlight .s, html[data-theme="dark"] .highlight .s1, html[data-theme="dark"] .highlight .s2, html[data-theme="dark"] .highlight .sb, html[data-theme="dark"] .highlight .sc, html[data-theme="dark"] .highlight .sd, html[data-theme="dark"] .highlight .se, html[data-theme="dark"] .highlight .sh, html[data-theme="dark"] .highlight .si, html[data-theme="dark"] .highlight .sx, html[data-theme="dark"] .highlight .sr, html[data-theme="dark"] .highlight .ss, html[data-theme="dark"] .highlight .sa, html[data-theme="dark"] .highlight .dl { color: #9ece6a !important; }
html[data-theme="dark"] .highlight .m, html[data-theme="dark"] .highlight .mf, html[data-theme="dark"] .highlight .mh, html[data-theme="dark"] .highlight .mi, html[data-theme="dark"] .highlight .mo, html[data-theme="dark"] .highlight .mb, html[data-theme="dark"] .highlight .il { color: #ff9e64 !important; }
html[data-theme="dark"] .highlight .na { color: #bb9af7 !important; }
html[data-theme="dark"] .highlight .nb, html[data-theme="dark"] .highlight .bp { color: #2ac3de !important; }
html[data-theme="dark"] .highlight .nc, html[data-theme="dark"] .highlight .nn { color: #7dcfff !important; }
html[data-theme="dark"] .highlight .no { color: #ff9e64 !important; }
html[data-theme="dark"] .highlight .nd, html[data-theme="dark"] .highlight .ni { color: #bb9af7 !important; }
html[data-theme="dark"] .highlight .ne, html[data-theme="dark"] .highlight .nf, html[data-theme="dark"] .highlight .fm { color: #7aa2f7 !important; }
html[data-theme="dark"] .highlight .nl, html[data-theme="dark"] .highlight .nt { color: #f7768e !important; }
html[data-theme="dark"] .highlight .nv, html[data-theme="dark"] .highlight .vc, html[data-theme="dark"] .highlight .vg, html[data-theme="dark"] .highlight .vi, html[data-theme="dark"] .highlight .vm { color: #c0caf5 !important; }
html[data-theme="dark"] .highlight .gd { color: #f7768e !important; }
html[data-theme="dark"] .highlight .gi { color: #9ece6a !important; }
html[data-theme="dark"] .highlight .gh, html[data-theme="dark"] .highlight .gp, html[data-theme="dark"] .highlight .gu { color: #7aa2f7 !important; }
html[data-theme="dark"] .highlight .gr, html[data-theme="dark"] .highlight .gt { color: #f7768e !important; }
html[data-theme="dark"] .highlight .w { color: #3b4261 !important; }
html[data-theme="dark"] .highlight .err { border: 1px solid #f7768e; }

/* TOC */
html[data-theme="dark"] #table-of-contents {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 14px;
}
html[data-theme="dark"] #table-of-contents:not(:has(*)) { background: none; border: none; }
html[data-theme="dark"] .toc__list:before { color: var(--sf-heading); }
html[data-theme="dark"] #toc a,
html[data-theme="dark"] .toc__list a,
html[data-theme="dark"] .toc__sublist a { color: var(--sf-muted) !important; }
html[data-theme="dark"] #toc a:hover,
html[data-theme="dark"] .toc__list a:hover { color: #fff !important; }
html[data-theme="dark"] .active-section { color: var(--sf-primary-light) !important; }

/* author / related */
html[data-theme="dark"] .post-top-meta {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 14px;
}
html[data-theme="dark"] .post-top-meta .author-thumb { border: 2px solid var(--sf-border); }
html[data-theme="dark"] .post-top-meta .link-dark,
html[data-theme="dark"] .author-description { color: var(--sf-text) !important; }
html[data-theme="dark"] .btn.follow {
  border: 1px solid var(--sf-primary) !important;
  color: var(--sf-primary-light) !important;
  background: transparent !important;
}
html[data-theme="dark"] .btn.follow:hover { background: var(--sf-primary) !important; color: #fff !important; }
html[data-theme="dark"] .continue-reading h2 { color: var(--sf-heading) !important; }
html[data-theme="dark"] .related-posts { border-top: 1px solid var(--sf-border); }

/* share buttons */
html[data-theme="dark"] .sharebuttons ul li svg,
html[data-theme="dark"] .sharebuttons ul li svg path { fill: var(--sf-muted); transition: fill .2s ease; }
html[data-theme="dark"] .sharebuttons ul li a:hover svg,
html[data-theme="dark"] .sharebuttons ul li a:hover svg path { fill: #fff; }

/* categories page */
html[data-theme="dark"] .border-bottom { border-bottom: 1px solid var(--sf-border) !important; }
html[data-theme="dark"] h4[id] .text-capitalize,
html[data-theme="dark"] h4.mt-5 .text-capitalize { color: var(--sf-heading) !important; }

/* pagination */
html[data-theme="dark"] .bottompagination a,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination .page-link {
  color: var(--sf-text) !important;
  background: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
}
html[data-theme="dark"] .bottompagination a:hover,
html[data-theme="dark"] .pagination a:hover { background: var(--sf-surface-2) !important; color: #fff !important; }
html[data-theme="dark"] .pagination .active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--sf-primary) !important; border-color: var(--sf-primary) !important; color: #fff !important; }

/* cookie consent button */
html[data-theme="dark"] #CookieConsent.ccb__edit {
  background: var(--sf-surface-2) !important;
  color: var(--sf-text) !important;
  border: 1px solid var(--sf-border) !important;
}