/**
 * Horizon Theme — Responsive / Mobile Layer (MT-8)
 * All breakpoint overrides in one auditable file.
 * Complements the desktop-first rules in hp-base / hp-components / hp-shop /
 * hp-vault. Load order: after hp-age-gate, before hp-child (functions.php).
 */

/* ==========================================================================
   ≤ 768px — GP mobile nav breakpoint
   Hamburger fires here (GP inline CSS shows .menu-toggle at this width).
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Hamburger toggle: WCAG 2.5.5 44×44 px minimum tap target ──
     The icon itself is visually sufficient on both skins; no border.
     min-width/min-height expand the invisible hit area only. */
  .hp .menu-toggle {
    min-width:  44px !important;
    min-height: 44px !important;
  }

  /* ── Expanded mobile nav panel: full-bleed opaque surface ──
     #site-navigation lives inside .inside-header (padding: 0 var(--hp-content-pad)).
     position:absolute with left:0;right:0 breaks out of that padding and anchors
     to the positioned .site-header, so the panel spans the full viewport width.
     The hp-base.css background:transparent !important is beaten by !important here. */
  .hp #site-navigation.main-navigation .inside-navigation {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--hp-header-h);
    z-index: 99;
    background: var(--hp-bg-surface) !important;
    border-bottom: 1px solid var(--hp-border);
    padding: var(--hp-sp-4) 0 var(--hp-sp-6);
  }

  /* Full-width stacked nav items — no separator lines (premium feel) */
  .hp #site-navigation .main-nav > li {
    display: block !important;
  }
  .hp #site-navigation .main-nav > li > a {
    display: block !important;
    padding: var(--hp-sp-4) var(--hp-sp-6) !important;
    font-size: var(--hp-text-base) !important;
    letter-spacing: 0.05em !important;
  }

  /* Subscribe CTA pill: generous padding, no forced borders */
  .hp #site-navigation .main-nav > li.hp-nav-cta {
    padding: var(--hp-sp-3) var(--hp-sp-6) var(--hp-sp-2);
    margin-top: var(--hp-sp-1);
  }
  .hp #site-navigation .main-nav > li.hp-nav-cta > a {
    display: block !important;
    text-align: center !important;
    padding: var(--hp-sp-4) !important;
    border-radius: var(--hp-r-sm) !important;
  }

  /* Live Now pill — mirror Subscribe CTA mobile treatment */
  .hp #site-navigation .main-nav > li.hp-nav-live {
    padding: var(--hp-sp-3) var(--hp-sp-6) var(--hp-sp-2);
    margin-top: var(--hp-sp-1);
  }
  .hp #site-navigation .main-nav > li.hp-nav-live > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--hp-sp-4) !important;
    border-radius: var(--hp-r-sm) !important;
  }
}

/* ==========================================================================
   ≤ 640px — Mobile (primary breakpoint)
   ========================================================================== */

@media (max-width: 640px) {

  /* ── Section padding: 5 rem → 3 rem ──
     .hp-section { padding: var(--hp-sp-20) 0 } = 80 px is excessive on
     a 390 px screen. Tighten all sections; tight variant proportionally. */
  .hp-section {
    padding-top:    var(--hp-sp-12);
    padding-bottom: var(--hp-sp-12);
  }
  .hp-section--tight {
    padding-top:    var(--hp-sp-8);
    padding-bottom: var(--hp-sp-8);
  }

  /* ── Typography ──
     h1/h2 are already scaled in hp-base.css @600px; add h3/h4 here. */
  h3 { font-size: var(--hp-text-xl); }   /* 1.25 rem (was 1.5 rem) */
  h4 { font-size: var(--hp-text-lg); }   /* 1.125 rem (was 1.25 rem) */

  /* ── Inner-page header: compact at mobile ── */
  .hp-page-header {
    padding: var(--hp-sp-8) 0 var(--hp-sp-6);
  }
  .hp-page-header__title {
    font-size: var(--hp-text-3xl);   /* 2 rem (was 2.75 rem) */
  }

  /* (Hero inner bottom-padding override lives in the Hero-typography block
     below — keep all hero overrides together to avoid a duplicate selector
     inside this same 640px media query.) */

  /* ── About — At-a-Glance: override the inline repeat(2,1fr) grid ──
     The grid is an inline style so we need a more-specific selector +
     !important to win. */
  .hp-about-glance .hp-container > div {
    grid-template-columns: 1fr !important;
  }

  /* ── Large inline gaps that become excessive when auto-fit stacks ──
     Covers: About intro (portrait+bio), Collabs "Better With Company",
     Best Sellers exclusive content, Live Streams "Unmissable" section —
     all use gap:var(--hp-sp-16) = 4 rem as an inline style. */
  .hp-section .hp-container > div[style*="gap:var(--hp-sp-16)"],
  .hp-section .hp-container > div[style*="gap: var(--hp-sp-16)"] {
    gap: var(--hp-sp-8) !important;
  }

  /* ── Merch / shop filter bar: horizontal scroll, no wrap ── */
  .hp-category-filter {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: var(--hp-sp-1); /* room for any scrollbar on some browsers */
  }
  .hp-category-filter::-webkit-scrollbar { display: none; }
  .hp-category-filter__tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Vault / portfolio filter bar */
  .hp-filter-bar__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .hp-filter-bar__inner::-webkit-scrollbar { display: none; }
  .hp-filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
  }

  /* ── Live-now banner: flex layout so text + button don't collide ── */
  .hp-live-now-banner .hp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hp-sp-3);
    flex-wrap: wrap;
  }
  .hp-live-now-banner .hp-container > span {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hp-live-now-banner .hp-container .hp-btn {
    flex-shrink: 0;
  }

  /* ── Platform links bar: wrap into rows + smaller tap targets ──
     Platforms bar on Shows / Live Streams pages — 5-7 icons at 80 px each
     overflows 390 px. Wrap into 2 rows and reduce the min-width.
     overflow:hidden on the bar prevents any pill from bleeding off-screen. */
  .hp-platform-bar {
    overflow: hidden;
  }
  .hp-platform-links {
    flex-wrap: wrap !important;
    gap: var(--hp-sp-2) !important;
  }
  .hp-platform-link {
    min-width: 3.5rem !important;
    max-width: 5rem !important;
    padding: var(--hp-sp-2) !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--hp-sp-1) !important;
  }
  .hp-platform-link__name {
    max-width: 100%;
  }

  /* ── Portrait-pull: text first, portrait below on mobile ──
     auto-fit + portrait grids (Live Streams "Unmissable", Collabs "Better With
     Company") place the portrait LEFT on desktop via order:-1. When the grid
     stacks to 1-col at mobile that inline order bubbles the portrait to the TOP,
     showing image before context/CTA. .hp-portrait-pull flips it below text. */
  .hp-portrait-pull {
    order: 1 !important;
  }

  /* ── Collab roster cards: portrait placeholder → square ──
     Cards without a real image carry aspect-ratio:3/4; at 358 px content width
     that's ≈ 477 px of beige placeholder. Collapse to a square (1:1) so the
     name / role text is immediately visible without scrolling through empty space. */
  .hp-collab-portrait {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  /* ── Roster heading: tighten margin-bottom at mobile ──
     Centered eyebrow+h2 heading blocks (collab roster, best-sellers sections)
     use margin-bottom:var(--hp-sp-12) = 48 px. Halve it for tighter rhythm. */
  .hp-section .hp-container > div[style*="text-align:center"][style*="margin-bottom:var(--hp-sp-12)"] {
    margin-bottom: var(--hp-sp-6) !important;
  }

  /* ── Portfolio / About CTA split: collapse 1fr 1fr → single column ──
     The inline grid-template-columns:1fr 1fr can't be overridden without
     !important on a class selector. hp-cta-split is added in page-portfolio.php
     and any other template using the same pattern. */
  .hp-cta-split {
    grid-template-columns: 1fr !important;
    gap: var(--hp-sp-8) !important;
  }

  /* ── WooCommerce checkout: first/last name row → stacked ──
     hp-shop.css keeps .form-row-first/.form-row-last as inline-block at 50%
     with no mobile override. At 390 px that's ~175 px per input — too cramped.
     Stack to full-width here at ≤640 px. */
  .woocommerce-checkout .col2-set .form-row-first,
  .woocommerce-checkout .col2-set .form-row-last {
    display: block !important;
    width: 100% !important;
  }

  /* ── WooCommerce My Account: sidebar nav stacks vertically ── */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-r-md);
    overflow: hidden;
    margin-bottom: var(--hp-sp-6);
  }
  .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--hp-border);
    display: block !important;
  }
  .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
  .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--hp-sp-3) var(--hp-sp-4);
  }

  /* ── Hero typography: scale down for compact 52vh banners ──
     Desktop hero (100svh) has plenty of room for the full type scale.
     Interior heroes at 52vh (≈330px on a 390px screen) need a tighter
     stack so the eyebrow / title / tagline / CTA all fit above the fold.
     Spacing reductions match hp-section tightening above. */
  /* Consistent lift across all hero pages — clears MY LINKS on home (100svh)
     and standardises the content position on interior heroes (70vh). */
  .hp-hero__inner {
    padding-bottom: var(--hp-sp-12);   /* 3rem — was 4rem from the 768px rule */
    transform: translateY(-8rem);
  }
  .hp-hero__eyebrow {
    margin-bottom: var(--hp-sp-2);     /* 0.5rem — was 1rem */
  }
  .hp-hero__title {
    /* Single smooth clamp: tapers 48px (≥640px) → 32px (≤360px) with no
       boundary step. Replaces the old two-tier 640/480 clamps that shared
       9vw but had different ceilings and jumped ~0.5rem at the 480px line. */
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: var(--hp-sp-2);          /* 0.5rem — was 1rem */
  }
  .hp-hero__tagline {
    font-size: var(--hp-text-xl);      /* 1.25rem — was 1.5rem */
    margin-bottom: var(--hp-sp-6);
  }
}

/* ==========================================================================
   ≤ 600px — Header sticky breakpoint
   GP's JS may add inline padding-top to body for the fixed header; once the
   header is position:sticky (hp-base.css line 767) that offset is dead weight
   and creates a cream strip between the sticky bar and hero sections.
   ========================================================================== */

@media (max-width: 600px) {
  body.hp {
    padding-top: 0 !important;
  }

  /* ── Inner-page header: remove dead-weight margin-top ──
     hp-base.css sets .hp-page-header { margin-top: var(--hp-header-h) } (72 px)
     to clear a FIXED header. At ≤600 px the header becomes position:sticky
     (hp-base.css), so the offset is unnecessary dead space. */
  .hp-page-header {
    margin-top: 0;
  }

}

/* ==========================================================================
   ≤ 768px — GP inline-mobile-toggle header fix
   GeneratePress forces #site-navigation to flex-basis:100% at ≤768px so it
   wraps onto its own row inside the header flex container. With a fixed/sticky
   header height of 72px and two rows, align-content:stretch gives each row
   ~36px — the collapsed (empty) nav row appears as a dark band below the
   branding because the header background is transparent. Hiding the nav
   element when not toggled collapses that second flex row to zero height.
   When the hamburger is tapped GP adds .toggled → the :not() stops applying
   → the dropdown opens normally.
   ========================================================================== */
@media (max-width: 768px) {
  .hp #site-navigation:not(.toggled) {
    display: none !important;
  }
}

/* ==========================================================================
   ≤ 480px — Small phones
   ========================================================================== */

@media (max-width: 480px) {

  /* ── Merch + WooCommerce product grid → single column ──
     At 540 px both grids stay 2-column (hp-components.css + hp-shop.css).
     On very small phones (≤ 480 px) collapse to 1-column for comfortable
     card sizing. */
  .hp-merch-grid,
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }

  /* ── Subscription tier cards: full width ── */
  .hp-tier-card {
    width: 100% !important;
    max-width: 360px !important;
  }

  /* ── Hero tagline: drop to body-size on small phones ──
     The title already tapers smoothly via the single clamp in the 640px
     block (clamp(2rem,8vw,3rem)), so it needs no further override here;
     only the tagline steps down to keep the CTA visible in a ~270px hero. */
  .hp-hero__tagline {
    font-size: var(--hp-text-base);    /* 1rem — was 1.25rem at 640px */
  }

  /* ── Schedule calendar: abbreviate day headers at small screens ── */
  .hp-calendar__day-header {
    font-size: 0.6rem;
    padding: var(--hp-sp-1) 0;
  }
  .hp-calendar__cell {
    min-height: 36px;
    font-size: 0.65rem;
  }

  /* ── Schedule calendar scroll container ──
     7 columns at 390 px = ~51 px per col — cells too tight to tap accurately.
     Wrap the calendar in .hp-calendar-scroll (added in page-schedule.php) and
     let it scroll horizontally; the grid holds a comfortable minimum width. */
  .hp-calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-calendar-scroll::-webkit-scrollbar { display: none; }
  .hp-calendar {
    min-width: 380px;
  }
}

/* ==========================================================================
   ≤ 380px — Very small phones (iPhone SE 1st gen, Android budget devices)
   ========================================================================== */

@media (max-width: 380px) {

  /* ── Best-sellers inline grids: force 1-col to prevent overflow ──
     page-best-sellers.php uses inline minmax(320px,1fr) grids. At viewports
     narrower than ~352px (320 px min + 2×16 px content-pad) the grid can't fit
     even one column at its minimum, producing horizontal overflow. Force 1fr. */
  .hp-section .hp-container > div[style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }

}

/* ==========================================================================
   Global overrides (all viewports)
   Loaded after hp-base / hp-components / hp-shop / hp-vault — wins by
   source order on equal-specificity rules.
   ========================================================================== */

/* ── Platform links: suppress iOS tap highlight + kill inherited stroke ──
   iOS Safari renders a semi-transparent blue highlight on <a> tap; setting to
   transparent removes it. stroke: none kills any blue stroke from stroke-based
   SVG icons that inherit stroke="currentColor" from the anchor element. */
.hp-platform-link {
  -webkit-tap-highlight-color: transparent;
}
.hp-platform-link svg {
  stroke: none;
}

/* ── Legal page titles: body-weight heading instead of display serif ──
   page-legal.php renders all five legal pages (Privacy Policy, Terms of
   Service, Returns, Shipping, 18 USC 2257). h1.hp-legal-page-header__title
   inherits the display serif by default; a body-weight heading reads better
   for legal prose. */
.hp-legal-page-header__title {
  font-family: var(--hp-font-body);
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Brand icons in platform bar: full text color, gold on hover ──
   hp-components.css sets fill:var(--hp-text-muted) on .hp-platform-link svg
   (specificity 0,1,1). Brand icons carry class .hp-icon--brand; targeting
   .hp-platform-link .hp-icon--brand wins at specificity 0,2,0, restoring
   recognisable marks to full text contrast. */
.hp-platform-link .hp-icon--brand {
  fill: var(--hp-text);
}
.hp-platform-link:hover .hp-icon--brand {
  fill: var(--hp-gold);
}

/* ==========================================================================
   Reduced motion — WCAG 2.3.3
   Suppress or replace all animations / transitions for users who prefer it.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  /* Kill all transitions and animations globally */
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }

  /* Named animations that must be fully suppressed */
  .hp-badge--live::before {
    animation: none !important;   /* live-badge pulse */
  }
  .hp-btn--loading::after {
    animation: none !important;   /* loading spinner rotation */
  }
  .hp-toast__progress {
    animation: none !important;   /* toast auto-dismiss bar */
    width: 0 !important;          /* collapsed so the bar is invisible */
  }
  html {
    scroll-behavior: auto !important;
  }
}