/* ══════════════════════════════════════════════════════════════════
   BBA shared site header — a hardcoded copy of the homepage HUD shell.
   Loaded by 109 pages (59 certificates, 26 blog posts, 8 comparisons,
   the satellites and the storefront). store_final.html keeps its OWN
   chrome and only mirrors this file in comments.

   SELF-CONTAINED BY LAW. This sheet is pulled into two token families
   that disagree (store: --f-mono/--f-text; editorial: --mono/--sans),
   so it may never reference a host page's custom property — an
   unresolvable var() invalidates its WHOLE declaration at computed-value
   time and the rule vanishes silently. Everything it needs it defines
   itself under the --bba-* prefix, which no page-level scale uses.
═══════════════════════════════════════════════════════════════════ */

:root{
  --bba-navy:#102A4A;
  --bba-ink:#14181C;
  --bba-teal:#0C6E78;
  --bba-teal-bright:#2BB9C9;
  /* Canon brand red — the logo's own red. Reserved for the mark and the
     promo tick; never repurposed as a UI state colour. */
  --bba-red:#CD4642;
  --bba-paper:#F2F1EE;
  --bba-surface:#FCFBF8;
  --bba-hair:rgba(20,26,32,.10);
  --bba-hair-soft:rgba(20,26,32,.06);
  --bba-hair-firm:rgba(20,26,32,.18);
  --bba-ring:rgba(12,110,120,.72);
  --bba-mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  --bba-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── sitewide primitives ──────────────────────────────────────────────
   These ride the shared sheet to every page, which is the point: they are
   the settings a funded store sets once, globally, and nobody notices. */

/* Reserve the scrollbar track at all times. Without it a page that grows
   past one screen (a COA that renders its table, a blog post after fonts
   swap in) snaps ~15px narrower mid-load and every centred rail jumps. */
html{
  scrollbar-gutter:stable;
  /* Native controls — checkbox, radio, progress, the text caret — paint
     Chrome-blue by default, the one colour this palette does not contain.
     Literal fallback first so a UA that cannot resolve the var still lands
     on brand rather than on blue. */
  accent-color:#0C6E78;
  accent-color:var(--bba-teal,#0C6E78);
}
/* Firefox: the only two knobs it offers, matched to the paper surface. */
html{scrollbar-width:thin;scrollbar-color:rgba(16,42,74,.30) rgba(20,26,32,.05)}
/* WebKit/Blink: a quiet paper-and-ink bar instead of the OS default. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(20,26,32,.05)}
::-webkit-scrollbar-thumb{
  background:rgba(16,42,74,.28);border-radius:999px;
  border:3px solid transparent;background-clip:content-box
}
::-webkit-scrollbar-thumb:hover{background:rgba(16,42,74,.44);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* SKIP LINK — off-screen until focused, so a keyboard or screen-reader user can jump
   the nav instead of tabbing the whole header on every page. Mirrors the homepage's
   own .skip-link rule (store_final.html) so both behave identically. */
.bba-skip{position:absolute;left:-9999px;top:0;z-index:1001;background:#102A4A;color:#fff;padding:12px 16px;border-radius:0 0 6px 0;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.bba-skip:focus{left:0}

/* An in-page jump lands its target UNDERNEATH a sticky bar unless the target reserves room for
   it. The header here is 72px, and #main-content carried no scroll-margin — so "Skip to content",
   the one affordance a keyboard or screen-reader user relies on, scrolled the heading to exactly
   where the header covers it and appeared to do nothing at all. :target covers every other
   in-page anchor on these pages (e.g. #buy on the bacteriostatic-water page) for the same reason. */
#main-content,:target{scroll-margin-top:84px}

/* PROMO — matches homepage .promo-bar: filled deep lab teal + cream type.
   Hardcoded (not :root) so product/status/etc. match store regardless of host tokens. */
.bba-promo{background:#0C6E78;color:#F7F5F1;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 16px;border-bottom:1px solid rgba(4,20,26,.35);line-height:1.4}
.bba-promo a{color:#FFFFFF;text-decoration:none;font-weight:600;white-space:nowrap;text-underline-offset:3px}
.bba-promo a:hover{text-decoration:underline}
.bba-promo a:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px;border-radius:2px}
.bba-promo .bba-dot{color:#CD4642}
@media(max-width:520px){.bba-promo{font-size:11px;padding:8px 12px;letter-spacing:.08em}}

/* HEADER BAR — homepage .site-header (store_final.html:4434): glass white,
   hairline base, scrolled state gets the fallback tint + backdrop blur. */
.bba-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.55);height:72px;border-bottom:1px solid rgba(20,26,32,.10);transition:background .32s cubic-bezier(.2,.75,.3,1),-webkit-backdrop-filter .32s cubic-bezier(.2,.75,.3,1),backdrop-filter .32s cubic-bezier(.2,.75,.3,1),border-color .32s cubic-bezier(.2,.75,.3,1),box-shadow .32s cubic-bezier(.2,.75,.3,1)}
/* Scrolled: ONE tight hairline plus one short shadow that reads as a sheet
   lifting a millimetre off the page. The previous state was blur-only, so the
   body copy underneath smeared into the bar with no edge to stop it — and the
   fix for that is an edge, not a bigger glow. */
.bba-header.bba-scrolled{
  background:rgba(252,251,248,.92);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
  border-bottom-color:rgba(20,26,32,.20);
  box-shadow:0 6px 14px -12px rgba(16,42,74,.60)
}
.bba-header-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:40px}
.bba-logo{flex-shrink:0;text-decoration:none;display:flex;align-items:center;min-height:44px;border-radius:3px}
/* The lockup is top-heavy — cap-height "BBA" over a small descender-bearing
   sub-line — so mathematical centring sits it a hair low against the bar's
   optical centre. One pixel is the whole correction. */
.bba-logo img{display:block;width:104px;height:auto;position:relative;top:-1px}
/* The logo was the one header control with no focus ring: a keyboard user
   tabbing from the skip link landed on "home" with nothing drawn. */
.bba-logo:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:3px}

/* NAV — homepage .header-nav a (store_final.html:4436): mono 11px .12em
   uppercase, graphite ink, hover to full-ink; teal underline on hover. */
.bba-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.bba-nav>a{position:relative;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,24,28,.80);text-decoration:none;white-space:nowrap;padding-bottom:3px;transition:color .12s ease}
.bba-nav>a:hover{color:#14181C}
.bba-nav>a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#0C6E78;transition:width .25s ease}
.bba-nav>a:hover::after{width:100%}
.bba-nav>a:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:3px;border-radius:2px}
/* Current-section state. Nothing sets aria-current today; this is the styling
   contract so that whoever wires it gets the right mark instead of inventing
   one — a held teal rule and full ink, the hover state made permanent. */
.bba-nav>a[aria-current]{color:#14181C}
.bba-nav>a[aria-current]::after{width:100%;background:#0C6E78}

/* ACCOUNT — a quiet first-party account link next to the cart. */
/* margin-left:auto was set on BOTH .bba-nav and .bba-account, so the header's
   free space was split between two auto margins and the gap before "Account"
   drifted with the viewport — arbitrary at every width and never equal to the
   nav's own rhythm. One auto margin (on .bba-nav) is what pushes the group
   right; Account now sits on the header rail's gap like any other item, with a
   hairline to mark where navigation ends and account/cart begin. */
.bba-account{position:relative;color:rgba(20,24,28,.80);text-decoration:none;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-bottom:3px;display:inline-flex;align-items:center;min-height:44px}
.bba-account::before{content:'';position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:rgba(20,26,32,.18)}
.bba-account:hover{color:#14181C}
/* The link box is 44px for the touch target, so the rule cannot hang off the
   box bottom the way the nav's does — 9px puts it 5px under the text line box,
   which is exactly where .bba-nav>a's `bottom:-2px` lands its own. */
.bba-account::after{content:'';position:absolute;bottom:9px;left:0;width:0;height:1px;background:#0C6E78;transition:width .25s ease}
.bba-account:hover::after{width:100%}
.bba-account:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:3px;border-radius:2px}

/* CART — outlined teal pill on the light bar; the count is a mono ledger chip. */
/* min-height 44px: the pill's own padding gave it a 38px hit area, under the 44px
   floor for a primary touch target — and this is the control that opens the cart. */
.bba-cart{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;min-height:44px;border:1px solid rgba(12,110,120,.35);border-radius:999px;color:#14181C!important;font-family:'IBM Plex Mono',Consolas,'Courier New',monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;margin-left:16px;position:relative;flex-shrink:0;transition:background .15s ease,border-color .15s ease}
.bba-cart:hover{background:rgba(12,110,120,.08);border-color:rgba(12,110,120,.6)}
.bba-cart:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:3px}
/* A squared chip rather than a circular dot: this is a quantity read off a
   ledger, and tabular + slashed zero keeps 1 / 10 / 100 the same optical
   weight instead of the badge resizing as the cart fills. */
.bba-cart-badge{
  background:#0C6E78;color:#fff;font-family:'IBM Plex Mono',Consolas,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.04em;line-height:1;
  min-width:20px;height:18px;border-radius:3px;
  display:none;align-items:center;justify-content:center;padding:0 5px;
  font-variant-numeric:tabular-nums slashed-zero;
  font-feature-settings:'tnum' 1,'zero' 1
}
.bba-cart-badge.on{display:inline-flex}

.bba-burger{display:none;background:none;border:none;cursor:pointer;padding:10px;color:rgba(20,24,28,.72);margin-left:12px;flex-shrink:0;min-width:44px;min-height:44px;justify-content:center;border-radius:4px}
.bba-burger:hover{color:#14181C}
.bba-burger:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:2px;border-radius:4px}

/* DRAWER — a ruled sheet dropped from the bar, not a floating card. */
.bba-drawer{display:none;position:absolute;top:72px;left:0;right:0;background:#FCFBF8;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-top:1px solid rgba(20,26,32,.14);border-bottom:1px solid rgba(20,26,32,.14);padding:4px 0 6px;z-index:99;box-shadow:0 10px 20px -18px rgba(16,42,74,.55)}
.bba-drawer.open{display:block}
.bba-drawer a{display:flex;align-items:center;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;font-weight:500;color:rgba(20,24,28,.85);text-decoration:none;padding:12px 28px;border-bottom:1px solid rgba(20,26,32,.06);min-height:44px;box-sizing:border-box}
/* The last row's rule plus the drawer's bottom padding read as an empty
   twelfth row hanging under "Cart". A ledger closes on its last entry. */
.bba-drawer a:last-child{border-bottom:0}
.bba-drawer a:hover{color:#14181C;background:rgba(20,26,32,.03)}
.bba-drawer a:focus-visible{outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:-2px;background:rgba(12,110,120,.06)}
.bba-drawer a[aria-current]{color:#14181C;box-shadow:inset 2px 0 0 #0C6E78}
/* The header's Account link is reused verbatim inside the drawer, so it
   arrived carrying its own mono/uppercase/letter-spaced header styling and
   rendered as the one shouted row among eleven sentence-case siblings.
   Same element, different context — restate the context's typography. */
.bba-drawer .bba-account{
  font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;font-weight:500;
  letter-spacing:normal;text-transform:none;padding:12px 28px;margin-left:0;min-height:44px
}
.bba-drawer .bba-account::before,
.bba-drawer .bba-account::after{display:none}

/* The dead-zone bands moved when the nav grew to 10 links (Forum, Open a store):
   at default gaps the row now measures 1374px — wider than the 1200 rail at ANY
   viewport, and a document side-scroll through 1241–1400. Tightened gaps bring it
   to 1245px, which fits viewports above ~1300 (scrollbar included); below that the
   burger takes over. Default gaps center-fit only from 1548px up (1374 content in
   the 1200 rail). Re-measure these numbers whenever a nav link is added. */
@media(max-width:1550px){
  .bba-header-inner{gap:24px}
  .bba-nav{gap:15px}
}
@media(max-width:1300px){
  .bba-nav{display:none}
  /* Nav is gone, so Account inherits the job of pushing the group right — and
     with no nav beside it there is no boundary left for the hairline to mark. */
  .bba-account{margin-left:auto}
  .bba-account::before{display:none}
  .bba-cart{margin-left:12px}
}
@media(max-width:640px){
  .bba-header-inner{padding:0 18px;gap:16px}
  .bba-logo img{width:88px}
  .bba-account{display:none}
  .bba-cart{margin-left:auto}
}

/* W2-A11Y residual — keyboard focus + motion for every page sharing this shell.
   Header links already had :focus-visible; body content (forms, CTAs) often did not. */
.bba-skip:focus-visible{left:0;outline:2px solid #2BB9C9;outline-offset:2px}
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--bba-ring,rgba(12,110,120,.72));outline-offset:2px
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
  .bba-header,.bba-nav>a,.bba-nav>a::after,.bba-account,.bba-account::after,.bba-cart,.bba-drawer a{transition:none!important}
}

/* ── PRINT ────────────────────────────────────────────────────────────
   The chrome shipped with no print rules at all. .bba-promo is a SIBLING
   of .bba-header, not a child, so hiding the bar alone would still have
   left a solid teal 34px band across the top of every printed page on the
   site — and a certificate is a document people genuinely print.

   Navigation is dead weight on paper, so all of it comes off. The footer
   does NOT: it carries the research-use / 18+ / no-efficacy clause, which
   is the legal line for 77 content pages and has to survive onto the page
   it is printed on. Backgrounds are dropped by default when printing, and
   pricelist.html forces `print-color-adjust:exact` — so the clause is
   restated as plain black on white rather than trusting either default.

   A page that needs to hide the whole footer (the price list has its own
   compliance close) overrides this from its own later stylesheet. */
@media print{
  .bba-skip,.bba-promo,.bba-header,.bba-drawer{display:none!important}
  /* Link columns are unclickable on paper; the clause and its provenance
     stamp are the only two things worth the ink. */
  .bba-foot-cols{display:none!important}
  .bba-foot{
    background:transparent!important;color:#000!important;
    border-top:1px solid #000;margin-top:14pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  .bba-foot-inner{max-width:none;padding:10pt 0 0}
  .bba-foot-ruo{
    color:#000!important;font-size:9pt;line-height:1.5;max-width:none;
    margin:0;padding:0;border-top:0;
    break-inside:avoid;page-break-inside:avoid
  }
  .bba-foot-copy{color:#000!important;font-size:8pt;margin:6pt 0 0}
  .bba-foot-credit{color:#000!important;text-decoration:none}
  .bba-foot-credit svg{display:none}
}