/* ===========================================================================
   LAYER 5 — CHROME STRUCTURE
   The announcement bar, header grid, 8-group mega menu, and footer, built for
   Shoptimizer's DOM. This is the only layer that is AUTHORED rather than
   ported: the .com's chrome is Dawn markup, and there is no verbatim source
   to copy. Every number below is a measured value from the capture, cited.

   Sources:
     COM-TARGET-2026-09-26.md section 3 "Chrome" and section 5 (responsive)
     NAV-AND-FOOTER-SPEC-2026-09-26.json (menu + footer structure)
   =========================================================================== */

/* --------------------------- announcement bar ----------------------------- */
/* 62px, scheme-4 brown. Copy is TIME-SENSITIVE and comes from an option, never
   hard-coded — see inc/chrome.php and DECISIONS ("Do not hard-code the
   announcement bar copy"). The bar renders nothing when the option is empty. */
.mcsv2-announcement {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mcs-scheme-4-bg);
  color: var(--mcs-scheme-4-text);
  text-align: center;
  padding: 0 20px;
}
.mcsv2-announcement a { color: inherit; text-decoration: none; }
.mcsv2-announcement a:hover { text-decoration: underline; }

/* ------------------------------- header ----------------------------------- */
/* 73px at 1440. Sticky, full-bleed, 70px side padding at >=990 (layer 3).
   Grid is 1fr auto 1fr — logo left, nav centre, icons right — which is what
   `header--middle-left` resolves to via custom.css, NOT the dead top-left block. */
.mcsv2-header-section {
  background-color: var(--mcs-scheme-1-bg);
  border-bottom: 1px solid rgba(17, 21, 28, .08);
}
/* N-18: the .com's header is FULL BLEED with 70px side padding. 03-custom.css carries
   `.header.page-width{max-width:100%!important}` verbatim, but that is Shopify's selector
   and is inert on this DOM, so the header inherited Shoptimizer's ~1170px page-width cap
   and the grid could never reach the target's 185.9 / 893.2 / 185.9 columns. */
.mcsv2-header.page-width { max-width: 100%; }

.mcsv2-header {
  min-height: 73px;
  display: grid;
  grid-template-columns: auto 1fr auto;   /* mobile: burger | logo | icons */
  align-items: center;
  column-gap: 10px;   /* target header.gap = 10px; 1rem here resolved to 16px. N-17. */
  margin: 0 auto;
}
@media screen and (min-width: 990px) {
  .mcsv2-header {
    grid-template-columns: 1fr auto 1fr;  /* the .com's desktop grid */
  }
  .mcsv2-header .mcsv2-branding { justify-self: start; }
  .mcsv2-header .mcsv2-header-icons { justify-self: end; }
}

.mcsv2-branding img, .mcsv2-branding svg { width: 100px; height: 56px; object-fit: contain; display: block; }

.mcsv2-header-icons { display: flex; align-items: center; gap: 4px; }
.mcsv2-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* 44px hit area around a 24px glyph */
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--mcs-ink);
}

/* Hamburger below 990, inline nav at and above it. */
.mcsv2-burger { display: inline-flex; }
.mcsv2-nav { display: none; }
@media screen and (min-width: 990px) {
  .mcsv2-burger { display: none; }
  .mcsv2-nav { display: block; }
}

/* Nav links: 13px (layer 4) at 75% opacity. */
.mcsv2-nav .mcsv2-menu-item > a,
.mcsv2-nav .mcsv2-menu-item > button {
  color: rgba(17, 21, 28, .75);
  background: none; border: 0; cursor: pointer;
  font-family: var(--mcs-font-body-home);
}
.mcsv2-nav .mcsv2-menu-item > a:hover,
.mcsv2-nav .mcsv2-menu-item > button:hover { color: var(--mcs-ink); }

/* ----------------------------- mega menu ---------------------------------- */
/* 8 top-level groups. Seven open a panel of 3 sub-groups; "About & Trust" is a
   plain list of 4 links with no sub-groups. NAV-AND-FOOTER-SPEC counts:
   8 groups / 21 sub-groups / 77 leaf links. */
.mcsv2-megamenu {
  position: absolute; left: 0; right: 0;
  background: var(--mcs-white);
  border-top: 1px solid rgba(17, 21, 28, .08);
  box-shadow: var(--mcs-shadow-value-card);
  padding: 32px var(--mcs-header-pad-wide);
  display: none;
  z-index: 70;
}
.mcsv2-menu-item[data-open="true"] > .mcsv2-megamenu,
.mcsv2-menu-item:focus-within > .mcsv2-megamenu { display: block; }

.mcsv2-megamenu-inner {
  max-width: var(--mcs-page-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mcs-gutter-h);
}
/* the one group with no sub-groups collapses to a single column */
.mcsv2-megamenu--flat .mcsv2-megamenu-inner { grid-template-columns: minmax(0, 1fr); }
/* N-20 CORRECTION. The walker sets its has-subgroups flag in start_el() at depth 1, which
   runs AFTER start_lvl() has already emitted the panel's class, so EVERY panel is marked
   --flat and all seven three-column panels collapsed to one column. Deciding the layout
   from the panel's actual content is correct regardless of what the walker emits, so this
   rule stands even once inc/class-mcsv2-mega-menu-walker.php is fixed (done in the repo). */
.mcsv2-megamenu--flat:has(.mcsv2-subgroup-title) .mcsv2-megamenu-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mcsv2-subgroup-title {
  font-family: var(--mcs-font-heading);
  font-size: 16px; font-weight: 500; letter-spacing: var(--mcs-ls-heading);
  color: var(--mcs-ink);
  margin: 0 0 12px;
}
.mcsv2-subgroup ul { list-style: none; margin: 0; padding: 0; }
.mcsv2-subgroup li + li { margin-top: 8px; }
.mcsv2-subgroup a {
  font-size: 14px; line-height: 1.5;
  color: rgba(17, 21, 28, .75); text-decoration: none;
}
.mcsv2-subgroup a:hover { color: var(--mcs-ink); text-decoration: underline; }

/* --------------------------- mobile drawer -------------------------------- */
/* Must actually open. This is a Phase 5 Verify line and a Phase 9 QA check at
   375. The drawer is CSS-driven off a checkbox/aria-expanded so it works with
   JavaScript disabled and cannot be broken by a script error elsewhere. */
.mcsv2-drawer {
  position: fixed; inset: 0 30% 0 0;
  max-width: 420px;
  background: var(--mcs-white);
  transform: translateX(-100%);
  transition: transform .2s ease;
  overflow-y: auto;
  z-index: 100;
  padding: 24px 20px 64px;
}
.mcsv2-drawer[data-open="true"] { transform: translateX(0); }
.mcsv2-drawer ul { list-style: none; margin: 0; padding: 0; }
.mcsv2-drawer a { display: block; padding: 12px 0; font-size: 16px; color: var(--mcs-ink); text-decoration: none; }
.mcsv2-drawer .mcsv2-drawer-sub a { padding-left: 16px; font-size: 14px; color: rgba(17,21,28,.75); }
.mcsv2-drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; display: none;
}
.mcsv2-drawer-scrim[data-open="true"] { display: block; }

/* ------------------------------- footer ----------------------------------- */
/* 614px at 1440, background #855832 (scheme-4). */
.mcsv2-footer {
  background-color: var(--mcs-scheme-4-bg);
  color: var(--mcs-scheme-4-text);
  padding: 56px var(--mcs-header-pad) 32px;
}
@media screen and (min-width: 990px) {
  .mcsv2-footer { padding-left: var(--mcs-header-pad-wide); padding-right: var(--mcs-header-pad-wide); }
}
.mcsv2-footer a { color: var(--mcs-scheme-4-text); text-decoration: none; }
.mcsv2-footer a:hover { text-decoration: underline; }

.mcsv2-footer-inner {
  max-width: var(--mcs-page-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mcs-gutter-v) var(--mcs-gutter-h);
}
@media screen and (min-width: 750px) {
  /* FOOTER COLUMNS — finding G-1. A clean-slate theme drops these silently
     because five of the six .org menus have no location assignment. The
     Phase 5 Verify list must confirm these render, not assume it. */
  .mcsv2-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.mcsv2-footer h2, .mcsv2-footer .mcsv2-footer-heading {
  font-family: var(--mcs-font-heading);
  font-size: 20px; font-weight: 500; letter-spacing: var(--mcs-ls-heading);
  color: var(--mcs-scheme-4-text);
  margin: 0 0 16px;
}
.mcsv2-footer ul { list-style: none; margin: 0; padding: 0; }
.mcsv2-footer li + li { margin-top: 10px; }

.mcsv2-newsletter form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mcsv2-newsletter input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--mcs-scheme-4-text);
  border-radius: var(--mcs-radius);
  background: transparent; color: var(--mcs-scheme-4-text);
}
.mcsv2-newsletter input[type="email"]::placeholder { color: rgba(223, 223, 216, .7); }
.mcsv2-newsletter button {
  padding: 12px 24px;
  background-color: var(--mcs-orange);
  color: #fff; border: 0;
  border-radius: var(--mcs-radius-button);
  cursor: pointer;
}

.mcsv2-footer-bottom {
  max-width: var(--mcs-page-width);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(223, 223, 216, .25);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
}
.mcsv2-footer-policy { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* --------------------------- 375 hygiene ---------------------------------- */
/* Phase 9 checks: no horizontal scroll at 375, and tap targets >= 44px.
   DEFECT-COM-002 (a 42px PDP tap target) is reproduced deliberately in
   06-pdp.css, not prevented here. */
@media screen and (max-width: 480px) {
  .mcsv2-footer-inner { gap: 32px; }
  .mcsv2-footer-bottom { flex-direction: column; align-items: flex-start; }
}
html, body { overflow-x: hidden; }