/*
 * Theme Name: Arnathia
 * Theme URI: https://arnathia.com
 * Description: Recovered Archives — a two-era FSE theme for the world of Arnathia. Design system in ../DESIGN.md.
 * Author: Kahuna Development
 * Author URI: https://kahunatheelder.com
 * Version: 0.4.2
 * License: GPL v2 or later
 * Text Domain: arnathia
 * Requires at least: 6.0
 * Requires PHP: 8.0
 * Block Theme: true
 */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root {
  --void: #06080D;
  --surface: #0E121B;
  --surface-2: #131825;
  --urn-gold: #C9A961;
  --urn-bright: #F5E3A4;
  --urn-cyan: #39E6D8;
  --bone: #E9DCC3;
  --bone-2: #F1E7D2;
  --ink: #2A2420;
  --ink-soft: #4A4238;
  --arn-teal: #0B5C58;
  --arn-gold: #A98A4B;
  --ember: #FF5A36;
  --line: #232936;
  --dim: #8A93A6;
  --faint: #5B6474;

  --font-display: Rajdhani, system-ui, sans-serif;
  --font-title: "IM Fell English", Georgia, serif;
  --font-narrative: Fraunces, Georgia, serif;
  --font-body: Spectral, Georgia, serif;
  --font-ui: "Space Mono", ui-monospace, Menlo, monospace;
}

/* ============================================================================
   BASE
   ============================================================================ */
body {
  background:
    radial-gradient(ellipse 85% 45% at 50% 0%, rgba(201,169,97,.05), transparent 65%),
    var(--void);
  color: var(--dim);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; height: auto; }
::selection { background: rgba(201, 169, 97, .35); }

/* Content links: body text color + cyan glow (no bright cyan). */
.wp-block-post-content a { color: inherit; text-shadow: 0 0 8px rgba(57,230,216,.4), 0 0 18px rgba(57,230,216,.2); }
.wp-block-post-content a:hover, .wp-block-post-content a:focus { color: inherit; text-shadow: 0 0 10px rgba(57,230,216,.75), 0 0 24px rgba(57,230,216,.45); }

/* Placeholder for WorldAnvil images that have no recovered file. */
.wa-missing-image { display: block; border: 1px dashed var(--faint); border-radius: 8px; padding: 22px; text-align: center; margin: 12px 0; }
.wa-missing-image figcaption { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ============================================================================
   ERA SKINS (body.era-* set by functions.php from the post's era taxonomy)
   ============================================================================ */
/* Urnati — the default: gold on void, engineered */
body.era-urnati {
  background: var(--void);
  --skin-accent: var(--urn-gold);
  --skin-bright: var(--urn-bright);
  --skin-hi: var(--urn-cyan);
  --skin-line: var(--line);
}
body.era-urnati .site-title,
body.era-urnati h1, body.era-urnati h2, body.era-urnati h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--urn-bright);
}

/* Arnathia — bone paper, living */
body.era-arnathia {
  background:
    radial-gradient(ellipse 85% 45% at 50% 0%, rgba(169,138,75,.08), transparent 65%),
    var(--bone);
  color: var(--ink);
  --skin-accent: var(--arn-teal);
  --skin-bright: var(--ink);
  --skin-hi: var(--arn-gold);
  --skin-line: #D8C9AC;
}
body.era-arnathia h1, body.era-arnathia h2, body.era-arnathia h3 {
  font-family: var(--font-title);
  font-weight: 400;
  color: var(--ink);
}

/* ============================================================================
   HERO (title superimposed; middle scrim band; safe zone = vertical center)
   ============================================================================ */
.arnathia-hero { position: relative; height: 330px; overflow: hidden; }
.arnathia-hero .hero-art { position: absolute; inset: 0; }
.arnathia-hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,13,0) 0%, rgba(6,8,13,.4) 28%, rgba(6,8,13,.92) 50%, rgba(6,8,13,.93) 62%, rgba(6,8,13,.4) 82%, rgba(6,8,13,.15) 100%);
}
.arnathia-hero .hero-content {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  padding: 0 34px; text-align: center;
}
.arnathia-hero .hero-tag, .arnathia-hero .era-tag { font-family: var(--font-ui); font-size: .9rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 10px rgba(6,8,13,.8), 0 1px 2px rgba(6,8,13,.95); }
.arnathia-hero .era-tag { display: block; margin-bottom: 12px; }
.arnathia-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin: 10px 0 0; color: var(--bone); text-shadow: 0 2px 18px rgba(6,8,13,.8), 0 1px 3px rgba(6,8,13,.95); }
body.era-arnathia .arnathia-hero h1 { color: var(--bone); }
.arnathia-hero .hero-dek { font-family: var(--font-narrative); font-style: italic; margin-top: 10px; color: #C9C4B8; font-size: 1.02rem; }

/* Home hero: the exported 2400x600 PNG (art + emblem + title baked in).
   Keep the h1 as screen-reader text for a11y/SEO. */
.home-hero { background: url('assets/img/arnathia-hero.webp') center/cover no-repeat; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Side scrim: darken the wide gutters toward the viewport edges (wide screens). */
@media (min-width: 1280px) {
  body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 20vw; max-width: 380px; pointer-events: none; z-index: 1; }
  body::before { left: 0; background: linear-gradient(90deg, rgba(6,8,13,.68), rgba(6,8,13,0)); }
  body::after { right: 0; background: linear-gradient(90deg, rgba(6,8,13,0), rgba(6,8,13,.68)); }
}

/* Home intro (between hero and chronicle cards) */
.world-intro { text-align: center; padding: 56px 30px 0; }
.world-intro .intro-eyebrow { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--urn-gold); margin: 0 0 20px; }
.world-intro .intro-lead { font-family: var(--font-narrative); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.5; color: var(--bone); margin: 0 auto 18px; max-width: 34em; }
.world-intro .intro-support { font-family: var(--font-narrative); font-size: 1.05rem; color: var(--dim); margin: 0 auto; max-width: 30em; }
.world-intro .intro-divider { font-family: Georgia, serif; color: var(--urn-gold); font-size: 1.5rem; line-height: 1; margin: 40px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.world-intro .intro-divider::before, .world-intro .intro-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ∞ emblem (1200x796, baked-in FX, transparent). Theme-relative so it resolves with the theme. */
.brand-emblem { width: 96px; height: 64px; background: url('assets/img/infinity-emblem.webp') center/contain no-repeat; background-size: contain; flex: none; }
.footer-emblem { width: 120px; height: 80px; margin: 0 auto 18px; }

/* ============================================================================
   PRIMARY NAV (era links + World Archives category tree)
   ============================================================================ */
.arnathia-nav { position: relative; }
.arnathia-nav__root { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.arnathia-nav__item { position: relative; list-style: none; margin: 0; padding: 0; }
.arnathia-nav__item > a {
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); text-decoration: none; white-space: nowrap;
}
.arnathia-nav__item > a:hover { color: var(--urn-gold); }
.arnathia-nav__item.is-active > a { color: var(--urn-cyan); }
/* Multi-level flyouts: dark panels, depth-2+ fly left. */
.arnathia-nav__sub {
  position: absolute; top: calc(100% + 10px); right: -6px; min-width: 250px;
  background: rgba(6,8,13,.96); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 0; display: none; flex-direction: column; z-index: 100;
}
.arnathia-nav__item.has-child:hover > .arnathia-nav__sub { display: flex; }
/* Hover bridge: invisible strip below any has-child trigger that spans the gap
   to the submenu, so the dropdown stays open while the pointer crosses it. */
.arnathia-nav__item.has-child::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}
.arnathia-nav__sub .arnathia-nav__item > a { display: block; padding: .5em 1em; font-size: .66rem; color: var(--dim); }
.arnathia-nav__sub .arnathia-nav__item:hover > a { color: var(--urn-gold); }
/* Depth-2+ flyouts: flush against the parent (no horizontal gap), extend above
   so diagonal movement stays within the hover zone. */
.arnathia-nav__sub .arnathia-nav__sub { top: -10px; right: 100%; }
.arnathia-nav__sub .arnathia-nav__item.has-child:hover > .arnathia-nav__sub { display: flex; }
/* Era skins: Arnathia (bone) nav reads in ink/teal. */
body.era-arnathia .arnathia-nav__item > a { color: var(--ink-soft); }
body.era-arnathia .arnathia-nav__item > a:hover { color: var(--arn-teal); }
body.era-arnathia .arnathia-nav__item.is-active > a { color: var(--arn-teal); }
body.era-arnathia .arnathia-nav__sub { background: rgba(241,231,210,.98); border-color: #D8C9AC; }
body.era-arnathia .arnathia-nav__sub .arnathia-nav__item > a { color: var(--ink); }
body.era-arnathia .arnathia-nav__sub .arnathia-nav__item:hover > a { color: var(--arn-teal); }
/* Mobile: pure-CSS checkbox toggle; submenus open on focus-within. */
.arnathia-nav__toggle-label { display: none; }
@media (max-width: 860px) {
  .arnathia-nav__toggle-label { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
  .arnathia-nav__toggle-label .bar { width: 22px; height: 2px; background: var(--bone); }
  body.era-arnathia .arnathia-nav__toggle-label .bar { background: var(--ink); }
  .arnathia-nav__root {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(6,8,13,.98); border: 1px solid var(--line); border-radius: 8px;
    padding: 10px; min-width: 240px; z-index: 100;
  }
  .arnathia-nav__toggle:checked ~ .arnathia-nav__root { display: flex; }
  .arnathia-nav__item > a { display: block; padding: .55em .5em; }
  .arnathia-nav__item.has-child::after { display: none; }
  .arnathia-nav__sub { position: static; display: none; padding: 0 0 0 12px; min-width: 0; background: transparent; border: 0; border-radius: 0; }
  .arnathia-nav__item.has-child:focus-within > .arnathia-nav__sub,
  .arnathia-nav__item.has-child:hover > .arnathia-nav__sub { display: flex; }
}

/* ============================================================================
   ERA POSITION BAR (the ∞ at the Cataclysm point; marker = date, bracket = range)
   ============================================================================ */
.era-bar { padding: 16px 34px 18px; border-bottom: 1px solid var(--line); background: rgba(6,8,13,.82); }
.era-bar .rail {
  position: relative; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--urn-gold) 0%, var(--urn-gold) 33%, var(--ember) 46%, var(--ember) 54%, var(--arn-teal) 67%, var(--arn-teal) 100%);
}
.era-bar .labels { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: #DFE3EB; text-shadow: 0 1px 3px rgba(6,8,13,.95), 0 0 10px rgba(6,8,13,.7); }
.era-bar .labels .c { color: #FF8A6A; }
.era-marker { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--urn-cyan); box-shadow: 0 0 5px 2px rgba(57,230,216,.9), 0 0 16px 5px rgba(57,230,216,.5), 0 0 34px 10px rgba(57,230,216,.25); }
.era-range { position: absolute; top: -6px; height: 14px; border-top: 2px solid var(--urn-bright); border-bottom: 1px solid rgba(245,227,164,.35); background: rgba(201,169,97,.18); }
.era-range .tick { position: absolute; top: -4px; width: 2px; height: 22px; background: var(--urn-bright); box-shadow: 0 0 4px 1px rgba(245,227,164,.85), 0 0 12px 4px rgba(201,169,97,.4); }
.era-range .tick.l { left: 0; }
.era-range .tick.r { right: 0; }
.era-inf { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: Georgia, serif; font-size: 1.35rem; line-height: 1; color: var(--urn-gold); background: rgba(6,8,13,.9); border: 1px solid rgba(201,169,97,.4); border-radius: 50%; padding: 2px 8px 4px; text-shadow: 0 0 8px rgba(201,169,97,.7); }

/* ============================================================================
   PULLQUOTES (era-personalized; attribution follows the era voice)
   ============================================================================ */
.pullquote { margin: 30px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--arn-gold); }
.pullquote .q { font-family: var(--font-title); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.4; color: var(--bone); max-width: 30ch; }
.pullquote .attr { margin-top: 12px; font-family: var(--font-title); font-style: italic; font-size: 1.02rem; color: var(--dim); }
body.era-urnati .pullquote { border-left-color: var(--urn-gold); }
body.era-urnati .pullquote .q { font-family: var(--font-ui); font-style: normal; font-size: .98rem; letter-spacing: .02em; color: var(--urn-cyan); }
body.era-urnati .pullquote .attr { font-family: var(--font-ui); font-style: normal; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--urn-gold); }

/* ============================================================================
   CARDS (imagery-forward — never a text wall)
   ============================================================================ */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.card-grid .arnathia-card { flex: 1 1 240px; max-width: 320px; }

/* Query-loop chronicle grid: renders the query's posts as imagery-forward cards. */
.chronicle-grid .wp-block-post-template { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; list-style: none; padding: 0; align-items: stretch; align-content: flex-start; }
.wc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; align-items: stretch; align-content: flex-start; }
.wc-line { margin-bottom: 40px; }
.wc-label { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); margin: 0 0 18px; }
.chronicle-grid .wp-block-post, .wc-grid .wc-card { flex: 1 1 240px; max-width: 320px; display: flex; flex-direction: column; height: 264px; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.chronicle-grid .card-art { height: 150px; }
.chronicle-grid .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-grid .card-art { height: 150px; object-fit: cover; }
.chronicle-grid .card-title, .wc-grid .card-title { flex: 1; font-family: var(--font-narrative); font-size: 1.08rem; color: var(--bone); padding: 14px 16px 16px; margin: 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chronicle-grid .card-title a, .wc-grid .card-title a { color: inherit; text-decoration: none; }
.chronicle-grid .card-title a:hover, .wc-grid .card-title a:hover { color: var(--urn-bright); }
.chronicle-grid .era-tag, .wc-grid .era-tag { padding: 14px 16px 0; }
.wc-grid .era-tag { display: block; }
.arnathia-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); position: relative; display: flex; flex-direction: column; }
.arnathia-card .card-art { height: 150px; }
.arnathia-card .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arnathia-card .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.arnathia-card .card-title { font-family: var(--font-narrative); font-size: 1.08rem; color: var(--bone); line-height: 1.25; }
.arnathia-card .card-title a { color: inherit; text-decoration: none; }
.arnathia-card .card-title a:hover { color: var(--urn-bright); }
.arnathia-card .card-meta { margin-top: auto; font-family: var(--font-ui); font-size: .68rem; color: var(--faint); }
.arnathia-card .era-tag { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--urn-gold); }
/* Urnati-era card: engineered title voice */
.arnathia-card.era-urnati .card-title { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; color: var(--urn-bright); }
.arnathia-card.era-urnati .era-tag { color: var(--urn-gold); }

/* Arnathia skin: cards read as bone-paper panels, ink text (not dark museum panels). */
body.era-arnathia .chronicle-grid .wp-block-post,
body.era-arnathia .wc-grid .wc-card,
body.era-arnathia .arnathia-card { background: var(--bone-2); border-color: #D8C9AC; }
body.era-arnathia .chronicle-grid .card-title,
body.era-arnathia .wc-grid .card-title,
body.era-arnathia .arnathia-card .card-title { color: var(--ink); }
body.era-arnathia .chronicle-grid .card-title a:hover,
body.era-arnathia .wc-grid .card-title a:hover,
body.era-arnathia .arnathia-card .card-title a:hover { color: var(--arn-teal); }
body.era-arnathia .chronicle-grid .era-tag,
body.era-arnathia .wc-grid .era-tag { color: var(--arn-teal); }
body.era-arnathia .wc-label,
body.era-arnathia .arnathia-card .card-meta { color: var(--ink-soft); }

/* Urnati schematic art (CSS placeholder for created assets) */
.art-urnati { background:
    radial-gradient(120% 90% at 85% 10%, rgba(57,230,216,.22), transparent 45%),
    radial-gradient(100% 100% at 15% 90%, rgba(201,169,97,.34), transparent 50%),
    repeating-linear-gradient(90deg, rgba(201,169,97,.10) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(201,169,97,.10) 0 1px, transparent 1px 42px),
    linear-gradient(160deg, #0A0D16, #07090F); }
.art-arnathia { background:
    radial-gradient(130% 100% at 50% 120%, rgba(201,169,97,.35), transparent 55%),
    radial-gradient(80% 70% at 25% 20%, rgba(180,160,120,.22), transparent 60%),
    linear-gradient(175deg, #D9C9A8, #C9B88F 55%, #B8A67E); }
.art-cataclysm { background:
    radial-gradient(120% 90% at 50% 25%, rgba(255,90,54,.30), transparent 55%),
    repeating-linear-gradient(32deg, rgba(255,90,54,.13) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-32deg, rgba(255,90,54,.10) 0 1px, transparent 1px 34px),
    linear-gradient(165deg, #1C0C07, #0A0503); }

/* Era archive hero rail: where this era sits on the world timeline. */
.era-hero .era-hero-rail { margin: 20px auto 0; max-width: 430px; }
.era-hero .era-hero-rail .rail { position: relative; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--urn-gold) 0%, var(--urn-gold) 33%, var(--ember) 46%, var(--ember) 54%, var(--arn-teal) 67%, var(--arn-teal) 100%); }
body.era-arnathia .era-hero .era-hero-rail .era-marker { background: var(--arn-teal); box-shadow: 0 0 5px 2px rgba(11,92,88,.6), 0 0 14px 4px rgba(11,92,88,.35); }

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */
.font-display { font-family: var(--font-display); }
.font-title { font-family: var(--font-title); }
.font-narrative { font-family: var(--font-narrative); }
.font-body { font-family: var(--font-body); }
.font-ui { font-family: var(--font-ui); }

/* Accessibility: focus */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--urn-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }