/* ==============================
   GovNotice — Homepage-Specific Styles (home.css)
   ==============================

   File:    htdocs/home.css  (canonical source)

   Origin:  These styles were originally written as an inline <style> block
            embedded directly in htdocs/index.html. They were extracted into
            this standalone file so the browser can cache the CSS independently
            and developers can edit styles without touching the HTML markup.
            The index.html file now contains zero inline <style> blocks —
            only a <link rel="stylesheet" href="home.css"> reference.

   Scope:   index.html only — every selector targets classes that appear
            exclusively on the homepage (.home-page, .home-hero,
            .steps-grid, .nav-cards, .home-cta, .home-footer, etc.).

   Depends: style.css must load first. This file relies on its CSS custom
            properties (--primary-color, --surface-color, --radius, etc.)
            and shared component classes (.btn, .container, .text-center).

   Stub:    A root-level home.css stub exists for git-history continuity;
            the canonical source is this file (htdocs/home.css).

   Sections (in order):
            1. Home Page Container  — .home-page, .home-page h2
            2. Tagline              — .tagline
            3. Hero Section         — .home-hero
            4. Steps Grid           — .steps-grid, .step-card, .step-number
            5. Navigation Cards     — .nav-cards, .nav-card, .nav-card-icon
            6. Call to Action       — .home-cta
            7. Home Footer          — .home-footer
            8. Responsive           — @media breakpoints at 700px and 480px

   Maintainability:
            All homepage style changes should be made in this file rather
            than inline in index.html. New homepage-specific classes should
            be added to the appropriate section above. Shared or global
            styles belong in style.css instead.
   ============================== */


/* ── Home Page Container ─────────────────────────────── */

.home-page {
  padding-top: 2rem;
}

.home-page h2.text-center {
  border-left: none;
  text-align: center;
  padding-left: 0;
  margin-top: 2.5em;
  margin-bottom: 0.4em;
}


/* ── Tagline ─────────────────────────────────────────── */

.tagline {
  font-size: 1.18rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.65;
  max-width: 680px;
}


/* ── Hero Section ────────────────────────────────────── */

.home-hero {
  background: var(--surface-civic);
  border-left: 4px solid var(--primary-light);
  border-radius: var(--radius);
  padding: 1.5em 1.8em;
  margin: 1.5em 0 2em;
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--text-base);
}

.home-hero p {
  margin: 0;
}


/* ── Steps Grid ("How It Works") ─────────────────────── */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  margin-bottom: 2.5em;
}

.step-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent-gold);
  border-radius: var(--radius-lg);
  padding: 1.8em 1.4em 1.4em;
  text-align: center;
  box-shadow: var(--shadow-medium);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.8em;
  box-shadow: var(--shadow-subtle);
}

.step-card h3 {
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}

.step-card p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 0;
}


/* ── Navigation Cards ("Explore") ────────────────────── */

.nav-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
  margin-bottom: 2.5em;
}

.nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.8em 1.4em 1.4em;
  text-decoration: none;
  box-shadow: var(--shadow-medium);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: var(--primary-light);
}

.nav-card-icon {
  font-size: 2.4rem;
  margin-bottom: 0.5em;
  display: block;
  line-height: 1;
}

.nav-card h3 {
  margin-top: 0;
  margin-bottom: 0.4em;
  color: var(--primary-color);
}

.nav-card p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1em;
  flex-grow: 1;
}

.nav-card .btn {
  margin-top: auto;
  align-self: center;
}


/* ── Call to Action ──────────────────────────────────── */

.home-cta {
  text-align: center;
  margin: 2.5em 0 2em;
}


/* ── Home Footer ─────────────────────────────────────── */

.home-footer {
  margin-top: 2em;
  padding-bottom: 0.5em;
}


/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 700px) {
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .nav-cards {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .tagline {
    font-size: 1.05rem;
  }

  .home-hero {
    padding: 1.2em 1.3em;
  }
}

@media (max-width: 480px) {
  .step-card {
    padding: 1.4em 1em 1em;
  }

  .nav-card {
    padding: 1.4em 1em 1em;
  }

  .home-cta .btn-cta {
    font-size: 1rem;
    padding: 0.6em 1.4em;
  }
}