/* ============================================================
   Jeremy 4 TN — Shared Site Styles
   Linked by every page in /v2. Page-specific layout (hero, cards,
   forms, legal content, etc.) stays in that page's own <style>
   block. Anything used on 2+ pages belongs here instead.

   TYPE SYSTEM
   Storefront Pro (var(--font-display)) is the hand-lettered face
   pulled from the logo. It reads great as ONE word or a short
   phrase and gets tiring fast as a full heading or sentence.

   Rule: headings default to DM Sans (var(--font-body)), bold.
   Wrap only the specific word(s) you want to emphasize in
   <span class="accent">word</span>.

   See /style-guide.html for live examples before editing pages.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --hiwassee:    #1A6B5A;
  --deep-hollow: #0F4A3D;
  --clay:        #C8602A;
  --clay-hover:  #b05224;
  --river-mist:  #E8F4F0;
  --fieldstone:  #F2E8DF;
  --pale-mint:   #C8E8E0;
  --root:        #1C1C1A;
  --muted:       #4a5568;
  --border:      #d4dbd8;
  --white:       #ffffff;
  --error:       #c0392b;

  --font-display:'storefront-pro', Georgia, serif;
  --font-body:   'dm-sans', Arial, sans-serif;
  --font-legal:  'Source Sans 3', Arial, sans-serif;
  --max-w:       1100px;
}

body {
  font-family: var(--font-body);
  color: var(--root);
  background: var(--fieldstone);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPE ACCENT ──
   The only place Storefront Pro should appear outside the logo itself.
   font-weight/font-style are reset to normal on purpose - Storefront
   Pro is a single-cut display face, so forcing bold/italic makes the
   browser fake it, which distorts the letterforms and is what made
   headings hard to read before. Let the word carry its own weight
   visually instead of matching the surrounding heading's weight.
   Sized up ~35% - at 1:1 with the surrounding DM Sans, the script
   reads visually smaller/lighter than the bold text around it, so it
   needs the extra size to feel balanced instead of like a footnote. */
.accent {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 1.35em;
  line-height: 1;
}

/* Adobe Fonts (Typekit) serves dm-sans as discrete weight instances - bold
   text must declare font-weight:700 + font-style:normal explicitly, or the
   browser can't resolve a matching face and silently falls back to regular. */
strong {
  font-weight: 700;
  font-style: normal;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NAV ── */
.site-nav { background: var(--deep-hollow); position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--hiwassee); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-icon { height: 34px; width: auto; display: block; }
.nav-brand-text { font-family: var(--font-body); font-weight: 800; font-size: 18px; color: var(--white); }
.nav-brand-text .accent { color: var(--pale-mint); }
.nav-brand-text .brand-suffix { color: var(--clay); }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75); text-decoration: none; padding: 6px 12px; border-radius: 3px; transition: color 0.15s, background 0.15s; }
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav-links a.active { color: var(--white); background: rgba(255,255,255,0.1); }
.nav-subscribe { border: 1px solid rgba(255,255,255,0.3) !important; color: var(--white) !important; }
.nav-subscribe:hover { border-color: var(--pale-mint) !important; color: var(--pale-mint) !important; }
.nav-donate { background: var(--clay) !important; color: var(--white) !important; font-weight: 700 !important; margin-left: 6px !important; padding: 7px 16px !important; }
.nav-donate:hover { background: var(--clay-hover) !important; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; }
@media (max-width: 700px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 58px; left: 0; right: 0;
    background: var(--deep-hollow); flex-direction: column; align-items: stretch;
    padding: 12px 16px 16px; gap: 2px; border-bottom: 2px solid var(--hiwassee);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 14px; border-radius: 3px; }
  .nav-donate { margin-left: 0 !important; margin-top: 6px !important; text-align: center; }
}

/* ── BUTTONS ── */
.btn-primary, .btn-donate, .btn-green, .btn-clay, .btn-gold {
  display: inline-block; padding: 14px 32px; color: var(--white);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  text-decoration: none; border-radius: 3px; transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-primary, .btn-green { background: var(--hiwassee); }
.btn-primary:hover, .btn-green:hover { background: #1e7d69; box-shadow: 0 4px 16px rgba(26,107,90,0.35); transform: translateY(-1px); }
.btn-donate, .btn-clay { background: var(--clay); }
.btn-donate:hover, .btn-clay:hover { background: var(--clay-hover); box-shadow: 0 4px 16px rgba(200,96,42,0.35); transform: translateY(-1px); }
.btn-gold { background: #e8a030; }
.btn-gold:hover { background: #d08e22; box-shadow: 0 4px 16px rgba(232,160,48,0.3); transform: translateY(-1px); }
.btn-ghost {
  display: inline-block; padding: 13px 28px; border: 1.5px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 3px;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--pale-mint); color: var(--pale-mint); }
.btn-outline {
  display: inline-block; padding: 12px 28px; background: transparent; color: var(--hiwassee);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
  text-decoration: none; border-radius: 3px; border: 2px solid var(--hiwassee); transition: background 0.15s;
}
.btn-outline:hover { background: var(--river-mist); }

/* ── SHARED SECTION BITS ── */
.section-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hiwassee); margin-bottom: 14px; }

/* ── PAGE HEADER (legal pages, platform, events, subscribe) ── */
.page-header { background: var(--deep-hollow); padding: 52px 24px 48px; text-align: center; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(26,107,90,0.3) 0%, transparent 70%); pointer-events: none; }
.page-header-inner { position: relative; max-width: 640px; margin: 0 auto; }
.eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pale-mint); margin-bottom: 14px; }
.page-header h1 { font-family: var(--font-body); font-size: clamp(32px, 6vw, 52px); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 16px; }
.page-header h1 .accent { color: var(--pale-mint); }
.page-header p { font-size: 16px; color: rgba(255,255,255,0.65); font-weight: 300; line-height: 1.6; }
.page-header .effective { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 8px; }
.page-header .updated { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* ── FOOTER ── */
.site-footer { background: var(--deep-hollow); color: rgba(255,255,255,0.5); padding: 40px 24px 28px; font-family: var(--font-legal); font-size: 12px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-icon { width: 100%; max-width: 260px; height: auto; display: block; }
.footer-brand-text { font-family: var(--font-body); font-size: 18px; font-weight: 800; color: var(--white); }
.footer-brand-text .accent { color: var(--pale-mint); }
.footer-brand-text .brand-suffix { color: var(--clay); }
.footer-tagline { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--pale-mint); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--pale-mint); text-decoration: none; padding: 2px 14px; border-right: 1px solid rgba(255,255,255,0.15); font-size: 12px; line-height: 1.4; transition: color 0.15s; }
.footer-links a:last-child { border-right: none; }
.footer-links a:hover { color: var(--white); }
.footer-paid { font-size: 11px; color: rgba(255,255,255,0.3); }