/*
 * responsive.css — WakaStream Player
 * All breakpoints in one file. Import AFTER style.css.
 *
 * Breakpoints:
 *   Phone        max-width: 480px
 *   Tablet       481px – 1024px
 *   Laptop       1025px – 1440px
 *   TV / Large   1441px and above
 *
 * TV rules (critical):
 *   – All font sizes ×1.4 (viewed from 2–3 m)
 *   – All interactive elements min-height: 80px (remote navigation)
 *   – Thick neon-green :focus outline (arrow-key cursor)
 *   – No hover-only interactions
 *   – Full keyboard / arrow-key navigation support
 */

/* ─────────────────────────────────────────────────────────────
   GLOBAL FOCUS — visible on ALL sizes, critical for TV remote
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid #39FF14;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   PHONE  ≤ 480px
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* ── Splash — phone ── */
  .splash-logo         { gap: 10px; margin-bottom: 28px; }
  .splash-logo-icon    { width: 52px; height: 52px; }
  .splash-logo-wordmark { font-size: 32px; letter-spacing: 3px; }
  .splash-tagline      { font-size: 15px; margin-bottom: 32px; line-height: 1.5; }
  .splash-btns         { max-width: 100%; gap: 10px; }
  .splash-btn          { min-height: 56px; font-size: 15px; }
  .splash-content      { padding: 16px 16px 28px; }
  .splash-note         { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────
   TABLET  481px – 1024px
───────────────────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 1024px) {
  /* ── Splash — tablet ── */
  .splash-logo-icon    { width: 66px; height: 66px; }
  .splash-logo-wordmark { font-size: 48px; }
  .splash-tagline      { font-size: 19px; }
  .splash-btns         { max-width: 420px; }
  .splash-btn          { min-height: 62px; font-size: 17px; }
}

/* ─────────────────────────────────────────────────────────────
   LAPTOP  1025px – 1440px
───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* ── Splash — laptop ── */
  .splash-logo-wordmark { font-size: 60px; }
  .splash-tagline      { font-size: 23px; }
  .splash-btn          { min-height: 68px; font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────
   TV / LARGE SCREEN  ≥ 1441px
───────────────────────────────────────────────────────────── */
@media (min-width: 1441px) {

  /* ── Typography: all text ×1.4 ── */
  body                { font-size: 1.4rem; }
  h1                  { font-size: calc(1.4 * 2rem); }
  h2                  { font-size: calc(1.4 * 1.5rem); }
  h3                  { font-size: calc(1.4 * 1.25rem); }

  /* ── Touch/click targets → 80px min for remote ── */
  button,
  [role="button"],
  a,
  input,
  select,
  .nav-item,
  .vod-card,
  .ch-card {
    min-height: 80px;
  }

  /* ── Focus ring: extra thick for TV distance ── */
  :focus-visible {
    outline: 5px solid #39FF14;
    outline-offset: 5px;
  }

  /* ── Splash — TV ── */
  .splash-logo         { gap: 20px; margin-bottom: 48px; }
  .splash-logo-icon    { width: 96px; height: 96px; }
  .splash-logo-wordmark { font-size: 72px; letter-spacing: 7px; }
  .splash-tagline      { font-size: 28px; margin-bottom: 52px; }
  .splash-btns         { max-width: 560px; gap: 18px; }
  .splash-btn          { min-height: 90px; font-size: 22px; border-radius: 60px; }
  .splash-note         { font-size: 16px; margin-top: 24px; }
}