/* Logo: brand accent color in light mode, white in dark mode (Quark2 default) */
:root[data-theme="light"] .navbar-brand svg,
:root[data-theme="light"] .navbar-brand svg * {
  fill: var(--q2-accent);
}

/* Logo: larger mark (Quark2 default is 28px), matches previous theme's sizing */
.navbar-brand img,
.navbar-brand svg {
  height: 42px;
}

/* Header: +10px more breathing room in every state Quark2 sets a header
   height for (Quark2 defaults: 72px base, 60px scrolled/animated, 64px
   mobile <=860px).
   Must match BOTH :root[data-theme="light"] AND :root[data-theme="dark"] in
   specificity. Quark2 declares --q2-header-height once, in a compound rule
   (:root, :root[data-theme="light"] { ... }) — a light-only override here
   fixes light mode but does nothing in dark mode, where data-theme="light"
   never matches and Quark2's bare :root value (72px) wins instead. (Same
   root cause as the font-family fix below needing both theme selectors.) */
:root[data-theme="light"],
:root[data-theme="dark"] {
  --q2-header-height: 82px;
}
.header-animated.scrolled #header .navbar {
  min-height: 70px;
}
@media (max-width: 860px) {
  #header .navbar {
    min-height: 74px;
  }
}

/* Footer: tighter vertical padding (Quark2 default is 2.5rem) */
#footer {
  padding-block: 1.5rem;
}

/* Fonts: Source Serif 4 (body) + Source Sans 3 (headings/nav/UI), matching
   the previous theme's typography. Quark2's Inter/Cal Sans font-face
   declarations are shadowed entirely by our own theme://css/fonts.css
   (same filename in quark2-rb takes priority over quark2's).
   Must match BOTH :root[data-theme="light"] AND :root[data-theme="dark"] in
   specificity — Quark2 declares these vars separately per theme mode (not a
   shared compound), so a fix scoped to light alone silently leaves dark mode
   on Quark2's own Inter/Cal Sans (caught by inspecting dark mode directly).
   Note: Quark2 names its body-text variable "--pico-font-family-sans-serif"
   after its own default face (Inter); body text here is set to Source Serif 4
   despite the variable's name — the name is just what Quark2 called it. */
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-font-family-sans-serif: 'Source Serif 4', Georgia, serif;
  --pico-font-family-display: 'Source Sans 3', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
}

/* Fonts: nav and footer stay on the UI/display font rather than inheriting
   body's serif. Quark2's mobile overlay nav (.overlay-menu a) already uses
   --pico-font-family-display directly, so it needs no override. Desktop nav
   (.dropmenu a) and #footer don't set their own font-family — desktop nav
   actually hardcodes --pico-font-family-sans-serif directly on the link
   (now Source Serif 4), which inheritance from a wrapper can't beat, so it
   needs a same-specificity override on the link itself.
   Matches the previous theme, which explicitly exempted nav/footer too. */
.dropmenu a,
#footer {
  font-family: var(--pico-font-family-display);
}

/* Desktop nav: match body text size exactly (top-level AND dropdown/submenu
   items), rather than sizing down (both old theme and Quark2's own default
   shrink nav below body) — with only a handful of nav items and weight 600
   already distinguishing top-level links from body's 400, size doesn't need
   to also carry the hierarchy.
   Sized via 1rem (= --pico-font-size, body's single source of truth set
   below) rather than a fixed px, so nav and body size stay linked if body
   size ever changes again — one value to edit, not several.
   .dropmenu li > ul a (submenu items, theme.css:854) is a MORE SPECIFIC
   selector than plain .dropmenu a and needs its own rule, or it silently
   keeps Quark2's 0.9375rem regardless of what .dropmenu a says. */
.dropmenu a {
  font-size: 1rem;
  font-weight: 600;
}
.dropmenu li > ul a {
  font-size: 1rem;
}

/* Body text: pin size/color to match the previous theme instead of Blades'
   fluid viewport-based scaling (100%-131.25% across breakpoints).
   --pico-font-size is the rem reference point Blades' whole type scale is
   built on (headings use fixed rem multiples of it), so pinning it here
   keeps proportions consistent rather than just overriding body directly.
   --q2-text must match Quark2's :root[data-theme="light"] selector in
   specificity — same reasoning as the header-height override above. */
:root,
:root[data-theme="light"] {
  --pico-font-size: 18px;
  --pico-line-height: 1.6;
}
:root[data-theme="light"] {
  --q2-text: #50596c;
}

/* Headings: fixed ratio scale off body size (1rem = --pico-font-size, 18px),
   instead of Quark2's own clamp()-based h1/h2 sizing, which grows with
   viewport width (h1 up to 3.75rem/67.5px on wide windows) — that's what
   was making headings feel oversized on large screens.
   rem-based (not px) so the whole scale stays proportional if body size
   (--pico-font-size) ever changes again.

   Size, weight, and color are tuned to all agree on the same hierarchy
   direction, rather than pulling against each other. Quark2's original
   pairing — light/airy h1 (weight 400) vs. bold/black h2 (weight 700) —
   meant a bold black "Contact" section head could visually out-weigh a
   light gray "Privacy" page title even though h1 was the larger element
   on paper (confirmed on the privacy page's real content). Size alone
   isn't a reliable hierarchy signal once weight and contrast disagree
   with it, so h1 now commits to being the heaviest AND largest element,
   and h2 steps back on both to leave room for it — matching the classic
   pattern where each level is a confident, unambiguous step down from
   the one above, not a wash where multiple signals compete. */
h1 {
  font-size: 2.5rem; /* 45px */
  font-weight: 600;
  color: var(--q2-text-strong);
}
h2 {
  font-size: 1.75rem; /* ~31.5px — clearer gap below h1 */
  font-weight: 600;
}
h2::before {
  /* Remove Quark2's decorative accent bar above standard h2s */
  display: none;
}
h3 {
  font-size: 1.6rem; /* ~29px */
}
h4 {
  font-size: 1.3rem; /* ~23px */
}
h5 {
  font-size: 1rem; /* 18px, same as body */
}
h6 {
  font-size: 0.9rem; /* ~16px */
}

/* Subtitle h2 (directly after h1 — Quark2's own h1 + h2 selector, gives it
   accent color + drops the accent bar): smaller and lighter than a
   standard h2 so it reads as secondary to h1, not a second competing
   headline. */
h1 + h2 {
  font-size: 1.3rem; /* ~23px, matches h4 */
  font-weight: 500;
}

/* Mobile overlay nav: equalize top-level and submenu link size + font.
   Quark2 defaults: top-level 1.5rem (~27px) Source Sans 3, submenu 1rem
   (~18px) Source Serif 4 (the body font, via --pico-font-family-sans-serif)
   — felt like too wide a size gap, and the font switch made submenu items
   ("Now" under "About") look mismatched rather than just smaller.
   Both now 1.25rem (~22.5px), Source Sans 3, splitting the difference. */
.overlay .overlay-menu a {
  font-size: 1.25rem;
}
.overlay .overlay-menu ul ul a {
  font-size: 1.25rem;
  font-family: var(--pico-font-family-display);
}

/* Active nav pill: accent color instead of Quark2's default black/dark pill */
.dropmenu a.active {
  background: var(--q2-accent);
  color: var(--q2-accent-contrast);
}
.dropmenu a.active:hover {
  background: var(--q2-accent);
  color: var(--q2-accent-contrast);
}

/* Follow/Contact forms (#mc_embed_signup, shared markup/ID convention for
   both the real Mailchimp embed and the Contact page's Make.com-backed
   form): smaller overall text and bold labels, matching the previous
   theme. Required-field asterisks additionally get the accent color here
   (not present in the previous theme, added per request) so they read as
   a clear visual cue, not just plain text. */
#mc_embed_signup {
  font-size: 0.875rem; /* 14px */
  font-family: var(--pico-font-family-display);
}
#mc_embed_signup label {
  font-weight: 700;
}
#mc_embed_signup .asterisk {
  color: var(--q2-accent);
}
#mc_embed_signup .indicates-required {
  text-align: right;
  margin-bottom: 1.25rem;
}
#mc_embed_signup button[type="submit"],
#mc_embed_signup input[type="submit"] {
  margin-top: 2rem;
  /* Blades sizes form elements (inputs, selects, textareas, AND submit
     buttons) all width:100% as one grouped rule — correct for the fields,
     but sweeps the button in too, so it needs an explicit override back to
     content-sized. */
  width: auto;
}
#mc_embed_signup .clear {
  /* The submit button's wrapper (button is inline-block by default, so
     centering it is the parent's job, not the button's own). */
  text-align: center;
}

/* Text selection: light accent-color wash instead of Quark2's default solid
   --q2-text background (full-opacity dark slate, high-contrast by design).
   Chrome/Safari extend a selected BLOCK element's (h1/h2/p) highlight to the
   full width of its containing box, not just to the last character — this
   is standard, spec-allowed browser behavior with no non-invasive CSS fix
   (the only real fix, floating every block element with an explicit width,
   would break normal document flow). Low opacity is the practical lever:
   it keeps that full-width highlight from reading as an obvious hard block,
   closer to how the previous theme's un-customized browser-default
   selection (which exhibits the same underlying behavior, just very
   faintly) looked in practice. */
::selection {
  background: color-mix(in oklab, var(--q2-accent) 7%, transparent);
  color: inherit;
}