/* ═══════════════════════════════════════════
   LANDING PAGE HEADER — the same header as the history sites (logo, menu,
   gold "Explore" country menu), for allhistories.com's index.php, which
   does not load core/css/style.css (its page-wide rules are for the
   timeline app). The NAVIGATION, burger and COUNTRY MENU rules below are
   copied from core/css/style.css — keep them in step when those change.
   The landing-only additions (dropdown menus, header background) are at
   the end.
═══════════════════════════════════════════ */

:root {
  --gold:        #c9a844;
  --gold-dim:    rgba(201,168,68,0.75);
  --gold-glow:   rgba(201,168,68,0.18);
  --white:       rgba(255,255,255,0.85);
  --white-mid:   rgba(255,255,255,0.70);
  --white-dim:   rgba(255,255,255,0.5);
  --dark:        #050308;
  --nav-h:       77px;
  --f-heading:   'Inria Serif', Georgia, serif;
  --f-body:      'Fira Sans', system-ui, sans-serif;
  --f-ui:        'Fira Sans', system-ui, sans-serif;
}
/* The sites' element resets (style.css), limited to the header and kept
   at element specificity by :where(), so .xm-btn etc. still win. */
:where(#main-nav) button { cursor:pointer; background:none; border:none; color:inherit; font-family:inherit; }
:where(#main-nav) a { color:inherit; text-decoration:none; }
:where(#main-nav) ul { list-style:none; }
:where(#main-nav) img { display:block; max-width:100%; }

/* ════════════════════════════════════════
   NAVIGATION
════════════════════════════════════════ */
/* Symmetric left/right padding — the logo lines up with the Rulers &
   Dynasties panel's left edge, and the language switcher sits the same
   distance from the right edge. */
#main-nav {
  position:fixed; top:0; left:35px; right:35px; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:101;
}
.nav-left { display:flex; align-items:center; }
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-brand {
  font-family:var(--f-heading); font-size:12px; font-weight:600;
  letter-spacing:4px; color:var(--gold); white-space:nowrap;
}

#app-logo-btn {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  display:block;
  /* Every site's logo 15% smaller than its own width rules (theme.css,
     breakpoints, SVG partials) — scaled here, so they all stay in step. */
  zoom:0.85;
  transition:opacity 0.2s;
}
#app-logo-btn:hover { opacity:0.85; }

#app-logo {
  width:248px;
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}
/* "← Back to All Histories" beside the site logo, linking to the
   allhistories.com landing page. js/header.js shortens it (nav-fit-1:
   "All Histories", nav-fit-3: arrow only) when the header runs out of room. */
.nav-back {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  margin-left:8px; padding:6px 0 6px 20px;
  border-left:1px solid rgba(255,255,255,0.18);
  line-height:1;
}
.nav-back-arrow { flex-shrink:0; color:var(--gold); transition:transform 0.2s; }
.nav-back-logo { display:block; width:120px; height:auto; max-height:30px; object-fit:contain; filter:grayscale(1); opacity:.78; transition:filter .2s,opacity .2s; }
.nav-back:hover .nav-back-logo, .nav-back:focus-visible .nav-back-logo { filter:grayscale(0); opacity:1; }
.nav-back:hover .nav-back-arrow { transform:translateX(-3px); }
.nav-back:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.nav-fit-1 .nav-back { gap:6px; padding-left:14px; }
.nav-fit-3 .nav-back { padding-left:10px; }
.nav-fit-3 .nav-back-logo { width:82px; max-height:22px; }
.nav-links { display:flex; gap:42px; margin-left:auto; margin-right:auto; }
.nav-link {
  font-family: var(--f-ui);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--white-mid);
    transition: color 0.2s;
    padding: 4px 0;
    position: relative;
    white-space: nowrap;
}
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1px; background:var(--gold); transform:scaleX(0); transition:transform 0.25s;
}
.nav-link:hover { color:var(--white); }
.nav-link.active { color:var(--white); }
.nav-link.active::after { transform:scaleX(1); }
.nav-right { display:flex; align-items:center; }
/* iPad (and similar tablet widths): menu items 1px smaller, 10px tighter */
@media (min-width:761px) and (max-width:1366px) {
  .nav-links { gap:32px; }
  .nav-link { font-size:16px; }
}
/* Desktop: logo + back link, the links centred between, the Select
   button on the right; nothing shrinks — header.js steps down instead. */
@media (min-width:761px) {
  #main-nav { column-gap:28px; }
  .nav-left, .nav-links, .nav-right { flex-shrink:0; }
  .nav-fit-2 .nav-links { gap:24px; }
  #main-nav.nav-fit-2 { column-gap:22px; }
  .nav-fit-5 .nav-links { gap:18px; }
  .nav-fit-5 .nav-link { font-size:14.5px; }
  #main-nav.nav-fit-6 { column-gap:14px; }
  .nav-fit-6 .nav-links { gap:12px; }
  .nav-fit-6 .nav-link { font-size:13.5px; }
  .nav-fit-6 .country-menu { padding-left:16px; }
}
@media (max-width:760px) {
  .nav-logo { gap:8px; }
  .nav-back { margin-left:2px; padding:8px 4px 8px 10px; }
  .nav-back-logo { width:96px; max-height:25px; }
  .nav-right { margin-left:auto; }
}

.nav-burger {
  display:none;
  align-items:center; justify-content:center;
  width:50px; height:50px;
  margin-left:14px;
  color:var(--white-mid);
  background:none; border:none;
  transition:color 0.2s;
}
.nav-burger:hover { color:var(--gold); }

/* ════════════════════════════════════════
   COUNTRY MENU — the header's gold "Explore" button and its megamenu of
   every history site by continent (includes/partials/country-menu.php,
   js/header.js). Classes are xm-* (cm-* belongs to the map page).
════════════════════════════════════════ */
.country-menu { position:relative; display:flex; align-items:center; }
@media (min-width:761px) {
  .country-menu { padding-left:26px; }
  .country-menu::before {
    content:''; position:absolute; left:0; top:50%; height:30px; margin-top:-15px;
    border-left:1px solid rgba(255,255,255,0.18);
  }
}
/* Solid gold pill, dark text; header.js drops the label at nav-fit-4. */
.xm-btn {
  display:flex; align-items:center; gap:10px;
  height:42px; padding:0 20px 0 18px;
  background:var(--gold); border:none; border-radius:8px;
  font-family:var(--f-body); font-size:13px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; line-height:1;
  color:#0a0912; white-space:nowrap;
  transition:background 0.2s, color 0.2s;
}
.xm-btn:hover, .xm-btn.is-open { background:var(--gold-dim); }
.xm-btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.xm-globe { flex-shrink:0; }
.xm-chevron { flex-shrink:0; margin-top:1px; transition:transform 0.2s; }
.xm-btn.is-open .xm-chevron { transform:rotate(180deg); }
.nav-fit-4 .xm-btn { width:42px; padding:0; gap:0; justify-content:center; }
.nav-fit-4 .xm-btn-label, .nav-fit-4 .xm-chevron { display:none; }

.xm-panel {
  position:fixed;
  top:var(--xm-top, calc(var(--nav-h) - 6px));
  right:var(--xm-right, 16px);
  width:min(1440px, calc(100vw - 32px));
  background:rgba(12,11,16,0.98);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.5);
  z-index:5;
  text-align:left;
}
.xm-panel[hidden] { display:none; }
/* Caret pointing up at the button (header.js sets --xm-caret). */
.xm-panel::before {
  content:''; position:absolute; top:-8px; right:var(--xm-caret, 40px);
  width:14px; height:14px;
  background:rgb(12,11,16);
  border-top:1px solid rgba(255,255,255,0.12);
  border-left:1px solid rgba(255,255,255,0.12);
  transform:rotate(45deg);
}
.xm-body {
  position:relative;
  max-height:calc(100vh - var(--xm-top, var(--nav-h)) - 24px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:28px 32px 26px;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,68,0.35) transparent;
}
.xm-title {
  margin-bottom:22px;
  font-family:var(--f-heading); font-size:28px; font-weight:400; line-height:1.25;
  color:#fff;
}
/* Head row: the search field (about half the panel) and the feature items. */
.xm-head { display:flex; align-items:stretch; gap:0 28px; margin-bottom:30px; }
.xm-search { position:relative; flex:0 0 50%; min-width:0; align-self:center; }
.xm-search svg {
  position:absolute; left:20px; top:50%; margin-top:-11px; z-index:2;
  color:var(--white-dim); pointer-events:none;
}
/* 1.5px gradient border, gold on the left running to white on the right,
   drawn by .xm-search::before: a gradient layer masked down to a 1.5px
   ring (a real `border` would be snapped to whole device pixels — thinner
   than 1px on some screens). The gradient is three times the field's
   width and sweeps in from the right as the menu opens (xm-border-in),
   settling on its gold→white stretch. */
.xm-search::before {
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:8px; padding:1.5px;
  background:linear-gradient(90deg, var(--gold) 0%, #fff 33.3%, var(--gold) 66.6%, #fff 100%);
  background-size:300% 100%; background-position:100% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.xm-panel:not([hidden]) .xm-search::before { animation:xm-border-in 1.3s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes xm-border-in {
  from { background-position:0 0; opacity:0.35; }
  to   { background-position:100% 0; opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .xm-panel:not([hidden]) .xm-search::before { animation:none; } }
.xm-search-input {
  display:block;
  width:100%; height:59px; padding:0 20px 0 58px;
  border:0; border-radius:8px;
  background:#0a0912;
  box-shadow:0 0 22px var(--gold-glow);
  color:var(--white); font-family:var(--f-ui); font-size:18px;
  outline:none; transition:box-shadow 0.2s;
  -webkit-appearance:none; appearance:none;
}
.xm-search-input::placeholder { color:var(--white-dim); }
.xm-search-input:focus { box-shadow:0 0 30px var(--gold-glow), 0 0 0 1px rgba(255,255,255,0.35); }
.xm-search-input::-webkit-search-cancel-button { filter:invert(0.7); cursor:pointer; }
.xm-features { display:flex; flex:1 1 auto; min-width:0; }
.xm-feature {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:0 6px;
  border-left:1px solid rgba(255,255,255,0.15);
  text-align:center; font-family:var(--f-ui); line-height:1.25;
}
.xm-feature-icon { display:block; color:var(--gold); margin-bottom:5px; }
.xm-feature-icon svg { display:block; }
.xm-feature-1 { font-size:15px; color:#fff; white-space:nowrap; }
.xm-feature-2 { font-size:13px; color:var(--white-dim); white-space:nowrap; }

.xm-cols { display:grid; grid-template-columns:repeat(var(--xm-n, 5), minmax(0, 1fr)); }
.xm-col { min-width:0; padding:0 22px; }
.xm-col:first-child { padding-left:4px; }
.xm-col:last-child { padding-right:4px; }
.xm-col + .xm-col { border-left:1px solid rgba(255,255,255,0.12); }
.xm-col[hidden] { display:none; }
.xm-col-title {
  margin-bottom:14px; padding-left:12px;
  font-family:var(--f-heading); font-size:16px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; line-height:1.3;
  color:var(--gold);
}
.xm-list { display:flex; flex-direction:column; gap:2px; }
.xm-item[hidden] { display:none; }
.xm-col:not(.is-expanded) .xm-extra { display:none; }
.xm-panel.is-searching .xm-extra:not([hidden]) { display:block; }
.xm-site {
  display:flex; align-items:center; gap:12px;
  height:38px; padding:0 12px;
  border-radius:8px;
  font-family:var(--f-body); font-size:16px; line-height:1.3;
  color:#fff;
  transition:background 0.15s, color 0.15s;
}
.xm-site:hover, .xm-site:focus-visible { background:rgba(255,255,255,0.07); outline:none; }
/* The current site: a solid gold pill, dark text, chevron at the right edge. */
.xm-site.is-current, .xm-site.is-current:hover, .xm-site.is-current:focus-visible { background:var(--gold); color:#0a0912; }
.xm-site-chevron { flex-shrink:0; margin-left:auto; }
.xm-site.is-best { box-shadow:inset 0 0 0 1px var(--gold-dim); }
.xm-site.is-current.is-best { box-shadow:inset 0 0 0 1px #fff; }
.xm-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Topic match: "· 14 events" after the name (header.js) */
.xm-topic { flex-shrink:0; font-family:var(--f-ui); font-size:12.5px; white-space:nowrap; color:var(--white-dim); }
.xm-topic::before { content:'·'; margin-right:6px; }
.xm-topic[hidden] { display:none; }
.xm-site.is-current .xm-topic { color:rgba(10,9,18,0.7); }
.xm-flag {
  flex-shrink:0; width:30px; height:20px;
  object-fit:cover; border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14);
}
.xm-flag.xm-icon { object-fit:contain; box-shadow:none; }
.xm-flag-blank { display:block; background:rgba(255,255,255,0.08); }
.xm-more {
  display:block;
  margin-top:14px; padding:4px 12px;
  font-family:var(--f-ui); font-size:15px; line-height:1.35; text-align:left;
  color:var(--gold); transition:color 0.2s;
}
.xm-more span { margin-left:5px; }
.xm-more:hover, .xm-more:focus-visible { color:#fff; }
.xm-panel.is-searching .xm-more { display:none; }
.xm-empty { padding:6px 4px 4px; color:var(--white-dim); font-family:var(--f-ui); font-size:15px; }
.xm-empty[hidden] { display:none; }

/* Tablets: the features drop under a full-width search field; 3 then 2 columns. */
@media (max-width:1100px) {
  .xm-body { padding:24px 24px 22px; }
  .xm-title { font-size:22px; margin-bottom:18px; }
  .xm-head { flex-wrap:wrap; gap:18px 0; margin-bottom:26px; }
  .xm-search { flex:1 1 100%; }
  .xm-search-input { height:56px; font-size:18px; }
  .xm-features { flex:1 1 100%; }
  .xm-feature:first-child { border-left:none; }
  .xm-cols { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:26px; }
  .xm-col, .xm-col:first-child, .xm-col:last-child { padding:0 18px; }
  .xm-col + .xm-col { border-left:none; }
}
@media (max-width:900px) {
  .xm-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* Phones: globe-only button; the menu is a full-width sheet under the nav,
   one column, no feature row. */
@media (max-width:760px) {
  .country-menu { margin-left:6px; }
  .xm-btn { width:44px; height:44px; padding:0; justify-content:center; gap:0; }
  .xm-btn-label, .xm-chevron { display:none; }
  .xm-panel {
    top:var(--nav-h); left:0; right:0; width:auto;
    border-radius:0 0 8px 8px; border-left:none; border-right:none;
  }
  .xm-panel::before { display:none; }
  .xm-body { max-height:calc(100vh - var(--nav-h) - 2px); max-height:calc(100dvh - var(--nav-h) - 2px); padding:16px 16px 20px; }
  .xm-title { font-size:18px; margin-bottom:14px; }
  .xm-head { margin-bottom:20px; }
  .xm-search-input { height:50px; font-size:16px; padding-left:50px; }
  .xm-search svg { left:16px; width:20px; height:20px; margin-top:-10px; }
  .xm-features { display:none; }
  .xm-cols { grid-template-columns:1fr; row-gap:22px; }
  .xm-col, .xm-col:first-child, .xm-col:last-child { padding:0; }
  .xm-site { height:42px; }
}

/* ════════════════════════════════════════
   LANDING-ONLY — the page scrolls under the fixed header, so it spans the
   width on a solid background; the AllHistories logo; menu items with
   dropdowns (index.php, script at the end of the page).
════════════════════════════════════════ */
#main-nav {
  left:0; right:0;
  /* No backdrop-filter: it would make this the containing block of the
     fixed burger menu and country panel, and draw them see-through. */
  background:rgba(5,3,8,0.96);
}
@media (min-width:761px) {
  #main-nav { padding:0 55px; }
}
#app-logo-btn { display:block; }
#app-logo { width:240px; height:auto; filter:none; }

.nav-item { position:relative; }
.nav-menu-btn { display:flex; align-items:center; gap:7px; }
.nav-menu-chevron { flex-shrink:0; margin-top:2px; transition:transform 0.2s; }
.nav-item.is-open .nav-menu-chevron { transform:rotate(180deg); }
/* The page's own section: gold text with the gold underline. */
.nav-link.active { color:var(--gold); }

.nav-menu {
  display:none;
  position:absolute; top:calc(100% + 22px); left:-16px;
  min-width:250px;
  padding:10px;
  background:rgba(12,11,16,0.98);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.5);
  z-index:5;
}
/* Hover bridge across the gap between the menu item and its panel. */
.nav-menu::before { content:''; position:absolute; left:0; right:0; top:-24px; height:24px; }
.nav-item.is-open .nav-menu { display:block; }
/* Desktop hover uses is-open too, with a short closing delay in index.php. */
.nav-menu-list { display:flex; flex-direction:column; gap:2px; }
.nav-menu-link {
  display:flex; align-items:center; gap:12px;
  min-height:40px; padding:6px 12px;
  border-radius:8px;
  font-family:var(--f-body); font-size:15.5px; line-height:1.3;
  color:#fff; white-space:nowrap;
  transition:background 0.15s, color 0.15s;
}
a.nav-menu-link:hover, a.nav-menu-link:focus-visible { background:rgba(255,255,255,0.07); outline:none; }
.nav-menu-icon { flex-shrink:0; width:24px; height:24px; object-fit:contain; }
.nav-menu-count { margin-left:auto; padding-left:18px; font-size:13px; color:var(--white-dim); }
.nav-menu-link.is-soon { color:var(--white-dim); cursor:default; }
.nav-item-topics { position:static; }
.nav-megamenu {
  top:calc(var(--nav-h) - 1px); left:50%; transform:translateX(-50%);
  width:min(1160px, calc(100vw - 48px)); padding:24px;
  max-height:calc(100dvh - var(--nav-h) - 20px); overflow-y:auto;
  border-color:var(--line, rgba(201,168,68,.22)); border-radius:0 0 16px 16px;
}
.nav-megamenu-heading { margin:0 0 16px; color:var(--gold); font-family:var(--f-ui); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.nav-megamenu .nav-menu-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.topic-menu-card.nav-menu-link { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:195px; height:100%; padding:20px; overflow:hidden; white-space:normal; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:#181620; }
.topic-menu-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .3s; }
.topic-menu-card::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,3,8,.12),rgba(5,3,8,.75) 45%,rgba(5,3,8,.97)); }
.topic-menu-copy { display:flex; flex-direction:column; gap:8px; }
.topic-menu-title { font-family:var(--f-heading); font-size:23px; line-height:1.15; color:#fff; }
.topic-menu-title > span { color:var(--gold); font-family:var(--f-ui); font-size:17px; }
.topic-menu-intro { font-size:14px; line-height:1.45; color:rgba(255,255,255,.8); }
a.topic-menu-card:hover, a.topic-menu-card:focus-visible { border-color:var(--gold); outline:2px solid var(--gold); outline-offset:2px; }
.topic-menu-card:hover .topic-menu-image { transform:scale(1.05); }
@media (min-width:761px) and (max-width:1100px) { .nav-megamenu .nav-menu-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .topic-menu-image { transition:none; } }
.nav-menu-soon {
  margin-left:auto; padding:1px 8px;
  border:1px solid rgba(201,168,68,0.35); border-radius:999px;
  font-family:var(--f-ui); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-dim);
}

@media (max-width:760px) {
  #app-logo { width:170px; }
  .nav-links { gap:0; padding:8px 0 14px; }
  .nav-item { width:100%; }
  .nav-menu-btn { justify-content:space-between; }
  .nav-menu {
    position:static; min-width:0;
    padding:0 12px 8px 24px;
    background:none; border:none; box-shadow:none;
  }
  .nav-menu::before { display:none; }
  .nav-megamenu { width:100%; transform:none; max-height:none; padding:12px 16px 20px; }
  .nav-megamenu .nav-menu-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topic-menu-card.nav-menu-link { min-height:180px; padding:16px; }
  .topic-menu-title { font-size:21px; }
}
@media (max-width:440px) { .nav-megamenu .nav-menu-list { grid-template-columns:1fr; } }