/**
 * Astracana Design System v1
 * Implements the Visual System from the Master Plan (Table 4):
 * - Palette: deep midnight/navy base; soft ivory content surfaces;
 *   muted gold accents; restrained dusty lavender for mystical cues.
 * - Typography: elegant serif for major headings and brand moments;
 *   clean sans-serif for body, tools and UI.
 * - Brand personality: modern mystical; calm; intelligent; reflective.
 *
 * Loaded by astracana-core so the design survives theme changes.
 */

:root {
  --astra-navy: #11162a;          /* V2.1 midnight */
  --astra-navy-2: #1a2138;        /* raised midnight surface */
  --astra-navy-3: #232c4a;        /* hover / borders on midnight */
  --astra-ivory: #faf7f0;         /* V2.1 warm ivory */
  --astra-ivory-2: #f4efe4;       /* deeper ivory for alt sections */
  --astra-gold: #c8a86b;          /* V2.1 soft gold */
  --astra-gold-soft: #e6cf9e;     /* soft gold for text on midnight */
  --astra-gold-deep: #96702f;     /* gold for text on ivory */
  --astra-lavender: #a99ac4;      /* V2.1 dusty lavender */
  --astra-lavender-soft: #eee9f5; /* V2.1 soft lavender wash */
  --astra-ink: #212334;           /* V2.1 ink */
  --astra-ink-soft: #5a5c6e;      /* secondary text on ivory */
  --astra-ivory-text: #faf7f0;    /* body text on midnight */
  --astra-ivory-dim: #c9c2b2;     /* secondary text on midnight */
  --astra-serif: "DM Serif Display", Georgia, serif;
  --astra-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --astra-radius: 14px;
  --astra-shadow: 0 10px 30px rgba(17, 22, 42, 0.10);
}

/* ---------- Base ---------- */
body {
  background: var(--astra-ivory);
  color: var(--astra-ink);
  font-family: var(--astra-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Elegant serif for major headings and brand moments.
   DM Serif Display ships only in Regular: keep weight 400 (no faux bold). */
h1, h2, h3,
.entry-title,
.astra-serif {
  font-family: var(--astra-serif);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--astra-navy);
}
h1, .entry-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.2rem); }
h3 { font-size: 1.35rem; }

/* ---------- Header (warm ivory, blog-like; midnight reserved for signature moments) ---------- */
.site-header {
  background: var(--astra-ivory);
  border-bottom: 1px solid rgba(17, 22, 42, 0.08);
}
.main-navigation {
  background: transparent;
}
.site-header .site-branding .site-title a,
.main-navigation a {
  color: var(--astra-navy);
  font-family: var(--astra-sans);
}
.site-header .site-branding .site-title a {
  font-family: var(--astra-serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--astra-gold-deep);
}
/* Contrast enforcement (1.3.2): top-level nav links MUST be dark ink on the ivory
   header. This overrides any pale Customizer "navigation text" color that made
   desktop + mobile menu links unreadable. Scoped to top-level items only so
   dropdown sub-menu styling is untouched. */
#masthead #site-navigation.main-navigation .main-nav > ul#menu-primary > li > a {
  color: #11162A;
}
#masthead #site-navigation.main-navigation .main-nav > ul#menu-primary > li > a:hover,
#masthead #site-navigation.main-navigation .main-nav > ul#menu-primary > li > a:focus,
#masthead #site-navigation.main-navigation .main-nav > ul#menu-primary > li[class*="current-menu-"] > a {
  color: #96702F;
}
/* Primary CTA in menu: visually distinct gold button */
.main-navigation .astra-cta-menu a,
#primary-menu .astra-cta-menu a {
  background: var(--astra-gold);
  color: var(--astra-navy) !important;
  border-radius: 999px;
  padding: 0.45em 1.3em;
  font-weight: 600;
}
.main-navigation .astra-cta-menu a:hover {
  background: var(--astra-gold-soft);
  color: var(--astra-navy) !important;
}

/* ---------- Hero ---------- */
.astra-hero {
  background:
    radial-gradient(1200px 500px at 50% -10%, #26315c 0%, var(--astra-navy) 55%, #0b0f22 100%);
  color: var(--astra-ivory-text);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem;
  position: relative;
  overflow: hidden;
}
.astra-hero::after {
  /* restrained mystical cue: faint lavender glow */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 260px at 50% 110%, rgba(169, 154, 196, 0.16), transparent 70%);
  pointer-events: none;
}
.astra-hero .astra-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--astra-gold-soft);
  margin-bottom: 1rem;
}
.astra-hero h1 {
  color: var(--astra-ivory-text);
  max-width: 20ch;
  margin: 0 auto 1rem;
}
.astra-hero .astra-sub {
  color: var(--astra-ivory-dim);
  font-size: 1.1rem;
  max-width: 46ch;
  margin: 0 auto 2rem;
}
.astra-hero-ctas {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.astra-btn {
  display: inline-block;
  font-family: var(--astra-sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85em 1.9em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.astra-btn-gold {
  background: var(--astra-gold);
  color: var(--astra-navy);
  box-shadow: 0 6px 20px rgba(200, 168, 107, 0.35);
}
.astra-btn-gold:hover {
  background: var(--astra-gold-soft);
  color: var(--astra-navy);
  transform: translateY(-1px);
}
.astra-btn-ghost {
  background: transparent;
  color: var(--astra-ivory-text);
  border-color: rgba(244, 239, 228, 0.45);
}
.astra-btn-ghost:hover {
  border-color: var(--astra-gold-soft);
  color: var(--astra-gold-soft);
}
.astra-btn-navy {
  background: var(--astra-navy);
  color: var(--astra-ivory-text);
}
.astra-btn-navy:hover {
  background: var(--astra-navy-2);
  color: var(--astra-gold-soft);
}

/* ---------- Homepage sections ---------- */
.astra-section {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
}
.astra-section-alt { background: var(--astra-ivory-2); }
.astra-section-navy {
  background: var(--astra-navy);
  color: var(--astra-ivory-text);
}
.astra-section-navy h2 { color: var(--astra-ivory-text); }
.astra-section-navy p { color: var(--astra-ivory-dim); }
.astra-wrap {
  max-width: 1120px;
  margin: 0 auto;
}
.astra-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--astra-gold-deep);
  margin-bottom: 0.6rem;
}
.astra-section-navy .astra-kicker { color: var(--astra-gold-soft); }
.astra-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.2rem;
}
.astra-section-head p { color: var(--astra-ink-soft); }
.astra-section-navy .astra-section-head p { color: var(--astra-ivory-dim); }

/* Cards grid */
.astra-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.astra-card {
  background: #fff;
  border: 1px solid rgba(13, 21, 38, 0.08);
  border-radius: var(--astra-radius);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--astra-shadow);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.astra-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(13, 21, 38, 0.14);
}
.astra-card .astra-card-icon {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.8rem;
}
.astra-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}
.astra-card h3 a { color: var(--astra-navy); text-decoration: none; }
.astra-card h3 a:hover { color: var(--astra-gold-deep); }
.astra-card p { color: var(--astra-ink-soft); font-size: 0.95rem; margin: 0 0 1rem; }
.astra-card .astra-link {
  color: var(--astra-gold-deep);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.astra-card .astra-link:hover { text-decoration: underline; }

/* Zodiac tiles */
.astra-signs {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.astra-sign {
  background: var(--astra-navy-2);
  border: 1px solid rgba(227, 201, 138, 0.22);
  border-radius: var(--astra-radius);
  padding: 1.1rem 0.8rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.astra-sign:hover {
  transform: translateY(-2px);
  border-color: var(--astra-gold);
}
.astra-sign .glyph { font-size: 1.7rem; color: var(--astra-gold-soft); display: block; }
.astra-sign .name { color: var(--astra-ivory-text); font-weight: 600; font-size: 0.95rem; }
.astra-sign .dates { color: var(--astra-ivory-dim); font-size: 0.78rem; }

/* ---------- Content pages: ivory surfaces ---------- */
.entry-content a { color: var(--astra-gold-deep); }
.site-main .entry-header .entry-title { margin-bottom: 0.6rem; }

/* Tool shell alignment: keep navy tool panels, ivory page around them */
.astra-tool { margin: 0 auto; }

/* ---------- Footer (midnight base) ---------- */
.site-footer {
  background: var(--astra-navy);
  color: var(--astra-ivory-dim);
}
.site-footer a { color: var(--astra-ivory-text); }
.site-footer a:hover { color: var(--astra-gold-soft); }
.site-footer .widget-title,
.site-footer .footer-widgets .widget-title {
  color: var(--astra-gold-soft);
  font-family: var(--astra-serif);
  font-size: 1.15rem;
}

/* ---------- Forms / inputs on ivory ---------- */
input[type="text"], input[type="email"], input[type="date"],
input[type="time"], input[type="number"], select, textarea {
  font-family: var(--astra-sans);
  border: 1px solid rgba(13, 21, 38, 0.2);
  border-radius: 10px;
  padding: 0.7em 0.9em;
  background: #fff;
  color: var(--astra-ink);
  font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--astra-gold);
  outline-offset: 1px;
  border-color: var(--astra-gold);
}

/* ---------- Mobile readability ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .astra-hero { padding: 3rem 1rem; }
  .astra-hero-ctas .astra-btn { width: 100%; text-align: center; }
  .astra-section { padding: 2.2rem 1rem; }
}

/* ---------- v1.1.1: serif enforcement ----------
   Beat GeneratePress Customizer typography and GenerateBlocks headline
   selectors so ALL content headings render in the brand serif. */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content .gb-headline,
h1.gb-headline, h2.gb-headline, h3.gb-headline {
  font-family: var(--astra-serif);
}

/* ---------- v1.1.3: hero starfield (clearer) ----------
   Clearly visible but still calm static stars behind hero content.
   No animation, no particles — just depth. ::after is the lavender glow. */
.astra-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 33.1% 17.9%, rgba(255,255,255,0.38), transparent),
    radial-gradient(3px 3px at 37.1% 9.3%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 43.6% 10.4%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 81.4% 15.4%, rgba(255,255,255,0.63), transparent),
    radial-gradient(1px 1px at 57.4% 40.5%, rgba(255,255,255,0.37), transparent),
    radial-gradient(1px 1px at 29.8% 17.3%, rgba(255,255,255,0.61), transparent),
    radial-gradient(1px 1px at 11.9% 56.6%, rgba(255,255,255,0.52), transparent),
    radial-gradient(2px 2px at 56.2% 60.9%, rgba(233,220,188,0.66), transparent),
    radial-gradient(2px 2px at 76.6% 46.8%, rgba(255,255,255,0.51), transparent),
    radial-gradient(1px 1px at 78.3% 68.3%, rgba(255,255,255,0.39), transparent),
    radial-gradient(2px 2px at 52.4% 84.5%, rgba(255,255,255,0.48), transparent),
    radial-gradient(2px 2px at 13.3% 42.5%, rgba(233,220,188,0.42), transparent),
    radial-gradient(1px 1px at 42.5% 92.5%, rgba(255,255,255,0.69), transparent),
    radial-gradient(2px 2px at 34.7% 36.2%, rgba(233,220,188,0.61), transparent),
    radial-gradient(2px 2px at 8.6% 12.6%, rgba(255,255,255,0.56), transparent),
    radial-gradient(3px 3px at 7.8% 68.5%, rgba(233,220,188,0.8), transparent),
    radial-gradient(2px 2px at 29.3% 39.5%, rgba(233,220,188,0.36), transparent),
    radial-gradient(2px 2px at 36.1% 60.2%, rgba(255,255,255,0.38), transparent),
    radial-gradient(2px 2px at 14.4% 26.8%, rgba(233,220,188,0.76), transparent),
    radial-gradient(3px 3px at 9.7% 45.3%, rgba(255,255,255,0.48), transparent),
    radial-gradient(2px 2px at 80.7% 83.5%, rgba(255,255,255,0.67), transparent),
    radial-gradient(1px 1px at 67.5% 39.0%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1px 1px at 16.5% 64.6%, rgba(255,255,255,0.57), transparent),
    radial-gradient(2px 2px at 27.2% 4.4%, rgba(255,255,255,0.59), transparent),
    radial-gradient(3px 3px at 93.5% 67.5%, rgba(255,255,255,0.78), transparent),
    radial-gradient(3px 3px at 45.8% 84.1%, rgba(233,220,188,0.53), transparent),
    radial-gradient(2px 2px at 39.8% 48.3%, rgba(255,255,255,0.38), transparent),
    radial-gradient(1px 1px at 96.5% 44.5%, rgba(255,255,255,0.5), transparent),
    radial-gradient(3px 3px at 11.8% 56.1%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 60.9% 10.5%, rgba(255,255,255,0.63), transparent),
    radial-gradient(3px 3px at 62.9% 91.9%, rgba(255,255,255,0.51), transparent),
    radial-gradient(2px 2px at 13.1% 48.9%, rgba(255,255,255,0.57), transparent),
    radial-gradient(2px 2px at 10.2% 13.4%, rgba(233,220,188,0.68), transparent),
    radial-gradient(1px 1px at 81.6% 18.9%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1px 1px at 16.1% 54.0%, rgba(255,255,255,0.69), transparent),
    radial-gradient(2px 2px at 95.9% 83.4%, rgba(255,255,255,0.58), transparent),
    radial-gradient(3px 3px at 36.1% 24.5%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 63.1% 60.4%, rgba(233,220,188,0.71), transparent),
    radial-gradient(3px 3px at 73.0% 24.9%, rgba(255,255,255,0.57), transparent),
    radial-gradient(2px 2px at 97.0% 76.7%, rgba(255,255,255,0.47), transparent),
    radial-gradient(2px 2px at 44.9% 90.2%, rgba(255,255,255,0.78), transparent),
    radial-gradient(2px 2px at 9.7% 13.4%, rgba(255,255,255,0.44), transparent),
    radial-gradient(3px 3px at 48.3% 94.6%, rgba(233,220,188,0.73), transparent),
    radial-gradient(1px 1px at 89.3% 35.6%, rgba(255,255,255,0.73), transparent),
    radial-gradient(1px 1px at 89.3% 76.0%, rgba(255,255,255,0.57), transparent),
    radial-gradient(1px 1px at 43.7% 62.5%, rgba(233,220,188,0.71), transparent),
    radial-gradient(1px 1px at 46.5% 72.4%, rgba(255,255,255,0.68), transparent),
    radial-gradient(3px 3px at 97.3% 6.5%, rgba(255,255,255,0.76), transparent);
}

/* ---------- v1.1.4: scroll motion ----------
   Subtle reveal-on-scroll + whisper hero parallax.
   JS adds .astra-reveal (no-JS = fully visible). */
.astra-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.astra-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* After reveal: restore snappy hover transitions on cards/tiles. */
.astra-reveal.astra-revealed {
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
  will-change: auto;
}
.astra-hero::before {
  transform: translateY(var(--astra-scroll-y, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .astra-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}