/**
 * Feature 035a — DPD header chrome.
 * Ported from landing/header.html, re-scoped under `body.dpd-chrome` and targeted at Shoptimizer's
 * real header nodes (#masthead .site-header / .main-header). Overrides the theme's main.css header
 * rules. Only affects the header — scoped so nothing leaks into the rest of the site.
 *
 * Brand tokens (--paper/--ink/--red/--steel/--line …) live in dpd-tokens.css (035c), enqueued as
 * this stylesheet's dependency.
 */

/* ---------- full-width header chrome (.header-4-container) ---------- */
/* In Shoptimizer's header-4 layout the full-width, sticky wrapper is .header-4-container
   (the theme already makes it position:sticky). The paper background, blur, bottom border and
   the courier-red scan-line all live here so they span the whole viewport — not just the
   centered content column (.header-4-inner, max-width 1170px) where #masthead sits. */
body.dpd-chrome .header-4-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* small paper gap above the scan-line, matching landing/header.html (its default 8px body margin) */
  padding-top: 8px;
  /* trim the theme's 30px side padding so the bar uses the full width */
  padding-left: 4px;
  padding-right: 4px;
  background: rgba(251, 250, 247, 0.85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  transition: box-shadow .2s ease;
}
/* courier-red scan-line strip near the top, inset 8px each side to match landing/header.html */
body.dpd-chrome .header-4-container::before {
  content: "";
  display: block;
  height: 3px;
  margin: 0 8px;
  background: repeating-linear-gradient(90deg, var(--red) 0 14px, transparent 14px 22px);
  opacity: .9;
}
body.dpd-chrome .header-4-container.is-scrolled { box-shadow: 0 8px 24px rgba(22, 20, 15, .07); }

/* desktop header height — override the theme's `.header-4 .header-4-container { height:70px }`
   (Customizer default, ≥993px). Ours is more specific (0,3,0 > 0,2,0) so it wins. */
@media (min-width: 993px) {
  body.dpd-chrome.header-4 .header-4-container { height: 80px; }
}

/* keep clear of the WP admin bar when logged in */
body.dpd-chrome.admin-bar .header-4-container { top: 32px; }
@media screen and (max-width: 782px) {
  body.dpd-chrome.admin-bar .header-4-container { top: 46px; }
}

/* center the header content on the shared content column (035c) so the logo/nav/CTA line up
   with the body landing and footer; the paper bg + scan-line still span full width (on .header-4-container).
   Selector deliberately out-specifies Kirki's Customizer rule
   `body.header-4:not(.full-width-header) .header-4-inner { max-width:1170px }` (0,3,1) — ours is (0,4,1). */
body.dpd-chrome.header-4 .header-4-container .header-4-inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  /* 24px side inset (box-sizing keeps the column at --content-max) so the logo/nav line up with
     the footer wrap's 24px padding — matches landing/header.html. */
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- #masthead: the centered content filler (chrome lives on the container) ---------- */
body.dpd-chrome .site-header {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  /* drop the theme's 30px right margin on #masthead so the header row reaches the column's
     content edge (matching the left logo + the footer's right-aligned text). */
  margin-right: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
}
body.dpd-chrome .site-header * { box-sizing: border-box; }
body.dpd-chrome .site-header a { color: inherit; text-decoration: none; box-shadow: none; }

/* the single-row bar */
body.dpd-chrome .site-header .main-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
}
/* Neutralize the theme's clearfix ::after: in this flex row it becomes a phantom trailing
   flex item, and the 28px flex gap reserved before it stops the cart short of the row's right
   edge. Removing it lets the cart sit flush with the content column (= footer's right edge). */
body.dpd-chrome .site-header .main-header::after { display: none; }
body.dpd-chrome .menu-overlay { display: none; }

/* drop the now-empty secondary nav row */
body.dpd-chrome .col-full-nav { display: none; }

/* ---------- logo lockup ---------- */
body.dpd-chrome .dpd-h-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
body.dpd-chrome .dpd-h-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--red);
  color: #fff;
  padding: 8px 10px;
  border-radius: 2px;
  line-height: 1;
}
body.dpd-chrome .dpd-h-mark .bars {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  height: 16px;
  margin-left: 4px;
}
body.dpd-chrome .dpd-h-mark .bars i { width: 2px; background: #fff; display: block; }
body.dpd-chrome .dpd-h-mark .bars i:nth-child(2) { width: 1px; opacity: .8; }
body.dpd-chrome .dpd-h-mark .bars i:nth-child(4) { width: 3px; }
body.dpd-chrome .dpd-h-mark .bars i:nth-child(5) { width: 1px; opacity: .8; }
body.dpd-chrome .dpd-h-mark b {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: .04em;
  font-size: 18px;
}
body.dpd-chrome .dpd-h-name {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .01em;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
}
body.dpd-chrome .dpd-h-name small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- desktop nav (wp_nav_menu) ---------- */
body.dpd-chrome .dpd-h-nav { margin-left: auto; }
body.dpd-chrome .dpd-h-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.dpd-chrome .dpd-h-menu li { margin: 0; padding: 0; }
body.dpd-chrome .dpd-h-menu a {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-stretch: 100%;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  display: inline-block;
  padding: 6px 0;
  transition: color .15s ease;
}
body.dpd-chrome .dpd-h-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--red);
  transition: right .18s ease;
}
body.dpd-chrome .dpd-h-menu a:hover,
body.dpd-chrome .dpd-h-menu .current-menu-item > a { color: var(--ink); }
body.dpd-chrome .dpd-h-menu a:hover::after,
body.dpd-chrome .dpd-h-menu .current-menu-item > a::after { right: 0; }

/* ---------- actions ---------- */
body.dpd-chrome .dpd-h-actions { display: flex; align-items: center; gap: 14px; flex: none; }
body.dpd-chrome .dpd-h-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 2px;
  border: 2px solid var(--red);
  background: var(--red);
  color: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
body.dpd-chrome .dpd-h-btn:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
  transform: translateY(-2px);
}
/* the theme's `.site-header a { color }` out-specifies .dpd-h-btn; force white CTA text */
body.dpd-chrome .site-header a.dpd-h-btn,
body.dpd-chrome .site-header a.dpd-h-btn:hover { color: #fff; }

/* cart sits at the far right, beside the burger on mobile */
body.dpd-chrome .dpd-h-cart {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
body.dpd-chrome .dpd-h-cart:hover { border-color: var(--red); color: var(--red); }
body.dpd-chrome .dpd-h-cart-ico { display: block; }
body.dpd-chrome .dpd-h-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
body.dpd-chrome .dpd-h-cart-count:empty { display: none; }

/* ---------- mobile toggle ---------- */
body.dpd-chrome .dpd-h-burger {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
body.dpd-chrome .dpd-h-burger span {
  position: relative;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: background .15s ease;
}
body.dpd-chrome .dpd-h-burger span::before,
body.dpd-chrome .dpd-h-burger span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .2s ease, top .2s ease;
}
body.dpd-chrome .dpd-h-burger span::before { top: -6px; }
body.dpd-chrome .dpd-h-burger span::after { top: 6px; }
body.dpd-chrome .site-header.menu-open .dpd-h-burger span { background: transparent; }
body.dpd-chrome .site-header.menu-open .dpd-h-burger span::before { top: 0; transform: rotate(45deg); }
body.dpd-chrome .site-header.menu-open .dpd-h-burger span::after { top: 0; transform: rotate(-45deg); }

/* ---------- mobile panel ---------- */
/* Light animated dropdown: kept in the DOM (absolute, so it never affects layout) and revealed
   with a quick fade + a small downward slide instead of snapping display:none→block. visibility
   flips after the fade-out so the closed panel isn't focusable/hoverable. */
body.dpd-chrome .dpd-h-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 14px 24px 22px;
  box-shadow: 0 12px 24px rgba(22, 20, 15, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}
body.dpd-chrome .site-header.menu-open .dpd-h-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}
body.dpd-chrome .dpd-h-panel-menu { margin: 0; padding: 0; list-style: none; }
body.dpd-chrome .dpd-h-panel a,
body.dpd-chrome .dpd-h-panel-menu a {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
body.dpd-chrome .dpd-h-panel a:hover,
body.dpd-chrome .dpd-h-panel-menu a:hover { color: var(--ink); }
body.dpd-chrome .dpd-h-panel .dpd-h-btn {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  border-bottom: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  body.dpd-chrome .dpd-h-nav,
  body.dpd-chrome .dpd-h-actions { display: none; }
  body.dpd-chrome .dpd-h-cart { margin-left: auto; }
  body.dpd-chrome .dpd-h-burger { display: inline-flex; }

  /* center the logo between the burger (left) and the cart (right). Absolute so
     unequal side widths (burger 44 / cart 42) don't push it off-center. Tablets
     (601–900px) keep the full lockup (mark + wordmark), centered. */
  body.dpd-chrome .dpd-h-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* phones only: drop the wide wordmark so just the red DPD mark stays centered. */
@media (max-width: 600px) {
  body.dpd-chrome .dpd-h-name { display: none; }
}
@media (min-width: 901px) {
  body.dpd-chrome .dpd-h-panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.dpd-chrome .site-header *,
  body.dpd-chrome .site-header *::before,
  body.dpd-chrome .site-header *::after { transition: none !important; }
}