/* ============================================================
   Grow A Classroom — site-wide styles
   Tailwind (via CDN, in each page) handles utility classes.
   This file holds: self-hosted type, brand tokens, and the
   handful of bespoke effects Tailwind's CDN build can't express.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --canopy: #0D6638;   /* deep forest green — primary */
  --sprout: #8CC63E;   /* bright leaf green — accent */
  --paper:  #F1F2EA;   /* warm sage-stone background */
  --bark:   #4A3B2A;   /* wood brown — used sparingly */
  --ink:    #1C1C16;   /* warm near-black — body text */
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); }

.font-display { font-family: 'Source Serif 4', Georgia, 'Iowan Old Style', serif; }

section[id] { scroll-margin-top: 88px; }

/* ---------- one-time hero entrance (page load, not scroll) ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-reveal > * {
  opacity: 0;
  animation: rise-in .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-reveal > *:nth-child(1) { animation-delay: .05s; }
.hero-reveal > *:nth-child(2) { animation-delay: .16s; }
.hero-reveal > *:nth-child(3) { animation-delay: .27s; }
.hero-reveal > *:nth-child(4) { animation-delay: .38s; }

/* ---------- blueprint-style corner marks for the donate panel ---------- */
.blueprint-panel { position: relative; }
.blueprint-panel::before,
.blueprint-panel::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sprout);
  pointer-events: none;
}
.blueprint-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.blueprint-panel::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- mobile nav panel ---------- */
#mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
#mobile-nav.open { max-height: 320px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-reveal > * { animation: none; opacity: 1; transform: none; }
  #mobile-nav { transition: none; }
}

.gac-hdr-brand { gap: .85rem; }
@media (min-width: 640px) { .gac-hdr-brand { gap: 1.1rem; } }

/* the AAK mark: an isolated crop of aak-logo.svg (assets/aak-mark.svg),
   kept at the same height as the GAC lockup so neither reads as "lesser" */
.gac-hdr-aak {
  display: block;
  height: 2.75rem;   /* matches the h-11 GAC logo exactly */
  width: auto;
  flex: none;
  opacity: .92;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.gac-hdr-brand:hover .gac-hdr-aak,
.gac-hdr-brand:focus-within .gac-hdr-aak { opacity: 1; transform: rotate(8deg); }

/* a drafting registration mark stands in for a plain divider — the same
   crosshair used on the footer's sheet border, here suggesting the two
   marks are "in register": aligned layers of one project */
.gac-hdr-reg { display: flex; align-items: center; flex: none; color: rgba(13,102,56,.32); }
.gac-hdr-reg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* smallest phones: drop the divider so the two marks sit close, never squeezing the hamburger */
@media (max-width: 400px) { .gac-hdr-reg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .gac-hdr-aak { transition: opacity .3s ease; }
  .gac-hdr-brand:hover .gac-hdr-aak,
  .gac-hdr-brand:focus-within .gac-hdr-aak { transform: none; }
}