/* variables.css */
/* ============================================================
   TunaGrow CBO — CSS Custom Properties & Global Reset
   File: css/variables.css
   ============================================================ */

/* ── Self-hosted Caveat (was loaded from Google Fonts CDN) ── */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Caveat-SemiBold.woff2') format('woff2');
}

/* ── Self-hosted Font Awesome subset ──────────────────────────
   The full CDN webfonts (fa-solid-900.woff2 157KB + fa-brands-400.woff2
   118KB = 275KB) were sitting deep in the critical request chain for a
   ~17-glyph icon set that's the only thing this site actually uses
   (verified against every icon class referenced in js/app.js/lightbox.js
   plus the DB-driven social_links.icon_class values -- see git history
   for the exact list). Subsetted with fonttools' pyftsubset to just
   those codepoints: 156KB->1.5KB and 117KB->1.4KB.

   Given distinct family names ("FA6 Solid Subset"/"FA6 Brands Subset")
   and only re-targeting the specific combined selectors below (e.g.
   .fa-solid.fa-envelope) rather than the base .fa-solid/.fa-brands
   classes: this wins on CSS specificity alone, so it's correct
   regardless of stylesheet load order relative to the CDN
   all.min.css <link> in header_tg.php (still loaded, unchanged, for
   its icon-name-to-codepoint :before rules and as the font-family for
   any icon NOT in this subset). If an Admin ever configures a new
   social platform (or a future code change adds a new icon) whose
   class isn't listed below, it simply keeps using .fa-solid/.fa-brands'
   original font-family -- i.e. it still works, just without this
   subset's size win until the new class is added here and the font
   regenerated. Nothing breaks either way. */
@font-face {
  font-family: 'FA6 Solid Subset';
  font-style: normal;
  font-weight: 900;
  /* swap, not block: at ~1.5KB same-origin this fetches near-instantly, so
     the icon-glyph "pop-in" block was meant to avoid barely happens in
     practice, and swap is what Lighthouse's font-display audit wants. */
  font-display: swap;
  src: url('/fonts/fa-solid-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'FA6 Brands Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fa-brands-subset.woff2') format('woff2');
}
.fa-solid.fa-envelope,
.fa-solid.fa-expand,
.fa-solid.fa-handshake,
.fa-solid.fa-heart,
.fa-solid.fa-location-dot,
.fa-solid.fa-magnifying-glass-plus,
.fa-solid.fa-phone,
.fa-solid.fa-seedling,
.fa-solid.fa-share-nodes,
.fa-solid.fa-xmark {
  font-family: 'FA6 Solid Subset';
}
.fa-brands.fa-tiktok,
.fa-brands.fa-facebook-f,
.fa-brands.fa-linkedin-in,
.fa-brands.fa-youtube,
.fa-brands.fa-instagram,
.fa-brands.fa-x-twitter,
.fa-brands.fa-whatsapp {
  font-family: 'FA6 Brands Subset';
}

:root {
  --earth:   #3b2a1a;
  --soil:    #6b4226;
  --harvest: #c97d2e;
  --sun:     #f2b84b;
  --leaf:    #4a7c3f;
  --sprout:  #7db567;
  --cream:   #fdf6ec;
  --light:   #fff9f0;
  --muted:   #8a7060;
  --white:   #ffffff;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

/* ── Inline icon (replaces emoji glyphs) ── */
.icon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ── Shared Button Styles ── */
.btn-primary {
  background: var(--leaf); color: var(--white); border: none;
  padding: 13px 30px; border-radius: 30px;
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover {
  background: var(--soil); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107,66,38,0.2);
}

.btn-outline {
  background: transparent; color: var(--text);
  border: 1.5px solid rgba(107,66,38,0.35);
  padding: 12px 28px; border-radius: 30px;
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 500;
  cursor: pointer; transition: all 0.25s;
  text-decoration: none; display: inline-block;
}
.btn-outline:hover { border-color: var(--leaf); color: var(--leaf); }

.btn-accent {
  background: var(--harvest); color: var(--white); border: none;
  padding: 14px 32px; border-radius: 30px;
  font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s;
  text-decoration: none; display: inline-block; margin-top: 20px;
}
.btn-accent:hover {
  background: var(--soil); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,125,46,0.3);
}

/* ── Shared Page Header ── */
.page-header {
  min-height: 280px; padding-top: 68px;
  background: linear-gradient(135deg, var(--earth) 0%, var(--soil) 100%);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.page-header::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 60px;
  background: var(--bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.page-header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 60px 5%; position: relative; z-index: 1;
}
.page-header-label {
  font-family: 'Caveat', cursive; font-size: 1.1rem;
  color: var(--sun); margin-bottom: 8px;
}
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,5vw,3rem); color: var(--white);
}
.page-header p {
  color: rgba(255,255,255,0.7); margin-top: 12px;
  max-width: 540px; font-size: 1rem;
}

/* ── Shared Section Inner ── */
.section-inner {
  max-width: 1400px; margin: 0 auto; padding: 80px 5%;
}
.section-label {
  font-family: 'Caveat', cursive; font-size: 1.1rem;
  color: var(--harvest); margin-bottom: 8px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem,3.5vw,2.5rem); color: var(--text); margin-bottom: 16px;
}
.divider {
  width: 60px; height: 3px; background: var(--harvest);
  border-radius: 2px; margin: 16px 0;
}

/* ── Shared Grid Utilities ── */
.grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* ── Toast Notification ── */
.toast {
  position: fixed; bottom: 30px; right: 30px; z-index: 999;
  background: var(--leaf); color: var(--white);
  padding: 14px 24px; border-radius: 12px;
  font-size: 0.9rem; font-weight: 500;
  box-shadow: 0 8px 30px rgba(74,124,63,0.35);
  transform: translateY(80px); opacity: 0; transition: all 0.4s;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Section-level visibility (SPA routing) ── */
section { display: none; }
section.active { display: block; }

/* ════════════════════════════════
   Large screens (≥ 1440px)
   ════════════════════════════════ */
@media (min-width: 1440px) {
  .section-wrap, .container { padding: 100px 8%; }
  .section-title { font-size: 2.4rem; }
  .section-subtitle { font-size: 1.1rem; max-width: 700px; }
}

/* ════════════════════════════════
   XL screens (≥ 1920px / 24"+)
   ════════════════════════════════ */
@media (min-width: 1920px) {
  .section-wrap, .container { padding: 120px 10%; }
  .section-title { font-size: 2.8rem; }
  .section-subtitle { font-size: 1.2rem; max-width: 860px; }
}

/* ════════════════════════════════
   QHD screens (≥ 2560px / 27–32")
   ════════════════════════════════ */
@media (min-width: 2560px) {
  .section-wrap, .container { max-width: 1900px; padding: 140px 8%; }
  .section-title    { font-size: 3.2rem; }
  .section-subtitle { font-size: 1.35rem; max-width: 1000px; }
}

/* ════════════════════════════════
   4K screens (≥ 3840px / 38"+)
   ════════════════════════════════ */
@media (min-width: 3840px) {
  .section-wrap, .container { max-width: 2600px; padding: 160px 8%; }
  .section-title    { font-size: 4rem; }
  .section-subtitle { font-size: 1.6rem; max-width: 1300px; }
}

/* ── Lightbox trigger focus (impact before/after, gallery, our-work photos) ──
   These are plain divs made keyboard-operable (tabindex+role=button, see
   js/app.js); :focus-visible keeps the ring keyboard-only, not on mouse
   clicks, and on-brand rather than the browser default. ── */
.impact-image-box:focus-visible,
.gallery-item:focus-visible,
.ourwork-media-zoomable:focus-visible,
.video-player-wrapper:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 2px;
}

/* nav.css */
/* ============================================================
   TunaGrow CBO — Navigation Styles
   File: css/nav.css
   ============================================================ */

/* ── Site Header (Top Row) ── */
header.site-header {
  position: fixed; top: 0; width: 100%; z-index: 110;
  background: var(--surface); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: 72px;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 5%;
}

/* ── Secondary Nav (Bottom Row) ── */
nav.secondary-nav {
  position: fixed; top: 72px; width: 100%; z-index: 100;
  background: rgba(253,246,236,0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  height: 54px;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.nav-inner {
  display: flex; align-items: center; justify-content: center; /* Center the links */
  height: 100%; padding: 0 5%;
}

.header-actions { display: flex; align-items: center; gap: 16px; }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-icon {
  width: 54px; height: 54px; background: var(--leaf);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 26px; flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; color: var(--text); font-weight: 800;
}
.nav-logo-text span { color: var(--leaf); }

.nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--soil);
  font-size: 0.95rem; font-weight: 600; transition: color 0.2s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.nav-links a:hover { color: var(--leaf); }

.nav-cta {
  background: var(--leaf); color: var(--white); border: none;
  padding: 10px 24px; border-radius: 30px;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s, transform 0.1s;
  text-decoration: none; white-space: nowrap; display: inline-block;
}
.nav-cta:hover { background: var(--soil); transform: scale(1.02); }

/* ── Mobile Menu Bar (hamburger below header) ── */
.mobile-menu-bar {
  display: none;                     /* hidden on desktop */
  position: fixed;
  top: 72px; left: 0;
  width: 100%;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  padding: 8px 5%;
  justify-content: flex-start;       /* left aligned */
  transition: transform 0.35s ease, opacity 0.35s ease;
}
/* Hide mobile bar together with nav on scroll down */
.mobile-menu-bar.nav--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Hamburger button (inside mobile-menu-bar) */
.hamburger-btn {
  display: flex;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  transition: background 0.2s;
  z-index: 200;
}
.hamburger-btn:hover { background: rgba(107,66,38,0.08); }
.hamburger-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--earth); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate to X when open */
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Slide-in Drawer ── */
.mobile-drawer {
  display: none; /* shown only on mobile via media query */
  position: fixed;
  top: 112px; left: 0;
  width: 62%;           /* occupies left portion only */
  max-width: 260px;
  height: calc(100vh - 112px);
  background: rgba(253,246,236,0.98);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(107,66,38,0.1);
  box-shadow: 4px 0 24px rgba(59,42,26,0.12);
  z-index: 98;
  padding: 28px 24px 40px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;

  /* Slide-in from left */
  transform: translateX(-110%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              opacity   0.32s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* Drawer backdrop (dim the right side) */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 112px 0 0 0;
  background: rgba(59,42,26,0.18);
  backdrop-filter: blur(2px);
  z-index: 97;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Drawer nav links */
.mobile-drawer a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--soil);
  font-size: 0.95rem; font-weight: 500;
  padding: 11px 14px; border-radius: 10px;
  transition: background 0.18s, color 0.18s;
}
.mobile-drawer a:hover,
.mobile-drawer a.active-link {
  background: rgba(74,124,63,0.1);
  color: var(--leaf);
}

/* Divider inside drawer */
.mobile-drawer .drawer-divider {
  height: 1px;
  background: rgba(107,66,38,0.1);
  margin: 10px 0;
}

/* Donate CTA inside drawer */
.mobile-drawer .drawer-cta {
  background: var(--leaf); color: var(--white) !important;
  border-radius: 20px; text-align: center;
  justify-content: center; margin-top: 6px;
  font-weight: 600 !important;
}
.mobile-drawer .drawer-cta:hover {
  background: var(--soil) !important;
  color: var(--white) !important;
}

/* ── Responsive Breakpoints ── */
@media (max-width: 900px) {
  nav.secondary-nav { display: none; }
  .mobile-menu-bar  { display: flex; }       /* show hamburger bar */
  .mobile-drawer    { display: flex; top: 116px; height: calc(100vh - 116px); }
  .drawer-backdrop  { display: block; top: 116px; }
  /* Keep donate button visible on mobile */
  .nav-cta {
    font-size: 0.85rem;
    padding: 8px 18px;
  }
}
@media (min-width: 901px) {
  .mobile-menu-bar  { display: none !important; }
  .mobile-drawer    { display: none !important; }
  .drawer-backdrop  { display: none !important; }
}
/* ============================================================
   TunaGrow CBO — Nav Additions: About Dropdown + Mobile Sub-links
   APPEND these rules to the bottom of css/nav.css
   ============================================================ */

/* ── Desktop Dropdown ── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-dropdown > a::after {
  content: '▾';
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.25s;
}

/* Caret flips when JS adds .is-open */
.nav-dropdown.is-open > a::after {
  transform: rotate(180deg);
}

/* ── The menu itself ── */
.nav-dropdown-menu {
  /* Use visibility+opacity instead of display:none so
     pointer-events and transitions both work properly    */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 4px);   /* reduced gap — covered by padding bridge below */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;

  background: rgba(253,246,236,0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(107,66,38,0.12);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(59,42,26,0.14);
  /* Extra padding-top creates an invisible bridge between the
     trigger link and the visible menu box so the cursor never
     leaves the hover zone while moving diagonally downward   */
  padding: 18px 8px 10px;
  min-width: 200px;
  z-index: 200;
  list-style: none;
}

/* Caret pointer above the visible box (sits inside the padding bridge) */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(107,66,38,0.12);
}
.nav-dropdown-menu::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(253,246,236,0.98);
}

/* Shown state — JS adds .is-open to the .nav-dropdown */
.nav-dropdown.is-open .nav-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav-dropdown-menu li a {
  display: block;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.87rem;
  color: var(--soil);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav-dropdown-menu li a:hover {
  background: rgba(74,124,63,0.1);
  color: var(--leaf);
}

/* Thin divider inside dropdown */
.nav-dropdown-menu .dropdown-divider {
  height: 1px;
  background: rgba(107,66,38,0.1);
  margin: 6px 8px;
}


/* ── Mobile Drawer Sub-links (indented under About) ── */
.mobile-drawer .drawer-sub-link {
  padding-left: 30px !important;
  font-size: 0.88rem !important;
  color: var(--muted) !important;
}
.mobile-drawer .drawer-sub-link:hover,
.mobile-drawer .drawer-sub-link.active-link {
  background: rgba(74,124,63,0.07) !important;
  color: var(--leaf) !important;
}

.mobile-drawer .drawer-sub-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 14px 4px;
}

/* ── Large screens ≥ 1440px ── */
@media (min-width: 1440px) {
  nav { padding: 0 8%; }
}
@media (min-width: 1920px) {
  nav { padding: 0 10%; }
}

@media (min-width: 2560px) { nav { padding: 0 8%; max-width: 100%; } }
@media (min-width: 3840px) { nav { padding: 0 8%; } }

/* hero.css */
/* ============================================================
   TunaGrow CBO — Hero / Home Section Styles
   File: css/hero.css
   ============================================================ */

#home { padding-top: 126px; background: var(--cream); position: relative; overflow: hidden; }
@media (max-width: 900px) { #home { padding-top: 116px; } }

.hero-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(107,66,38,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 80px 5% 70px;
  display: grid; grid-template-columns: 450px 1fr;
  gap: 60px; align-items: center; position: relative; z-index: 1;
}

/* ── Hero Copy ── */
.hero-content { display: flex; flex-direction: column; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(74,124,63,0.12);
  border: 1px solid rgba(74,124,63,0.3);
  padding: 6px 16px; border-radius: 30px; margin-bottom: 24px;
  font-size: 0.8rem; font-weight: 500; color: var(--leaf); width: fit-content;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem,5vw,3.8rem);
  line-height: 1.15; color: var(--earth); margin-bottom: 20px;
}
.hero-title em { color: var(--leaf); font-style: italic; }

.hero-desc {
  font-size: 1.05rem; color: var(--muted);
  line-height: 1.75; margin-bottom: 36px; font-weight: 300;
}

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Hero Stats ── */
.hero-stats { display: flex; gap: 30px; margin-top: 48px; flex-wrap: wrap; }
.stat { text-align: left; position: relative; padding-right: 30px; }
.stat:not(:last-child)::after {
  content: ''; position: absolute; top: 4px; right: 0; bottom: 4px;
  width: 1px; background: rgba(107,66,38,0.14);
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem; font-weight: 800; color: var(--harvest); line-height: 1.1;
}
.stat-label {
  font-size: 0.76rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}

/* ── Hero Visual Card (Mercedes-Benz inspired) ── */
.hero-visual {
  position: relative; display: flex;
  align-items: center; justify-content: center;
}

/* Full-width sliding image card on desktop */
.hero-card {
  background: var(--white);
  border-radius: 24px;
  padding: 0;
  width: 100%;
  box-shadow: 0 20px 60px rgba(59,42,26,0.12), 0 2px 8px rgba(59,42,26,0.06);
  position: relative;
  overflow: hidden;
}

/* ── Carousel (Sliding Images as Background) ── */
.carousel-slides {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

/* Individual slides with background images */
.carousel-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.8s ease;
  /* Background gradients simulate images */
  background-size: cover;
  background-position: center;
}

.carousel-slide.active { opacity: 1; }

/* Slide backgrounds (nature/farming themed gradients) */
.carousel-slide:nth-child(1) {
  background: linear-gradient(135deg, #2d5016 0%, #4a7c3f 30%, #7db567 100%);
}
.carousel-slide:nth-child(2) {
  background: linear-gradient(135deg, #3b2a1a 0%, #6b4226 50%, #c97d2e 100%);
}
.carousel-slide:nth-child(3) {
  background: linear-gradient(135deg, #1a3a2a 0%, #4a7c3f 50%, #f2b84b 100%);
}
.carousel-slide:nth-child(4) {
  background: linear-gradient(135deg, #6b4226 0%, #c97d2e 40%, #f2b84b 100%);
}

/* Slide overlay for text readability */
.carousel-slide::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

/* Ensure text overlay is at the bottom of the slide */
.carousel-slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: left;
  padding: 24px 28px 20px;
  color: var(--white);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.carousel-slide-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; margin-bottom: 6px;
  font-weight: 700;
}

.carousel-slide-content p {
  font-size: 0.85rem; opacity: 0.9;
  line-height: 1.5;
  max-width: 90%;
}

/* Dynamic text colors per slide */
.carousel-slide[data-text-color="light"] .carousel-slide-content {
  color: #ffffff;
}
.carousel-slide[data-text-color="light"] .carousel-slide-content h3 {
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.carousel-slide[data-text-color="light"] .carousel-slide-content p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.carousel-slide[data-text-color="dark"] .carousel-slide-content {
  color: var(--earth);
  background: linear-gradient(to top, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 60%, transparent 100%);
}
.carousel-slide[data-text-color="dark"] .carousel-slide-content h3 {
  text-shadow: 0 2px 8px rgba(255,255,255,0.3);
}
.carousel-slide[data-text-color="dark"] .carousel-slide-content p {
  text-shadow: 0 1px 4px rgba(255,255,255,0.2);
}

/* Slide tag/badge */
.carousel-slide-tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  color: var(--white);
  font-size: 0.7rem; font-weight: 600;
  padding: 3px 12px; border-radius: 20px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ── Carousel Play/Pause Button ── */
.carousel-pause-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.3s ease, background 0.3s ease;
  pointer-events: none;
}

/* Show button on hover over carousel */
.carousel-slides:hover .carousel-pause-btn {
  opacity: 1;
  pointer-events: all;
}

/* Keep button visible when carousel is paused */
.carousel-pause-btn.is-visible {
  opacity: 1 !important;
  pointer-events: all !important;
}

.carousel-pause-btn:hover {
  background: rgba(255,255,255,0.45);
  transform: translate(-50%, -50%) scale(1.1);
}

.carousel-pause-btn .pause-icon,
.carousel-pause-btn .play-icon {
  font-size: 1.2rem;
  color: var(--white);
  transition: opacity 0.2s ease;
  position: absolute;
}

/* Show pause icon by default (carousel is playing) */
.carousel-pause-btn .pause-icon { opacity: 1; }
.carousel-pause-btn .play-icon { opacity: 0; }

/* When paused, show play icon */
.carousel-pause-btn.is-paused .pause-icon { opacity: 0; }
.carousel-pause-btn.is-paused .play-icon { opacity: 1; }

/* On mobile, make button slightly smaller */
@media (max-width: 600px) {
  .carousel-pause-btn {
    width: 44px;
    height: 44px;
  }
  .carousel-pause-btn .pause-icon,
  .carousel-pause-btn .play-icon {
    font-size: 1rem;
  }
}

/* ── Carousel Dots ── */
.carousel-dots {
  display: flex; gap: 8px; justify-content: center; padding: 12px;
  position: absolute; bottom: 4px; width: 100%; z-index: 3;
}
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: all 0.3s ease;
}
.carousel-dot:hover {
  background: rgba(255,255,255,0.7);
  transform: scale(1.2);
}
.carousel-dot.active {
  background: var(--white);
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}


/* ── Floating Leaves ── */
.floating-leaf {
  position: absolute; font-size: 2rem; opacity: 0.6;
  animation: float 4s ease-in-out infinite; pointer-events: none;
}
.floating-leaf:nth-child(1) { top: 10%; left: -10%; animation-delay: 0s; }
.floating-leaf:nth-child(2) { bottom: 15%; right: -8%; animation-delay: 1.5s; }

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; max-width: 100%; }
  .hero-content { order: 1; }
  .hero-visual  { order: 2; display: flex; }
  .hero-stats   { order: 0; margin-top: 0; margin-bottom: 24px; }
  .floating-leaf { display: none; }
  .carousel-slides { height: 380px; }
  .carousel-slide-content h3 { font-size: 1.2rem; }
  .carousel-slide-content p { font-size: 0.8rem; }
  .carousel-slide-content { padding: 20px 20px 16px; }
}
@media (max-width: 480px) {
  .carousel-slides { height: 340px; }
  .carousel-slide-content { padding: 16px 16px 12px; }
  .carousel-slide-content h3 { font-size: 1.1rem; }
  .carousel-slide-content p { font-size: 0.78rem; }
}
@media (min-width: 901px) {
  .hero-visual { display: flex; }
  .hero-card { }
  .carousel-slides { height: 400px; }
}
@media (min-width: 1200px) {
  .hero-card { }
  .carousel-slides { height: 450px; }
}

@media (min-width: 1400px) {
  .hero-card { max-width: 100%; }
  .carousel-slides { height: 480px; }
}

@media (min-width: 1440px) {
  .hero-title    { font-size: 3.8rem; }
  .hero-subtitle { font-size: 1.3rem; max-width: 700px; }
}
@media (min-width: 1920px) {
  .hero-title    { font-size: 4.8rem; }
  .hero-subtitle { font-size: 1.5rem; max-width: 860px; }
}

@media (min-width: 2560px) {
  .hero-title    { font-size: 6rem; }
  .hero-subtitle { font-size: 1.8rem; max-width: 1100px; }
}
@media (min-width: 3840px) {
  .hero-title    { font-size: 8rem; }
  .hero-subtitle { font-size: 2.2rem; max-width: 1500px; }
}

/* home.css */
/* ============================================================
   TunaGrow CBO — Home Inner Sections (Video / Events / Impact / Testimonials)
   File: css/home.css
   ============================================================ */

/* ── Home Section Wrapper ── */
.home-section {
  max-width: 1400px; margin: 0 auto;
  padding: 60px 5% 70px; position: relative; z-index: 1;
}
/* Full-bleed alternating band for visual rhythm between stacked
   sections, without needing an extra wrapper element */
#home > .home-section:nth-of-type(even) {
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}
.section-header { text-align: center; margin-bottom: 44px; }
.section-header-label {
  font-family: 'Caveat', cursive; font-size: 1.15rem;
  color: var(--harvest); margin-bottom: 6px;
}
.section-header-title {
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(1.7rem,3vw,2.4rem); color: var(--earth); margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.section-header-divider {
  width: 50px; height: 3px; background: var(--harvest);
  border-radius: 2px; margin: 0 auto 18px;
}
.section-header-sub {
  color: var(--muted); font-size: 0.95rem; max-width: 520px; margin: 0 auto;
  line-height: 1.7;
}

/* ── Video Cards ── */
.video-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s, box-shadow 0.3s;
  border: none;
}
.video-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 36px rgba(59,42,26,0.14);
}
.video-info { padding: 20px 22px; }
.video-info h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; color: var(--earth); margin-bottom: 6px;
}
.video-info p { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
/* If no video-info, video fills entire card */
.video-card .video-player-wrapper:only-child {
  height: 100%;
}
/* Remove padding when video-info is empty or absent */
.video-card:has(.video-player-wrapper:only-child) {
  padding: 0;
}

/* ── Video Player ── */
.video-player-wrapper {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; overflow: hidden; cursor: pointer;
  border: none;
  margin: 0;
}
.video-player-wrapper video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.video-play-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3); z-index: 2; transition: opacity 0.3s;
}
.video-play-overlay.hidden { opacity: 0; pointer-events: none; }
.video-play-btn-circle {
  width: 68px; height: 68px; background: rgba(255,255,255,0.9);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.video-play-btn-circle:hover { background: #fff; transform: scale(1.1); }
.video-play-btn-circle span { font-size: 1.8rem; color: var(--earth); margin-left: 4px; }
.video-pause-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); z-index: 3;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.video-pause-overlay.show { opacity: 1; }
.video-pause-icon {
  width: 68px; height: 68px; background: rgba(255,255,255,0.9);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); font-size: 2rem;
}

/* ── Event Cards ── */
.event-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(59,42,26,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.event-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 36px rgba(59,42,26,0.14);
}
.event-date-badge {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg,rgba(74,124,63,0.08),rgba(122,181,103,0.12));
  border-bottom: 1px solid rgba(107,66,38,0.08);
}
.event-date-box {
  width: 60px; height: 74px; background: var(--leaf);
  color: var(--white); border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0; text-align: center;
}
.event-date-day {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.event-date-month {
  font-size: 0.7rem; text-transform: uppercase;
  font-weight: 600; letter-spacing: 0.05em;
}
.event-date-year {
  font-size: 0.62rem; font-weight: 600; opacity: 0.85;
  letter-spacing: 0.03em; margin-top: 1px;
}
.event-date-info h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; color: var(--earth); margin-bottom: 4px;
}
.event-date-info .event-time { font-size: 0.8rem; color: var(--harvest); font-weight: 500; }
.event-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.event-body p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; margin-bottom: 16px; flex: 1; }
.event-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--soil);
}
.event-meta span { display: flex; align-items: center; gap: 4px; }
.event-tag {
  display: inline-block; background: rgba(201,125,46,0.12); color: var(--harvest);
  font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 14px;
  margin-top: 12px; align-self: flex-start;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Impact Cards ── */
.impact-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(59,42,26,0.06);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex; flex-direction: column;
  align-self: start;
}
.impact-card:hover {
  transform: translateY(-8px); box-shadow: 0 16px 40px rgba(59,42,26,0.12);
}

/* Fallback & Image View */
.impact-images {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; background: var(--earth); overflow: hidden;
}
.impact-image-box {
  position: relative; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: zoom-in;
}
.impact-image-box.before { background-image: linear-gradient(135deg,#8a7060,#a08978); background-color: #8a7060; }
.impact-image-box.after  { background-image: linear-gradient(135deg,#4a7c3f,#7db567); background-color: #4a7c3f; }
.impact-card:hover .impact-image-box { transform: scale(1.04); }

.impact-label {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,0.5); color: var(--white);
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 6px 12px; border-radius: 12px; letter-spacing: 0.08em; z-index: 2;
  backdrop-filter: blur(4px);
}

.impact-body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; background: var(--white); position: relative; z-index: 2; }
.impact-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; color: var(--earth); margin-bottom: 12px; font-weight: 800;
}
.impact-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.8; margin-bottom: 20px; flex: 1; }
.impact-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--leaf); font-weight: 600;
  padding-top: 16px; border-top: 1px solid rgba(107,66,38,0.1);
}
.impact-icon { font-size: 1.1rem; }
.impact-subject { color: var(--harvest); }

/* ── Testimonial Cards ── */
.testimonial-card {
  background: var(--white); border-radius: 20px; padding: 32px;
  box-shadow: 0 4px 24px rgba(59,42,26,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.testimonial-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 36px rgba(59,42,26,0.14);
}
.testimonial-stars { font-size: 1rem; color: var(--sun); margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card .quote {
  font-size: 0.9rem; color: var(--muted); line-height: 1.8;
  font-style: italic; flex: 1; margin-bottom: 20px;
  padding-left: 20px; border-left: 3px solid var(--sprout);
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; color: var(--white); flex-shrink: 0;
}
.testimonial-author-info h5 {
  font-size: 0.9rem; font-weight: 600; color: var(--earth); margin-bottom: 2px;
}
.testimonial-author-info p { font-size: 0.75rem; color: var(--harvest); }


/* ── Full-size video card (no description) ── */
.video-card--full {
  padding: 0;
}
.video-card--full .video-player-wrapper {
  padding-top: 0;
  height: 100%;
  min-height: 300px;
  position: relative;
}
.video-card--full .video-player-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .grid-2col { grid-template-columns: 1fr; }
  .impact-images { grid-template-columns: 1fr 1fr; }
}

/* ── Large screens ── */
@media (min-width: 1440px) {
  .home-section { padding: 80px 6% 90px; }
  .grid-2col    { gap: 32px; }
}
@media (min-width: 1920px) {
  .home-section { padding: 90px 8% 100px; }
  .grid-2col    { gap: 40px; }
}
@media (min-width: 2560px) {
  .home-section { padding: 110px 8% 120px; }
  .grid-2col    { gap: 48px; }
}

/* ── Global Lightbox Overlay ── */
.global-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.global-lightbox-overlay.active {
  opacity: 1; pointer-events: auto;
}
.global-lightbox-wrapper {
  position: relative; max-width: 1200px; max-height: 85vh; width: 95%;
  transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex; align-items: center; justify-content: center;
}
.global-lightbox-overlay.active .global-lightbox-wrapper {
  transform: scale(1);
}
.global-lightbox-wrapper img {
  max-width: 100%; max-height: 85vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.1);
}
.global-lightbox-close {
  position: absolute; top: -45px; right: 0;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.global-lightbox-close:hover {
  background: rgba(255,255,255,0.3); transform: scale(1.1);
}
@media (max-width: 768px) {
  .global-lightbox-close {
    top: 15px; right: 15px; background: rgba(0,0,0,0.5);
  }
  .event-date-badge { gap: 12px; padding: 16px 18px; }
  .event-date-box { width: 54px; height: 68px; }
  .event-date-day { font-size: 1.3rem; }
  .event-date-month { font-size: 0.64rem; }
  .event-date-year { font-size: 0.56rem; }
}

/* about.css */
/* ============================================================
   TunaGrow CBO — About Page Styles
   File: css/about.css
   ============================================================ */

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.about-img-block { position: relative; }
.about-img-placeholder {
  background: linear-gradient(135deg, var(--sprout) 0%, var(--leaf) 100%);
  border-radius: 20px; height: 420px;
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem; position: relative; overflow: hidden;
}
.about-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--white); border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 12px 36px rgba(59,42,26,0.14); text-align: center;
}
.about-badge-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 800; color: var(--harvest);
}
.about-badge-text { font-size: 0.75rem; color: var(--muted); }

.about-values {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 32px;
}
.value-item {
  background: var(--white); border-radius: 14px;
  padding: 18px; border-left: 3px solid var(--sprout);
  box-shadow: 0 4px 12px rgba(59,42,26,0.04);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-left-color 0.3s ease;
}
.value-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(59,42,26,0.08);
  border-left-color: var(--leaf);
}
.value-item h4 { font-size: 0.9rem; font-weight: 600; color: var(--earth); margin-bottom: 4px; }
.value-item p  { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ── Our Work (sub-page under about) ── */
.ourwork-card {
  background: var(--white); border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(59,42,26,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  align-self: start;
}
.ourwork-card:hover {
  transform: translateY(-4px); box-shadow: 0 12px 36px rgba(59,42,26,0.14);
}
.ourwork-media-zoomable { cursor: pointer; }
.ourwork-media {
  width: 100%; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; position: relative; overflow: hidden;
}
.ourwork-body { padding: 24px 28px 28px; }
.ourwork-body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; color: var(--earth); margin-bottom: 10px;
}
.ourwork-body p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
.ourwork-tag {
  display: inline-block; background: rgba(74,124,63,0.1); color: var(--leaf);
  font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 14px;
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
}
.ourwork-text-only {
  background: linear-gradient(135deg,rgba(74,124,63,0.04),rgba(122,181,103,0.08));
  border-left: 4px solid var(--leaf); border-radius: 0 16px 16px 0;
  padding: 28px; display: flex; flex-direction: column; justify-content: center;
}
.ourwork-text-only h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; color: var(--earth); margin-bottom: 10px;
}
.ourwork-text-only p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }

/* ── Page Builder media blocks ── */
.dynamic-block-media figure {
  margin: 0;
}
.dynamic-block-media img,
.dynamic-block-media video {
  max-width: 100%;
  background: var(--white);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dynamic-block-media {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .dynamic-block-media figure {
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  .about-values { grid-template-columns: 1fr; }
}

/* ── Read More / Read Less Premium Toggles ── */
.read-more-container {
  display: block;
  width: 100%;
}
.read-more-collapsed {
  display: block;
  animation: fadeIn 0.3s ease;
}
.read-more-expanded {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.read-more-toggle-btn {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--leaf);
  color: var(--leaf);
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'DM Sans', sans-serif;
  outline: none;
}
.read-more-toggle-btn:hover {
  background: var(--leaf);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 124, 63, 0.2);
}
.read-more-toggle-btn:active {
  transform: translateY(0);
}
.read-more-toggle-btn.expanded {
  border-color: var(--harvest);
  color: var(--harvest);
}
.read-more-toggle-btn.expanded:hover {
  background: var(--harvest);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(220, 140, 50, 0.2);
}

/* Adjustments for specific page components */
.impact-desc .read-more-toggle-btn,
.ourwork-card .read-more-toggle-btn,
.news-grid .read-more-toggle-btn {
  padding: 4px 14px;
  font-size: 0.75rem;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* footer.css */
/* ============================================================
   TunaGrow CBO — Footer Styles (Themed)
   File: css/footer.css
   ============================================================ */

footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 60px 5% 30px;
  color: var(--text);
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: var(--text);
}

.footer-brand p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-col h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.footer-col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.footer-col a i {
  transition: transform 0.3s ease, color 0.3s ease;
  margin-right: 6px;
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--leaf);
  transform: translateX(4px);
}

.footer-col a:hover i {
  color: var(--leaf);
  transform: scale(1.15) rotate(4deg);
}

.footer-social-icons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.footer-social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.2s;
  margin-bottom: 0;
}

.footer-social-icons a:hover {
  background: var(--leaf);
  color: #ffffff;
  border-color: var(--leaf);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-updated {
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-updated i {
  color: var(--leaf);
  opacity: 0.8;
  font-size: 0.9rem;
}

/* Mobile responsive */
@media (max-width: 968px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  /* Reserves roughly the footer's real populated height (measured via
     Lighthouse's CLS trace at this same mobile viewport) so the empty
     <footer></footer> shell doesn't jump from ~90px (padding only) to
     ~1130px once renderFooter() populates it late in the fetchAll()
     chain -- by far the single largest layout-shift contributor on the
     page. An approximation, not pixel-exact (real height varies with
     settings/social/footer-link data), but removes most of the jump
     either way. Only needed at this breakpoint, where .footer-top's
     columns collapse to one below and make the footer much taller --
     above it the multi-column layout was never a meaningful contributor. */
  footer {
    min-height: 1000px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* scroll-highlight.css */
/* ============================================================
   TunaGrow CBO — Scroll & Highlight Animation
   File: css/scroll-highlight.css
   ============================================================ */

/**
 * Applied dynamically by js/scroll-highlight.js to any element
 * that is navigated to via a data-anchor link.
 *
 * Uses a two-ring box-shadow pulse (harvest gold outer, leaf green inner)
 * that draws the eye without disrupting layout.
 */

.tg-highlight {
  box-shadow:
    0 0 0 3px var(--leaf),
    0 0 0 7px rgba(242, 184, 75, 0.45),
    0 0 28px 6px rgba(201, 125, 46, 0.18);
  border-radius: 20px;          /* matches card border-radius throughout site */
  outline: none;
  transition:
    box-shadow 0.35s ease,
    opacity    0.55s ease;
  position: relative;
  z-index: 1;                   /* float above siblings during highlight */
}

.tg-highlight--fade {
  box-shadow:
    0 0 0 0px transparent,
    0 0 0 0px transparent,
    0 0 0px 0px transparent;
  opacity: 1;                   /* keep content visible, only remove ring */
}

/**
 * Some elements (page-header, section wrappers) don't have border-radius.
 * For those, use a bottom-border flash instead of a full ring.
 */
.tg-highlight.tg-highlight--bar {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 3px solid var(--harvest);
}
.tg-highlight--bar.tg-highlight--fade {
  border-bottom-color: transparent;
}

/* themes.css */
/* ============================================================
   TunaGrow CBO — Theme Definitions
   File: css/themes.css
   ============================================================ */

[data-theme="light"], :root {
  --earth: #3b2a1a; --soil: #6b4226; --harvest: #c97d2e;
  --sun: #f2b84b; --leaf: #4a7c3f; --sprout: #7db567;
  --cream: #fdf6ec; --light: #fff9f0; --muted: #846b5c;
  --white: #ffffff; --bg: #fdf6ec; --surface: #fff9f0;
  --border: rgba(107,66,38,0.12); --text: #3b2a1a;
  --card-bg: #ffffff; --shadow: rgba(59,42,26,0.10);
}

[data-theme="dark"] {
  --earth: #f0e6d3; --soil: #d4a97a; --harvest: #e8a44a;
  --sun: #f2b84b; --leaf: #6aaa3a; --sprout: #8bc34a;
  --cream: #1a1209; --light: #2a1f14; --muted: #b8a088;
  --white: #f0e6d3; --bg: #0f0a05; --surface: #1a1209;
  --border: rgba(240,230,211,0.15); --text: #f0e6d3;
  --card-bg: #2a1f14; --shadow: rgba(0,0,0,0.30);
}

[data-theme="forest"] {
  --earth: #2d3a1c; --soil: #5a7d3a; --harvest: #8bc34a;
  --sun: #ffd54f; --leaf: #3d8c30; --sprout: #66bb6a;
  --cream: #f0f7ee; --light: #f5faf3; --muted: #5b7650;
  --white: #ffffff; --bg: #f0f7ee; --surface: #f5faf3;
  --border: rgba(90,125,58,0.15); --text: #2d3a1c;
  --card-bg: #ffffff; --shadow: rgba(45,58,28,0.10);
}

[data-theme="sunset"] {
  --earth: #4a1e0e; --soil: #c25a1e; --harvest: #e05c1a;
  --sun: #ffab40; --leaf: #d84315; --sprout: #ef6c00;
  --cream: #fff5ef; --light: #fff8f5; --muted: #986348;
  --white: #ffffff; --bg: #fff5ef; --surface: #fff8f5;
  --border: rgba(194,90,30,0.15); --text: #4a1e0e;
  --card-bg: #ffffff; --shadow: rgba(74,30,14,0.10);
}

[data-theme="ocean"] {
  --earth: #1a3a4a; --soil: #2e86c1; --harvest: #3498db;
  --sun: #f39c12; --leaf: #2980b9; --sprout: #5dade2;
  --cream: #eef6fb; --light: #f5fafd; --muted: #467491;
  --white: #ffffff; --bg: #eef6fb; --surface: #f5fafd;
  --border: rgba(46,134,193,0.15); --text: #1a3a4a;
  --card-bg: #ffffff; --shadow: rgba(26,58,74,0.10);
}

[data-theme="darkforest"] {
  --earth: #c8e6c9; --soil: #81c784; --harvest: #a5d6a7;
  --sun: #ffd54f; --leaf: #6aaa3a; --sprout: #8bc34a;
  --cream: #0d1a0c; --light: #142310; --muted: #6b8b5e;
  --white: #c8e6c9; --bg: #080f07; --surface: #0d1a0c;
  --border: rgba(200,230,201,0.15); --text: #c8e6c9;
  --card-bg: #142310; --shadow: rgba(0,0,0,0.30);
}

/* ── Adaptive Progressive Loading Utilities ── */
.adaptive-image-wrapper { 
  position: relative; 
  overflow: hidden; 
  background-color: var(--border); 
  width: 100%; 
  height: 100%; 
}
.adaptive-image-blur { 
  filter: blur(10px); 
  transform: scale(1.05); 
  transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease; 
}
.adaptive-image-loaded { 
  filter: blur(0); 
  transform: scale(1); 
}
.img-cover { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
.adaptive-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.img-contain {
  object-fit: contain !important;
}
.logo-wrapper {
  width: auto !important;
  max-width: 200px;
  background-color: transparent !important;
}
.logo-wrapper img {
  object-fit: contain !important;
}

/* theme-switcher.css */
/* ============================================================
   TunaGrow CBO — Theme Switcher Styles
   File: css/theme-switcher.css
   ============================================================ */

#theme-switcher {
  position: relative;
  margin-left: 8px;
}

.theme-switcher-wrapper {
  position: relative;
}

.theme-toggle-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  color: var(--text);
}

.theme-toggle-btn:hover {
  background: var(--surface);
  transform: scale(1.1);
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 32px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.25s;
  z-index: 1000;
}

.theme-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.theme-option:hover {
  background: var(--surface);
}

.theme-option.active {
  background: var(--surface);
  font-weight: 500;
}

.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.theme-label {
  flex: 1;
  text-align: left;
}

.theme-icon {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .theme-dropdown {
    right: -10px;
  }
}