/* ==========================================================================
   TV Radar Nightshift — glue. Loaded LAST (after main.css and article.css).

   main.css    Nightshift tokens + chrome (header, day strip, tab bar), from 053.
   article.css tvradar-uk's layout, recoloured (generated).
   this file   What neither covers: the site's real WordPress menu inside the
               Nightshift header and drawer, the search panel, and offsets
               article.css computes from its own (taller) header.
   Mobile first: base rules are phones; desktop nav from 1200px.
   ========================================================================== */

/* article.css sizes sticky offsets (TOC sidebar, films date bar) from its own
   72px header. The Nightshift header is 56px. */
:root { --header-h: 56px; }

/* The tab bar is phones/tablets only, so only they need its clearance. */
@media (min-width: 1024px) {
  body.tvr-has-tabbar { padding-bottom: 0; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.tvr-header-inner { min-width: 0; }
.tvr-wordmark { white-space: nowrap; }
.tvr-header-clock { white-space: nowrap; }
.tvr-header-search-btn { flex: 0 0 32px; }

/* Desktop menu: hidden on phones and tablets, where the drawer carries it. */
.tvrns-nav { display: none; }

@media (min-width: 1200px) {
  .tvrns-mobile { display: none; }

  .tvrns-nav { display: block; margin-left: 22px; min-width: 0; }
  .tvrns-nav > ul {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .tvrns-nav > ul > li { position: relative; }
  .tvrns-nav > ul > li > a {
    display: block;
    padding: 18px 0;
    font-size: 13.5px;
    color: var(--tvr-text-secondary);
    white-space: nowrap;
  }
  .tvrns-nav > ul > li > a:hover { color: var(--tvr-text-primary); }
  .tvrns-nav > ul > li.current-menu-item > a,
  .tvrns-nav > ul > li.current-menu-ancestor > a { color: var(--tvr-accent); font-weight: 600; }
  .tvrns-nav > ul > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    opacity: 0.7;
  }

  /* Sub-menus: the Nightshift dropdown panel. Opens on hover and on keyboard
     focus; the panel touches its parent, so the pointer never crosses a gap. */
  .tvrns-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--tvr-surface);
    border: 1px solid var(--tvr-border-strong);
    border-radius: var(--tvr-radius-md);
    padding: 10px;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 50;
  }
  .tvrns-nav > ul > li:hover > .sub-menu,
  .tvrns-nav > ul > li:focus-within > .sub-menu { display: grid; }
  .tvrns-nav .sub-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--tvr-radius-sm);
    color: var(--tvr-text-secondary);
    font-size: 13px;
  }
  .tvrns-nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.06); color: var(--tvr-text-primary); }
  .tvrns-nav .sub-menu .current-menu-item > a { color: var(--tvr-accent); }
}

/* ── Search panel ─────────────────────────────────────────────────────────── */

.tvrns-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0;
  padding: 12px 0;
}
.tvrns-search-form { display: flex; gap: 8px; }
.tvrns-search-input {
  flex: 1;
  min-width: 0;
  background: var(--tvr-surface-sunken);
  border: 1px solid var(--tvr-border-accent);
  border-radius: var(--tvr-radius-sm);
  color: var(--tvr-text-primary);
  padding: 12px;
  font-family: var(--tvr-font-body);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}
.tvrns-search-submit { flex: 0 0 auto; }

/* ── Drawer (phones and tablets) ──────────────────────────────────────────── */

.tvrns-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  border-radius: 0;
  padding: 0;
  max-height: calc(100vh - var(--tvr-header-h) - var(--tvr-tabbar-h));
  max-height: calc(100dvh - var(--tvr-header-h) - var(--tvr-tabbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tvrns-drawer .container { padding-top: 12px; padding-bottom: 16px; }
@media (min-width: 1200px) { .tvrns-drawer { display: none; } }

/* Top level: a two-column grid of 44px tap targets. A parent with a sub-menu
   (Channels, Sport...) spans the row; its sub-menu is a grid of its own. */
.tvrns-drawer .container > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tvrns-drawer li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--tvr-radius-sm);
  background: var(--tvr-surface-sunken);
  color: var(--tvr-text-primary);
  font-size: 15px;
  line-height: 1.25;
}
.tvrns-drawer li.current-menu-item > a { color: var(--tvr-accent); font-weight: 600; }
.tvrns-drawer .container > ul > li.menu-item-has-children { grid-column: 1 / -1; margin-top: 8px; }
.tvrns-drawer .container > ul > li.menu-item-has-children > a {
  min-height: 0;
  padding: 6px 2px;
  background: none;
  font-family: var(--tvr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tvr-text-dim);
}
.tvrns-drawer .sub-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

/* ── Tab bar: the Search tab is a button ───────────────────────────────────── */

.tvr-tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--tvr-text-dim);
  font-size: 10px;
  cursor: pointer;
}
.tvr-tabbar button.is-active { color: var(--tvr-accent); }
.tvr-tabbar a, .tvr-tabbar button { font-size: 11px; letter-spacing: 0.02em; }

/* ── Archive / search titles ──────────────────────────────────────────────────
   tvradar-uk prints these white because its page background was blue. On the
   Nightshift light page they vanished ("Search:" on /?s=, category titles). */
.archive-title { color: var(--tvr-text-primary); text-shadow: none; }
.archive-description { color: var(--tvr-text-secondary); }

/* ── Day strip ──────────────────────────────────────────────────────────────── */

/* Leave the page gutter on the strip's own padding (article.css's .container
   would otherwise double it on phones). */
.tvr-day-strip.container { padding-left: var(--tvr-page-pad); padding-right: var(--tvr-page-pad); }

/* ── Chrome colour ─────────────────────────────────────────────────────────────
   The 053 near-black (#0c0d10) read as too black on the light page (owner,
   23 Oct 2026). Header, drawer and tab bar use a navy slate instead; the
   drawer tiles step up from it so they still read as buttons. */
.tvr-header,
.tvr-tabbar {
  --tvr-surface: #243049;
  --tvr-surface-raised: #2a3752;
  --tvr-surface-sunken: #2c3a56;
  --tvr-text-dim: #aab4c5;
  --tvr-border: rgba(255, 255, 255, 0.10);
  --tvr-border-strong: rgba(255, 255, 255, 0.14);
  background: rgba(30, 40, 61, 0.97);
}
.tvrns-drawer li > a:hover { background: #34446a; }