/* ==========================================================================
   ade-2026-mobile.css  —  ADDITIVE mobile UX / a11y / perf layer
   Target: /css/ade-2026-mobile.css   (load it AFTER the main inline <style>,
   i.e. just before </head>, so equal-specificity "intended overrides" win)

   Rules of this file
   - Everything is scoped to (max-width: 768px) unless the block is marked
     [ALL WIDTHS – SAFE]: those only add behaviour that no existing rule sets
     (reduced-motion, focus-visible, safe-area vars, dvh) or style NEW
     .adeq-* components.
   - :where() = specificity 0. It can never beat an existing rule; it only
     fills gaps. Selectors WITHOUT :where() are deliberate overrides of a
     specific existing mobile rule and are commented "[OVERRIDE] of line N".
   - No new colours: only the palette already in :root / the page
     (#FF9500, #FF6600, #00BFFF, #00FFFF, #0a0a0a, white/alpha-white).
   - No new fonts, no images, nothing above 768px is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. [ALL WIDTHS – SAFE] tokens, text-size-adjust, dvh
   -------------------------------------------------------------------------- */
:root {
  --adeq-sat: env(safe-area-inset-top, 0px);
  --adeq-sar: env(safe-area-inset-right, 0px);
  --adeq-sab: env(safe-area-inset-bottom, 0px);
  --adeq-sal: env(safe-area-inset-left, 0px);
  --adeq-tap: 44px;              /* WCAG 2.5.8 / Apple HIG minimum */
  --adeq-bar-h: 68px;            /* sticky bar height, excl. safe-area */
}

/* iOS Safari inflates text in landscape unless told not to; harmless elsewhere */
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* body already has min-height:100vh (line 457). dvh avoids the iOS
   address-bar jump; 100vh stays as the fallback for old browsers. */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }                        /* [OVERRIDE] line 457 — same intent, better unit */
  .lightbox-content,
  .lightbox-content img,
  .lightbox-content video { max-height: 90dvh; }      /* [OVERRIDE] lines 2118/2125 */
}

/* --------------------------------------------------------------------------
   1. [ALL WIDTHS – SAFE] reduced motion
   The page has 81 animated elements (neon flicker, scan-line, pulsing boxes,
   animated `filter` on a full-screen video) and no prefers-reduced-motion
   rule at all. This is the standard "stop everything" block.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* keep the at-rest look of the pulsing/flickering elements */
  :where(.site-title) {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                 0 0 40px #FF9500, 0 0 70px #FF9500;
  }
  :where(.scan-lines, .laser-overlay, .floating-element) { display: none; }
}

/* --------------------------------------------------------------------------
   2. [ALL WIDTHS – SAFE] visible keyboard focus
   Existing: .exit-email-input:focus { outline:none } (line 2822); all other
   controls rely on the UA ring, which is invisible on the orange gradients.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--neon-cyan, #00FFFF);
  outline-offset: 3px;
  border-radius: 4px;
}
/* same specificity (0,2,0) as line 2822, later in cascade → wins, but only
   for keyboard focus; mouse/touch focus keeps the existing no-outline look */
.exit-email-input:focus-visible { outline: 3px solid var(--neon-cyan, #00FFFF); outline-offset: 2px; }

/* Anchor targets (#faq, #media-gallery, #access-form) stop under a sticky nav/bar */
:where([id]) { scroll-margin-top: calc(var(--adeq-sat) + 1rem); }

/* --------------------------------------------------------------------------
   3. MOBILE LAYER  ≤ 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* 3.1 Page gutters + safe areas -------------------------------------- */
  /* [OVERRIDE] line 694  .container{padding:2rem}. 32px gutters on a 390px
     phone leave 326px for content; 16px (+ notch inset) leaves 358px. */
  .container {
    padding: 1.25rem max(1rem, var(--adeq-sar)) 1.5rem max(1rem, var(--adeq-sal));
  }
  :where(.site-footer) {
    padding-left: max(1rem, var(--adeq-sal));
    padding-right: max(1rem, var(--adeq-sar));
  }
  /* media never wider than its box (inline height:250px etc. still win) */
  :where(img, video, iframe, svg) { max-width: 100%; }
  :where(pre, table) { max-width: 100%; overflow-x: auto; }

  /* 3.2 Readability — 16px floor for body copy ------------------------- */
  /* [OVERRIDE] lines 1512-1514 (.blog-card p 0.95rem @480) and 1038-1041 */
  .blog-card p            { font-size: 1rem; line-height: 1.6; }
  .blog-card .meta        { font-size: 0.9375rem; }         /* 15px, meta/secondary */
  :where(.section-subtitle, .gallery-subtitle, .countdown-subtitle,
         .exit-popup-body ul li, .exit-popup-header p, .faq-answer, .faq-answer p,
         .access-cta p, .gallery-cta p) { font-size: 1rem; }
  /* [OVERRIDE] lines 954-956 (.countdown-label 0.75rem @480) + line 892 */
  .countdown-label        { font-size: 0.8125rem; letter-spacing: 0.08em; }  /* 13px caps label – allowed exception, uppercase */
  /* [OVERRIDE] line 1545 / 1529-1532 */
  .login-hint             { font-size: 0.9375rem; }
  .read-more-btn          { font-size: 1rem; }
  .stat-label             { font-size: 0.9375rem; }

  /* long words / URLs in cards must wrap, never overflow */
  :where(.blog-card h3, .blog-card p, .faq-question, .faq-answer, .carousel-caption h4) {
    overflow-wrap: anywhere;
  }

  /* 3.3 Countdown: on 390px the 4 units + 3 separators wrap to 3+1 with a
     dangling ":" (measured). Make it a 4-column grid and drop separators. */
  /* [OVERRIDE] lines 863-868 / 928-934 */
  .countdown-display {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    justify-items: center;
  }
  .countdown-unit      { min-width: 0; }
  .countdown-separator { display: none; }
  .countdown-number    { font-variant-numeric: tabular-nums; }   /* no jitter each second */

  /* 3.4 Tap targets ≥ 44×44 -------------------------------------------- */
  /* generic floor for anything button-like; none of these set min-height */
  :where(.cta-button, .cta-button-large, .read-more-btn, .show-more-btn,
         .login-btn, .gallery-cta-btn, .creator-cta-btn, .creator-login-btn,
         .creator-apply-btn, .exit-submit-btn, .nav-item, .nav-toggle) {
    min-height: var(--adeq-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* "Login" inside .login-hint measured 37×15. Grow the hit box with padding
     and cancel it with negative margin so the visual layout is unchanged. */
  :where(.login-hint a) {
    display: inline-block;
    padding: 0.75rem 0.5rem;
    margin: -0.75rem -0.5rem;
  }
  /* footer links measured 34px tall → [OVERRIDE] line 4186 (padding .25rem 0).
     That rule lives in a <style> inside <body> (line 4126+), i.e. AFTER this
     sheet in the cascade, so it needs one extra class of specificity. */
  .site-footer .footer-links a { padding: 0.6rem 0; }   /* 16px*1.6 + 19.2 = 44.8px */
  /* "Login Here" in #access-form (line 4065, inline-styled) measured 71×15 */
  :where(.access-cta p a) { display: inline-block; padding: 0.75rem 0.5rem; margin: -0.75rem -0.5rem; }

  /* carousel arrows are 40px (!important @480, line 2540) — extend the hit
     area with a pseudo-element instead of fighting !important */
  :where(.carousel-nav)         { position: absolute; }             /* already is */
  :where(.carousel-nav)::after  { content: ""; position: absolute; inset: -8px; }
  /* indicators measured 6×10px (19 dots squeezed, flex-shrink). Let them
     wrap and give each a 44px invisible hit area. */
  :where(.carousel-indicators)  { flex-wrap: wrap; row-gap: 14px; padding: 0 0.5rem; }
  :where(.carousel-indicator)   { position: relative; flex-shrink: 0; }
  :where(.carousel-indicator)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 24px; height: 36px; transform: translate(-50%, -50%);
  }
  /* exit popup close button is 35px → [OVERRIDE] lines 2746-2747 */
  .exit-close-btn { width: 44px; height: 44px; top: 0.75rem; right: 0.75rem; }
  .lightbox-close, .lightbox-prev, .lightbox-next { min-width: 44px; min-height: 44px; }

  /* 3.5 Cards / grids ---------------------------------------------------- */
  /* .blog-grid is already 1 column ≤768 (line 1875). Defensive fallbacks for
     grids that may exist in production but not in this copy. */
  :where(.event-grid, .resource-grid, .media-grid, .premium-preview, .faq-grid,
         .benefits-grid, .ade-events-grid, .event-list) {
    grid-template-columns: minmax(0, 1fr);
  }
  :where(.blog-card)          { gap: 0.25rem; }
  :where(.blog-card .card-actions) { gap: 0.75rem; }
  /* 481–768px: h3 keeps padding-right:120px for the badge (line 1477) which
     squeezes titles on 600px tablets; badge is absolutely positioned so the
     title can flow under it once it wraps. */
  :where(.blog-card h3)       { text-wrap: balance; }

  /* 3.6 Sticky header behaviour (member nav, present only when logged in) */
  /* [OVERRIDE] line 1621 .main-nav{position:relative} */
  .main-nav {
    position: sticky;
    top: var(--adeq-sat);
    z-index: 900;                       /* below scan-lines(999) & modals(10000) */
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* 3.7 Exit-intent popup: measured 790px tall on an 844px viewport (94%).
     Overlay is align-items:center with overflow visible → on a 667px phone
     the header and close button are clipped off-screen. */
  :where(.exit-intent-overlay) { overflow-y: auto; padding: var(--adeq-sat) 0 var(--adeq-sab); }
  :where(.exit-popup) {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* [OVERRIDE] 2733 / 2775 — tighter padding so the form is reachable */
  .exit-popup-header { padding: 1.25rem 3.25rem 1rem 1.25rem; }
  .exit-popup-body   { padding: 1.25rem; }
  .exit-popup-body ul{ margin: 1rem 0; }
  :where(.exit-email-input) { min-height: 48px; font-size: 1rem; }   /* 16px → no iOS zoom */
  :where(.exit-submit-btn)  { min-height: 48px; }

  /* 3.8 Performance: the full-screen background video has an animated
     `filter` (videoGlow, line 497) and sits under a full-screen
     backdrop-filter. On phones that is a per-frame GPU re-filter.
     Freeze the animation at its at-rest state (identical look, no pulse). */
  /* [OVERRIDE] lines 513-522 — same filter values as the 0%/100% keyframe */
  .video-background-container video {
    animation: none;
    opacity: 0.85;
    filter: blur(0.5px) saturate(1.6) contrast(1.2) brightness(1.2);
  }
  /* floating blobs are decorative and off-canvas on phones */
  :where(.floating-element) { display: none; }
}

@media (max-width: 480px) {
  /* [OVERRIDE] lines 537-546 — keep the @480 at-rest values */
  .video-background-container video {
    opacity: 0.8;
    filter: blur(0.75px) saturate(1.55) contrast(1.18) brightness(1.18);
  }
  :where(.carousel-caption h4) { font-size: 1.0625rem; }
  /* FAQ section has 3rem/2rem padding; on 360-390px phones that is a lot */
  :where(.faq-section) { padding-left: 1rem; padding-right: 1rem; }
}

/* ==========================================================================
   4. NEW COMPONENTS  .adeq-bar  (sticky bottom CTA)  +  .adeq-form
   Hidden on desktop. Rendered only when JS adds `.adeq-bar--show`.
   Height ≈ 68px + safe-area  → ≤ 25% of a 568px viewport (iPhone SE),
   so it is not an "intrusive interstitial" under Google's guidance.
   ========================================================================== */
.adeq-bar {
  display: none;                               /* desktop + pre-JS: nothing */
}
/* reserve space so the bar never covers the footer / last CTA */
body.adeq-has-bar { padding-bottom: calc(var(--adeq-bar-h) + var(--adeq-sab) + 8px); }

@media (max-width: 768px) {
  .adeq-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;                              /* above scan-lines(999), below modals(10000) */
    display: block;
    box-sizing: border-box;
    padding: 0.5rem max(0.75rem, var(--adeq-sar)) calc(0.5rem + var(--adeq-sab)) max(0.75rem, var(--adeq-sal));
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.92), rgba(10, 5, 20, 0.97));
    border-top: 1px solid rgba(255, 149, 0, 0.45);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;        /* existing body font */
    transform: translateY(110%);
    transition: transform 0.3s ease;
    max-height: 25vh;                           /* hard cap: interstitial guidance */
    max-height: 25dvh;
    overflow: hidden;
  }
  .adeq-bar--show      { transform: translateY(0); }
  .adeq-bar[hidden]    { display: none; }
  .adeq-bar--footer    { transform: translateY(110%); }   /* JS adds when footer is in view */

  .adeq-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 640px;
    margin: 0 auto;
  }
  .adeq-bar__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .adeq-bar__label small {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
  }
  .adeq-bar__close {
    flex: 0 0 auto;
    width: var(--adeq-tap);
    height: var(--adeq-tap);
    margin: 0 -0.25rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .adeq-bar__close:active { background: rgba(255, 255, 255, 0.12); }

  /* --- quick signup form: email + button, both 48px, input 16px ---------- */
  .adeq-form {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
    margin: 0;
  }
  .adeq-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 0.875rem;
    border: 2px solid rgba(255, 149, 0, 0.45);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: 500 16px/1 'Rajdhani', sans-serif;    /* 16px → iOS does not zoom */
    -webkit-appearance: none;
    appearance: none;
  }
  .adeq-form__input::placeholder { color: rgba(255, 255, 255, 0.55); }
  .adeq-form__input:focus { border-color: #FF9500; background: rgba(255, 255, 255, 0.1); outline: none; }
  .adeq-form__input:focus-visible { outline: 3px solid var(--neon-cyan, #00FFFF); outline-offset: 2px; }
  .adeq-form__input:user-invalid { border-color: #FF6600; }

  .adeq-form__btn {
    flex: 0 0 auto;
    height: 48px;
    min-width: 48px;
    padding: 0 1rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF9500, #FF6600);   /* existing CTA gradient */
    color: #0A0A0A;                                           /* 9.5:1 on orange (white would be 2.2:1) */
    font: 700 1rem/1 'Rajdhani', sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.35);
  }
  .adeq-form__btn:disabled { opacity: 0.6; cursor: progress; }

  /* inline status (success / error) replaces the form row */
  .adeq-form__status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.3;
  }
  .adeq-form__status--ok  { color: #00FFFF; }
  .adeq-form__status--err { color: #FF9500; }

  /* when a modal is open the bar is irrelevant and must not stack on it.
     (CSS belt-and-braces; the JS also hides it via MutationObserver.) */
  body:has(.exit-intent-overlay.active) .adeq-bar,
  body:has(.lightbox-modal.active) .adeq-bar { transform: translateY(110%); }

  /* very short landscape phones: collapse to a single row (label hidden) */
  @media (max-height: 480px) {
    .adeq-bar__label { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .adeq-bar { transition: none; }
}

/* phase 6b mobile */
/* ==========================================================================
   ade-2026-mobile.css — phase 6B additions. APPEND to the file.
   Scope: #ade-2026-confirmed, #events / .event-card, .adeup-*, #adeLive /
   .ade-countdown, .adeq-bar, #iiadim-consent. ≤768px only. No new colours.
   `!important` is used ONLY where the property is set by an inline
   style="" attribute in the markup (noted per rule); nothing else in the
   page can be reached without it and the markup is out of scope.
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- 1. #ade-2026-confirmed: gutters, list rhythm, day tags, links -----
     Measured at 360px: section padding 32px → 264px of text (inside the
     16px .container gutter). 20px/16px gives 296px. */
  #ade-2026-confirmed { padding: 1.25rem 1rem !important; }      /* inline style: padding: 2rem */
  #ade-2026-confirmed h2 { overflow-wrap: anywhere; }
  #ade-2026-confirmed p, #ade-2026-confirmed li { overflow-wrap: anywhere; }
  /* 27 items in one column: hairline between items so the eye can find the next one.
     li has inline display:flex / gap / margin-bottom; padding + border are free. */
  #ade-2026-confirmed ul > li { padding-bottom: .6rem; border-bottom: 1px solid rgba(255, 149, 0, .14); }
  #ade-2026-confirmed ul > li:last-child { border-bottom: 0; }
  /* day tag "Wed 21": inline font-size:.8em (12.8px) → 14px, keep on one line */
  #ade-2026-confirmed li > span > strong:first-child { font-size: .875em !important; white-space: nowrap; }  /* inline style: font-size:.8em */
  /* every link here is inline text (18px tall): +4px top/bottom → 26px hit box ≥ WCAG 2.5.8 minimum,
     without moving a line box. The border-bottom "underline" is inline too and stays where it is. */
  #ade-2026-confirmed a { padding-block: 4px; }

  /* ---- 2. #events (tonight cards): gutters, 44px "View Details" --------- */
  .event-schedule { padding: 1.25rem 1rem; }                      /* [OVERRIDE] 2rem */
  .event-card { padding: 1rem; }                                  /* [OVERRIDE] 1.5rem (inline style sets only background/border) */
  .event-details h4 { overflow-wrap: anywhere; }
  .schedule-update { font-size: .9rem; }                          /* [OVERRIDE] .85rem = 13.6px → 14.4px */
  .artists { font-size: .9rem; }                                  /* [OVERRIDE] .85rem = 13.6px → 14.4px */
  .artists > span[style] { font-size: .8125rem !important; padding: 3px 10px !important; }  /* inline pill: .78rem → 13px, same as hub .hub-s */
  /* "View Details →" measured 97×16px, the card's only action */
  .event-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .25rem;
    margin: -.5rem -.25rem;                                        /* keeps the card's visual rhythm (+12px net) */
  }
  .event-schedule > p[style] .event-link { margin: 0; }           /* the two centred closing links: let them sit on 44px rows */

  /* ---- 3. .adeup-* guides grid ------------------------------------------
     .adeup-wrap adds 1rem gutters inside the .container's 1rem → 296px cards at 360px.
     Its <style> is in <body> (after this sheet) so the selector needs one more unit. */
  section.adeup-wrap { padding-left: 0; padding-right: 0; }
  .adeup-card { min-height: 44px; }
  a.adeup-cta { display: inline-flex; align-items: center; min-height: 44px; }   /* inline-block ~22px → 44px */
  .adeup-t, .adeup-d { overflow-wrap: anywhere; }

  /* ---- 4. #adeLive / .ade-countdown (live mode) --------------------------
     Live mode shows 2 units + 1 separator inside the 4-column grid from §3.3
     above → both units sit in columns 1–2, left of centre (measured). Only when
     the card carries data-day (live) switch to a centred 2-column grid; the
     pre-event 4-unit countdown keeps the 320px fix untouched. */
  #adeLive[data-day] .countdown-display {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
  /* "Happening now" / "Tonight" lists: 17px inline links → 25px hit boxes */
  #adeLiveNow a, #adeLiveNext a { padding-block: 4px; }
  #adeLiveNow li, #adeLiveNext li { overflow-wrap: anywhere; }
  /* the four CTA buttons under the live card: full-width stack is already 44px+;
     make sure the orange one matches the glass ones in width */
  #adeLive .cta-button { width: 100%; max-width: 300px; text-align: center; }

  /* ---- 5. Sticky bars ---------------------------------------------------
     #iiadim-consent: 138px tall at ≤480px, env(safe-area-inset-bottom) already
     in its padding, body padding-bottom set by JS (146px) so nothing is covered
     at the page bottom (measured: 0 elements behind it). Only gap: a very short
     landscape phone (≤480px tall) loses 29% of the viewport to it. */
  @media (max-height: 480px) {
    #iiadim-consent { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; }
    #iiadim-consent .ic-txt { flex: 1 1 240px !important; }
  }
  /* .adeq-bar and #iiadim-consent must never stack: the JS already suppresses the
     bar while consent is open; belt-and-braces for the race on first paint. */
  body:has(#iiadim-consent) .adeq-bar { transform: translateY(110%); }
  #iiadim-consent a { padding-block: 4px; }                      /* its inline text link is 17px tall → 25px hit box */
}

/* ---- 6. ≤480px: tighter still -------------------------------------------- */
@media (max-width: 480px) {
  .event-schedule h3 { font-size: 1.3rem; overflow-wrap: anywhere; }   /* [OVERRIDE] 1.5rem; 24px→21px on a 296px column */
}