/* ===== Guardians Homepage Overrides (safe & scoped) ================== */
/* Load this *after* your main /Guardians/css/style.css on the homepage only */

/* 1) Section separators (subtle runic line between sections) */
.section { position: relative; }
.section + .section::before{
  content:"";
  display:block;
  height:2px;
  margin: clamp(20px,4vw,36px) auto;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  opacity:.9;
}

/* 2) Jump-bar buttons (distinct anchor style with small down arrow) */
.jumpbar{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center }
.jumpbar a{
  letter-spacing:.02em;
  padding:.48rem 1.05rem;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.55);
  background:rgba(255,255,255,.06);
  color:#f1f6ff; text-decoration:none; position:relative;
}
.jumpbar a::after{ content:" ▾"; opacity:.95 } /* use ' ⬇️' if you prefer emoji */
.jumpbar a:hover{
  border-style:solid; border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.1); transform:translateY(-1px);
}

/* 3) Bottom three cards unified + description helper */
.combined-preview .card-g{
  display:flex; flex-direction:column; gap:.55rem; min-height:100%;
}
.combined-preview h2{ margin:.1rem 0 .2rem }
.card-desc{ color:#e2ecf7; opacity:.95; margin:.2rem 0 .5rem }

/* 4) Floating back-to-top arrow (bottom-right) */
.back-to-top-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 44px; height: 44px; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  color:#f1f6ff; text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  transition: transform .2s ease, border-color .2s ease;
}
.back-to-top-float:hover{ transform: translateY(-2px); border-color:rgba(255,255,255,.65) }
main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ===== HERO: size bump + Moonlight “shine” ======================= */
/* +~18% title size; matching larger glyphs; warm-gold glow */
.hero-title-xl{
  /* was smaller; bumped about 10–20% */
  font-size: clamp(2.9rem, 4.8vw + 1rem, 5.6rem);
  letter-spacing: .03em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.55),           /* crisp edge */
    0 10px 24px rgba(0,0,0,.45),       /* depth */
    0 0 18px rgba(255,221,150,.35),    /* warm outer glow */
    0 0 44px rgba(255,221,150,.22);    /* soft halo */
}

/* Bigger glyphs + subtle warm glow so they “pop” like the title */
.title-with-glyphs::before,
.title-with-glyphs::after{
  width: 50px; height: 50px;          /* ~+19% from 42px */
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(255,221,150,.28));
  opacity: .92;
}
@media (max-width: 768px){
  .title-with-glyphs::before,
  .title-with-glyphs::after{ width: 34px; height: 34px; opacity: .85; }
}

/* ===== JUMP BAR: spacing + halo hover ============================ */
.jumpbar{ gap: 1rem; } /* was ~.75rem */
.jumpbar a{
  position: relative;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.jumpbar a:hover{
  border-color: rgba(255,255,255,.75);
  transform: translateY(-1px);
  /* warm halo to match the title glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 18px rgba(255,221,150,.30),
    0 0 36px rgba(255,221,150,.20);
}

/* Smooth scroll (CSS side) — affects only this page because this file
   is loaded on the homepage only. JS fallback below handles Safari. */
html{ scroll-behavior: smooth; }

/* === HERO: bigger title + brighter glow + larger glyphs (stronger selector) === */
.hero-section .hero-content h1.hero-title-xl{
  /* +15–20% size bump */
  font-size: clamp(3.2rem, 5vw + 1.2rem, 5.8rem);
  letter-spacing: .035em;
  /* soft pale + warm gold glow (keeps contrast on dark bg) */
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 12px rgba(241,246,255,.45),
    0 0 28px rgba(224,208,143,.45),
    0 0 60px rgba(224,208,143,.25);
}

/* make the side glyphs bigger and a touch brighter */
.hero-section .title-with-glyphs::before,
.hero-section .title-with-glyphs::after{
  width: 56px; height: 56px;           /* was 42px */
  filter: drop-shadow(0 0 10px rgba(224,208,143,.45));
  opacity: .92;
}

/* === HERO JUMPBAR: a bit more spacing + subtle glow ========================= */
.hero-section .jumpbar{ gap: 1rem; }   /* was ~.6–.75rem */

.hero-section .jumpbar a{
  /* keep your dashed look but add a soft inner/outer glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 16px rgba(224,208,143,.15);
}

.hero-section .jumpbar a:hover,
.hero-section .jumpbar a:focus{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 0 32px rgba(224,208,143,.25);
  transform: translateY(-1px);
}
/* === HERO polish: darker title, two-line spacing, larger glyphs ==== */

/* Title: slightly smaller cap + softer color + tighter, deeper shadow */
.hero-section .hero-content h1.hero-title-xl{
  /* tone it down a touch and reduce the max size */
  color: #E6D7B2; /* warm, less bright than pure ivory */
  font-size: clamp(3.0rem, 4.4vw + 1.2rem, 5.2rem); /* was ~5.6–5.8rem */
  letter-spacing: .03em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),      /* crisp edge */
    0 6px 18px rgba(0,0,0,.60),   /* depth */
    0 0 12px rgba(224,208,143,.22), /* gentle warm glow */
    0 0 28px rgba(224,208,143,.12); /* subtle halo */
}

/* Keep the two-line title layout tight */
.hero-section .hero-title-xl .hero-line{ display:block; line-height: 1.02; }
.hero-section .hero-title-xl .hero-line-1{ margin-bottom:.16rem; }

/* Bigger glyphs + a bit more breathing room from the title text */
.title-with-glyphs{ gap: 1.2rem; } /* slightly wider gap between glyph and text */
.hero-section .title-with-glyphs::before,
.hero-section .title-with-glyphs::after{
  width: 72px; height: 72px;            /* larger than before */
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.55))
    drop-shadow(0 0 16px rgba(224,208,143,.28)); /* soft warm glow */
  opacity: .92;
}
@media (max-width: 768px){
  .hero-section .title-with-glyphs::before,
  .hero-section .title-with-glyphs::after{ width: 44px; height: 44px; opacity:.88; }
}

/* Tagline: two lines exactly as requested */
.hero-section .hero-tagline .hero-row{ display:block; }
.hero-section .hero-tagline .hero-row-1{
  /* emojis line */
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing:.02em;
  margin-bottom:.2rem;
}
.hero-section .hero-tagline .hero-row-2{
  /* “The War for Terra has begun” on its own line */
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  opacity:.98;
  line-height: 1.25;
}

/* Jumpbar: keep a hair more air so it doesn’t crowd the tagline */
.hero-section .jumpbar{ gap: 1.05rem; }

/* Stack the two title lines; keep side glyphs */
.hero-section .title-with-glyphs{
  display: inline-block;          /* override prior flex */
  position: relative;
  padding-inline: clamp(56px, 6vw, 96px);  /* room for glyphs */
  text-align: center;             /* center both lines */
}

/* Reposition glyphs absolutely so they don't affect line flow */
.hero-section .title-with-glyphs::before,
.hero-section .title-with-glyphs::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.hero-section .title-with-glyphs::before{ left: 0; }
.hero-section .title-with-glyphs::after { right: 0; }

/* Ensure the two title spans actually break lines */
.hero-section .hero-title-xl .hero-line{ display:block; }

/* (Keeping your current 72px glyph size and title glow) */

/* === Combined cards: center CTAs + equal spacing ================== */

/* Center everything CTA-related inside each card */
.combined-preview .card-g{ align-items: center; }

/* Center the single primary CTA (it's inside a <p>) */
.combined-preview .card-g p:not(.card-desc){
  display: flex;
  justify-content: center;
  margin: .8rem 0 0;          /* equal top spacing before every CTA line */
}

/* Center the two smaller compendium buttons & keep equal gaps */
.combined-preview .cta-row{
  justify-content: center;
  gap: .75rem;
  margin-top: .8rem;          /* same rhythm as the primary CTA above */
}

/* Make sure individual CTA pills are centered & consistent */
.combined-preview .cta-button{
  align-self: center;
  text-align: center;
}