/* WhatScares site chrome — the one header every page shares.
 *
 * Before this file, six templates each carried their own copy of the header
 * styles, and they had drifted: 960 / 860 / 820px containers, 22 / 21 / 20px
 * wordmarks, 26 / 24px logo marks. The header visibly jumped when you moved
 * between films, lists and showtimes.
 *
 * Rules:
 *   - The header measures itself, not the page. Its own max-width is fixed here
 *     so the wordmark lands in the same place regardless of how wide the page
 *     body below it is.
 *   - Templates supply the palette (--bg, --text, --accent...) and the font
 *     variables; this file only consumes them.
 *   - Nothing outside .site-header / .site-crumbs belongs in here.
 */

.site-header {
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
}

.site-header .hwrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* wordmark */
.site-header .slogo {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-right: auto;
}
.site-header .slogo em { color: var(--accent); font-style: italic; }
.site-header .slogo svg { height: 23px; width: auto; display: block; flex: none; }

/* section links */
.site-header nav.sitenav {
  display: flex;
  align-items: center;
  gap: 18px;
  /* NOT overflow-x: auto here. That establishes a clipping context and cuts the
     Explore dropdown off at the nav's own height. The phone layout below scrolls
     the nav instead, where it has its own row and no dropdown to clip. */
}
.site-header nav.sitenav::-webkit-scrollbar { display: none; }
.site-header nav.sitenav a {
  font-family: var(--mono, monospace);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.site-header nav.sitenav a:hover { color: var(--text); }
.site-header nav.sitenav a.on { color: var(--text); border-bottom-color: var(--accent); }
.site-header nav.sitenav a.threshold {
  color: var(--accent-2, var(--accent));
  border-bottom: 1px dotted rgba(196,67,47,.55);
}
.site-header nav.sitenav a.threshold:hover { color: var(--text); }

/* Explore dropdown. No JavaScript: the trigger is a link to /explore/, and the
   panel opens on hover or keyboard focus. Whether or not it ever opens, every
   link inside it is in the markup for a crawler to follow.

   Selectors here are deliberately `nav.sitenav .dropmenu a`, not `.dropmenu a`.
   The nav's own link rule is (0,2,2) and would otherwise win over a (0,2,1)
   override, rendering these items uppercase mono instead of serif. */
.site-header .navdrop { position: relative; display: flex; align-items: center; }
.site-header .navdrop > a .caret {
  margin-left: 5px;
  font-size: 8.5px;
  vertical-align: 1px;
  opacity: .65;
}
.site-header nav.sitenav .dropmenu {
  position: absolute;
  top: 100%;
  /* Explore is the last item in the nav, so a left-anchored panel runs off the
     right edge of the window. Anchor it to the trigger's right instead. */
  right: -10px;
  left: auto;
  z-index: 60;
  width: 306px;
  margin-top: 7px;
  padding: 5px;
  background: var(--surface, #f4f0e6);
  border: 1px solid var(--border, #cdc2ab);
  border-radius: 3px;
  box-shadow: 0 12px 34px rgba(25, 21, 18, .17);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* a transparent bridge across the 7px gap, so the pointer can travel from the
   trigger into the panel without the hover dropping out from under it */
.site-header nav.sitenav .dropmenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.site-header .navdrop:hover .dropmenu,
.site-header .navdrop:focus-within .dropmenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.site-header nav.sitenav .dropmenu a {
  display: block;
  padding: 9px 11px 10px;
  border-radius: 2px;
  border-bottom: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--text, #191512);
}
.site-header nav.sitenav .dropmenu a em {
  display: block;
  margin-top: 3px;
  font-family: var(--mono, monospace);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .2px;
  text-transform: none;
  color: var(--text-3, #6b6153);
}
.site-header nav.sitenav .dropmenu a:hover { background: var(--hover, rgba(205, 194, 171, .45)); }
.site-header nav.sitenav .dropmenu a.on { color: var(--accent, #a82e22); }
.site-header nav.sitenav .dropmenu a.on em { color: var(--text-2, #584f44); }

/* right-hand controls */
.site-header .hright { display: flex; align-items: center; gap: 10px; flex: none; }
.site-header .lights,
.site-header .signin {
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.1;
  transition: color .2s, border-color .2s;
}
.site-header .lights:hover,
.site-header .signin:hover { color: var(--text); border-color: var(--text-3); }
body.lights-out .site-header .lights { color: var(--gold); border-color: rgba(217,154,69,.45); }

/* breadcrumbs, same voice as the nav */
.site-crumbs {
  font-family: var(--mono, monospace);
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 18px;
}
.site-crumbs a { color: var(--text-2); text-decoration: none; }
.site-crumbs a:hover { color: var(--text); }

/* phones: the section links take their own full-width scrolling row so they
   never collide with the wordmark, and the lights button keeps only its glyph */
@media (max-width: 720px) {
  .site-header .hwrap { padding: 10px 16px 0; row-gap: 0; }
  .site-header .slogo { font-size: 18.5px; }
  .site-header .slogo svg { height: 21px; }
  .site-header nav.sitenav {
    order: 3;
    flex: 0 0 100%;
    gap: 16px;
    margin: 0 -16px;
    padding: 8px 16px 9px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* no hover on touch, and the scrolling row would clip the panel anyway.
     The trigger is a real link, so tapping Explore goes to /explore/, which
     lists exactly what the panel would have shown. */
  .site-header .dropmenu { display: none; }
  .site-header .lights .lb-text { display: none; }
  .site-header .lights, .site-header .signin { padding: 5px 11px; }
}