/* ============================================
   Feiyah Action Network — Core Stylesheet
   Primary: #6B2D8B   Accent: #D4A017
   Display: Playfair Display   Body: Open Sans
   ============================================ */

:root{
  --purple: #6B2D8B;
  --purple-dark: #4F2066;
  --purple-tint: #F3EAF6;
  --gold: #D4A017;
  --gold-dark: #A87A0E;
  --cream: #FBF6EC;
  --white: #FFFFFF;
  --ink: #2B2330;
  --ink-soft: #5B5260;
  --line: #E7DCC9;
  --radius: 6px;
  --max: 1180px;
  --shadow: 0 12px 32px -16px rgba(43,35,48,0.25);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
}
h1,h2,h3,h4{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--purple-dark);
  line-height: 1.18;
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1.1em; color: var(--ink-soft); }
a{ color: var(--purple); text-decoration: none; }
a:hover{ color: var(--gold-dark); }
img{ max-width:100%; display:block; }
ul{ padding-left: 1.2em; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--purple); color:#fff;
  padding:10px 18px; z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--purple-dark);
  color: #EFE3F4;
  font-size: 0.82rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:6px; padding-bottom:6px; flex-wrap:wrap; gap:6px;
}
.topbar a{ color:#EFE3F4; }
.topbar a:hover{ color: var(--gold); }

/* ---------- Header / Nav ---------- */
header.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 100;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:'Playfair Display', serif; font-weight:700; color: var(--purple-dark);
  font-size:1.25rem;
}
.brand .mark{
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(135deg, var(--purple), var(--gold));
  flex-shrink:0;
}
.brand small{ display:block; font-family:'Open Sans',sans-serif; font-weight:400; font-size:0.65rem; color: var(--ink-soft); letter-spacing:0.04em; }

nav.main-nav ul{
  list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;
}
nav.main-nav a{
  color: var(--ink); font-weight:600; font-size:0.92rem; padding:6px 2px;
  border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{
  color: var(--purple); border-bottom-color: var(--gold);
}
.nav-cta{
  background: var(--gold); color: var(--purple-dark) !important; padding:9px 18px !important;
  border-radius: 30px; font-weight:700 !important; border-bottom:none !important;
}
.nav-cta:hover{ background: var(--gold-dark); color:#fff !important; }

.nav-toggle{
  display:none; background:none; border:2px solid var(--purple); border-radius:6px;
  width:42px; height:38px; cursor:pointer; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; height:2px; width:20px; background:var(--purple);
  position:absolute; left:11px; transition:0.2s;
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    display:none; width:100%; order:3;
    border-top:1px solid var(--line); margin-top:14px; padding-top:14px;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; gap:4px; }
  .nav-wrap{ flex-wrap:wrap; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  min-height: 78vh; display:flex; align-items:flex-end;
}
.hero img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 28%;
  z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(43,16,58,0.25) 0%, rgba(43,16,58,0.55) 55%, rgba(43,16,58,0.92) 100%);
}
.hero-content{ position:relative; z-index:2; padding: 64px 0 56px; }
.hero-eyebrow{
  display:inline-block; background: rgba(212,160,23,0.92); color:var(--purple-dark);
  font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:30px; margin-bottom:18px;
}
.hero h1{ color:#fff; max-width: 760px; }
.hero p.lede{ color:#F1E6F6; font-size:1.15rem; max-width:580px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }

/* ---------- Page header (non-home) ---------- */
.page-hero{
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  color:#fff; padding: 56px 0 64px; position:relative;
}
.page-hero h1{ color:#fff; margin-bottom:0.3em; }
.page-hero .lede{ color:#EBD8F1; max-width:640px; font-size:1.05rem; margin-bottom:0; }
.crumb{ font-size:0.82rem; color:#D8B9E2; margin-bottom:12px; }
.crumb a{ color:#F1E0F8; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 26px; border-radius:30px; font-weight:700; font-size:0.95rem;
  border:2px solid transparent; cursor:pointer; transition:0.15s;
}
.btn-primary{ background: var(--gold); color: var(--purple-dark); }
.btn-primary:hover{ background: var(--gold-dark); color:#fff; transform:translateY(-1px); }
.btn-outline{ background:transparent; color:#fff; border-color: rgba(255,255,255,0.7); }
.btn-outline:hover{ background:rgba(255,255,255,0.12); color:#fff; }
.btn-purple{ background: var(--purple); color:#fff; }
.btn-purple:hover{ background: var(--purple-dark); color:#fff; }

/* ---------- Sections ---------- */
section{ padding: 64px 0; }
section.tight{ padding: 40px 0; }
.eyebrow{
  text-transform:uppercase; letter-spacing:0.08em; font-weight:700; font-size:0.78rem;
  color: var(--gold-dark); margin-bottom:10px; display:block;
}
.section-head{ max-width:680px; margin-bottom:36px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.bg-white{ background: var(--white); }
.bg-tint{ background: var(--purple-tint); }
.bg-purple{ background: var(--purple); color:#fff; }
.bg-purple h2, .bg-purple h3{ color:#fff; }
.bg-purple p{ color:#E9DBEF; }

.divider{
  height:6px; width:84px; border-radius:4px; margin: 0 0 22px;
  background: linear-gradient(90deg, var(--purple) 0%, var(--purple) 60%, var(--gold) 60%, var(--gold) 100%);
}
.divider.center{ margin-left:auto; margin-right:auto; }

/* ---------- Grids / Cards ---------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card .icon-tag{
  display:inline-block; width:46px; height:46px; border-radius:50%;
  background: var(--purple-tint); margin-bottom:16px;
}
.program-card{ display:flex; flex-direction:column; }
.program-card img{ border-radius:6px; margin-bottom:18px; aspect-ratio:4/3; object-fit:cover; }
.program-card .tag{
  font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--purple); margin-bottom:8px;
}

/* About strip on home */
.about-strip{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
.about-strip img{ border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 860px){ .about-strip{ grid-template-columns:1fr; } }

/* Impact numbers banner */
.stats-banner{ background: var(--purple-dark); color:#fff; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width:860px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }
.stat-num{ font-family:'Playfair Display',serif; font-size:2.6rem; color: var(--gold); font-weight:700; }
.stat-label{ font-size:0.86rem; color:#E2CBEB; }

/* Donate banner */
.donate-banner{
  background: linear-gradient(120deg, var(--gold-dark), var(--gold));
  color: var(--purple-dark); text-align:center;
}
.donate-banner h2{ color: var(--purple-dark); }
.donate-banner .btn-primary{ background: var(--purple-dark); color:#fff; }
.donate-banner .btn-primary:hover{ background:#3A1750; }

/* Timeline */
.timeline{ border-left:3px solid var(--gold); margin-left:10px; padding-left:30px; }
.timeline-item{ position:relative; padding-bottom:34px; }
.timeline-item::before{
  content:''; position:absolute; left:-38px; top:4px; width:14px; height:14px;
  border-radius:50%; background: var(--purple); border:3px solid var(--gold);
}
.timeline-year{ font-family:'Playfair Display',serif; font-weight:700; color:var(--purple); font-size:1.2rem; }

/* News cards */
.post-card img{ aspect-ratio: 16/10; object-fit:cover; border-radius:6px; }
.post-meta{ font-size:0.8rem; color: var(--ink-soft); margin-bottom:6px; }

/* Status badges - Ideas Hub */
.badge{ display:inline-block; padding:4px 12px; border-radius:30px; font-size:0.74rem; font-weight:700; }
.badge-exploring{ background:#FFF3CD; color:#7A5B00; }
.badge-development{ background:#D6E9FF; color:#1B4E8C; }
.badge-funded{ background:#D9F2DC; color:#1F6B2D; }
.badge-implemented{ background:#E6D9F2; color:var(--purple-dark); }

/* Forms */
.form-grid{ display:grid; gap:18px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-weight:700; font-size:0.9rem; color: var(--purple-dark); }
.form-row input, .form-row select, .form-row textarea{
  font-family:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--line);
  border-radius:6px; background:#fff; color:var(--ink); width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color: var(--purple); outline:none; box-shadow:0 0 0 3px rgba(107,45,139,0.15);
}
.form-note{ font-size:0.82rem; color: var(--ink-soft); }

/* Gallery */
.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.gallery img{ border-radius:6px; aspect-ratio:1/1; object-fit:cover; }
@media (max-width:700px){ .gallery{ grid-template-columns: repeat(2,1fr); } }

/* Resource list */
.resource-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.resource-row:last-child{ border-bottom:none; }

/* Footer */
footer.site-footer{ background: var(--purple-dark); color:#E2CBEB; padding-top:56px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns: 1fr; } }
footer.site-footer h4{ color:#fff; font-family:'Open Sans',sans-serif; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
footer.site-footer a{ color:#E2CBEB; }
footer.site-footer a:hover{ color: var(--gold); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:0.92rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.15); padding:18px 0; font-size:0.8rem; color:#C7A9D2;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.social-row{ display:flex; gap:12px; margin-top:14px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.social-row a:hover{ background: var(--gold); color: var(--purple-dark); border-color:var(--gold); }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background: var(--purple-dark); color:#fff; padding:18px 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
  transform: translateY(110%); transition: transform 0.35s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-inner p{ color:#E9DBEF; margin:0; font-size:0.9rem; max-width:640px; }

/* 404 */
.error-page{ text-align:center; padding: 110px 0; }
.error-page .big{ font-family:'Playfair Display',serif; font-size:6rem; color:var(--gold); line-height:1; }

/* Governance / Resources icon */
.doc-row{ display:flex; align-items:center; gap:14px; }
.doc-icon{
  width:42px; height:52px; background: var(--purple-tint); border:1px solid var(--line);
  border-radius:4px; flex-shrink:0; position:relative;
}
.doc-icon::after{
  content:''; position:absolute; top:8px; left:8px; right:8px; height:2px; background:var(--purple);
  box-shadow: 0 6px 0 var(--purple), 0 12px 0 var(--purple);
}

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:0.85rem; color:var(--ink-soft); }