/* ───────────────────
   THEME TOKENS
   ─────────────────── */
:root {
  --sidebar-width: clamp(220px, 80vw, 260px);
  --sidebar-bg: #f4f4f4;
  --sidebar-border: #ddd;
  --primary-color: #e0e0e0; 
  --text-color: #333;
  --transition-speed: 0.3s;
  --font-family: 'Segoe UI', Tahoma, sans-serif;
  --mobile-breakpoint: 768px;
 --accent-color:      #0077ff;        /* highlight for active tab underline */
  --surface-hover:     #f3f3f3;        /* subtle hover / focus bg */
  --player-overlay:    rgba(0,0,0,.6); /* un‑mute button backdrop */
}

/* ───────────────────
   LIGHT + DARK COLOR-SCHEME SUPPORT
   ─────────────────── */

/* 0. Tell the browser we handle both modes */
html { color-scheme: light dark; }

/* 1. Dark-mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --sidebar-bg: #1e1e1e;
    --sidebar-border: #444;
    --primary-color: #444444; 
    --text-color: #e0e0e0;
 --accent-color:   #2196f3;  /* slightly brighter for dark UI */
    --surface-hover:  #2a2a2a;  /* dark neutral hover */
  }

  /* Page chrome */
  html  { color-scheme: dark; }   /* explicit for Safari iOS */
  body  { background: #121212; color: var(--text-color); }

  /* Backdrop contrast */
  .overlay { background: rgba(255, 255, 255, 0.12); }

  /* Scrollbar track/thumb in sidebar */
  #sidebar::-webkit-scrollbar-track { background: #222; }
  #sidebar::-webkit-scrollbar-thumb { background: #444; }

  /* Maintain readable hover state */
  #sidebar nav a:hover,
  #sidebar nav a:focus { background: var(--primary-color);  color: #fff;   }
}


/* ───────────────────
   RESET / BASE
   ─────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: var(--font-family);
  scroll-behavior: smooth;
  font-size: clamp(14px, 1.2vw, 18px);
  scrollbar-gutter: stable;         /* prevent layout shift on lock / unlock */
}

body { min-height: 100vh; overflow-x: hidden; }

/* Skip-link helpers */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visually-hidden.focusable:focus,
.visually-hidden.focusable:active {
  position: fixed !important; inset: 1rem auto auto 1rem;
  width: auto; height: auto; margin: 0; padding: 0.5rem 1rem;
  background: #000; color: #fff; z-index: 1100; border-radius: .5rem;
}

/* ───────────────────
   LAYOUT WRAPPER
   ─────────────────── */
.container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  width: 100%;
}

/* ───────────────────
   OVERLAY / BACKDROP
   ─────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-speed) ease;
  z-index: 500;
}
.overlay.show { opacity: 1; visibility: visible; }

/* ───────────────────
   SIDEBAR
   ─────────────────── */
#sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-width); max-width: 80%;
  height: 100vh;
  background: var(--sidebar-bg);
  padding: 1rem; overflow-y: auto;
  border-right: 1px solid var(--sidebar-border);
  transform: translateX(0);
  transition: transform var(--transition-speed) ease;
  z-index: 1000;
}
#sidebar h1 { margin-bottom: 1rem; font-size: 1.5rem; }

#sidebar input[type="search"] {
  width: 100%; padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc; border-radius: 20px;
}

#sidebar nav ul { list-style: none; }

#sidebar nav li { margin: 0.5rem 0; }

#sidebar nav a {
  display: block;
  padding: 0.6rem 0.75rem;                 /* 44 × 44 px touch target */
  text-decoration: none;
  color: var(--text-color);
  border-radius: 20px;
  transition: background var(--transition-speed) ease,
              color      var(--transition-speed) ease;
}
#sidebar nav a:hover,
#sidebar nav a:focus {
  background: var(--primary-color); color: #fff; outline: none;
}

#sidebar nav a:focus-visible,
.open-btn:focus-visible,
.close-btn:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

#sidebar .close-btn {
  display: none;
color: var(--text-color);
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
}

/* ───────────────────
   MAIN CONTENT
   ─────────────────── */
main {
  margin-left: 0;
  padding: 2rem;
  transition: margin-left var(--transition-speed) ease;
}

.container > main { grid-column: 2; }

section + section { margin-top: 2rem; }

h2 {
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--sidebar-border);
  padding-bottom: 0.5rem;
}

/* Smooth anchor offset so headings aren’t obscured */
:target { scroll-margin-top: 3.5rem; }

/* No-match message */
.hidden   { display: none; }
#noMatch  { margin-top: 2rem; font-style: italic; }

/* Custom scrollbar (WebKit) */
#sidebar::-webkit-scrollbar      { width: 8px; }
#sidebar::-webkit-scrollbar-track{ background: #eee; }
#sidebar::-webkit-scrollbar-thumb{
  background: #ccc; border-radius: 20px;
}

/* ───────────────────
   MOBILE (≤ 768 px)
   ─────────────────── */
.open-btn { display: none; }

@media (max-width: 768px) {
  .container { grid-template-columns: 0 1fr; }

  #sidebar          { transform: translateX(-100%); }
  #sidebar.show     { transform: translateX(0); }

  main { margin-left: 0; }

  .open-btn {
    display: block;
    position: fixed; top: 1rem; left: 1rem;
    background: var(--primary-color); color: #fff;
    border: none; padding: 0.5rem 1rem;
    border-radius: 4px; cursor: pointer;
    z-index: 1000;
  }

  #sidebar .close-btn { display: block; }
}

/* ───────────────────
   REDUCED MOTION PREFERENCE
   ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}



/* ───────────────────
   HOME AND HERO
   ─────────────────── */
.hero { text-align:center; padding:4rem 1rem; }
.hero-cta .btn { margin:.5rem; }
.chip-list { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; }
.chip { display:inline-block; padding:.4rem .8rem; border-radius:9999px;
        background:#f3f4f6; text-decoration:none; font-size:.9rem; }
.chip:hover, .chip:focus { background:#e5e7eb; }
.search-form { display:flex; flex-wrap:wrap; gap:.5rem; }


/* === HOME LAYOUT TWEAKS === */
.wrapper { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }

.hero,
.home-categories { text-align: center; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.chip {
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover,
.chip:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
}


/* === Mobile: move drawer buttons to the top-right === */
@media (max-width: 768px) {
  /* Hamburger */
  #openBtn {
    left: auto;         /* ignore any left setting */
    right: 1rem;        /* 1rem from the right edge */
  }

  /* Close “×” button inside sidebar */
  #closeBtn {
    left: auto;         /* if it was positioned left */
    right: 1rem;
  }
}



/* ───────────────────
   TABS NAVIGATION
   ─────────────────── */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-block: 1rem;
}

.tab-btn {
  background: none;
  border: none;
  padding: .6rem 1rem;
  font: inherit;
  cursor: pointer;
  color: var(--text-color);
  border-bottom: 3px solid transparent;
  transition:
    background   var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
}

.tab-btn:is(:hover, :focus-visible) {
  background: var(--surface-hover);
}

.tab-btn.is-active {
  border-color: var(--accent-color);
}

/* ───────────────────
   TAB PANES
   ─────────────────── */
.tab-pane.hidden {
  display: none;
}

/* ───────────────────
   LIVE‑PLAYER WRAPPER
   ─────────────────── */
.player-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;   /* responsive 16:9 box */
}

.player {
  width: 100%;
  height: 100%;
}

/* Un‑mute button */
.unmute {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: .4rem .8rem;
  font-size: 1rem;
  color: #fff;
  background: var(--player-overlay);
  border: none;
  border-radius: .4rem;
  cursor: pointer;
}