/*
Theme Name: Eclipse 2026
Theme URI: https://example.com/eclipse-2026
Author: Eclipse 2026 Project
Description: A fast, mobile-first WordPress theme dedicated to the total solar eclipse of 12 August 2026 over Iceland and Spain. Animated hero, live countdown, interactive Leaflet map of European cities, structured data for SEO.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eclipse2026
Tags: one-column, custom-menu, block-styles, full-site-editing
*/

/* ---------- Tokens ---------- */
:root {
  --void: #030510;
  --sky: #070b1c;
  --sky-2: #0d1330;
  --dusk-band: #2a1a3a;
  --ember: #ff7a45;
  --corona: #f5b62e;
  --corona-soft: rgba(245, 182, 46, 0.14);
  --moon: #e9edf9;
  --dusk: #99a2c1;
  --line: rgba(153, 162, 193, 0.18);
  --card: rgba(20, 27, 58, 0.55);
  --font-display: "Gloock", "Georgia", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --max: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--moon);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--corona); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--corona); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; color: var(--moon); }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 0.6em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--corona);
  margin: 0 0 14px;
}
.lede { color: var(--dusk); font-size: 1.1rem; max-width: 62ch; }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}
.brand {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moon);
}
.brand strong { color: var(--corona); font-weight: 600; }
.site-nav a {
  color: var(--dusk);
  font-size: 0.85rem;
  margin-left: 20px;
}
.site-nav a:hover { color: var(--moon); text-decoration: none; }
@media (max-width: 640px) { .site-nav { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 90px 20px 70px;
  background:
    linear-gradient(to bottom, var(--void) 0%, var(--sky) 45%, var(--sky-2) 72%, var(--dusk-band) 92%, #4a2233 100%);
}
.stars, .stars::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 40%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 46%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 56%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, #e8edff 50%, transparent 51%);
  opacity: 0.7;
  animation: twinkle 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
.stars::after { transform: scale(1.4) rotate(12deg); animation-delay: 2.7s; opacity: 0.4; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.85; } }

/* The eclipse itself */
.eclipse {
  position: relative;
  width: min(46vw, 240px);
  height: min(46vw, 240px);
  margin-bottom: 44px;
}
.eclipse .sun {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 30%, var(--corona) 62%, #d98a1f 100%);
  box-shadow: 0 0 60px 18px rgba(245, 182, 46, 0.55);
}
.eclipse .corona {
  position: absolute; inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 220, 0.55) 30%, rgba(245, 182, 46, 0.22) 52%, transparent 70%);
  opacity: 0;
  animation: corona-breathe 6s ease-in-out 4.2s infinite alternate, corona-in 1.4s ease-out 3.4s forwards;
}
.eclipse .moon-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #05070f;
  box-shadow: inset -8px -6px 26px rgba(90, 100, 140, 0.25);
  transform: translate(-165%, -30%);
  animation: transit 4s cubic-bezier(0.4, 0, 0.3, 1) 0.6s forwards;
}
@keyframes transit { to { transform: translate(0, 0); } }
@keyframes corona-in { to { opacity: 1; } }
@keyframes corona-breathe { from { transform: scale(1); } to { transform: scale(1.07); } }

.hero h1 { position: relative; z-index: 2; }
.hero .sub {
  position: relative; z-index: 2;
  color: var(--dusk);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  max-width: 56ch;
  margin: 18px auto 0;
}
.hero .datebar {
  position: relative; z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--corona);
  margin-bottom: 18px;
}

/* Countdown */
.countdown {
  position: relative; z-index: 2;
  display: flex;
  gap: clamp(12px, 4vw, 34px);
  margin-top: 40px;
  justify-content: center;
}
.countdown .unit { text-align: center; min-width: 64px; }
.countdown .num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  color: var(--moon);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown .lbl {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-top: 8px;
}
.countdown .unit + .unit { border-left: 1px solid var(--line); padding-left: clamp(12px, 4vw, 34px); }

.hero .cta {
  position: relative; z-index: 2;
  display: inline-block;
  margin-top: 42px;
  padding: 13px 30px;
  border: 1px solid var(--corona);
  border-radius: 999px;
  color: var(--corona);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.hero .cta:hover { background: var(--corona); color: var(--void); text-decoration: none; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 10vw, 120px) 0; border-top: 1px solid var(--line); }
.section.alt { background: var(--sky); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.fact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
}
.fact .big {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--corona);
  display: block;
  margin-bottom: 6px;
}
.fact p { margin: 0; color: var(--dusk); font-size: 0.95rem; }

/* Map */
#eclipse-map {
  height: 520px;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-top: 36px;
  background: var(--sky-2);
  z-index: 1;
}
@media (max-width: 640px) { #eclipse-map { height: 420px; } }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--dusk);
}
.map-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.k-total { background: var(--ember); }
.k-partial { background: var(--corona); }
.k-band { background: rgba(255, 122, 69, 0.35); border: 1px solid var(--ember); border-radius: 3px !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--sky-2); color: var(--moon); }
.leaflet-popup-content { font-family: var(--font-body); }
.leaflet-popup-content b { color: var(--corona); }

/* City table */
.city-table-wrap { overflow-x: auto; margin-top: 34px; -webkit-overflow-scrolling: touch; }
table.cities {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  min-width: 640px;
}
table.cities th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dusk);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
table.cities td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--moon); }
table.cities tr.total td:first-child { color: var(--ember); font-weight: 600; }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--dusk);
}
.tag.total { border-color: var(--ember); color: var(--ember); }
.tag.partial { border-color: var(--corona); color: var(--corona); }
.note { font-size: 0.82rem; color: var(--dusk); margin-top: 14px; }

/* Guide */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.guide-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--corona);
  border-radius: 12px;
  padding: 26px 24px;
}
.guide-card.warn { border-left-color: var(--ember); }
.guide-card p { color: var(--dusk); font-size: 0.95rem; margin-bottom: 0; }

/* Phases strip */
.phases {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.phase { text-align: center; flex: 1; min-width: 90px; }
.phase .disc {
  width: 58px; height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--corona);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(245, 182, 46, 0.35);
}
.phase .disc::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--void);
  transform: translateX(var(--cover, -110%));
}
.phase.p-max .disc { background: var(--void); box-shadow: 0 0 0 3px rgba(255, 245, 220, 0.5), 0 0 26px rgba(245, 182, 46, 0.5); }
.phase.p-max .disc::after { display: none; }
.phase .lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dusk); }
.phase .t { font-size: 0.85rem; color: var(--moon); margin-top: 4px; }

/* ---------- City eclipse simulator ---------- */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.sim-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 14px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s;
}
.sim-card:hover { border-color: var(--corona); transform: translateY(-2px); }
.sim-card.total-card { border-color: rgba(255, 122, 69, 0.4); }

.mini-eclipse {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
}
.mini-eclipse .m-corona {
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 224, 0.5) 32%, rgba(245, 182, 46, 0.2) 52%, transparent 70%);
  opacity: 0;
  transition: opacity 1s ease 2.2s;
}
.mini-eclipse .m-sun {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 30%, var(--corona) 62%, #d98a1f 100%);
  box-shadow: 0 0 22px 4px rgba(245, 182, 46, 0.4);
}
.mini-eclipse .m-moon {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #05070f;
  box-shadow: inset -4px -3px 12px rgba(90, 100, 140, 0.25);
  transform: translateX(-135%);
  transition: transform 2.6s cubic-bezier(0.4, 0, 0.3, 1);
}
.sim-card.play .m-moon { transform: translateX(var(--end, 0%)); }
.sim-card.play.total-card .m-corona { opacity: 1; }
.sim-card .sim-city {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--moon);
  line-height: 1.25;
}
.sim-card .sim-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-top: 6px;
}
.sim-card .sim-meta .cov { color: var(--corona); }
.sim-card.total-card .sim-meta .cov { color: var(--ember); }
.sim-hint { font-size: 0.82rem; color: var(--dusk); margin-top: 18px; text-align: center; }

/* Mini eclipse inside map popups */
.popup-eclipse {
  position: relative;
  width: 54px; height: 54px;
  margin: 8px auto 10px;
}
.popup-eclipse .p-sun {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 30%, #f5b62e 62%, #d98a1f 100%);
  box-shadow: 0 0 14px 2px rgba(245, 182, 46, 0.45);
}
.popup-eclipse .p-moon {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #05070f;
  animation: popup-transit 3.4s cubic-bezier(0.4, 0, 0.3, 1) 0.2s forwards;
  transform: translateX(-135%);
}
@keyframes popup-transit { to { transform: translateX(var(--end, 0%)); } }
.popup-eclipse.p-total::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 224, 0.45) 40%, transparent 70%);
  opacity: 0;
  animation: popup-corona 0.9s ease 3.1s forwards;
}
@keyframes popup-corona { to { opacity: 1; } }
.leaflet-popup-content { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .mini-eclipse .m-moon { transform: translateX(var(--end, 0%)); transition: none; }
  .sim-card .m-corona, .sim-card.total-card .m-corona { opacity: 1; transition: none; }
  .popup-eclipse .p-moon { animation: none; transform: translateX(var(--end, 0%)); }
  .popup-eclipse.p-total::after { animation: none; opacity: 1; }
}

/* FAQ */
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 14px;
  background: var(--card);
}
.faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--moon);
  list-style: none;
  position: relative;
}
.faq summary::after {
  content: "+";
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--corona);
  font-size: 1.3rem;
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .a { padding: 0 22px 20px; color: var(--dusk); }
.faq .a p { margin-top: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 60px;
  color: var(--dusk);
  font-size: 0.85rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }

/* Generic content (posts/pages) */
.content-area { padding: 120px 0 80px; }
.content-area .entry { max-width: 720px; margin: 0 auto; }
.content-area .entry p { color: var(--dusk); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .eclipse .moon-disc { transform: translate(0, 0); }
  .eclipse .corona { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}