/* ── Site header — the ONE stylesheet for it (2026-10-04) ──
   Every page on deftbrain.com shows the same header, styled only here:
     • React pages (home, toolbox, organizations, every tool) render it with
       src/components/SiteHeader.js; public/index.html links this file.
     • Static pages (guides, guide hubs, tool category pages, About, Privacy,
       Terms) get the same markup from getSiteHeaderHTML() in
       src/seo/chrome.js; public/guides/guide.css @imports this file.
   Both read their links from src/data/siteNav.json. Change the header here,
   in those two renderers' shared markup, and nowhere else.
   Colors follow html[data-theme], which both kinds of page set the same way.
   The menu links are blue in both modes (owner, 2026-10-04): navy #1e3a58 in
   light, the brand's light blue #85afd6 in dark, never white. */

/* The header is pinned (sticky), so a jump to a section — the Categories
   link, the guides page's category chips, any #anchor or scrollIntoView —
   would land under it. Stop that far below it instead: --site-header-h is the
   header's measured height, kept current by SiteHeader.js and by the script
   chrome.js writes after the static header (2026-10-05). */
html { scroll-padding-top: calc(var(--site-header-h, 96px) + 12px); }

.site-header { --sh-ink: #1e3a58; --sh-line: #e8e1d5; --sh-bg: #faf8f5; --sh-pop: #fffdf9; --sh-hover: #f0ebf7;
  --sh-deft: #165b9a; --sh-brain: #c8872e;
  position: sticky; top: 0; z-index: 20; background: var(--sh-bg); border-bottom: 1px solid var(--sh-line);
  font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
:root[data-theme="dark"] .site-header { --sh-ink: #85afd6; --sh-line: #3f3f46; --sh-bg: #18181b; --sh-pop: #27272a; --sh-hover: #3f3f46;
  --sh-deft: #85afd6; --sh-brain: #d9a04e; }

/* Nothing in the header is underlined at rest, in any browser. Safari can
   draw an <a>'s underline under its inline children even when the <a> says
   none, so the children are told too. */
.site-header a, .site-header a * { text-decoration: none !important; }

.site-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 640px) { .site-header-inner { padding-inline: 24px; } }

/* Brand: the small mark with its definition, the same size on every page.
   Same font as the rest of the header (the stack on .site-header): the
   self-hosted DM Sans the static pages load stops at weight 500, so an 800
   wordmark rendered lighter there than on the React pages. */
.site-header-brand { flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: start; }
.sh-brand-img { height: 56px; width: auto; display: block; object-fit: contain; flex-shrink: 0; }
@media (min-width: 640px) { .sh-brand-img { height: 64px; } }
.sh-brand-word { display: flex; flex-direction: column; justify-content: center; }
.sh-brand-text { font-family: inherit; font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: -.025em; color: var(--sh-deft); }
@media (min-width: 640px) { .sh-brand-text { font-size: 24px; } }
/* The home page's larger mark (SiteHeader `large`): the home page introduces
   the brand, so it carries it bigger than every page after it. */
.site-header--large .sh-brand-img { height: 80px; }
.site-header--large .sh-brand-text { font-size: 24px; }
@media (min-width: 640px) {
  .site-header--large .sh-brand-img { height: 96px; }
  .site-header--large .sh-brand-text { font-size: 30px; }
}
.sh-brand-text span { color: var(--sh-brain); }
.sh-brand-tag { display: block; margin: 6px 0 0; max-width: 36ch; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.375; letter-spacing: .02em; color: var(--sh-deft); }
.sh-brand-tag b { font-weight: 700; }
.sh-brand-tag i { font-style: italic; }

.site-header-end { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-inline-start: auto; }
.site-header-nav { display: none; align-items: center; gap: 20px; font-size: 12px; font-weight: 600; color: var(--sh-ink); }
.site-header-nav a, .site-header-nav button { color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-underline-offset: 4px; }
.site-header-nav a:hover, .site-header-nav button:hover { text-decoration: underline !important; }

.site-header-controls { display: flex; align-items: center; gap: 8px; }
.site-header .site-header-theme { appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; min-height: 32px; min-width: 32px; width: auto; line-height: 1; padding: 0 8px; border-radius: 8px; border: 1px solid #cbd5e1; background: #ffffff; font-size: 14px; cursor: pointer; }
.site-header .site-header-theme:hover { border-color: #94a3b8; }
.site-header .site-header-theme::before { content: "\1F319"; }              /* 🌙 in light mode */
:root[data-theme="dark"] .site-header .site-header-theme { background: #27272a; border-color: #52525b; }
:root[data-theme="dark"] .site-header .site-header-theme:hover { border-color: #a1a1aa; }
:root[data-theme="dark"] .site-header .site-header-theme::before { content: "\2600\FE0F"; }  /* ☀️ */

.site-header-menu { position: relative; color: var(--sh-ink); }
.site-header-menu summary { cursor: pointer; list-style: none; min-width: 44px; min-height: 44px; display: grid; place-items: center; font-size: 25px; }
.site-header-menu summary::-webkit-details-marker { display: none; }
.site-header-menu nav { position: absolute; inset-inline-end: 0; top: 100%; z-index: 40; min-width: 180px; background: var(--sh-pop); border: 1px solid var(--sh-line); border-radius: 10px; box-shadow: 0 8px 30px #142a4320; padding: 6px; }
.site-header-menu nav > * { display: block; width: 100%; text-align: start; padding: 12px; font: inherit; font-size: 16px; color: var(--sh-ink); background: none; border: 0; cursor: pointer; }
.site-header-menu nav > *:hover { background: var(--sh-hover); border-radius: 6px; }

.site-header :is(a, summary, button):focus-visible { outline: 3px solid #165b9a; outline-offset: 4px; }

@media (min-width: 768px) {
  .site-header-nav { display: flex; }
  .site-header-menu { display: none; }
}