/* Field and Insights Africa — component layer
   Tailwind (Play CDN) handles utilities; this file holds the small set of
   reusable classes referenced across includes/ and both pages, plus motifs
   tied to the brand (dot-grid "field data" texture, growth-arrow underline). */

/* --- Font Size Controller --- */
:root {
  --base-font-size: 100%; /* Default (Medium) */
}

html {
  scroll-behavior: smooth;
  font-size: var(--base-font-size) !important;
  transition: font-size 0.2s ease;
}

html { scroll-behavior: smooth; }

::selection { background: #A6C93D; color: #0B3D2E; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:#0B3D2E; color:#fff; padding:.75rem 1.25rem; border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

/* --- Buttons --- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:#0B3D2E; color:#fff; font-weight:600; font-size:.9rem;
  padding:.7rem 1.4rem; border-radius:.55rem;
  transition: background .2s ease, transform .2s ease;
}
.btn-primary:hover{ background:#1F7A4D; transform: translateY(-1px); }
.btn-primary:focus-visible{ outline:2px solid #A6C93D; outline-offset:2px; }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:#0B3D2E; font-weight:600; font-size:.9rem;
  padding:.68rem 1.35rem; border-radius:.55rem; border:1.5px solid #0B3D2E;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{ background:#0B3D2E; color:#fff; }
.btn-outline:focus-visible{ outline:2px solid #A6C93D; outline-offset:2px; }

.btn-ghost-light{
  display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:600; font-size:.9rem;
  padding:.68rem 1.35rem; border-radius:.55rem; border:1.5px solid rgba(255,255,255,.35);
  transition: background .2s ease, border-color .2s ease;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); border-color:#A6C93D; }

/* --- Header mobile menu --- */
#menuToggle.is-open .menu-bar:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
#menuToggle.is-open .menu-bar:nth-child(2){ opacity:0; }
#menuToggle.is-open .menu-bar:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* --- Footer --- */
.footer-heading{
  font-family:'Space Grotesk', sans-serif; font-size:.75rem; letter-spacing:.15em;
  text-transform:uppercase; color:#A6C93D;
}
.social-btn{
  height:2.25rem; width:2.25rem; border-radius:9999px; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff;
  transition: background .2s ease, border-color .2s ease;
}
.social-btn:hover{ background:#A6C93D; color:#0B3D2E; border-color:#A6C93D; }

/* --- Sidebar (about.php table of contents) --- */
.sidebar-link.is-active{
  color:#0B3D2E; border-left-color:#A6C93D; font-weight:600;
}

/* --- Eyebrow / section labels --- */
.eyebrow{
    font-size: 35px;
  font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:#1F7A4D;
  display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{ content:''; width:1.35rem; height:1.5px; background:#A6C93D; display:inline-block; }
.eyebrow.on-dark{ color:#DCEFA6; }
.eyebrow.on-dark::before{ background:#A6C93D; }

/* --- Field-note data grid: a dot lattice standing in for sampling points
   across a survey area. Used behind the hero and section transitions. --- */
.field-grid{
  background-image: radial-gradient(#0B3D2E 1px, transparent 1px);
  background-size: 22px 22px;
}
.field-grid-light{
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* --- Growth-arrow underline accent for headline emphasis --- */
.underline-swoosh{
  position:relative; white-space:nowrap;
}
.underline-swoosh svg{
  position:absolute; left:0; bottom:-.28em; width:100%; height:.4em;
}

/* --- Cards --- */
.card{
  background:#fff; border:1px solid #DDE3D8; border-radius:.9rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{ border-color:#3E9B67; transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(11,61,46,.25); }

/* --- Icon badges (service cards) --- */
.icon-badge{
  height:2.75rem; width:2.75rem; border-radius:.65rem;
  background:#EAF1EE; color:#1F7A4D;
  display:flex; align-items:center; justify-content:center;
}
.icon-badge svg{ width:1.35rem; height:1.35rem; }

/* --- Form fields --- */
.form-label{ display:block; font-size:.8rem; font-weight:600; color:#3B473F; margin-bottom:.4rem; }
.form-input{
  width:100%; border:1.5px solid #DDE3D8; border-radius:.55rem; padding:.65rem .85rem;
  font-size:.9rem; background:#F8F9F5; color:#14201A; transition: border-color .2s ease, background .2s ease;
}
.form-input:focus{ outline:none; border-color:#1F7A4D; background:#fff; }

/* --- Stat figures --- */
.stat-figure{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* --- Reveal-on-scroll --- */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .btn-primary:hover, .card:hover{ transform:none; }
}

/* --- Back to top --- */
#backToTop.is-visible{ opacity:1; pointer-events:auto; }

/* --- Methodology connector line (about.php) --- */
.step-connector{
  background: linear-gradient(90deg, #A6C93D 0%, #1F7A4D 100%);
}