/* 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 and tablet = 56px bar + 56px icon row = 112px; from 1200px 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: 112px; }
@media (min-width: 1200px) {
  :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; }

/* 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;
}
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);
}

/* Icon row (browse, account, b2b): equal columns, icon above a one-line label. Hidden items leave the grid, so five items fill 390px (78px each). */
.site-nav-row { 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 and up: full labels, Collaborate (and Shop in the account row) join the row. */
@media (min-width: 768px) {
  .site-nav-md { display: block; }
  .site-lbl-s { display: none; }
  .site-lbl-f { display: inline; }
  .site-bar { padding: 0 16px; }
  .site-logo .site-logo-sm { display: none; }
  .site-logo .site-logo-lg { 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; }
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;
  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; }

/* Desktop: one 64px row (logo, search, nav, cart), icon to the left of the label. 1200px, not 1024px, because six full labels do not fit beside the search field at 1024px. */
@media (min-width: 1200px) {
  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-cart { order: 3; }
  .site-nav { display: flex; height: auto; }
  .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; }
}