/* ============================================================
   Infuse / Firecore design overrides for the Zane Zendesk theme
   Loaded AFTER Zane's compiled style.css so these rules win.
   Light mode by default; orange (#FF6B1A) is the brand accent.
   ============================================================ */

:root {
  --infuse-orange:        #FF6B1A;
  --infuse-orange-mid:    #E85D0F;
  --infuse-orange-lite:   #FF8A4D;

  --infuse-bg:            #ffffff;
  --infuse-surface:       #ffffff;
  --infuse-surface-2:     #f7f7f8;
  --infuse-surface-3:     #eef0f2;

  --infuse-heading:       #111111;
  --infuse-text:          #222222;
  --infuse-text-muted:    #6b6f76;

  --infuse-border:        rgba(0,0,0,.10);
  --infuse-border-strong: rgba(0,0,0,.16);

  --infuse-footer-bg:     #0f0f10;
  --infuse-footer-text:   rgba(255,255,255,.72);
}

/* ── Page foundation ─────────────────────────────────────── */
html, body {
  background-color: var(--infuse-bg) !important;
  color: var(--infuse-text);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--infuse-heading);
}

/* Links */
a, a:visited { color: var(--infuse-orange-mid); }
a:hover, a:focus { color: var(--infuse-orange); }

/* ── Header / Navigation ─────────────────────────────────── */
.header,
.fixed-header,
.sticky-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--infuse-border) !important;
  color: var(--infuse-text);
}
.navbar a,
.navbar .nav-link,
.header a {
  color: var(--infuse-heading);
}
.navbar a:hover,
.navbar .nav-link:hover {
  color: var(--infuse-orange);
}

/* ── Header logo: no pill, no background, no border ──────── */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.navbar-brand img,
.navbar-brand img#logo,
img#logo {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: 36px;
  width: auto;
}

/* Search box on hero — extra left padding so text clears the magnifier icon */
.search-form input,
.search input,
input[type="search"] {
  background-color: #ffffff !important;
  border: 1px solid var(--infuse-border-strong) !important;
  color: var(--infuse-heading) !important;
  border-radius: 50rem !important;
  padding: .85rem 1.25rem .85rem 3.25rem !important;
}
.search-form input::placeholder,
input[type="search"]::placeholder {
  color: var(--infuse-text-muted);
}
.search-form input:focus,
input[type="search"]:focus {
  border-color: var(--infuse-orange) !important;
  box-shadow: 0 0 0 .25rem rgba(255,107,26,.18) !important;
  outline: 0;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background-color: var(--infuse-surface-2) !important;
  color: var(--infuse-heading);
}
.hero h1, .hero h2, .hero p { color: var(--infuse-heading); }

/* ── Buttons (orange pill) ───────────────────────────────── */
.button,
.btn,
button.button,
input[type="submit"],
input[type="button"],
.btn-primary {
  background-color: var(--infuse-orange) !important;
  border-color: var(--infuse-orange) !important;
  color: #ffffff !important;
  border-radius: 50rem !important;
  padding: .75rem 1.75rem;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.button:hover, .btn:hover,
button.button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.button:focus, .btn:focus,
button.button:focus, input[type="submit"]:focus, input[type="button"]:focus {
  background-color: var(--infuse-orange-mid) !important;
  border-color: var(--infuse-orange-mid) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 .25rem rgba(255,107,26,.25) !important;
}
.button.secondary,
.btn-secondary,
.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--infuse-border-strong) !important;
  color: var(--infuse-heading) !important;
}
.button.secondary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover {
  border-color: var(--infuse-orange) !important;
  color: var(--infuse-orange) !important;
  background-color: transparent !important;
}

/* On the orange CTA block ("Can't find what you're looking for?"), the
   default outlined button reads as invisible. Force a solid white pill
   with orange text so it's clearly clickable on the orange background. */
.cta,
.cta-block,
[class*="cta"] {
  /* parent stays orange via manifest token */
}
.cta .button,
.cta .btn,
.cta-block .button,
.cta-block .btn,
[class*="cta"] .button,
[class*="cta"] .btn {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--infuse-orange) !important;
}
.cta .button:hover, .cta .button:focus,
.cta .btn:hover, .cta .btn:focus,
.cta-block .button:hover, .cta-block .button:focus,
.cta-block .btn:hover, .cta-block .btn:focus,
[class*="cta"] .button:hover, [class*="cta"] .button:focus,
[class*="cta"] .btn:hover, [class*="cta"] .btn:focus {
  background-color: rgba(255,255,255,.92) !important;
  border-color: #ffffff !important;
  color: var(--infuse-orange-mid) !important;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.25) !important;
}

/* The header logo link should NEVER be pill-styled even though it sits
   inside selectors that match `.button` / `.btn`. */
.navbar-brand,
.navbar-brand .button,
.navbar .navbar-brand,
.header .navbar-brand {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ── Cards / blocks / sections ─────────────────────────────
   Deliberately omit `.block` — it's a Tailwind utility (display:block)
   used on inline labels like the vote count, not a real card. */
.card,
.content-block,
.custom-block,
.contact-block,
.cta-block,
.section,
.box {
  background-color: var(--infuse-surface) !important;
  border: 1px solid var(--infuse-border) !important;
  border-radius: 18px !important;
  color: var(--infuse-text);
}
.card a, .content-block a, .custom-block a {
  color: var(--infuse-orange-mid);
}

/* ── Form fields ─────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea,
.form-control {
  background-color: #ffffff !important;
  border: 1px solid var(--infuse-border-strong) !important;
  color: var(--infuse-heading) !important;
  border-radius: 10px !important;
  padding: .75rem 1rem !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--infuse-orange) !important;
  box-shadow: 0 0 0 .25rem rgba(255,107,26,.18) !important;
  outline: 0 !important;
}
::placeholder { color: var(--infuse-text-muted) !important; }
label {
  color: var(--infuse-heading);
  font-weight: 500;
}

/* ── Article / Knowledge-base content ─────────────────────── */
.article,
.article-content,
.article-body,
.section-tree,
.category-tree {
  color: var(--infuse-text);
}
.article a,
.article-body a {
  color: var(--infuse-orange-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article a:hover,
.article-body a:hover { color: var(--infuse-orange); }

.article blockquote,
.article-body blockquote {
  border-left: 3px solid var(--infuse-orange);
  background: rgba(255,107,26,.06);
  padding: .75rem 1rem;
  border-radius: 0 8px 8px 0;
  color: var(--infuse-text);
}

.article pre,
.article-body pre,
.article code,
.article-body code {
  background-color: var(--infuse-surface-2) !important;
  border: 1px solid var(--infuse-border) !important;
  color: var(--infuse-heading) !important;
  border-radius: 8px;
}

.article table,
.article-body table {
  border-color: var(--infuse-border) !important;
}
.article table th,
.article-body table th {
  background-color: var(--infuse-surface-2);
  color: var(--infuse-heading);
}
.article table td,
.article-body table td,
.article table th,
.article-body table th {
  border-color: var(--infuse-border) !important;
}

/* Note / warning callouts */
.note,
.warning {
  background-color: var(--infuse-surface-2) !important;
  border-left: 3px solid var(--infuse-orange) !important;
  color: var(--infuse-text) !important;
  border-radius: 0 8px 8px 0 !important;
}
.warning {
  border-left-color: #d64545 !important;
  background-color: #fff5f5 !important;
}

/* ── Categories / sections / article lists ────────────────── */
.category-block,
.section-block,
.article-list-item,
.article-promoted,
li.article-list-link {
  background-color: var(--infuse-surface);
  border: 1px solid var(--infuse-border);
  border-radius: 14px;
  color: var(--infuse-text);
}
.article-list-item:hover,
li.article-list-link:hover {
  border-color: var(--infuse-orange);
}
.article-list-link a,
.article-list-item a,
.section-block a,
.category-block a {
  color: var(--infuse-heading);
}
.article-list-link a:hover,
.article-list-item a:hover,
.section-block a:hover,
.category-block a:hover {
  color: var(--infuse-orange);
}

/* ── Category / section sidebar (rendered into #sidebar-navigation) ──
   Zane's actual TOC sidebar uses Tailwind utilities (`flex-1`, `py-2`,
   `font-semibold`, etc.) on plain `<a>` and `<li>` elements — none of
   the `.section-tree` / `.article-list-link` classes I tried earlier
   exist. Target the real container by ID so the rules definitely apply. */

/* The whole sidebar — keep children box-sized so padding + borders
   never push past the column. */
#sidebar-navigation,
#sidebar-navigation * {
  box-sizing: border-box !important;
}

/* Every list inside the sidebar is a vertical, stretched stack with
   no list bullets, no inherited padding, and no left-border rail
   (Zane's `pl-3 border-left` rail makes the active item kiss the line). */
#sidebar-navigation ul,
#sidebar-navigation ol,
#sidebar-navigation .border-left {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border-left: 0 !important;
}

/* Every <li> in the sidebar fills the full column width, has no
   pill border / background / padding of its own, and clips overflow. */
#sidebar-navigation li {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 2px 0 !important;
  overflow: hidden !important;
}

/* Every link in the sidebar is the actual interactive surface —
   it gets the padding, the rounded-rect background on hover/active,
   and is allowed to wrap onto a second line when the label is long. */
#sidebar-navigation a,
#sidebar-navigation li > a,
#sidebar-navigation li > div > a {
  display: block !important;
  width: 100% !important;
  padding: .5rem .85rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--infuse-heading) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#sidebar-navigation a:hover,
#sidebar-navigation li > a:hover {
  background-color: rgba(255,107,26,.08) !important;
  color: var(--infuse-orange) !important;
}
/* Active section / article link */
#sidebar-navigation .text-primary,
#sidebar-navigation a.text-primary,
#sidebar-navigation .bg-gray-100 {
  background-color: rgba(255,107,26,.10) !important;
  color: var(--infuse-orange) !important;
}

/* The expand/collapse chevron button keeps its own circular hover
   state but stays out of the link's hit area. */
#sidebar-navigation button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
}
#sidebar-navigation button:hover {
  background-color: rgba(0,0,0,.05) !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumb {
  color: var(--infuse-text-muted);
}
.breadcrumbs a,
.breadcrumb a { color: var(--infuse-text-muted); }
.breadcrumbs a:hover,
.breadcrumb a:hover { color: var(--infuse-orange); }

/* ── Footer ── light mode: white. Dark mode: dark with light text. */
body > footer,
.l-footer,
.page-footer,
.site-footer,
footer.footer {
  background-color: #ffffff !important;
  color: #222 !important;
  border-top: 1px solid var(--infuse-border);
}
body > footer a,
body > footer a:link,
body > footer a:visited,
.l-footer a, .page-footer a, .site-footer a, footer.footer a,
footer.footer a:link, footer.footer a:visited {
  color: #222 !important;
}
body > footer a:hover,
body > footer a:focus,
.l-footer a:hover, .page-footer a:hover, .site-footer a:hover,
footer.footer a:hover, footer.footer a:focus {
  color: var(--infuse-orange) !important;
}
body > footer h1, body > footer h2, body > footer h3, body > footer h4,
.l-footer h1, .l-footer h2, .l-footer h3, .l-footer h4,
.page-footer h1, .page-footer h2, .page-footer h3, .page-footer h4 {
  color: #111;
}

@media (prefers-color-scheme: dark) {
  body > footer,
  .l-footer,
  .page-footer,
  .site-footer,
  footer.footer {
    background-color: var(--infuse-footer-bg) !important;
    color: var(--infuse-footer-text) !important;
  }
  body > footer a,
  body > footer a:link,
  body > footer a:visited,
  .l-footer a, .page-footer a, .site-footer a, footer.footer a,
  footer.footer a:link, footer.footer a:visited {
    color: var(--infuse-footer-text) !important;
  }
  body > footer h1, body > footer h2, body > footer h3, body > footer h4,
  .l-footer h1, .l-footer h2, .l-footer h3, .l-footer h4,
  .page-footer h1, .page-footer h2, .page-footer h3, .page-footer h4 {
    color: #ffffff;
  }
}

/* Inline article footer (related / recently viewed) — keep light to
   match the rest of the article page. */
.article footer.row,
.article-page footer.row,
article footer.row,
main footer.row {
  background: transparent !important;
  color: inherit !important;
  border-top: 0 !important;
}
.article footer.row a,
article footer.row a,
main footer.row a { color: var(--infuse-orange); }
.article footer.row h1, .article footer.row h2,
.article footer.row h3, .article footer.row h4,
article footer.row h1, article footer.row h2,
article footer.row h3, article footer.row h4 {
  color: var(--infuse-heading) !important;
}

/* ── CTA band ─────────────────────────────────────────────── */
.cta {
  background-color: #FF6B1A;
  color: #ffffff;
  background-image: none !important;
}

/* ── Borders, dividers, hr ───────────────────────────────── */
hr, .divider, .border-bottom, .border-top, .border {
  border-color: var(--infuse-border) !important;
}

/* ── Notification banners ────────────────────────────────── */
.notification {
  background-color: #fff7f1 !important;
  color: var(--infuse-heading) !important;
  border-bottom: 1px solid var(--infuse-border);
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination a,
.pagination .page-link {
  background-color: transparent;
  border: 1px solid var(--infuse-border-strong);
  color: var(--infuse-heading);
  border-radius: 8px;
}
.pagination a:hover,
.pagination .page-link:hover,
.pagination .active a,
.pagination .active .page-link {
  background-color: var(--infuse-orange);
  border-color: var(--infuse-orange);
  color: #ffffff;
}

/* ── Tabs / pills ────────────────────────────────────────── */
.tabs a, .tabs .tab-link,
.nav-tabs a, .nav-tabs .nav-link {
  color: var(--infuse-text-muted);
  border-color: transparent;
}
.tabs a.active, .tabs .tab-link.active,
.nav-tabs a.active, .nav-tabs .nav-link.active {
  color: var(--infuse-orange);
  border-color: var(--infuse-orange);
}

/* ── Vote / helpful widget ─────────────────────────────────
   Markup is `<div class="button-group">` containing two
   `<button class="button button-outline-primary">` elements. Override
   the global orange-pill button rule with high-specificity selectors. */
.button-group .button.button-outline-primary,
.button-group button.button-outline-primary,
.button-group .button-outline-primary {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--infuse-border-strong) !important;
  color: var(--infuse-heading) !important;
  border-radius: 8px !important;
  padding: .4rem 1.1rem !important;
  min-width: 72px;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.button-group .button.button-outline-primary + .button.button-outline-primary,
.button-group button.button-outline-primary + button.button-outline-primary {
  margin-left: .5rem !important;
}
.button-group .button.button-outline-primary:hover,
.button-group button.button-outline-primary:hover,
.button-group .button.button-outline-primary:focus,
.button-group button.button-outline-primary:focus {
  background-color: transparent !important;
  border-color: var(--infuse-orange) !important;
  color: var(--infuse-orange) !important;
  box-shadow: none !important;
}
.button-group .button.button-outline-primary.is-active,
.button-group button.button-outline-primary.is-active,
.button-group .button.button-outline-primary[data-selected="true"],
.button-group button.button-outline-primary[data-selected="true"] {
  background-color: var(--infuse-orange) !important;
  border-color: var(--infuse-orange) !important;
  color: #fff !important;
}

/* ── Comments / community ────────────────────────────────── */
.comment,
.post {
  background-color: var(--infuse-surface);
  border: 1px solid var(--infuse-border);
  border-radius: 14px;
  color: var(--infuse-text);
}

/* Author / metadata text */
.meta, .meta-data, .timestamp, .post-meta {
  color: var(--infuse-text-muted);
}

/* ────────────────────────────────────────────────────────────
   HERO — richer background for "How can we help you?"
   Zane stacks an absolute `.bg-hero` (z-10) ON TOP of `.hero`, so
   any background painted on `.hero` is hidden. Paint the layered
   gradient directly on `.bg-hero`; clear `.bg-home`.
   ──────────────────────────────────────────────────────────── */
.hero { background-color: #ff6b1a !important; color: #fff !important; }
.hero .bg-hero,
.hero > .bg-hero {
  background-color: #ff6b1a !important;
  /* Bold orange-forward look. Saturated Infuse-orange base with
     bright highlight on top and a deeper red-orange shadow at bottom.
     Reads as ORANGE first, dark second — no brown undertones. */
  background-image:
    radial-gradient(ellipse 100% 80% at 50% 0%,   rgba(255,180,90,.85), transparent 60%),
    radial-gradient(ellipse 90% 100% at 50% 100%, rgba(180,40,0,.85),   transparent 70%),
    linear-gradient(180deg, #ff8a3d 0%, #ff6b1a 50%, #b8350a 100%) !important;
  background-repeat: no-repeat !important;
}
.hero .bg-home { background-image: none !important; }
/* Hero text — white in both modes (back to original Firecore look). */
.hero h1, .hero h2, .hero h3, .hero a { color: #fff !important; }
.hero p { color: rgba(255,255,255,.82) !important; }

/* The hero search field — fixed dark text on a fully-rounded white
   pill. Make the OUTER `.search` wrapper transparent so no dark
   square frame shows around the pill. */
.hero .search,
.hero .search-translucent {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50rem !important;
  overflow: visible !important;
}
.hero .search input,
.hero input[type="search"],
.hero input[type="text"] {
  background-color: #ffffff !important;
  color: #1a1715 !important;
  border: 0 !important;
  border-radius: 50rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}
.hero .search input::placeholder,
.hero input[type="search"]::placeholder,
.hero input[type="text"]::placeholder {
  color: rgba(26,23,21,.55) !important;
}

/* Header sits ON TOP of the hero — opaque so the gradient does not
   bleed through. The header is dark in BOTH modes (Firecore-style),
   so its own links and the slide-in mobile menu stay dark + light-text
   regardless of OS color-scheme. */
.header,
header.header,
.navbar,
.header .navbar {
  background-color: #161616 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Header / navbar TOP-LEVEL links are white (sit on dark navbar). */
.header > .navbar > a,
.header > .navbar > .navbar-brand,
.header .header-link,
.navbar > .nav-link {
  color: #fff !important;
}
.header > .navbar > a:hover,
.header .header-link:hover { color: var(--infuse-orange) !important; }

/* The mobile / slide-in menu drawer is a child of the header. Make
   it dark in BOTH light and dark mode so the white text is always
   readable (was invisible on light bg in light mode). */
.menu,
.nav.menu,
.menu-slide-in,
.menu-standard,
.menu-dropdown,
.menu-expanded {
  background-color: #161616 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
}
.menu a,
.menu .nav-link,
.menu-slide-in a,
.menu-slide-in .nav-link {
  color: #fff !important;
}
.menu a:hover,
.menu .nav-link:hover { color: var(--infuse-orange) !important; }

/* ────────────────────────────────────────────────────────────
   GLOBAL search-box pill — applies to EVERY search box on the
   site (hero, header slide-down, sidebar). Zane defaults to
   `border-radius: 4px` on `.search [type="search"]` — force pill. */
.search [type="search"],
.search input.form-field,
input[type="search"],
.search-translucent [type="search"] {
  border-radius: 50rem !important;
  outline: 0 !important;
}
.search [type="search"]:focus,
input[type="search"]:focus {
  border-radius: 50rem !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,.25) !important;
}
/* The wrapper around the search input may have its own square
   chrome (esp. `.search-translucent.blur`) — strip it. */
.search,
.search-translucent {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50rem !important;
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   DARK MODE — auto-flips with OS preference
   All component CSS already references the --infuse-* tokens, so
   re-defining them here propagates everywhere. A few extras for
   surfaces that hard-code colors. */
@media (prefers-color-scheme: dark) {
  :root {
    --infuse-bg:            #0f0d0c;
    --infuse-surface:       #1a1715;   /* opaque */
    --infuse-surface-2:     #221e1b;
    --infuse-heading:       #ffffff;
    --infuse-text:          rgba(255,255,255,.86);
    --infuse-text-muted:    rgba(255,255,255,.58);
    --infuse-border:        rgba(255,255,255,.10);
    --infuse-border-strong: rgba(255,255,255,.22);
  }
  /* Force the entire page chrome dark — Zane sets
     `html { background-color: $bg_color_boxed }` (white from manifest),
     and wraps pages in `.layout` + `#page-container`. Override all of
     them with high-priority selectors. */
  html,
  html body,
  body,
  body > .layout,
  .layout,
  .layout--boxed,
  main, [role="main"],
  #page-container,
  body > #page-container,
  .l-page, .l-content, .l-container, .l-section, .l-main,
  .help-center, .article-page, .home-page, .section-page, .category-page {
    background-color: var(--infuse-bg) !important;
    color: var(--infuse-text) !important;
  }
  /* Article-page left sidebar uses `lg:bg-gray-100` (responsive
     variant) which my `.bg-gray-100` rule did not match. */
  aside.sidebar,
  .lg\:bg-gray-100,
  [class*="bg-gray-100"] {
    background-color: var(--infuse-surface) !important;
  }
  /* (Card icons: no filter — Zane's PNG icons are already light
      and `filter: invert()` was flipping them to BLACK on dark cards.) */
  /* Generic cards / sections / blocks already use the tokens, but
     force any hard-coded white surfaces back to the dark surface. */
  .card, .content-block, .custom-block, .contact-block, .cta-block,
  .section, .box,
  .recent-articles, .related-articles, .promoted-articles,
  .promoted-articles ul li, .article-list, .activity-list {
    background-color: var(--infuse-surface) !important;
    border-color: var(--infuse-border) !important;
    color: var(--infuse-text) !important;
  }
  /* Text color */
  h1, h2, h3, h4, h5, h6 { color: var(--infuse-heading) !important; }
  p, li, dd, dt, label, span:not([class*="text-"]) { color: inherit; }

  /* Article body: light text on dark, but inline code + tables stay legible. */
  .article, .article-body, .article-content {
    color: var(--infuse-text) !important;
  }
  .article a, .article-body a, .article-content a {
    color: var(--infuse-orange) !important;
  }
  .article code, .article pre, .article-body code, .article-body pre {
    background-color: rgba(255,255,255,.06) !important;
    color: #ffd0b0 !important;
    border-color: rgba(255,255,255,.10) !important;
  }
  .article table, .article th, .article td {
    border-color: rgba(255,255,255,.12) !important;
  }
  .article th { background-color: rgba(255,255,255,.04) !important; }

  /* Form fields */
  input[type="text"], input[type="email"], input[type="url"],
  input[type="password"], input[type="number"], input[type="tel"],
  input[type="search"], textarea, select, .form-field {
    background-color: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: var(--infuse-heading) !important;
  }
  input::placeholder, textarea::placeholder { color: rgba(255,255,255,.45) !important; }

  /* Sidebar TOC links */
  #sidebar-navigation a,
  #sidebar-navigation li > a,
  #sidebar-navigation li > div > a { color: var(--infuse-text) !important; }
  #sidebar-navigation a:hover { background-color: rgba(255,107,26,.15) !important; }
  #sidebar-navigation .text-primary,
  #sidebar-navigation a.text-primary,
  #sidebar-navigation .bg-gray-100 {
    background-color: rgba(255,107,26,.18) !important;
  }

  /* Vote buttons */
  .button-group .button.button-outline-primary,
  .button-group button.button-outline-primary {
    color: var(--infuse-heading) !important;
    border-color: rgba(255,255,255,.22) !important;
  }

  /* HR + dividers */
  hr, .border, .border-top, .border-bottom { border-color: rgba(255,255,255,.10) !important; }

  /* Header / nav surfaces — keep them dark */
  .header, .navbar, .top-bar, .site-header {
    background-color: rgba(0,0,0,.55) !important;
    border-color: rgba(255,255,255,.08) !important;
  }

  /* Tailwind utility classes used inline that hard-code light bgs */
  .bg-white, .bg-gray-50, .bg-gray-100 {
    background-color: var(--infuse-surface) !important;
  }

  /* Account / search / user dropdowns hard-code `bg-white` — flip them dark. */
  .user-menu .z-dropdown,
  .z-dropdown {
    background-color: #161616 !important;
    color: var(--infuse-text) !important;
    border-color: rgba(255,255,255,.10) !important;
  }
  .user-menu .z-dropdown a,
  .z-dropdown a { color: var(--infuse-text) !important; }
  .z-dropdown a:hover { color: var(--infuse-orange) !important; }

  /* Re-assert hero search styling INSIDE the dark-mode block so the
     generic `.form-field` dark rule above does not beat it. */
  .hero .search,
  .hero .search-translucent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50rem !important;
  }
  .hero .search input,
  .hero input[type="search"],
  .hero input[type="text"],
  .hero input.form-field {
    background-color: #ffffff !important;
    color: #1a1715 !important;
    border: 0 !important;
    border-radius: 50rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
  }
  .hero .search input::placeholder,
  .hero input.form-field::placeholder {
    color: rgba(26,23,21,.55) !important;
  }
  .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900 {
    color: var(--infuse-text) !important;
  }
  .border-gray-100, .border-gray-200, .border-gray-300 {
    border-color: rgba(255,255,255,.10) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   FINAL DARK-MODE OVERRIDES — placed last so they win every
   specificity tie. Zane's `html { background-color: $bg_color_boxed }`
   (line 220 of style.css) is the source of the white page bg.
   ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html, html.help-center-html, html[lang],
  body, body.theme-dark, body[class],
  .layout, .layout--boxed, body > .layout,
  #page-container, body #page-container, .layout #page-container {
    background-color: #0f0d0c !important;
    background-image: none !important;
  }
  .help-center, .article-page, .home-page,
  .section-page, .category-page, .community-page {
    background-color: #0f0d0c !important;
  }
}

/* ────────────────────────────────────────────────────────────
   FINAL FIXES (page bg sources, card icons, search wrappers)
   ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* 1) The white page bg comes from THESE specific elements that
        Zane fills from the manifest's color settings — flip them. */
  .svg-shape,
  .hero .svg-shape,
  .footer .svg-shape,
  footer .svg-shape { fill: #0f0d0c !important; }

  .bg-custom-blocks,
  .bg-content-blocks,
  .custom-blocks,
  .content-blocks,
  #custom-blocks,
  #content-blocks { background-color: #0f0d0c !important; }

  /* (Top-3 card icons: no filter — Zane's PNG icons are already
      light and inverting them turned them BLACK on dark cards.) */

  /* 3) Right-arrow chevrons in the category / section list use
        `currentColor` fills/strokes — make sure they pick up the
        light text color (and aren't dimmed by Tailwind text-gray
        utilities). */
  .card svg,
  .card a svg,
  .article-list-link svg,
  .section-tree svg,
  .category-tree svg,
  a.card svg path,
  a.card svg { fill: currentColor !important; color: #fff !important; stroke: currentColor !important; }
}

/* 4) Search wrappers — make every layer round + transparent so no
      square chrome shows behind the white pill. Applies in BOTH
      modes (dark mode previously left the form wrapper square). */
.search,
.search > form,
.search-translucent,
.search-translucent > form,
form.search-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 50rem !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

/* ────────────────────────────────────────────────────────────
   ROUND 5 — dark-mode hero search + broader category arrows
   ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Darken the hero search pill in dark mode (was hard-white before).
     Use a deep surface with light text so it reads as part of the
     dark page chrome under the orange hero. */
  .hero .search input,
  .hero input[type="search"],
  .hero input[type="text"],
  .hero input.form-field {
    background-color: #1a1715 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
  }
  .hero .search input::placeholder,
  .hero input.form-field::placeholder {
    color: rgba(255,255,255,.55) !important;
  }
  .hero .search-icon,
  .hero .search svg { color: rgba(255,255,255,.7) !important; fill: currentColor !important; }

  /* Broader Tailwind gray text — Zane's category / article-list
     templates use text-gray-400/500 on the chevron arrows. Lift
     them all so chevrons read white-ish on dark cards. */
  .text-gray-400, .text-gray-500 { color: rgba(255,255,255,.75) !important; }

  /* Force every SVG inside the home content blocks to inherit the
     light text color (covers JS-rendered `article-list` chevrons). */
  .bg-content-blocks svg,
  .bg-content-blocks a svg,
  .bg-content-blocks a svg *,
  .content-blocks svg,
  .content-blocks a svg,
  .content-blocks a svg * {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* === Mobile menu close (X) — light color in dark mode === */
@media (prefers-color-scheme: dark) {
  .navbar-toggle,
  .text-header .navbar-toggle,
  .header .navbar-toggle {
    color: #fff !important;
  }
  .navbar-toggle span,
  .navbar-toggle span:before,
  .navbar-toggle span:after,
  .text-header .navbar-toggle span,
  .text-header .navbar-toggle span:before,
  .text-header .navbar-toggle span:after {
    background-color: #fff !important;
  }
}

/* === Custom-block FontAwesome card icons (replace admin PNGs) === */
.custom-blocks .custom-block-fa {
  display: block;
  font-size: 2.75rem;
  line-height: 1;
  margin-top: 1rem;
  color: #ff6b1a;
  transition: color .2s ease;
}
.custom-blocks .card:hover .custom-block-fa {
  color: #ff8a3d;
}
@media (prefers-color-scheme: dark) {
  .custom-blocks .custom-block-fa { color: #ff8a3d; }
  .custom-blocks .card:hover .custom-block-fa { color: #ffb27a; }
}
/* hide the admin-uploaded PNG so only the FA icon shows */
.custom-blocks .card img[data-inline-svg],
.custom-blocks .card .card-body > img:first-child {
  display: none !important;
}

/* === Hide middle bar when mobile menu is open so it forms a clean X === */
.navbar-toggle[aria-expanded="true"] span {
  background-color: transparent !important;
}
@media (prefers-color-scheme: dark) {
  .navbar-toggle[aria-expanded="true"] span {
    background-color: transparent !important;
  }
}

/* === Force X bars white in BOTH open & closed states (light + dark) === */
.navbar-toggle[aria-expanded="true"],
.text-header .navbar-toggle,
.text-header .navbar-toggle[aria-expanded="true"] {
  color: #fff !important;
}
.navbar-toggle[aria-expanded="true"] span:before,
.navbar-toggle[aria-expanded="true"] span:after,
.text-header .navbar-toggle span:before,
.text-header .navbar-toggle span:after,
.text-header .navbar-toggle[aria-expanded="true"] span:before,
.text-header .navbar-toggle[aria-expanded="true"] span:after {
  background-color: #fff !important;
}
/* keep the middle bar invisible when expanded */
.navbar-toggle[aria-expanded="true"] span,
.text-header .navbar-toggle[aria-expanded="true"] span {
  background-color: transparent !important;
}

/* === Footer language dropdown — dark text on white panel in light mode === */
body > footer a.dropdown-item,
body > footer a.dropdown-item:link,
body > footer a.dropdown-item:visited,
footer.footer a.dropdown-item,
footer.footer a.dropdown-item:link,
footer.footer a.dropdown-item:visited,
.l-footer a.dropdown-item,
.page-footer a.dropdown-item,
.site-footer a.dropdown-item {
  color: #222 !important;
}
body > footer a.dropdown-item:hover,
body > footer a.dropdown-item:focus,
footer.footer a.dropdown-item:hover,
footer.footer a.dropdown-item:focus,
.l-footer a.dropdown-item:hover,
.page-footer a.dropdown-item:hover,
.site-footer a.dropdown-item:hover {
  color: #ff6b1a !important;
  background-color: #fff7f1 !important;
}

@media (prefers-color-scheme: dark) {
  /* dark mode: dropdown panel is dark, so items stay white */
  body > footer a.dropdown-item,
  body > footer a.dropdown-item:link,
  body > footer a.dropdown-item:visited,
  footer.footer a.dropdown-item,
  footer.footer a.dropdown-item:link,
  footer.footer a.dropdown-item:visited,
  .l-footer a.dropdown-item,
  .page-footer a.dropdown-item,
  .site-footer a.dropdown-item {
    color: #fff !important;
  }
  body > footer a.dropdown-item:hover,
  body > footer a.dropdown-item:focus,
  footer.footer a.dropdown-item:hover,
  footer.footer a.dropdown-item:focus,
  .l-footer a.dropdown-item:hover,
  .page-footer a.dropdown-item:hover,
  .site-footer a.dropdown-item:hover {
    color: #ff8a3d !important;
    background-color: rgba(255,107,26,0.12) !important;
  }
}

/* === Remove white gap above the CTA banner (Zane wraps CTA in <footer class="footer mt-6">) === */
body > footer.footer { margin-top: 0 !important; }
body > footer.footer .cta { margin-top: 0 !important; }

/* === <main> — no background in either mode === */
main { background-color: transparent !important; }

/* === Footer nav-links — dark in light mode, light in dark mode === */
body > footer .nav-link,
body > footer .nav-link:link,
body > footer .nav-link:visited,
footer.footer .nav-link,
footer.footer .nav-link:link,
footer.footer .nav-link:visited,
.l-footer .nav-link,
.page-footer .nav-link,
.site-footer .nav-link {
  color: #222 !important;
}
body > footer .nav-link:hover,
body > footer .nav-link:focus,
footer.footer .nav-link:hover,
footer.footer .nav-link:focus,
.l-footer .nav-link:hover,
.page-footer .nav-link:hover,
.site-footer .nav-link:hover {
  color: var(--infuse-orange) !important;
}
@media (prefers-color-scheme: dark) {
  body > footer .nav-link,
  body > footer .nav-link:link,
  body > footer .nav-link:visited,
  footer.footer .nav-link,
  footer.footer .nav-link:link,
  footer.footer .nav-link:visited,
  .l-footer .nav-link,
  .page-footer .nav-link,
  .site-footer .nav-link {
    color: var(--infuse-footer-text) !important;
  }
}

/* === Don't recolor primary CTA button text in the footer === */
body > footer a.button,
body > footer a.button-primary,
footer.footer a.button,
footer.footer a.button-primary {
  color: #ffffff !important;
}
body > footer a.button:hover,
body > footer a.button-primary:hover,
footer.footer a.button:hover,
footer.footer a.button-primary:hover {
  color: #ffffff !important;
}

/* === Global dropdown items — dark text on white panel (header user menu, etc.) === */
.dropdown-item { color: #222 !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  color: #ff6b1a !important;
  background-color: #fff7f1 !important;
}
@media (prefers-color-scheme: dark) {
  .dropdown-item { color: #fff !important; }
  .dropdown-item:hover,
  .dropdown-item:focus {
    color: #ff8a3d !important;
    background-color: rgba(255,107,26,0.12) !important;
  }
}

/* === User-menu dropdown items — beat header `.text-header a {color:white}` cascade === */
.user-menu .z-dropdown .dropdown-item,
.user-menu .z-dropdown a.dropdown-item,
.user-menu .z-dropdown a {
  color: #222 !important;
}
.user-menu .z-dropdown .dropdown-item:hover,
.user-menu .z-dropdown a.dropdown-item:hover,
.user-menu .z-dropdown a:hover {
  color: #ff6b1a !important;
  background-color: #fff7f1 !important;
}
@media (prefers-color-scheme: dark) {
  .user-menu .z-dropdown .dropdown-item,
  .user-menu .z-dropdown a.dropdown-item,
  .user-menu .z-dropdown a {
    color: #fff !important;
  }
  .user-menu .z-dropdown .dropdown-item:hover,
  .user-menu .z-dropdown a.dropdown-item:hover,
  .user-menu .z-dropdown a:hover {
    color: #ff8a3d !important;
    background-color: rgba(255,107,26,0.12) !important;
  }
}

/* === CTA banner — white in light mode, dark in dark mode (no gradient) === */
.cta.relative.mt-6,
.cta {
  background-image: none !important;
  background-color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  .cta.relative.mt-6,
  .cta {
    background-image: none !important;
    background-color: var(--infuse-footer-bg) !important;
  }
}

/* === Remove text-decoration hover on heading links === */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus,
a h1, a h2, a h3, a h4, a h5, a h6,
a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6,
a:focus h1, a:focus h2, a:focus h3, a:focus h4, a:focus h5, a:focus h6 {
  text-decoration: none !important;
}

/* === CTA banner — heading + body text readable in both modes === */
.cta h1, .cta h2, .cta h3, .cta h4, .cta h5, .cta h6 {
  color: #111 !important;
}
.cta p, .cta { color: #222 !important; }
@media (prefers-color-scheme: dark) {
  .cta h1, .cta h2, .cta h3, .cta h4, .cta h5, .cta h6 {
    color: #ffffff !important;
  }
  .cta p, .cta { color: rgba(255,255,255,.85) !important; }
}

/* === CTA button — orange bg + white text in BOTH modes === */
.cta a.button,
.cta a.button-primary,
.cta a.button.button-primary {
  background-color: var(--infuse-orange) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--infuse-orange) !important;
}
.cta a.button:hover,
.cta a.button-primary:hover,
.cta a.button.button-primary:hover,
.cta a.button:focus,
.cta a.button-primary:focus {
  background-color: #e85d0f !important;
  border-color: #e85d0f !important;
  color: #ffffff !important;
}