/*
 * Zuri Society website: shared styles for the 2026 redesign.
 * Load after tokens.css. Page layouts are written inline in each page (as designed);
 * this file holds the base rules, the nav and footer, the corridor map and the hover states.
 */

/* ── Base ──────────────────────────────────────────────────────────────── */
body { background: var(--page-bg); }
a { color: var(--gold-primary); text-decoration: none; }
a:hover { color: var(--gold-light); }
em { font-style: italic; color: var(--gold-primary); }
img { max-width: 100%; }
html.zuri-cursor, html.zuri-cursor * { cursor: none; }
:focus-visible { outline: 1px solid var(--gold-primary); outline-offset: 4px; }
[id] { scroll-margin-top: 96px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; left: 16px; top: -64px; z-index: 200; padding: 10px 18px; border-radius: 999px; background: var(--gold-primary); color: #0A0A0A; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.skip-link:focus { top: 16px; color: #0A0A0A; }

/* Grid spans that only apply once the grid has the columns for them. Below that the block takes
   the full row (a plain span would add columns and push the page wider than the phone). */
@media (min-width: 560px) { .gc-span-2 { grid-column: span 2; } }
@media (max-width: 559px) { .gc-span-2 { grid-column: 1 / -1; } }
@media (min-width: 960px) { .gc-span-3 { grid-column: span 3; } }
@media (max-width: 959px) { .gc-span-3 { grid-column: 1 / -1; } }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.zn-bar { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.zn { pointer-events: auto; width: 100%; max-width: 1240px; border-radius: 999px; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.zn-brand { display: flex; align-items: center; gap: 14px; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.32em; color: var(--gold-primary); white-space: nowrap; }
.zn-brand img { width: 38px; height: 38px; display: block; flex: none; }
.zn-links { display: none; align-items: center; gap: 28px; }
.zn-links a, .zn-login { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); transition: color 300ms; }
.zn-links a:hover { color: var(--text-primary); }
.zn-links a[aria-current="page"] { color: var(--gold-primary); }
.zn-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.zn-login { display: none; letter-spacing: 0.16em; padding: 10px 14px; }
.zn-login:hover { color: var(--gold-primary); }
.zn-apply { font-size: 12px; padding: 11px 22px; }
.zn-theme { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 300ms; }
.zn-theme:hover { border-color: var(--gold-primary); color: var(--gold-primary); }
.zn-theme .ico-sun, :root[data-theme="light"] .zn-theme .ico-moon { display: none; }
:root[data-theme="light"] .zn-theme .ico-sun { display: block; }
.zn-burger { width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--text-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.zn-burger span { width: 20px; height: 1.5px; background: currentColor; display: block; transition: transform 300ms var(--ease-spring); }
.zn-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.zn-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.zn-drawer { position: fixed; inset: 0; z-index: 99; background: var(--bg-base); flex-direction: column; justify-content: center; padding: 96px 32px 48px; gap: 8px; overflow-y: auto; }
.zn-drawer:not([hidden]) { display: flex; }
.zn-drawer > a { font-family: var(--font-display); font-size: clamp(34px, 11vw, 44px); font-weight: 500; line-height: 1.25; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding: 10px 0; }
.zn-drawer > a[aria-current="page"] { color: var(--gold-primary); }
.zn-drawer-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
html.zn-locked, html.zn-locked body { overflow: hidden; }
/* Narrow screens: the theme switch moves into the menu, and the wordmark gives way on small phones,
   so Apply and the menu button always fit. */
@media (min-width: 1120px) {
  .zn-links { display: flex; }
  .zn-login { display: inline-block; }
  .zn-burger, .zn-drawer { display: none !important; }
}
@media (max-width: 1119px) { .zn-theme { display: none; } }
@media (max-width: 479px) { .zn-word { display: none; } }

/* ── Footer ────────────────────────────────────────────────────────────── */
.zf { border-top: 1px solid var(--border-subtle); padding: 96px clamp(20px, 5vw, 64px) 40px; background: var(--bg-base); }
.zf-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 64px; }
.zf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px; }
.zf-brand { min-width: 0; display: flex; flex-direction: column; gap: 20px; max-width: 440px; grid-column: 1 / -1; }
@media (min-width: 560px) { .zf-brand { grid-column: span 2; } }
.zf-mark { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.32em; color: var(--gold-primary); }
.zf-mark img { width: 64px; height: 64px; display: block; }
.zf-line { font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-style: italic; font-weight: 500; color: var(--text-primary); text-wrap: pretty; }
.zf-cities { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; }
.zf-col { display: flex; flex-direction: column; gap: 14px; }
.zf-col a { font-size: 15px; color: var(--text-secondary); overflow-wrap: anywhere; }
.zf-col a:hover { color: var(--text-primary); }
.zf-bottom { border-top: 1px solid var(--border-subtle); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); }
.zf-legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.zf-legal a { font-size: 13px; color: var(--text-secondary); }
.zf-legal a:hover { color: var(--gold-primary); }

/* ── Corridor map (signal-map.js) ───────────────────────────────────────── */
.zmap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); color: var(--text-primary); }
.zmap-map { position: relative; min-height: 0; overflow: hidden; }
.zmap-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zmap-feed { border-left: 1px solid var(--border-subtle); padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow: hidden; }
.zmap-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-strong); }
.zmap-label { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-primary); }
.zmap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zmap-note { padding: 18px 0; font-size: 15px; color: var(--text-secondary); }
.zmap-item { padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.zmap-item a { display: flex; flex-direction: column; gap: 8px; color: inherit; transition: transform 300ms var(--ease-spring); }
.zmap-item a:hover { transform: translateX(6px); }
.zmap-item a:hover .zmap-headline { color: var(--gold-light); }
.zmap-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.zmap-type { color: var(--gold-primary); }
.zmap-time { margin-left: auto; letter-spacing: 0.08em; }
.zmap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.zmap-dot.s { background: var(--gold-primary); }
.zmap-dot.j { background: transparent; border: 1px solid var(--text-primary); }
.zmap-headline { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--text-primary); text-wrap: pretty; transition: color 300ms; }
.zmap-legend { position: absolute; left: 28px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); pointer-events: none; }
.zmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.zmap-legend .ls { width: 22px; height: 1.5px; background: var(--gold-primary); }
.zmap-legend .lj { width: 22px; height: 0; border-top: 1.5px dashed var(--text-primary); opacity: 0.8; }
.zmap-legend .lh { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-primary); box-shadow: 0 0 0 4px rgba(201,169,110,0.2); }
.zmap-country { stroke-width: 0.6; }
.zmap .c-other { fill: transparent; stroke: var(--border-subtle); }
.zmap .c-africa { fill: rgba(201,169,110,0.045); stroke: rgba(201,169,110,0.26); }
.zmap .c-gulf { fill: rgba(201,169,110,0.16); stroke: rgba(201,169,110,0.7); stroke-width: 0.9; }
.zmap-grat { fill: none; stroke: rgba(201,169,110,0.06); stroke-width: 0.5; }
.zmap-arc { fill: none; stroke-linecap: round; }
.zmap-arc.s { stroke: var(--gold-primary); stroke-width: 1.6; }
.zmap-arc.j { stroke: var(--text-primary); stroke-width: 1.1; }
.zmap-arc.trail.j { stroke-dasharray: 3 5 !important; }
.zmap-src { fill: var(--text-primary); opacity: 0.45; }
.zmap-src.on { opacity: 1; }
.zmap-src-label, .zmap-hub-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.zmap-src-label { fill: var(--text-primary); paint-order: stroke; stroke: rgba(10,10,10,0.75); stroke-width: 3px; }
.zmap-hub-label { fill: var(--gold-light); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; paint-order: stroke; stroke: rgba(10,10,10,0.6); stroke-width: 2px; }
.zmap-hub { fill: var(--gold-primary); }
.zmap-hub-ring { fill: none; stroke: var(--gold-primary); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: zmap-breathe 3.2s ease-in-out infinite; }
@keyframes zmap-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.12; transform: scale(1.9); } }
.zmap-pulse { fill: none; stroke: var(--gold-primary); }
.zmap-comet { fill: var(--gold-light); filter: url(#zmap-glow); }
:root[data-theme="light"] .zmap-src-label, :root[data-theme="light"] .zmap-hub-label { stroke: rgba(245,240,235,0.85); }
:root[data-theme="light"] .zmap-hub-label { fill: var(--gold-dark); }
@media (max-width: 820px) {
  .zmap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .zmap-feed { border-left: none; border-top: 1px solid var(--border-subtle); padding: 20px; }
  .zmap-item:nth-child(n+3) { display: none; }
  .zmap-legend { left: 16px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .zmap-hub-ring { animation: none; } }

/* ── Hover and focus states from the design (generated; class names are content hashes) ── */
.fc-0267d8:focus { border-color:var(--gold-primary) !important; }
.fc-7709ef:focus { border-bottom-color:var(--gold-primary) !important; }
.hv-31607d:hover { color:var(--text-primary) !important; }
.hv-459f66:hover { border-color:var(--gold-primary) !important;color:var(--gold-primary) !important; }
.hv-4dfab7:hover { background:rgba(201,169,110,0.05) !important; }
.hv-52c202:hover { background:#E8D5A8 !important; }
.hv-58db32:hover { color:#8A6E3E !important;border-color:#8A6E3E !important; }
.hv-6544fa:hover { color:#C9A96E !important;border-color:#C9A96E !important; }
.hv-73af3b:hover { padding-left:10px !important; }
.hv-853c49:hover { border-color:#8A6E3E !important;color:#1A1A1A !important; }
.hv-854bb6:hover { background:#8A6E3E !important;color:#F5F0EB !important; }
.hv-99bd2f:hover { transform:translateY(-6px) !important;border-color:var(--border-strong) !important;box-shadow:0 20px 48px rgba(139,110,62,0.16) !important; }
.hv-9a302b:hover { color:var(--gold-primary) !important; }
.hv-a5a11f:hover { border-color:var(--gold-primary) !important;color:var(--text-primary) !important; }
.hv-af01b4:hover { color:var(--gold-light) !important; }
.hv-e11e57:hover { transform:translateY(-4px) !important;border-color:var(--border-strong) !important; }
.hv-e183da:hover { padding-left:20px !important;background:rgba(201,169,110,0.05) !important; }
.hv-f07212:hover { transform:scale(1.05) !important; }