/* ===========================================================
   Radiologik DJ & Scheduler — Tutorial Video Site
   Modern, responsive replacement for the old style.css.
   =========================================================== */

:root {
  --header-h: 64px;
  --toc-w: 300px;

  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --text: #1c2530;
  --text-muted: #64748b;
  --border: #e2e8f0;

  /* Lightened from the original #0f2438/#163a58 — pure black elements in
     the headphone logo were nearly invisible against navy that dark. */
  --brand-dark: #234261;
  --brand-dark-2: #316388;
  --accent: #22a6d9;
  --accent-dark: #1789b6;
  --accent-contrast: #ffffff;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(15, 36, 56, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 36, 56, 0.06);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand-dark-2));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-logo {
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}
.brand-title {
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.site-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cfe9f7;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ---------- layout ---------- */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--header-h));
}

.toc-backdrop {
  display: none;
}

.toc {
  width: var(--toc-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--brand-dark);
  padding: 6px 0 10px;
  transition: width 0.25s ease, padding 0.25s ease, transform 0.25s ease;
}

.toc-heading {
  color: #7fa8c2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 18px 4px;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 18px;
  color: #cbdbe7;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.toc-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.toc-link.active {
  background: rgba(34, 166, 217, 0.16);
  border-left-color: var(--accent);
  color: #fff;
}

.toc-num {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #9fc0d6;
}
.toc-link.active .toc-num {
  background: var(--accent);
  color: #fff;
}

.toc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- player ---------- */

.player-view {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 60px;
  display: flex;
  justify-content: center;
}

.player-card {
  width: 100%;
  /* Generous cap rather than a tight one — these are 1080p screen-capture
     tutorials, so let the video use as much of the browser as it can,
     especially once the sidebar is collapsed. */
  max-width: 1920px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 26px;
}

.player-meta {
  margin-bottom: 14px;
}

.video-count {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(34, 166, 217, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.video-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* ---------- prev / next ---------- */

.video-nav {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fafcfe;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
.nav-btn-hidden {
  display: none;
}

.nav-prev { justify-content: flex-start; }
.nav-next {
  justify-content: flex-end;
  text-align: right;
  background: linear-gradient(120deg, var(--accent-dark), var(--accent));
  border-color: transparent;
  color: var(--accent-contrast);
}
.nav-next:hover { border-color: transparent; }

.nav-arrow {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.nav-btn-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-btn-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-next .nav-btn-label { color: rgba(255, 255, 255, 0.8); }

.nav-btn-title {
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- footer ---------- */

.site-footer {
  text-align: center;
  padding: 22px 20px 34px;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.site-footer a {
  color: var(--accent-dark);
  font-weight: 600;
}
.site-footer a:hover { text-decoration: underline; }

.site-footer .copyright {
  margin: 8px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ---------- desktop sidebar collapse ---------- */

@media (min-width: 960px) {
  /* Collapsing hides the TOC entirely and lets .player-view's flex:1
     reclaim the full width for the video — handy on a 1080p display. */
  body.toc-collapsed .toc {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border: 0;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .site-link { font-size: 0; padding: 8px; }
  .site-link svg { width: 16px; height: 16px; }

  .toc {
    position: fixed;
    left: 0;
    top: var(--header-h);
    width: 82vw;
    max-width: 320px;
    /* 100vh on mobile Safari is the *largest* possible viewport (as if
       the address bar were hidden). Locking body scroll below keeps that
       bar on screen the whole time the drawer is open, so sizing against
       plain vh left a gap of un-scrollable, unreachable rows at the
       bottom — worse on shorter phones (iPhone SE) than taller ones
       (iPhone 15), matching what was reported. 100dvh tracks the real
       visible height; the vh line stays as a fallback for older Safari. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Keep the last row clear of the home-indicator / gesture area on
       notched iPhones (iPhone 15 and similar). */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 25;
    box-shadow: var(--shadow);
  }
  body.toc-open .toc { transform: translateX(0); }

  /* Mobile always scrolls the TOC, so there's no need for the tight,
     fit-everything-without-scrolling row spacing used on desktop (added
     to fit all 32 rows on a 1080p sidebar) — give touches more room here. */
  .toc-heading { padding: 0 20px 10px; font-size: 0.72rem; }
  .toc-link { padding: 12px 20px; gap: 12px; font-size: 0.95rem; line-height: 1.3; }
  .toc-num { width: 24px; height: 24px; font-size: 0.75rem; }

  .toc-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(9, 20, 32, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 24;
  }
  body.toc-open .toc-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.toc-open { overflow: hidden; }

  .player-view { padding: 18px 14px 44px; }
  .player-card { padding: 16px 16px 18px; border-radius: 12px; }
  .video-title { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .video-nav { flex-direction: column; }
  .nav-next { text-align: left; justify-content: flex-start; }
}