/* ================================================================
   00 — HEART OF HOPE DESIGN SYSTEM (GLOBAL ROOT)
   Version: Phase 5.0 — Unified, Optimized, Devotional
   Purpose: Foundation tokens, global typography, global components
================================================================ */

:root {

  /* ---------------------------------------------------------------
     1. COLORS — Devotional, Soft, Accessible
  ---------------------------------------------------------------- */
  --color-heading: #6A0DAD;                 /* Royal Violet */
  --color-heading-rgb: 106, 13, 173;

  --color-body: #333333;                    /* Deep Grey */
  --color-body-rgb: 51, 51, 51;

  --color-accent: #E8D7FF;                  /* Lavender Glow */
  --color-accent-rgb: 232, 215, 255;

  --color-accent-dark: #5A0C95;             /* Deep Purple */
  --color-accent-dark-rgb: 90, 12, 149;

  --color-surface: #FFFFFF;                 /* Pure White */
  --color-surface-alt: #F7F4FF;             /* Soft Lavender Tint */
  --color-surface-rgb: 255, 255, 255;

  --color-background: #D8CFFF;              /* Lavender Wash */
  --color-background-rgb: 216, 207, 255;

  --color-border: rgba(0,0,0,0.1);
  --color-shadow: rgba(0,0,0,0.08);


  /* ---------------------------------------------------------------
     2. SPACING — 8px Baseline, Harmonized
  ---------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 5rem;     /* 80px */
  --space-8: 6rem;     /* 96px */


  /* ---------------------------------------------------------------
     3. CONTAINERS — Layout Rhythm
  ---------------------------------------------------------------- */
  --container-narrow: 600px;
  --container-medium: 800px;
  --container-wide: 1200px;

  --reading-width: 70ch;          /* Default content width */
  --container-reading: 65ch;      /* Long-form reading */
  --container-relaxed: 95vw;      /* Tablet/Desktop breathing */
  --container-full: 100vw;


  /* ---------------------------------------------------------------
     4. RADIUS & SHADOWS — Soft, Devotional
  ---------------------------------------------------------------- */
  --radius-none: 0;
  --radius-soft: 6px;
  --radius-medium: 10px;
  --radius-large: 20px;
  --radius-round: 999px;

  --shadow-soft: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.16);


  /* ---------------------------------------------------------------
     5. TYPOGRAPHY — Inter + Cormorant
  ---------------------------------------------------------------- */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Cormorant Garamond', serif;

  /* Perfect Fourth Scale */
  --scale-1: 0.75rem;
  --scale-2: 1rem;
  --scale-3: 1.333rem;
  --scale-4: 1.777rem;
  --scale-5: 2.369rem;
  --scale-6: 3.157rem;

  --lh-body: 1.65;
  --lh-heading: 1.25;


  /* ---------------------------------------------------------------
     6. SCRIPTURE MODULE
  ---------------------------------------------------------------- */
  --scripture-bg: rgba(0,0,0,0.02);
  --scripture-border: rgba(0,0,0,0.1);
}


/* ================================================================
   2. GLOBAL TYPOGRAPHY
================================================================ */

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: var(--lh-body);
  color: var(--color-body);
  background-color: var(--color-background);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}

h1 { font-size: var(--scale-6); font-weight: 700; }
h2 { font-size: var(--scale-5); font-weight: 700; }
h3 { font-size: var(--scale-4); font-weight: 600; }
h4 { font-size: var(--scale-3); font-weight: 600; }




/* ---------------------------------------------------------------
   4. LOGO BLOCK FIX
---------------------------------------------------------------- */
.site-logo,
.wp-image-120 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

.site-logo img.custom-logo {
  width: auto;
  height: auto;
  max-width: 100%;
}


/* ---------------------------------------------------------------
   5. HOMEPAGE MODULES (Scoped to .home)
---------------------------------------------------------------- */
.home .hero-section,
.home .scripture-rotator,
.home .teaser-section,
.home .featured-posts,
.home .member-access,
.home .site-login,
.home .footer-inner,
.home .hoh-notices-board {
  max-width: var(--container-medium);
  margin: var(--space-5) auto;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-soft);
}

/* Mobile spacing refinement */
@media (max-width: 600px) {
  .home .hero-section,
  .home .scripture-rotator,
  .home .teaser-section,
  .home .featured-posts,
  .home .member-access,
  .home .site-login,
  .home .footer-inner,
  .home .hoh-notices-board {
    padding: var(--space-3) var(--space-2);
    margin: var(--space-4) auto;
  }
}

/* Notices Board */
.home .hoh-notices-board .notice-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 600px) {
  .home .hoh-notices-board .notice-row {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------
   6. HOMEPAGE MOTION LAYER (Optimized)
---------------------------------------------------------------- */

/* Animate only above-the-fold modules */
.home .hero-section,
.home .scripture-rotator {
  opacity: 0;
  transform: translateY(10px);
  animation: homeFadeUp 0.6s ease-out forwards;
}

@keyframes homeFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home .scripture-rotator { animation-delay: 0.1s; }

/* All other modules load static for performance */
.home .teaser-section,
.home .featured-posts,
.home .member-access,
.home .site-login,
.home .footer-inner {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------------
   7. HOMEPAGE LINK UNDERLINE FADE
---------------------------------------------------------------- */
.home a {
  position: relative;
}

.home a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease;
}

.home a:hover::after {
  width: 100%;
}

/* ============================================================
   02 — LAYOUT: Content Widths
============================================================ */

.entry-content {
    max-width: var(--reading-width);
    margin-left: auto;
    margin-right: auto;
}