/* ==========================================================
   responsive.css — RESPONSIVE OVERRIDES ONLY
========================================================== */

/* ==========================================================
   GLOBAL TOKENS
========================================================== */
:root{
  --edge-inset: 24px;

  /* NAV defaults */
  --nav-gap: 14px;
  --nav-font: 15px;
  --nav-letter: 0.45px;
  --nav-side: 62px;

  /* vertical rhythm */
  --section-gap: 8px;
  --section-gap-soft: 16px;

  /* countdown sizing (default desktop-ish) */
  --cd-ring: 124px;
  --cd-gap: 18px;
  --cd-num: 32px;
  --cd-label: 12px;

  /* carousel defaults (only used when bands apply) */
  --lr-carousel-maxw: 716px;
  --lr-carousel-h: 480px;
  --lr-carousel-side-gap: 140px;

  /* fixed music safety space (only when applied) */
  --music-safe-h: 86px;

  /* ---- FAN TOKENS (match fan-menu.css defaults) ---- */
  --fan-left: var(--edge-inset);
  --fan-gap: 24px;
  --fan-btn: 52px;
  --header-stack: 178px;
  --fan-top: calc(var(--header-stack) - (var(--fan-btn) / 2));

  /* ---- LANG MENU GAP (matches lang-menu.css) ---- */
  --lang-menu-gap: 14px;
}

/* Language overrides (NAV TOKENS ONLY) */
html[lang="it"]{
  --nav-gap: 10px;
  --nav-font: 13.6px;
  --nav-letter: 0.25px;
  --nav-side: 52px;
}
html[lang="es"]{
  --nav-gap: 11px;
  --nav-font: 14px;
  --nav-letter: 0.30px;
  --nav-side: 54px;
}

/* ==========================================================
   DESKTOP / TABLET HEADER MODE (navbar visible) — 769+
   KEY FIX:
   - The language switcher is mounted into .nav-lang-slot (NOT #lang-switcher-container)
   - Pin .nav-lang-slot to the page edge inset.
========================================================== */
@media (min-width: 769px){

  /* Make the nav full-width positioning context */
  #navbar-container nav.navbar{
    position: relative !important;
  }

  /* Container must not add padding that breaks edge math */
  #navbar-container nav.navbar .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative !important; /* anchor for absolute child */
  }

  /* Center navigation stays centered */
  #nav-option-container{
    flex-wrap: nowrap !important;
    width: 100% !important;
    justify-content: center !important;
    gap: var(--nav-gap) !important;
  }

  .nav-options a{
    font-size: var(--nav-font) !important;
    letter-spacing: var(--nav-letter) !important;
    white-space: nowrap !important;
  }

  .nav-side-spacer{
    flex: 0 0 var(--nav-side) !important;
    min-width: var(--nav-side) !important;
  }

  /* ✅ Real desktop mount — pinned to edge inset */
  .nav-lang-slot{
    position: absolute !important;
    right: var(--edge-inset) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 9999 !important;
  }

  /* Desktop title mount is NOT used; keep it neutral */
  #lang-switcher-container{
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }

  /* Dropdown anchor safety */
  #lang-switcher{
    position: relative !important;
  }
}

/* ==========================================================
   NAV FIT BANDS (tokens only)
========================================================== */
@media (max-width: 1221px){
  :root{
    --nav-gap: 13px;
    --nav-font: 14.6px;
    --nav-letter: 0.35px;
    --nav-side: 60px;
  }
  html[lang="it"]{
    --nav-gap: 9px;
    --nav-font: 13.2px;
    --nav-letter: 0.18px;
    --nav-side: 48px;
  }
  html[lang="es"]{
    --nav-gap: 10px;
    --nav-font: 13.6px;
    --nav-letter: 0.22px;
    --nav-side: 50px;
  }
}

@media (max-width: 930px){
  :root{
    --nav-gap: 12px;
    --nav-font: 14px;
    --nav-letter: 0.25px;
    --nav-side: 54px;
  }
  html[lang="it"]{
    --nav-gap: 8px;
    --nav-font: 12.8px;
    --nav-letter: 0.10px;
    --nav-side: 44px;
  }
  html[lang="es"]{
    --nav-gap: 9px;
    --nav-font: 13px;
    --nav-letter: 0.12px;
    --nav-side: 46px;
  }
}

/* ==========================================================
   TABLET — ≤1100px
========================================================== */
@media (max-width: 1100px){

  :root{
    --section-gap: 8px;
    --section-gap-soft: 16px;

    /* Carousel sizing */
    --lr-carousel-maxw: 716px;
    --lr-carousel-h: 480px;
    --lr-carousel-side-gap: 140px;

    /* music safety */
    --music-safe-h: 86px;
  }

  nav.navbar,
  nav.navbar .container-fluid{
    min-height: 66px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Music/List pills */
  #musicToggle{
    transform-origin: bottom left;
    transform: translateY(6px) scale(0.9);
  }
  #playlistToggle{
    transform-origin: bottom right;
    transform: translateY(6px) scale(0.9);
  }

  /* Equal vertical rhythm */
  #navbar-container + #countdown-container{ margin-top: var(--section-gap) !important; }
  #countdown-container + #carousel-container{ margin-top: var(--section-gap) !important; }
  #carousel-container + .welcome{ margin-top: var(--section-gap-soft) !important; }

  /* Kill mystery margins inside countdown */
  #countdown-container{ margin: 0 !important; padding: 0 !important; }
  #countdown-container > *{ margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Neutralize carousel margins */
  #carousel-container,
  .lr-carousel{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ==========================================================
   HOMEPAGE SAFETY — ≤1030px
========================================================== */
@media (max-width: 1030px){
  #carousel-container{ padding-bottom: var(--music-safe-h) !important; }
}

/* ==========================================================
   TIGHTER BAND — ≤980px
   - safe countdown resize (no transforms)
   - ✅ ALSO shrink FAN + LANGUAGE together here
========================================================== */
@media (max-width: 980px){

  :root{
    --section-gap: 20px;
    --section-gap-soft: 20px;

    --lr-carousel-maxw: 668px;
    --lr-carousel-h: 450px;
    --lr-carousel-side-gap: 96px;

    --cd-ring: 118px;
    --cd-gap: 16px;
    --cd-num: 30px;
    --cd-label: 11px;

    --music-safe-h: 92px;

    /* ✅ shrink header UI together */
    --fan-btn: 48px;
    --fan-gap: 20px;
    --fan-top: calc(var(--header-stack) - (var(--fan-btn) / 2));
  }

  nav.navbar{
    padding: 6px 0;
    min-height: auto;
  }
  nav.navbar .container-fluid{
    min-height: auto;
  }

  #musicToggle{ transform-origin: bottom left; transform: translateY(6px) scale(0.88); }
  #playlistToggle{ transform-origin: bottom right; transform: translateY(6px) scale(0.88); }

  /* countdown: NO scale, kill margins */
  #countdown-container{ margin: 0 !important; padding: 0 !important; transform: none !important; }
  #countdown-container > *{ margin-top: 0 !important; margin-bottom: 0 !important; }

  /* countdown resize via tokens */
  #premium-countdown-wrapper{ transform: none !important; }

  #rings{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--cd-gap) !important;
  }

  #rings .ring{
    width: var(--cd-ring) !important;
    height: var(--cd-ring) !important;
    flex: 0 0 var(--cd-ring) !important;
  }

  #rings .ring svg{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  #rings .ring-value{
    font-size: var(--cd-num) !important;
    line-height: 1 !important;
  }

  #rings .ring-label{
    font-size: var(--cd-label) !important;
    line-height: 1 !important;
  }

  /* equal rhythm */
  #navbar-container + #countdown-container{ margin-top: var(--section-gap) !important; }
  #countdown-container + #carousel-container{ margin-top: var(--section-gap) !important; }
  #carousel-container + .welcome{ margin-top: var(--section-gap-soft) !important; }

  /* prevent music overlap */
  #carousel-container{ padding-bottom: var(--music-safe-h) !important; }

  /* ==========================================================
     ✅ FAN shrink follows tokens (fan-menu.css uses --fan-btn/--fan-gap/--fan-top)
  ========================================================== */
  #fan-home-btn,
  .fan-petal{
    width: var(--fan-btn) !important;
    height: var(--fan-btn) !important;
  }

  #fan-menu{
    gap: var(--fan-gap) !important;
  }

  /* ==========================================================
     ✅ LANGUAGE shrink (override lang-menu.css sizes)
  ========================================================== */
  #lang-toggle{
    padding: 6px 10px !important;
    min-width: 44px !important;
  }

  .lang-flag{
    width: 26px !important;
    height: 26px !important;
  }

  #lang-menu{
    padding: 8px 6px !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================
   ≤900px — carousel squeeze + a bit more UI shrink
========================================================== */
@media (max-width: 900px){

  :root{
    --section-gap: 14px;
    --section-gap-soft: 18px;

    --lr-carousel-maxw: 640px;
    --lr-carousel-h: 430px;
    --lr-carousel-side-gap: 84px;

    --music-safe-h: 96px;

    /* ✅ slightly smaller again */
    --fan-btn: 46px;
    --fan-gap: 18px;
    --fan-top: calc(var(--header-stack) - (var(--fan-btn) / 2));
  }

  .lr-carousel{
    width: calc(100% - var(--lr-carousel-side-gap)) !important;
    max-width: var(--lr-carousel-maxw) !important;
    padding: 0 !important;
  }

  .lr-carousel-frame{
    height: var(--lr-carousel-h) !important;
  }

  #navbar-container + #countdown-container{ margin-top: var(--section-gap) !important; }
  #countdown-container + #carousel-container{ margin-top: var(--section-gap) !important; }
  #carousel-container + .welcome{ margin-top: var(--section-gap-soft) !important; }

  #carousel-container{ padding-bottom: var(--music-safe-h) !important; }

  #countdown-container{ margin: 0 !important; padding: 0 !important; }
  #countdown-container > *{ margin-top: 0 !important; margin-bottom: 0 !important; }

  /* ✅ fan button size follows token */
  #fan-home-btn,
  .fan-petal{
    width: var(--fan-btn) !important;
    height: var(--fan-btn) !important;
  }
  #fan-menu{ gap: var(--fan-gap) !important; }

  /* ✅ language slightly smaller again */
  #lang-toggle{
    padding: 6px 9px !important;
    min-width: 42px !important;
  }
  .lang-flag{
    width: 25px !important;
    height: 25px !important;
  }
}

/* ==========================================================
   ≤890px — final squeeze before mobile
========================================================== */
@media (max-width: 890px){

  :root{
    --section-gap: 10px;
    --section-gap-soft: 18px;

    --music-safe-h: 104px;

    --lr-carousel-maxw: 594px;
    --lr-carousel-h: 400px;
    --lr-carousel-side-gap: 72px;

    --cd-ring: 116px;
    --cd-gap: 12px;
    --cd-num: 28px;
    --cd-label: 10px;

    /* ✅ tiny final desktop shrink */
    --fan-btn: 44px;
    --fan-gap: 16px;
    --fan-top: calc(var(--header-stack) - (var(--fan-btn) / 2));
  }

  #countdown-container{ margin: 0 !important; padding: 0 !important; transform: none !important; }
  #countdown-container > *{ margin-top: 0 !important; margin-bottom: 0 !important; }
  #premium-countdown-wrapper{ transform: none !important; }

  #rings{ gap: var(--cd-gap) !important; }
  #rings .ring{ width: var(--cd-ring) !important; height: var(--cd-ring) !important; flex: 0 0 var(--cd-ring) !important; }
  #rings .ring-value{ font-size: var(--cd-num) !important; }
  #rings .ring-label{ font-size: var(--cd-label) !important; }

  #navbar-container + #countdown-container{ margin-top: var(--section-gap) !important; }
  #countdown-container + #carousel-container{ margin-top: var(--section-gap) !important; }
  #carousel-container + .welcome{ margin-top: var(--section-gap-soft) !important; }

  #carousel-container{ padding-bottom: var(--music-safe-h) !important; }

  .lr-carousel{
    width: calc(100% - var(--lr-carousel-side-gap)) !important;
    max-width: var(--lr-carousel-maxw) !important;
    padding: 0 !important;
  }
  .lr-carousel-frame{ height: var(--lr-carousel-h) !important; }

  /* ✅ fan */
  #fan-home-btn,
  .fan-petal{
    width: var(--fan-btn) !important;
    height: var(--fan-btn) !important;
  }
  #fan-menu{ gap: var(--fan-gap) !important; }

  /* ✅ language */
  #lang-toggle{
    padding: 5px 9px !important;
    min-width: 40px !important;
  }
  .lang-flag{
    width: 24px !important;
    height: 24px !important;
  }
}

/* ==========================================================
   MOBILE MODE — ≤768px
========================================================== */
@media (max-width: 768px){

  #navbar-container{ display: none !important; }

  /* Title row layout */
  #title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 14px 14px;
  }

  #title-text{
    position: static !important;
    transform: none !important;
    margin: 0 auto;
    padding: 0;
    line-height: 1.15;
    font-size: 46px;
    white-space: nowrap;
  }

  #fan-menu-container{
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: 3000;
  }

  #lang-switcher-container{
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    z-index: 3000 !important;
  }

  /* Fan fixed on mobile */
  #fan-menu{
    position: fixed;
    left: 14px;
    top: 18px;
  }

  #musicToggle{ transform-origin: bottom left; transform: translateY(6px) scale(0.85); }
  #playlistToggle{ transform-origin: bottom right; transform: translateY(6px) scale(0.85); }

  /* dropdown anchor on mobile */
  #lang-switcher{ position: relative !important; }
}

/* ==========================================================
   VERY SMALL PHONES — ≤420px
========================================================== */
@media (max-width: 420px){
  #title-text{ font-size: 40px; }
  #musicToggle{ transform-origin: bottom left; transform: translateY(6px) scale(0.8); }
  #playlistToggle{ transform-origin: bottom right; transform: translateY(6px) scale(0.8); }
}