/*
  css/site.css
  Shared stylesheet draft extracted from the site.
  Contains only CSS that is clearly shared across multiple pages.

  Notes / conflicts (kept here rather than guessing):
  - Variable names differ across pages: some pages use --runda as main stack, others use --sans.
    To avoid breaking pages, both canonical stacks are defined below.
  - Some pages set slightly different nav font-sizes and small measurement differences; this file uses the conservative common values.
  - Page-specific hero, program, shop, and resources rules are intentionally NOT included here.
  - Inline `style="..."` instances remain in pages and are not converted here.
*/

/* font-face (local Runda faces appear on multiple pages) */
@font-face { font-family:'Runda'; src:url('../fonts/Runda-Regular.woff2') format('woff2'), url('../fonts/Runda-Regular.woff') format('woff'); font-weight:400; font-style:normal; }
@font-face { font-family:'Runda'; src:url('../fonts/Runda-Bold.woff2') format('woff2'), url('../fonts/Runda-Bold.woff') format('woff'); font-weight:700; font-style:normal; }

/* Core reset + base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Shared design tokens (conservative common set) */
:root {
  --green: #2E6B1F;
  --green-dk: #1f4d15;
  --green-lt: #EDF4E8;

  --tan: #C09A6B;
  --tan-lt: #F5EFE4;
  --brown: #7B4A1E;

  --bg: #FAFAF6;
  --text: #1C1C18;
  --mid: #5A5A52;
  --light: #9A9A90;
  --border: #E4DFDA;

  /* define both stacks to avoid forcing immediate HTML changes */
  --runda: 'Runda','Nunito',sans-serif;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Plus Jakarta Sans', sans-serif;

  --max: 1160px;
  --pad: 48px;
}

/* Base typography/layout */
body {
  font-family: var(--runda, var(--sans));
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.frame { max-width: calc(var(--max) + var(--pad)*2); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 68px 0; }
.section + .section { border-top: 1px solid #ECEAE5; }
.label { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tan); display: block; margin-bottom: 10px; }

/* Headings / text */
h1.title, h2.title { font-family: var(--serif); font-size: clamp(1.7rem, 2.3vw, 2.35rem); font-weight: 700; color: var(--text); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 12px; }
h2.title em, h1 em { font-style: italic; color: var(--green); }

h3.sub { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 8px; }

.lead { font-size: 0.96rem; color: var(--mid); line-height: 1.82; font-weight: 400; }
p.body { font-size: 0.95rem; color: var(--mid); line-height: 1.88; margin-bottom: 16px; }
p.body:last-child { margin-bottom: 0; }
p.body a { color: var(--green); }

/* Navigation (shared structure and behavior) */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: white;
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-inner > a:first-child {
  flex-shrink: 0;
}

.nav-logo {
  height: 68px;
  width: auto;
  max-width: none;
  display: block;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a,
.nav-parent-link,
.nav-drop-trigger {
  font-family: var(--runda);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mid);
  padding: 8px 13px;
  border: none;
  border-radius: 5px;
  background: transparent;
  transition: all 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-parent-link:hover,
.nav-parent:has(.nav-parent-link.active),
.nav-drop-trigger:hover,
.nav-drop-trigger.active,
.has-drop:hover > .nav-parent,
.has-drop:focus-within > .nav-parent {
  background: var(--green-lt);
  color: var(--green);
}

.nav-parent {
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.nav-parent-link {
  padding-right: 4px;
}
.nav-parent:has(.nav-parent-link.active) .nav-parent-link,
.nav-parent:has(.nav-parent-link.active) .drop-toggle {
  color: var(--green);
}

.drop-toggle {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 8px 10px 8px 4px;
  display: flex;
  align-items: center;
}

.has-drop:hover > .dropdown,
.has-drop:focus-within > .dropdown,
.dropdown.open {
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  padding: 6px;
  z-index: 300;
}

.dropdown a {
  display: block;
  padding: 8px 14px;
  font-family: var(--runda);
  font-size: 0.88rem;
  color: var(--mid);
  border-radius: 5px;
  transition: all 0.15s;
}

.dropdown a:hover,
.dropdown a:focus {
  background: var(--green-lt);
  color: var(--green);
}

.nav-caret {
  font-size: 0.6rem;
  opacity: 0.45;
  transition: transform 0.2s;
}

[aria-expanded="true"] > .nav-caret {
  transform: rotate(180deg);
}

.nav-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Buttons (shared set) */
.btn { display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:600; border-radius:5px; border:none; cursor:pointer; transition:all 0.15s; text-decoration:none; }
.btn-sm { font-size:0.92rem; padding:9px 20px; }
.btn-md { font-size:0.96rem; padding:11px 22px; }
.btn-lg { font-size:0.98rem; padding:12px 26px; }
.btn-green { background:var(--green); color:white; }
.btn-green:hover { background:var(--green-dk); }
.btn-ghost { background:transparent; color:var(--mid); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--green); color:var(--green); }
.btn-tan { background:var(--tan); color:white; }
.btn-tan:hover { background:var(--brown); }
.btn-white { background:white; color:var(--green); }
.btn-white:hover { background:#f0ede8; }
.btn-outline-w:hover { background:rgba(255,255,255,0.1); border-color:white; }
.btn-outline-w { background:transparent; color:white; border:1.5px solid rgba(255,255,255,0.42); }

/* Footer (shared) */
footer { background: #1C1C18; padding: 48px 0 28px; }
.footer-inner { max-width: calc(var(--max) + var(--pad)*2); margin: 0 auto; padding: 0 var(--pad); }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-logo-wrap { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-bottom: 14px; }
.footer-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer-mission { font-family: var(--runda); font-size: 0.85rem; color: rgba(255,255,255,0.45); line-height: 1.7; margin-bottom: 8px; }
.footer-vision { font-family: var(--serif); font-size: 0.88rem; font-style: italic; color: rgba(255,255,255,0.55); margin-bottom: 18px; border-left: 2px solid var(--tan); padding-left: 12px; line-height: 1.55; }
.footer-socials { display: flex; gap: 8px; }
.fsoc { width: 32px; height: 32px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); transition: all 0.15s; text-decoration: none; }
.fsoc svg { width: 15px; height: 15px; fill: currentColor; }
.fsoc:hover { background: var(--green); border-color: var(--green); color: white; }
.fcol-h { font-family: var(--runda); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.28); margin-bottom: 14px; }
.fcol-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fcol-links a { font-size: 0.85rem; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.fcol-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 0.74rem; color: rgba(255,255,255,0.22); }
.footer-legal a { font-size: 0.74rem; color: rgba(255,255,255,0.22); transition: color 0.15s; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }

/* Shared component patterns */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.person-card { background: white; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.person-img { height: 180px; background: linear-gradient(145deg, #4a8a32, #2E6B1F); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 0.72rem; }
.person-body { padding: 18px 20px 20px; }
.person-name { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.person-title { font-size: 0.76rem; color: var(--tan); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.person-bio { font-size: 0.8rem; color: var(--mid); line-height: 1.65; }

/* Hamburger / mobile nav (shared) */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mid);
  border-radius: 2px;
  transition: all 0.2s;
}

.ham.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.ham.open span:nth-child(2) {
  opacity: 0;
}

.ham.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 88px;
  background: white;
  z-index: 150;
  padding: 20px var(--pad) 28px;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a,
.mobile-submenu-toggle {
  font-family: var(--runda);
  font-size: 1rem;
  font-weight: 600;
  color: var(--mid);
}

.mobile-nav > a {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:hover,
.mobile-nav a:focus,
.mobile-submenu-toggle:hover,
.mobile-submenu-toggle:focus {
  color: var(--green);
}

.mobile-nav .mob-section {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light);
  padding: 16px 0 6px;
}

.mobile-menu-group {
  border-bottom: 1px solid var(--border);
}

.mobile-menu-parent {
  display: flex;
  align-items: center;
}

.mobile-menu-parent > a {
  flex: 1;
  padding: 14px 0;
}

.mobile-submenu-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 14px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-parent-button {
  width: 100%;
  justify-content: space-between;
  padding: 14px 0;
}

.mobile-submenu {
  display: none;
  flex-direction: column;
  padding: 0 0 8px 16px;
}

.mobile-submenu.open {
  display: flex;
}

.mobile-submenu a {
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
}

/* About section navigation */
.about-subnav {
  position: sticky;
  top: 88px;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--border);
}

.about-subnav-inner {
  display: flex;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
  overflow-x: auto;
}

.about-subnav a {
  padding: 14px 18px;
  border-bottom: 2px solid transparent;
  color: var(--mid);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
}

.about-subnav a:hover,
.about-subnav a.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

@media (max-width: 1100px) {
  :root { --pad: 24px; }
  .nav-links { display: none; }
  .ham { display: flex; }
  .nav-logo-name { font-size: 1.25rem; }
  .footer-top {
    grid-template-columns: minmax(0, 1.35fr) minmax(140px, 0.65fr);
    column-gap: 32px;
    row-gap: 26px;
    align-items: start;
  }
  .footer-top > :first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .footer-top > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .footer-top > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .people-grid { grid-template-columns: 1fr 1fr; }
}
/* Active dropdown section */

.nav-drop-trigger.active {
  color: var(--green);
}