/* ==========================================================================
   6ixmerchandise — base layer
   Loads AFTER tokens.css and the Kadence parent CSS, BEFORE component CSS.
   Every value here traces to FRONTEND_ARCHITECTURE §1. Nothing is invented.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Document + typography (§1.2)
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--6m-bg);
  color: rgb(0 0 0 / 0.81);
  font-family: var(--6m-sans);
  font-size: 0.875rem;          /* 14px */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--6m-sans);
  color: #000;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(3rem, 5.6vw, 3.5rem); line-height: 1;    font-weight: 700; }
h2 { font-size: clamp(2.25rem, 4.8vw, 3rem); line-height: 1;   font-weight: 700; }
h3 { font-size: 2rem;     line-height: 1.1;  font-weight: 700; }
h4 { font-size: 1.5rem;   line-height: 1;    font-weight: 700; }
h5 { font-size: 0.875rem; line-height: 1.2;  font-weight: 500; }
h6 { font-size: 0.75rem;  line-height: 1.2;  font-weight: 500; }

a { color: inherit; }

img,
svg,
video { max-width: 100%; }

img { height: auto; }

/* --------------------------------------------------------------------------
   2. Page shell (§1.3)
   Active page width is the "narrow" setting = 90rem = 1440px, with 6M's fixed
   gutters: 18px mobile, 48px >=768, 64px >=1280.
   -------------------------------------------------------------------------- */

#wrapper.site { overflow-x: clip; }
/* Floating UI printed outside #wrapper (rewards drawer parked off-canvas at
   translateX(100%+32px), chat panel) must never widen the document. `clip`
   (not `hidden`) keeps html from becoming a scroll container, so position:
   sticky descendants (collection facet bar) keep working. */
html { overflow-x: clip; }

main#inner-wrap,
.sixm-container {
  max-width: var(--narrow-page-width);
  margin-inline: auto;
  width: 100%;
}

.sixm-container {
  padding-inline: var(--6m-gutter);
}

@media (min-width: 768px) {
  .sixm-container { padding-inline: var(--6m-gutter-d); }
}

@media (min-width: 1280px) {
  .sixm-container { padding-inline: var(--6m-gutter-xl); }
}

/* --------------------------------------------------------------------------
   3. 6M type recipes (§1.2 "6M component type recipes")
   -------------------------------------------------------------------------- */

.s6m-eyebrow {
  font-family: var(--6m-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
}

.s6m-chip {
  font-family: var(--6m-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--6m-line);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Buttons — the 6M system (§1.6 B). Horizon's own button system is styled by
   the Woo/Kadence layers and owned by FE-4; this is the `.s6m-btn` family only.
   -------------------------------------------------------------------------- */

.s6m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-family: var(--6m-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
  min-height: 44px;                /* --minimum-touch-target */
  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.s6m-btn:hover { background: #333; color: #fff; }

.s6m-btn--invert { background: #fff; color: #000; border: 1px solid #fff; }
.s6m-btn--invert:hover { background: #f0f0f0; color: #000; }

.s6m-btn--signal { background: var(--6m-signal); color: #fff; }
.s6m-btn--signal:hover { background: #a82429; }

.s6m-btn--ghost {
  background: transparent;
  color: var(--6m-ink);
  border: 1px solid var(--6m-ink);
}
.s6m-btn--ghost:hover { background: var(--6m-ink); color: #fff; }

.s6m-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. Icon buttons (§1.3 minimum touch target 44px)
   -------------------------------------------------------------------------- */

.s6m-icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--6m-ink);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.s6m-icon-btn svg { width: 20px; height: 20px; }

/* Kadence's global.min.css styles `button:hover, button:focus, button:active`
   with the palette button colours (specificity 0,1,1), which beat a bare
   `.s6m-icon-btn` rule — our icon buttons turned solid red the moment they took
   focus. Restate the neutral state at matching specificity. */
.s6m-icon-btn:hover,
.s6m-icon-btn:focus,
.s6m-icon-btn:active {
  background: none;
  color: var(--6m-ink);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. Accessibility utilities (§8.4)
   -------------------------------------------------------------------------- */

.screen-reader-text,
.sixm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sixm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--layer-temporary);
  background: var(--6m-ink);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--6m-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.sixm-skip-link:focus {
  left: 8px;
  top: 8px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--6m-ink);
  outline-offset: 2px;
}

/* Forced colours must never hide content (§8.4). */
@media screen and (forced-colors: active) {
  .s6m-btn { forced-color-adjust: auto; }
}

/* --------------------------------------------------------------------------
   7. Film grain (§1.10) — used by the footer and the hero.
   -------------------------------------------------------------------------- */

[data-6m-grain] { position: relative; }

[data-6m-grain]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--6m-grain-img);
  background-size: 180px 180px;
  opacity: 0.12;
  mix-blend-mode: overlay;
}

[data-6m-grain] > * { position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   8. Overlay padding compensation (§3.6). These are the exact values from the
   spec; each is scoped to phones because every overlay they compensate for is.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.s6m-with-tabbar { padding-bottom: 200px; }
  body.s6m-with-sticky-atc { padding-bottom: 140px; }
  body.s6m-with-sticky-atc.s6m-with-tabbar { padding-bottom: 200px; }
}

/* --------------------------------------------------------------------------
   9. Reduced motion (§1.9). Every marquee and autoplay stops.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   10. Newsletter capture (inc/newsletter.php). Shared by the footer signup and
   the drop-countdown block, so the rules live here rather than in either.
   -------------------------------------------------------------------------- */

/* The honeypot must be in the DOM and out of the layout. `display:none` is the
   one thing not to use: a bot that skips hidden fields would then skip it. */
.s6m-newsletter__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.s6m-footer__signup,
.s6m-drop__form {
  flex-wrap: wrap;
  position: relative;
}

.s6m-newsletter__notice {
  flex: 1 0 100%;
  margin: 8px 0 0;
  font-family: var(--6m-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Kadence styles bare form controls with `--global-palette5: #787878` — 4.41:1
 * on white, and the drop-countdown's email field was one of the three
 * remaining color-contrast failures on Home (REVIEW_3 item 6). Scoped through
 * the renderer's own `data-sixm-newsletter` hook and the block's input class,
 * so the FOOTER signup — which is deliberately light-on-dark and carries its
 * own colour at `.s6m-footer .s6m-footer__email` — is untouched.
 */
form[data-sixm-newsletter] .s6m-drop__form-input { color: var(--6m-ink); }

.s6m-newsletter__notice.is-success { color: #29a36a; }
.s6m-newsletter__notice.is-error { color: var(--6m-signal); }