/* ====================================================================
   CFS Agriculture — global site styles
   Ported 1:1 from the flat-file site's shared <style> block.
   Tailwind utility classes come from the Tailwind CDN runtime,
   configured in inc/enqueue.php with the site's brand palette.
   ==================================================================== */

body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .font-serif { font-family: 'Playfair Display', Georgia, serif; }
.font-display { font-family: 'Playfair Display', Georgia, serif; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ---------- Navigation dropdowns ---------- */
.dropdown-menu { display: none; }
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu { display: block; }
.nav-dropdown { display: none; }
.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown-trigger:focus-within .nav-dropdown { display: block; }
/* dropdown reliability: stacking + hover bridge over the gap */
.dropdown-menu, .nav-dropdown { z-index: 60; }
.dropdown-menu::before, .nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

/* ---------- FAQ accordion (details/summary pattern) ---------- */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ""; }
details[open] .faq-chevron { transform: rotate(180deg); }
details summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.75rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: #047857;
  border: 2px solid #047857;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
details[open] summary::before {
  content: '\2212';
  background-color: #047857;
  color: #ffffff;
}

/* ---------- FAQ accordion (js .faq-item pattern) ---------- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
/* Collapse the padding too: with max-height alone, the bottom padding
   leaves a 20px window where the first line of the answer bleeds
   through (visible on the original site's county pages, and jarring on
   the contact page whose original used display:none). */
.faq-item:not(.open) .faq-answer { padding-top: 0; padding-bottom: 0; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }

/* ---------- Service cards ---------- */
.service-card:hover .service-img { transform: scale(1.08); }

/* ---------- Visual flare ---------- */
/* Hero: slow ken-burns zoom */
.kenburns { animation: kenburns 26s ease-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
/* Hero: staggered entrance */
.hero-in > * { opacity: 0; transform: translateY(26px); animation: heroUp 1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-in > *:nth-child(1) { animation-delay: .15s; }
.hero-in > *:nth-child(2) { animation-delay: .32s; }
.hero-in > *:nth-child(3) { animation-delay: .5s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }
/* Scroll reveal (only active when JS is on, so no-JS shows everything) */
.js .reveal,
.js .service-card { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in,
.js .service-card.in { opacity: 1; transform: none; }
.js .service-card.in:hover { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .kenburns, .hero-in > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cfs-slide { transition: none !important; }
  .cfs-dot { transition: none !important; }
  .js .reveal, .js .service-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hero slider ---------- */
/* Slides stack; only the active one is painted. The section itself carries
   the min-height, since absolutely positioned slides contribute none. */
.cfs-slider { position: relative; }
.cfs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1; transition: opacity .9s ease, visibility 0s linear .9s; }
.cfs-slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s ease; }
/* The outgoing slide holds full opacity underneath while the incoming one
   fades in over it. Cross-fading both at once leaves two headlines visible
   through each other for the length of the transition. */
.cfs-slide.was-active { opacity: 1; visibility: visible; z-index: 1; transition: none; }
/* Hold each slide's staggered entrance until it is actually shown. */
.cfs-slide .hero-in > * { animation-play-state: paused; }
.cfs-slide.is-active .hero-in > * { animation-play-state: running; }
/* Don't burn cycles panning a background nobody can see. */
.cfs-slide:not(.is-active) .kenburns { animation-play-state: paused; }

.cfs-slider-btn { background: rgba(255,255,255,.12); backdrop-filter: blur(4px); transition: background .2s ease; }
.cfs-slider-btn:hover, .cfs-slider-btn:focus-visible { background: rgba(8,146,61,.85); }

.cfs-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255,255,255,.45); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, width .25s ease; }
.cfs-dot:hover { background: rgba(255,255,255,.75); }
.cfs-dot.is-active { background: #fff; width: 1.75rem; }

/* No JS: show the first slide rather than an empty box. */
html:not(.js) .cfs-slide:first-child { opacity: 1; visibility: visible; }

/* ---------- Hero overlay ---------- */
.hero-overlay {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.66) 0%, rgba(6, 95, 70, 0.52) 50%, rgba(2, 44, 34, 0.62) 100%);
}

/* ---------- Sticky sidebar (service / location / article pages) ---------- */
@media (min-width: 1024px) {
  .sidebar-sticky {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* ---------- Gallery ---------- */
.gallery-grid { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .gallery-grid { columns: 2; } }
@media (min-width: 1024px) { .gallery-grid { columns: 3; } }
@media (min-width: 1280px) { .gallery-grid { columns: 4; } }
.gallery-item { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; display: block; margin: 0 0 1rem; padding: 0; border: 0; background: #f5f5f4; cursor: zoom-in; border-radius: .75rem; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,47,21,.45), transparent 50%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.gallery-item:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(2,16,10,.93); display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 85vh; border-radius: .5rem; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 3rem; height: 3rem; border-radius: 9999px; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.lb-btn:hover { background: rgba(8,146,61,.85); }
.lb-close { top: 1.25rem; right: 1.25rem; }
.lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #cff7e0; font-size: .875rem; letter-spacing: .05em; }

/* ====================================================================
   WordPress / Elementor integration
   ==================================================================== */

/* Elementor's frontend reset (`.elementor img { height: auto; max-width:
   100% }`) outranks Tailwind's h-full/h-48 utilities and collapses
   stretched images (featured service card, hero backgrounds, image
   strips). Re-assert the Tailwind sizing utilities at higher
   specificity. */
.elementor img.h-full { height: 100%; }
.elementor img.w-full { width: 100%; }
.elementor img.h-auto { height: auto; }
.elementor img.h-48 { height: 12rem; }
@media (min-width: 640px) { .elementor img.sm\:h-40 { height: 10rem; } }
@media (min-width: 1024px) { .elementor img.lg\:h-48 { height: 12rem; } }

/* Admin bar offset for the sticky navbar */
body.admin-bar #navbar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #navbar { top: 46px; } }

/* Let CFS full-bleed section widgets span edge-to-edge inside Elementor */
.elementor-widget-container > section { width: 100%; }

/* Stacked full-bleed rows: each CFS widget renders its own padded
   <section>, so the Elementor wrapper contributes no spacing. Scoped to
   sections the importer marks with .cfs-stack — future client-added
   sections keep normal Elementor spacing. */
.cfs-stack .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---- Two-column main areas (service/location/about/resources pages
   use flex 2/3 + 1/3; article pages use the same ratio). The Elementor
   section carries .cfs-main-area (+ .cfs-main-area--article on posts),
   its columns carry .cfs-col-content / .cfs-col-sidebar. ---- */
.cfs-main-area > .elementor-container {
  max-width: 80rem;              /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 2.5rem;                   /* gap-10 */
}
@media (min-width: 1024px) {
  .cfs-main-area > .elementor-container { gap: 3.5rem; } /* lg:gap-14 */
}
.cfs-main-area .elementor-column { width: 100%; }
@media (min-width: 1024px) {
  .cfs-main-area .cfs-col-content { width: 66.666%; }  /* lg:w-2/3 */
  .cfs-main-area .cfs-col-sidebar { width: 33.333%; }  /* lg:w-1/3 */
  .cfs-main-area .cfs-col-sidebar > .elementor-widget-wrap {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    align-content: start;
  }
  /* Article sidebars stick lower (lg:top-28) and don't scroll-clip */
  .cfs-main-area--article .cfs-col-sidebar > .elementor-widget-wrap {
    top: 7rem;
    max-height: none;
    overflow-y: visible;
  }
  /* Contact page splits 3/2 on a 5-col grid (60/40), not 2/3 + 1/3 */
  .cfs-main-area--contact .cfs-col-content { width: 60%; }
  .cfs-main-area--contact .cfs-col-sidebar { width: 40%; }
  .cfs-main-area--contact .cfs-col-sidebar > .elementor-widget-wrap {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .cfs-main-area--article > .elementor-container,
  .cfs-main-area--contact > .elementor-container {
    padding-left: 2rem;   /* lg:px-8 */
    padding-right: 2rem;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .cfs-main-area--article > .elementor-container,
  .cfs-main-area--contact > .elementor-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}
@media (max-width: 1023px) {
  .cfs-main-area .elementor-column { width: 100% !important; }
}
/* space-y-6 between sidebar cards; content blocks manage their own
   top margins (mt-12 / mt-14 from the original markup) */
.cfs-col-sidebar .elementor-widget:not(:last-child) { margin-bottom: 1.5rem; }
.cfs-col-content .elementor-widget:not(:last-child) { margin-bottom: 0; }