/* Header v2 (spec: sessions/header_design_audit_2026-10-30.md, sections 4 and 5).
   Loaded by layouts/main.php, mainCopy.php and newmain.php ONLY when params['header.v2'] is on, after css/dc-ui.css (the Stone/Charcoal tokens)
   and after the layout's own CSS. Markup: layouts/_site_header.php. With the switch off this file is never requested.
   Colours: var(--dc-*) tokens only, no raw colour values here.
   One variable, --dc-hdr-h, is the header height AND the body's padding-top, so the header cannot clip or overlap the first line of content.
     Fixed variants (browse, account, b2b): phone through small desktop = one 56px utility bar with a right-hand hamburger menu; from 1280px one 64px row.
     Static variants (focus, form, content): a 56px bar in the page flow, set on the header itself; the body gets no padding. */

:root { --dc-hdr-h: 56px; }
@media (min-width: 1280px) {
  :root { --dc-hdr-h: 64px; }
}

/* Body: the layouts add the class only when the switch is on. */
html body.dc-hdr-v2 { padding-top: 0; }
html body.dc-hdr-v2--sticky { padding-top: var(--dc-hdr-h); }

/* Header shell. The legacy rules for a bare `header` (fixed, 72px, white text, extra padding, shadow) are overridden here. */
header.site-hdr {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: var(--dc-hdr-h);
  margin: 0;
  padding: 0;
  z-index: 99;
  box-sizing: border-box;
  background: var(--dc-card);
  color: var(--dc-ink);
  border-bottom: 1px solid var(--dc-rule);
  box-shadow: none;
  transition: none;
  font-family: var(--dc-sans);
}
header.site-hdr *, header.site-hdr *::before, header.site-hdr *::after { box-sizing: border-box; }
header.site-hdr--browse, header.site-hdr--account, header.site-hdr--b2b { position: fixed; top: 0; left: 0; }
header.site-hdr--focus, header.site-hdr--form, header.site-hdr--content { --dc-hdr-h: 56px; }

header.site-hdr ul { margin: 0; padding: 0; list-style: none; }
header.site-hdr a { color: var(--dc-ink); text-decoration: none; background: none; }
header.site-hdr a:focus-visible, header.site-hdr summary:focus-visible, header.site-hdr input:focus-visible {
  outline: 2px solid var(--dc-focus);
  outline-offset: -2px;
}

/* Top bar: 56px. */
.site-bar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 8px; }
.site-logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 48px; min-width: 56px; justify-content: center; }
.site-logo img { height: auto; }
.site-logo .site-logo-sm { display: block; width: 44px; }
.site-logo .site-logo-lg { display: none; width: 66px; }
.site-logo .site-brand-paper { display: none; filter: brightness(0) invert(1); }
[data-theme="charcoal"] .site-logo .site-logo-sm.site-brand-ink { display: none; }
[data-theme="charcoal"] .site-logo .site-logo-sm.site-brand-paper { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) .site-logo .site-logo-sm.site-brand-ink { display: none; }
  :root:not([data-theme="stone"]) .site-logo .site-logo-sm.site-brand-paper { display: block; }
}

/* Tap targets: 48px high, 56px wide, icon 24px. */
.site-tap { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 56px; position: relative; }
.site-ico { display: block; width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Search field and (B2B) quote button share the middle of the bar. */
.site-search { flex: 1 1 0; min-width: 0; margin: 0; }
.site-search input[type="search"] {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 12px;
  font: 400 16px/24px var(--dc-sans); color: var(--dc-ink);
  background: var(--dc-field); border: 1px solid var(--dc-edge); border-radius: 8px;
}
.site-quote {
  display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 44px; padding: 0 16px;
  font: 700 14px/1 var(--dc-sans); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  background: var(--dc-btn); border-radius: 8px;
}
.site-quote-short { display: none; }
@media (max-width: 359px) {
  .site-quote { padding: 0 12px; }
  .site-quote-short { display: inline; }
  .site-quote-full { display: none; }
}
header.site-hdr a.site-quote { color: var(--dc-btn-fg); }
.site-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cart count. */
.site-cart-count {
  position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px;
  font: 700 11px/18px var(--dc-sans); text-align: center; border-radius: 9px;
  background: var(--dc-btn); color: var(--dc-btn-fg);
}

/* Browse, account and B2B use the right-hand hamburger menu below desktop. Keeping labels out of equal phone columns removes the source of the live collision. */
.site-nav-row { display: none; height: 56px; border-top: 1px solid var(--dc-rule); }
.site-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(56px, 1fr); height: 100%; }
.site-nav-item { display: block; min-width: 0; }
.site-nav-item > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 100%; min-height: 48px; min-width: 56px; padding: 0 2px;
}
.site-nav-label {
  display: block; max-width: 100%; white-space: nowrap; overflow: visible;
  font: 700 11px/14px var(--dc-sans); text-transform: uppercase; letter-spacing: .02em; text-align: center;
}
.site-nav-item > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--dc-ink); }
.site-nav-md { display: none; }
.site-lbl-s { display: inline; }
.site-lbl-f { display: none; }

/* Tablet keeps the hamburger menu. Desktop restores direct navigation with full labels. */
@media (min-width: 768px) {
  .site-nav-md { display: block; }
  .site-lbl-s { display: none; }
  .site-lbl-f { display: inline; }
  .site-bar { padding: 0 16px; }
  header.site-hdr--focus .site-logo .site-logo-sm, header.site-hdr--form .site-logo .site-logo-sm, header.site-hdr--content .site-logo .site-logo-sm { display: none; }
  header.site-hdr--focus .site-logo .site-logo-lg.site-brand-ink, header.site-hdr--form .site-logo .site-logo-lg.site-brand-ink, header.site-hdr--content .site-logo .site-logo-lg.site-brand-ink { display: block; }
  [data-theme="charcoal"] header.site-hdr--focus .site-logo .site-logo-lg.site-brand-ink, [data-theme="charcoal"] header.site-hdr--form .site-logo .site-logo-lg.site-brand-ink, [data-theme="charcoal"] header.site-hdr--content .site-logo .site-logo-lg.site-brand-ink { display: none; }
  [data-theme="charcoal"] header.site-hdr--focus .site-logo .site-logo-lg.site-brand-paper, [data-theme="charcoal"] header.site-hdr--form .site-logo .site-logo-lg.site-brand-paper, [data-theme="charcoal"] header.site-hdr--content .site-logo .site-logo-lg.site-brand-paper { display: block; }
}

@media (min-width: 768px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) header.site-hdr--focus .site-logo .site-logo-lg.site-brand-ink, :root:not([data-theme="stone"]) header.site-hdr--form .site-logo .site-logo-lg.site-brand-ink, :root:not([data-theme="stone"]) header.site-hdr--content .site-logo .site-logo-lg.site-brand-ink { display: none; }
  :root:not([data-theme="stone"]) header.site-hdr--focus .site-logo .site-logo-lg.site-brand-paper, :root:not([data-theme="stone"]) header.site-hdr--form .site-logo .site-logo-lg.site-brand-paper, :root:not([data-theme="stone"]) header.site-hdr--content .site-logo .site-logo-lg.site-brand-paper { display: block; }
}

/* Static bars (focus, form, content). */
.site-back, .site-help, .site-menu-btn, .site-search-link { flex: 0 0 auto; }
header.site-hdr--focus .site-bar, header.site-hdr--form .site-bar { justify-content: space-between; }
header.site-hdr--focus .site-logo, header.site-hdr--form .site-logo { margin: 0 auto; }
.site-secure { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 48px; padding: 0 4px; }
.site-secure .site-nav-label { display: none; }
header.site-hdr--content .site-logo { margin-right: auto; }

/* Content variant: the menu is a sheet of 56px rows, icon + full label. details/summary, so it needs no script. */
.site-menu { flex: 0 0 auto; }
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu-sheet {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  max-height: calc(100dvh - 56px); overflow-y: auto;
  background: var(--dc-card); border-bottom: 1px solid var(--dc-rule);
}
.site-menu-sheet .site-nav-item { display: block; border-top: 1px solid var(--dc-rule); }
.site-menu-sheet .site-nav-item > a { flex-direction: row; justify-content: flex-start; gap: 16px; height: 56px; padding: 0 16px; }
.site-menu-sheet .site-lbl-s { display: none; }
.site-menu-sheet .site-lbl-f { display: inline; }

/* Account menu (issue #591). Below 1280px the account item is a details/summary that opens a sheet under the icon row, right-aligned to the screen edge:
   Login and Register, or My account, My orders and Logout. From 1280px the plain link shows and the sheet never does, so the desktop header is unchanged. */
.site-acct { position: relative; }
.site-nav-item > a.site-acct-link { display: none; }
.site-acct-menu { display: block; height: 100%; }
.site-acct-menu > summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 100%; min-height: 48px; min-width: 56px; padding: 0 2px; list-style: none; cursor: pointer;
}
.site-acct-menu > summary::-webkit-details-marker { display: none; }
.site-acct-menu[open] > summary, .site-acct-menu > summary[data-current="page"] { box-shadow: inset 0 -3px 0 var(--dc-ink); }
.site-acct-sheet {
  position: absolute; top: 100%; right: 0; z-index: 100; width: 220px; max-width: 100vw;
  background: var(--dc-card); border: 1px solid var(--dc-rule); border-top: 0;
}
.site-acct-out { margin: 0; }
.site-acct-row {
  display: flex; align-items: center; width: 100%; min-height: 56px; margin: 0; padding: 0 16px; text-align: left;
  font: 700 14px/20px var(--dc-sans); color: var(--dc-ink); background: var(--dc-card);
  border: 0; border-top: 1px solid var(--dc-rule); border-radius: 0; cursor: pointer; text-decoration: none;
}
.site-acct-sheet > .site-acct-row:first-child { border-top: 0; }
.site-acct-row[aria-current="page"] { box-shadow: inset 3px 0 0 var(--dc-ink); }
header.site-hdr .site-acct-row:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: -2px; }
/* Content variant: Register, My orders and Logout join the menu sheet as 56px rows. */
.site-menu-extra { display: block; }

/* Desktop: one 64px row (menu, search, nav, cart), icon to the left of the label. 1280px keeps seven labels, the search field, the menu, and the cart within their real inner width. */
@media (min-width: 1280px) {
  header.site-hdr--browse, header.site-hdr--account, header.site-hdr--b2b {
    display: flex; align-items: center; gap: 16px;
    padding: 0 max(24px, calc((100% - 1232px) / 2));
  }
  header.site-hdr--browse .site-bar, header.site-hdr--account .site-bar, header.site-hdr--b2b .site-bar { display: contents; }
  header.site-hdr--browse .site-search, header.site-hdr--account .site-search { flex: 1 1 0; min-width: 160px; }
  header.site-hdr--b2b .site-quote { flex: 0 0 auto; margin-left: auto; }
  header.site-hdr .site-nav-row { order: 2; height: auto; border-top: 0; flex: 0 0 auto; }
  header.site-hdr .site-nav-row { display: block; }
  header.site-hdr .site-cart { order: 3; }
  header.site-hdr .site-menu--browse { display: none; }
  header.site-hdr--browse .site-logo .site-logo-sm, header.site-hdr--account .site-logo .site-logo-sm, header.site-hdr--b2b .site-logo .site-logo-sm { display: none; }
  header.site-hdr--browse .site-logo .site-logo-lg.site-brand-ink, header.site-hdr--account .site-logo .site-logo-lg.site-brand-ink, header.site-hdr--b2b .site-logo .site-logo-lg.site-brand-ink { display: block; }
  [data-theme="charcoal"] header.site-hdr--browse .site-logo .site-logo-lg.site-brand-ink, [data-theme="charcoal"] header.site-hdr--account .site-logo .site-logo-lg.site-brand-ink, [data-theme="charcoal"] header.site-hdr--b2b .site-logo .site-logo-lg.site-brand-ink { display: none; }
  [data-theme="charcoal"] header.site-hdr--browse .site-logo .site-logo-lg.site-brand-paper, [data-theme="charcoal"] header.site-hdr--account .site-logo .site-logo-lg.site-brand-paper, [data-theme="charcoal"] header.site-hdr--b2b .site-logo .site-logo-lg.site-brand-paper { display: block; }
  .site-nav { display: flex; height: auto; }
  .site-nav-row .site-acct .site-lbl-s { display: inline; }
  .site-nav-row .site-acct .site-lbl-f { display: none; }
  .site-nav-item > a.site-acct-link { display: flex; }
  .site-acct-menu { display: none; }
  .site-nav-row .site-nav-item > a { flex-direction: row; gap: 8px; height: 48px; padding: 0 12px; }
  .site-nav-row .site-nav-item > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--dc-ink); }
  header.site-hdr--focus .site-bar, header.site-hdr--form .site-bar, header.site-hdr--content .site-bar { max-width: 1280px; margin: 0 auto; }
}

@media (min-width: 1280px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="stone"]) header.site-hdr--browse .site-logo .site-logo-lg.site-brand-ink, :root:not([data-theme="stone"]) header.site-hdr--account .site-logo .site-logo-lg.site-brand-ink, :root:not([data-theme="stone"]) header.site-hdr--b2b .site-logo .site-logo-lg.site-brand-ink { display: none; }
  :root:not([data-theme="stone"]) header.site-hdr--browse .site-logo .site-logo-lg.site-brand-paper, :root:not([data-theme="stone"]) header.site-hdr--account .site-logo .site-logo-lg.site-brand-paper, :root:not([data-theme="stone"]) header.site-hdr--b2b .site-logo .site-logo-lg.site-brand-paper { display: block; }
}

@media (min-width: 768px) {
  .site-secure .site-nav-label { display: block; }
}