/* vup_2018_child — css/pages/home-page.css */
/* Scope narrowly. Replace 18 if your front page uses a different ID. */
body.home,
body.page-id-18 {
  --vu-sun-gold: #ffd900;
  --vu-night: #050713;
  --vu-space: #0f1834;
  --vu-ink: #1f2c57;
  --vu-slate: #141d3b;
  --vu-fog: #f4f6ff;
  --vu-cloud: #fffef7;
  --vu-paper: #ffffff;
  --vu-muted: #8d93b8;
  --vu-highlight: #fff173;
  --vu-pill: #fff8c3;
  --vu-pill-hover: #ffe347;
  --vu-shadow-strong: 0 40px 80px rgba(5, 7, 19, 0.45);
  --vu-shadow-soft: 0 20px 40px rgba(5, 7, 19, 0.18);
  --vu-card-shadow: 0 30px 60px rgba(5, 7, 19, 0.18);
  --vu-border-soft: rgba(255, 255, 255, 0.18);
  --vu-about-tab-gap: 1rem;
  --vu-about-tab-pad: .45rem 1.15rem;
  --vu-about-band-pad: clamp(6px, .2vw, 12px);
  --vu-about-band-width: min(720px, 70%);
  --vu-about-glass: rgba(255, 255, 255, 0.82);
  --vu-about-glass-soft: rgba(255, 255, 255, 0.72);
  --vu-about-glass-shadow: 0 20px 45px rgba(5, 7, 19, 0.12);
  --vu-about-glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --vu-about-layer-offset: clamp(10px, 1.5vw, 18px);

  --home-content-bg: #ffffff;
  --home-content-ink: #1f2c57; /* Updated to match About page ink */
  --home-accent: #ffd900;
  --home-max: 70rem;
}

/* ============================================================
   Layered Background Structure (Ported from About)
   ============================================================ */

.vu-about-layer {
  position: relative;
  padding: clamp(4px, 2vw, 12px) 0 clamp(32px, 5vw, 60px);
  display: grid;
}

.vu-about-layer::before {
  content: "";
  position: absolute;
  inset: clamp(-12px, 1vw, 6px) clamp(10px, 4vw, 18px) clamp(10px, 2vw, 20px);
  width: min(88%, 1050px);
  margin: 10px auto;
  border-radius: 44px;
  background: var(--vu-cloud);
  box-shadow: var(--vu-shadow-strong);
  z-index: 0;
}

.vu-about {
  border-radius: 30px;
  padding: clamp(0px, 0vw, 0px);
  position: relative;
  z-index: 1;
}

.vu-about-section {
  position: relative;
  border-radius: 18px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--vu-paper);
  box-shadow: var(--vu-shadow-soft);
  border: 1px solid var(--vu-border-soft);
}

.vu-about-section::before {
  content: "";
  position: absolute;
  inset: calc(var(--vu-about-layer-offset) * -1);
  border-radius: 22px;
  background: var(--vu-about-glass-soft);
  box-shadow: var(--vu-about-glass-shadow);
  border: var(--vu-about-glass-border);
  z-index: 0;
}

.vu-about-section > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Content Styling (Adapted for Home)
   ============================================================ */

/* Reset the old card style since we now have .vu-about-section */
body.home #primary.site-main > article .entry-content,
body.page-id-18 #primary.site-main > article .entry-content {
  background: transparent;
  color: var(--home-content-ink);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: var(--home-max);
}

/* Typography matches About page (.vu-about-section-body) */
body.home #primary .entry-content,
body.page-id-18 #primary .entry-content {
  color: var(--vu-ink);
  line-height: 1.7;
}

body.home #primary .entry-content h1,
body.home #primary .entry-content h2,
body.home #primary .entry-content h3,
body.page-id-18 #primary .entry-content h1,
body.page-id-18 #primary .entry-content h2,
body.page-id-18 #primary .entry-content h3 {
  margin: 1.2em 0 .5em;
  line-height: 1.2;
  color: var(--vu-night); /* Ensure headers are dark */
}

/* Specific match for About page H2 style if desired, or keep Home defaults */
body.home #primary .entry-content h2,
body.page-id-18 #primary .entry-content h2 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  border-bottom: 4px solid var(--vu-sun-gold);
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

body.home #primary .entry-content p,
body.page-id-18 #primary .entry-content p {
  margin-bottom: 1.2em;
}

body.home #primary .entry-content strong,
body.page-id-18 #primary .entry-content strong {
  color: var(--vu-sun-gold);
}

body.home #primary .entry-content a,
body.page-id-18 #primary .entry-content a {
  color: var(--vu-slate);
  font-weight: 600;
  text-decoration-color: rgba(255, 217, 0, 0.55);
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
}

body.home #primary .entry-content a:hover,
body.page-id-18 #primary .entry-content a:hover {
  background: rgba(0,0,0,.04);
}

/* Lists */
body.home #primary .entry-content ul,
body.page-id-18 #primary .entry-content ul,
body.home #primary .entry-content ol,
body.page-id-18 #primary .entry-content ol {
  margin: .8em 0 .8em 1.25em;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .vu-about {
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }

  .vu-about-layer::before {
    width: 95%;
    border-radius: 28px;
  }

  .vu-about-section {
    padding: 1.25rem;
  }
}