/* =========================================================
   Fernside SCRIP – Custom CSS
   Small set of overrides layered on top of Tailwind CDN.
   Keep this file short: most styling belongs in Tailwind classes.
   ========================================================= */

:root {
  --scrip-green:       #1B5E20;
  --scrip-green-dark:  #0D3B0D;
  --scrip-green-soft:  #E8F0E8;
  --scrip-orange:      #D84315;
  --scrip-orange-soft: #FBE8E0;
  --scrip-grey:        #424242;
  --scrip-offwhite:    #F5F5F5;
}

html { scroll-behavior: smooth; }

body {
  font-family: Arial, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  color: var(--scrip-grey);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Skip-to-content link: hidden until focused (keyboard users) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: var(--scrip-green);
  color: #fff;
  border-radius: 0.5rem;
  z-index: 100;
}

/* --- Hero background treatments ------------------------------------ */
.hero-overlay {
  background:
    linear-gradient(135deg, rgba(13,59,13,0.80) 0%, rgba(27,94,32,0.65) 60%, rgba(27,94,32,0.45) 100%);
}

.hero-compact {
  background:
    linear-gradient(135deg, rgba(13,59,13,0.85) 0%, rgba(27,94,32,0.75) 100%);
}

/* --- Organic leaf/shape dividers ----------------------------------- */
.leaf-divider {
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'><path d='M0,24 C200,48 400,0 600,24 C800,48 1000,0 1200,24 L1200,48 L0,48 Z' fill='%23E8F0E8'/></svg>");
}
.leaf-divider.flip { transform: scaleY(-1); }

/* --- Progress bars ------------------------------------------------- */
.progress-track {
  background: #E0E7E0;
  border-radius: 9999px;
  height: 12px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--scrip-green) 0%, #2E7D32 100%);
  border-radius: 9999px;
  transition: width 1s ease-out;
}

/* --- Stat counter typography --------------------------------------- */
.stat-number {
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--scrip-green);
}

/* --- Card hover lift ----------------------------------------------- */
.card-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(13,59,13,0.18);
}

/* --- Testimonial carousel ------------------------------------------ */
.testimonial-slide {
  display: none;
  animation: fade .5s ease;
}
.testimonial-slide.is-active { display: block; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* --- Accordion ----------------------------------------------------- */
details.faq {
  border: 1px solid #E0E7E0;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  transition: box-shadow .2s ease;
}
details.faq[open] {
  box-shadow: 0 8px 24px -16px rgba(13,59,13,0.2);
  border-color: var(--scrip-green);
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--scrip-green-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--scrip-green);
  transition: transform .2s ease;
}
details.faq[open] summary::after { content: "−"; }

/* --- Focus states (a11y) ------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 3px solid var(--scrip-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Prefers reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-lift, .progress-fill, .testimonial-slide { transition: none; animation: none; }
}