/**
 * chrome.css
 * ──────────
 * [Admin→Frontend] owns this file.
 *
 * ROOT-CAUSE FIX (publisher, 6 Sep 2026): "You need to stop fixing per
 * page then another comes along after more checks." Correct call — the
 * header/nav/search/footer markup was already ONE shared function each
 * (renderHeader.js / renderFooter.js), but the CSS for that same shared
 * markup was duplicated into all 9 page CSS files independently. Every
 * fix this whole pass (missing header on 5 pages, stale text-logo CSS,
 * oversized logo, footer icon color/SVG fill, search redesign, nav-dot
 * removal) had to be reapplied file-by-file, and it was trivially easy
 * to miss one — which is exactly what kept happening (about.css and
 * press-kit.css were still missing chrome CSS entirely; 4 files still
 * had the pre-image-migration text logo). This file is the actual fix
 * for the pattern, not just the latest instance of it: every page links
 * this ONE stylesheet for its header/nav/search-overlay/footer, so a
 * future fix lands everywhere at once instead of needing a 9-file sweep.
 *
 * Deliberately NOT extracted here: :root design tokens (--max-w genuinely
 * differs per page — press-kit uses 1000px, others 1280px — each page
 * keeps its own values; this file's rules reference var(--x) and
 * resolve against whatever the page's own :root defines, regardless of
 * link order). Homepage keeps one small, deliberate override on top of
 * this file: a bigger 46px logo and taller masthead padding, matching
 * its existing flagship treatment — not reverted here since the
 * publisher didn't flag that as wrong, only the drift and repeated gaps.
 *
 * MASTHEAD REBUILT TO V1 PARITY (publisher, 10 Sep 2026): the flanking
 * city-clock layout (.masthead-cities/.city-clock/.market-preview*) used
 * to live only in homepage.css, gated to the homepage build — V1's own
 * masthead (checked its real markup) has this on every page, flanking
 * the centered logo in one bar. Moved here so it's real shared chrome,
 * not a homepage-only feature quietly narrower than V1's.
 *
 * Standardized on the ruleset 8 of 9 pages already shared (nav-link:
 * 9px 14px / 11.5px; masthead-logo-img: 36px) rather than homepage's
 * lone variant, plus one genuine fix folded in: advertise.css's
 * .nav-link was missing display:flex/align-items/gap entirely (dead
 * layout, not a deliberate variant) and nav-link:hover existed only on
 * homepage — added both here since neither was an intentional
 * per-page difference, just uncaught drift.
 */

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ── Utility bar + masthead ── */
.utility-bar { background: var(--paper); border-bottom: 1px solid var(--border); padding: 6px 0; font-size: 12px; }
.utility-inner { display: flex; justify-content: space-between; }
.utility-left, .utility-right a { color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; }
.masthead { padding: 12px 0 6px; background: var(--paper); border-bottom: 1px solid var(--border); }
.masthead-inner { display: flex; align-items: center; justify-content: center; gap: 0; }
.masthead-cities { display: flex; gap: 20px; flex: 1; }
.masthead-cities.left { justify-content: flex-end; }
.masthead-cities.right { justify-content: flex-start; }
.city-clock { display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; padding: 4px 8px; border-radius: 3px; }
.city-clock:hover, .city-clock.active { background: var(--cream-dark); }
.city-name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-muted); }
.city-clock:hover .city-name, .city-clock.active .city-name { color: var(--accent-dark); }
.city-clock.active .city-name::after { content: ''; display: block; width: 100%; height: 2px; background: var(--accent); margin-top: 3px; border-radius: 1px; }
/* Corner-bracket flourish under each city label — publisher's real
   masthead reference (Canva mockup #4, 13 Sep 2026). A plain border
   shape, not an image asset: border-top + border-right on an empty box
   traces exactly the reference's horizontal-then-down stroke. */
.city-flourish { display: block; width: 11px; height: 11px; margin-top: 5px; border-top: 2px solid var(--ink-muted); border-right: 2px solid var(--ink-muted); }
.city-clock:hover .city-flourish, .city-clock.active .city-flourish { border-color: var(--accent-dark); }
/* LDN moved into the center column, under the wordmark (SSoT→Admin
   brief, 12 Sep 2026, §3 Item 5 — "DC (left flank), LDN (bottom/south),
   LOS (right flank), centered wordmark"). Stacks logo + LDN chip
   vertically instead of the flanking-row layout .masthead-cities uses. */
.masthead-center { display: flex; flex-direction: column; align-items: center; padding: 0 36px; }
.masthead-logo-img { height: 36px; width: auto; display: block; }
.city-clock-center { margin-top: 2px; }
/* Market Lens hover-preview */
.market-preview { display: none; position: absolute; top: 100%; margin-top: 8px; width: 240px; background: var(--ink); color: var(--cream); padding: 12px 14px; font-size: 12px; line-height: 1.5; border-radius: 2px; z-index: 20; text-align: left; }
.masthead-cities.left .market-preview { right: 0; }
.masthead-cities.right .market-preview { left: 0; }
.masthead-center .market-preview { left: 50%; transform: translateX(-50%); }
.city-clock:hover .market-preview { display: block; }
.market-preview-item { padding: 6px 0; border-top: 1px solid #333; font-size: 12px; line-height: 1.4; }
.market-preview-item:first-child { border-top: none; }

/* ── Nav ── */
.main-nav { background: var(--paper); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 100; }
.nav-scroll { display: flex; overflow-x: auto; justify-content: center; }
.nav-link { padding: 9px 14px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ── Site search — trigger + overlay (search-client.js) ── */
.search-trigger { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0; margin-right: 14px; color: var(--ink-3); vertical-align: middle; }
.search-trigger:hover { color: var(--ink); }
.search-overlay { display: none; position: fixed; inset: 0; background: rgba(26,26,26,0.7); z-index: 200; padding: 8vh 20px 20px; overflow-y: auto; }
.search-overlay.open { display: block; }
.search-overlay-inner { max-width: 760px; margin: 0 auto; background: var(--paper); border-radius: 10px; padding: 36px 40px 32px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.35); }
.search-close { position: absolute; top: 24px; right: 28px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-muted); }
.search-close:hover { color: var(--ink); }
.search-header { padding-right: 30px; margin-bottom: 4px; }
.search-title { font-family: var(--serif); font-size: 1.6rem; font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.search-input { width: 100%; padding: 18px 20px; font-size: 18px; font-family: var(--sans); border: 2px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--cream); }
.search-input:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.search-filter-pill { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.search-filter-pill:hover { border-color: var(--accent); color: var(--ink); }
.search-filter-pill.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.search-results { max-height: 50vh; overflow-y: auto; }
.search-result-item { display: block; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.search-result-item:hover .search-result-headline { color: var(--accent-dark); }
.search-result-column { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 4px; }
.search-result-headline { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.search-result-subtitle { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.search-empty { color: var(--ink-muted); font-size: 14px; padding: 8px 0; }

/* ── Footer ── */
.site-footer { background: var(--ink); color: #c9c5b8; padding: 40px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 28px; margin-bottom: 30px; }
.footer-col h5 { color: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 13px; color: #c9c5b8; margin-bottom: 9px; }
.footer-col a:hover { color: var(--accent); }
.footer-logo-img { height: 28px; width: auto; display: block; margin-bottom: 8px; }
.footer-tagline { font-size: 12px; color: #8a8677; margin-bottom: 16px; line-height: 1.5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 30px; height: 30px; border: 1px solid #3a382f; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #D4AF37; font-size: 12px; margin-bottom: 0; }
.footer-social a svg { fill: currentColor; }
.footer-bottom { border-top: 1px solid #2a2820; padding-top: 16px; display: flex; justify-content: space-between; font-size: 11px; color: #8a8677; }

@media (max-width: 640px) {
  .search-overlay-inner { padding: 28px 20px 24px; }
  .search-title { font-size: 1.3rem; }
  .search-filters { gap: 6px; }
  .search-filter-pill { font-size: 10px; padding: 6px 11px; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Ad slots (§6 schema) ── consolidated here (10 Sep 2026): the
   real "header" leaderboard slot renders on every page via
   renderHeader.js now (was rendered nowhere — publisher-reported
   "No ad slots visible on homepage or any other pages"), and the
   near-identical .ad-slot rules were independently duplicated across
   homepage.css/crosscurrents.css/events.css/column.css anyway. Falls
   silently to nothing when the slot is inactive/empty — renderAdSlot()
   already omits the markup entirely, this is just the frame CSS. */
.header-ad-wrap { background: var(--paper); border-bottom: 1px solid var(--border); text-align: center; padding: 4px 0; }
.ad-slot { margin: 12px auto; display: flex; justify-content: center; align-items: center; background: var(--cream-dark); border: 1px dashed var(--border); border-radius: 4px; overflow: hidden; }
.ad-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-slot-mobile { display: none; }
@media (max-width: 720px) {
  .ad-slot-desktop { display: none; }
  .ad-slot-mobile { display: flex; }
}

/* Flanking city clocks: V1 itself hides these under 1024px (checked its
   real @media rules) — the masthead center-logo stays alone on mobile.
   LDN moved under the wordmark (§3 Item 5) follows the same rule as its
   former DC/LOS flanking siblings, for the same reason. */
@media (max-width: 1024px) {
  .masthead-cities { display: none; }
  .city-clock-center { display: none; }
}

/* ── Mobile nav rebuild (publisher, 10 Sep 2026, with reference
   screenshots) ── the horizontal-scroll .main-nav row was
   cropping/hiding segments on mobile (The Stack/Deal Flow/The Beltway
   Byte off-screen, The Operator cut off) — inherent to a 9-item
   scroll row on a phone width, not a spacing tweak. Replaced below
   900px with a fixed bottom tab bar (Home/Search/Subscribe/Menu) and
   a full-screen slide-out menu (markup: renderHeader.js). Desktop
   (.main-nav) is untouched above the breakpoint. */
.mobile-tabbar { display: none; }
.mobile-menu-overlay { display: none; }
@media (max-width: 900px) {
  .main-nav { display: none; }
  body { padding-bottom: 60px; } /* room for the fixed tab bar below */

  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    background: var(--paper); border-top: 1px solid var(--border);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--ink-3); font-family: var(--sans);
    font-size: 10px; font-weight: 600; text-decoration: none; cursor: pointer;
    padding: 4px 10px; flex: 1;
  }
  .tab-item.active { color: var(--accent-dark); }
  .tab-icon { font-size: 18px; line-height: 1; }

  .mobile-menu-overlay.open {
    display: block; position: fixed; inset: 0; z-index: 250;
    background: var(--paper); overflow-y: auto;
  }
  .mobile-menu-inner { padding: 64px 24px 40px; max-width: 480px; margin: 0 auto; }
  .mobile-menu-close {
    position: fixed; top: 16px; right: 20px; background: none; border: none;
    font-size: 22px; color: var(--ink); cursor: pointer; z-index: 251;
  }
  .mobile-menu-list { display: flex; flex-direction: column; }
  .mobile-menu-link {
    padding: 14px 0; border-bottom: 1px solid var(--border-light);
    font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink);
  }
  .mobile-menu-link.active { color: var(--accent-dark); }
  .mobile-menu-secondary .mobile-menu-link { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; }
  .mobile-menu-divider { height: 1px; background: var(--border); margin: 18px 0; }
}