/* Unified site header — self-contained, no Tailwind dependency.
   Single source of truth: src/css/header.css.
   Synced to public/assets/css/header.css at dev/build by the
   sync-shared-assets Vite plugin. It must be render-blocking: the home page bundles it
   (src/main.js), static pages link it in <head> (scripts/normalize_static_pages.mjs);
   site-header.js only adds a <link> when neither is there. */

:root { --twt-h: 56px; }

/* site-header.js inserts the header after parsing, so hold its slot from the first
   paint (painted as an empty bar) or the whole page drops by --twt-h when it lands.
   Without :has() the rule is dropped and the page simply shifts as before. */
body:not(:has(> .twt-header))::before {
  content: ""; display: block;
  height: var(--twt-h); box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #d0d7de;
}
.dark body:not(:has(> .twt-header))::before { background: #10141c; border-bottom-color: #252c38; }

.twt-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--twt-h); box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #d0d7de;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dark .twt-header {
  background: #10141c; /* solid dark surface (DESIGN.md: no glass), matches the home page */
  border-bottom: 1px solid #252c38;
}

.twt-header__inner {
  max-width: 1120px; margin: 0 auto; height: 100%;
  padding: 0 16px; position: relative; /* anchors the tools menu */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.twt-left { display: flex; align-items: center; gap: 22px; min-width: 0; }

.twt-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: #0f172a; text-decoration: none; white-space: nowrap;
}
.dark .twt-brand { color: #e2e8f0; }
.twt-brand img { width: 28px; height: 28px; border-radius: 7px; }

.twt-nav { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.twt-nav a {
  color: #475569; text-decoration: none; white-space: nowrap;
  padding: 2px 0; border-bottom: 2px solid transparent;
}
.dark .twt-nav a { color: #94a3b8; }
.twt-nav a:hover { color: #0f172a; }
.dark .twt-nav a:hover { color: #e2e8f0; }
.twt-nav a.is-active { color: #4f46e5; font-weight: 600; border-bottom-color: #4f46e5; }
.dark .twt-nav a.is-active { color: #818cf8; border-bottom-color: #818cf8; }
.twt-tools { position: static; }
.twt-tools__btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0;
}
.twt-caret { font-size: 11px; transition: transform .15s ease; }
.twt-tools[aria-expanded="true"] .twt-caret { transform: rotate(180deg); }
/* Tools menu: four columns mirroring the home page's tool sections */
.twt-dropdown {
  position: absolute; top: calc(100% + 1px); left: 16px; right: 16px;
  display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 24px; align-items: start;
  background: #fff; border: 1px solid #d4dce8; border-radius: 12px; padding: 18px 20px 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10);
}
.dark .twt-dropdown { background: #181e28; border-color: #303947; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.twt-tools[aria-expanded="true"] .twt-dropdown { display: grid; }
.twt-dd-col { display: flex; flex-direction: column; min-width: 0; }
.twt-dd-title { margin: 0 0 6px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.dark .twt-dd-title { color: #94a3b8; }
.twt-dropdown a { padding: 6px 8px; border-radius: 6px; color: #334155; text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.dark .twt-dropdown a { color: #cbd5e1; }
.twt-dropdown a:hover, .twt-dropdown a:focus-visible { background: #f1f5f9; color: #0f172a; }
.dark .twt-dropdown a:hover, .dark .twt-dropdown a:focus-visible { background: rgba(255,255,255,.06); color: #e2e8f0; }
.twt-dropdown a.twt-dd-all { grid-column: 1 / -1; justify-self: start; margin-top: 10px; font-weight: 600; color: #4f46e5; }
.dark .twt-dropdown a.twt-dd-all { color: #a5b4fc; }

.twt-controls { display: flex; align-items: center; gap: 8px; }
.twt-fmt { display: inline-flex; border: 1px solid #d0d7de; border-radius: 6px; overflow: hidden; }
.dark .twt-fmt { border-color: rgba(255,255,255,.12); }
.twt-fmt button { font: inherit; font-size: 12px; border: 0; background: none; color: #475569; padding: 5px 10px; cursor: pointer; }
.dark .twt-fmt button { color: #94a3b8; }
.twt-fmt button[aria-checked="true"] { background: #4f46e5; color: #fff; }
.dark .twt-fmt button[aria-checked="true"] { background: #6366f1; color: #fff; }
/* .twt-fmt clips whatever lies outside it, so the keyboard ring is drawn inside the button: white on the checked indigo
   one (where Tab and the arrow keys land), the accent on the other */
.twt-fmt button:focus-visible { outline: 2px solid #4f46e5; outline-offset: -4px; }
.dark .twt-fmt button:focus-visible { outline-color: #aaa5ff; }
.twt-fmt button[aria-checked="true"]:focus-visible { outline-color: #fff; }
.twt-btn {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13px;
  color: #475569; border: 1px solid #d0d7de; border-radius: 6px; background: none;
  padding: 5px 10px; cursor: pointer; line-height: 1;
}
.dark .twt-btn { color: #94a3b8; border-color: rgba(255,255,255,.12); }
.twt-btn:hover { background: #f1f5f9; color: #0f172a; }
.dark .twt-btn:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.twt-btn--icon { padding: 6px 8px; }
.twt-btn svg, .twt-tools__btn svg { display: block; }
.twt-brand img { display: block; }
.twt-ico-moon, .twt-ico-sun { display: inline-flex; align-items: center; }
.twt-ico-sun { display: none; }
.dark .twt-ico-moon { display: none; }
.dark .twt-ico-sun { display: inline-flex; }

.twt-burger { display: none; }
@media (max-width: 767px) {
  .twt-nav { display: none; }
  .twt-controls .twt-fmt, .twt-controls .twt-btn--share, .twt-controls .twt-btn--x { display: none; }
  .twt-burger { display: inline-flex; }
}
.twt-mobile-menu {
  display: none; position: absolute; top: var(--twt-h); left: 0; right: 0;
  background: #fff; border-bottom: 1px solid #d0d7de; padding: 6px; flex-direction: column;
  max-height: calc(100dvh - var(--twt-h)); overflow-y: auto; overscroll-behavior: contain;
}
.twt-mm-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; padding: 6px 0; border-top: 1px solid #e2e8f0; }
.dark .twt-mm-group { border-top-color: rgba(255,255,255,.08); }
.twt-mm-group .twt-dd-title { grid-column: 1 / -1; margin: 6px 0 2px; padding: 0 12px; }
.twt-mobile-menu .twt-mm-group a { border-bottom: 0; padding: 10px 12px; font-size: 13.5px; }
.dark .twt-mobile-menu { background: #1a1f2e; border-bottom-color: rgba(255,255,255,.10); }
.twt-mobile-menu.open { display: flex; }
.twt-mobile-menu a {
  padding: 11px 12px; color: #334155; text-decoration: none; font-size: 14px;
  border-bottom: 0.5px solid #e2e8f0;
}
.dark .twt-mobile-menu a { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.06); }
.twt-mobile-menu a.is-active { color: #4f46e5; font-weight: 600; }
.dark .twt-mobile-menu a.is-active { color: #818cf8; }
/* Tablets: the labelled Share button (up to 132px in ru/es/pt) pushed the nav under the controls;
   keep it as an icon there, with the label still read by screen readers */
@media (min-width: 768px) and (max-width: 1023px) {
  .twt-left { gap: 16px; }
  .twt-nav { gap: 14px; }
  .twt-brand { flex-shrink: 0; } /* the nav links absorb the squeeze, not the wordmark */
  .twt-tools__btn { white-space: nowrap; }
  .twt-fmt { flex-shrink: 0; } /* never squeezed under overflow:hidden, which clipped the 12h button */
  .twt-btn--share { min-width: 32px; justify-content: center; }
  .twt-btn--share #btnShareLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The hidden "Copied" label cannot confirm the copy here, so the icon button does */
  .twt-btn--share.is-copied { color: #4f46e5; border-color: #4f46e5; }
  .dark .twt-btn--share.is-copied { color: #aaa5ff; border-color: #aaa5ff; }
}
/* Only the narrowest tablets need two-line nav labels (long ru/es/pt); ja breaks by phrase */
@media (min-width: 768px) and (max-width: 899px) {
  .twt-nav > a { white-space: normal; line-height: 1.15; max-width: 7.5em; word-break: auto-phrase; }
}
@media (min-width: 768px) and (max-width: 1023px) and (pointer: coarse) {
  .twt-btn--share { min-width: 44px; }
}
/* 44px touch targets leave no room at iPad-portrait widths: drop the secondary share-to-X button */
@media (min-width: 768px) and (max-width: 833px) and (pointer: coarse) {
  .twt-btn--x { display: none; }
}
@media (pointer: coarse) {
  .twt-btn--icon { min-width: 44px; min-height: 44px; justify-content: center; }
  .twt-fmt { flex-shrink: 0; }
  .twt-fmt button { min-width: 44px; min-height: 44px; }
  .twt-btn--share { min-height: 44px; }
  .twt-mobile-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* Content pages (city / privacy / tos / cities / feedback) hide the 12/24h toggle */
body[data-page-type="content"] .twt-fmt { display: none; }