/* ==========================================================================
   Sweet Pea Nursery — brand tokens + shared UI (loaded site-wide)
   Greens reuse the tokens already used by the quote wizard for continuity.
   ========================================================================== */
:root{
  --spn-green-dark:#2f5d2a;
  --spn-green:#3c7726;
  --spn-green-mid:#5b9a2e;
  --spn-green-bright:#6aa636;
  --spn-gold:#dca22a;
  --spn-gold-soft:#f0c24b;
  --spn-cream:#fbf8ef;
  --spn-cream-2:#f3efe2;
  --spn-ink:#1f2a1c;
  --spn-muted:#5f6c5a;
  --spn-line:#e7eadf;
  --spn-soft:#eef6e0;
  --spn-shadow:0 18px 44px rgba(20,40,12,.10);
  --spn-shadow-sm:0 8px 22px rgba(20,40,12,.07);
  --spn-radius:18px;
  --spn-head:"Involve","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Crisper text rendering site-wide. */
body,.spn-home,.spn-cat-page,.spn-banner,.spn-site-footer{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ---- shared buttons -------------------------------------------------------*/
.spn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:inherit;
  font-weight:700;font-size:15px;line-height:1;border:none;border-radius:999px;padding:15px 28px;
  cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s,border-color .18s;
  letter-spacing:.01em;white-space:nowrap}
.spn-btn svg{width:18px;height:18px;flex:0 0 auto}
.spn-btn--primary{background:linear-gradient(135deg,var(--spn-green-bright),var(--spn-green));color:#fff;box-shadow:0 12px 26px rgba(60,119,38,.28)}
.spn-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(60,119,38,.36);color:#fff}
.spn-btn--gold{background:linear-gradient(135deg,var(--spn-gold-soft),var(--spn-gold));color:#3a2d05;box-shadow:0 12px 26px rgba(200,150,20,.26)}
.spn-btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(200,150,20,.34);color:#3a2d05}
.spn-btn--ghost{background:#fff;color:var(--spn-green-dark);border:1.5px solid var(--spn-line)}
/* color must be re-declared: the parent theme's `button:hover{color:#fff}` would
   otherwise turn this light-background button's text white (invisible) on hover. */
.spn-btn--ghost:hover{border-color:var(--spn-green-mid);background:#fafcf7;color:var(--spn-green-dark);transform:translateY(-2px)}
.spn-btn--light{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.spn-btn--light:hover{background:rgba(255,255,255,.24);color:#fff;transform:translateY(-2px)}

/* ---- shared section label -------------------------------------------------*/
.spn-eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--spn-head);font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--spn-green-mid);margin:0 0 14px}
.spn-eyebrow::before{content:"";width:24px;height:2px;background:var(--spn-gold);display:inline-block;border-radius:2px}
.spn-eyebrow.is-light{color:var(--spn-gold-soft)}

/* Footer social icons + "Let's talk" marquee are removed from the footer template itself;
   these rules remain as a belt-and-braces guard in case they are ever re-added. */
#colophon .elementor-widget-social-icons,.elementor-widget-gofar-slide-scrolling{display:none}
/* Footer bg: scroll (not fixed) so it renders consistently and works on mobile. */
#colophon .elementor-section,#colophon .e-con{background-attachment:scroll!important}

/* ---- Heroes flush under the menu + tighten the footer gap (.spn-flush) -----*/
.spn-flush #content{padding-top:0;margin-top:0;margin-bottom:0}
.spn-flush .site-header{margin-bottom:0}
/* Logo ~20% larger. Beats the theme's inline rule
   `.site-header .site-branding img{max-height:90px!important}` (spec 0,2,1)
   with higher specificity (0,3,1). */
.site-header .site-branding img.custom-logo,
.site-header .site-branding .elementor-widget-site-logo img{max-height:130px!important;width:auto!important;height:auto!important;max-width:none!important}

/* ---- Full-width image hero banner ----------------------------------------*/
.spn-banner{position:relative;display:flex;align-items:center;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  max-width:100vw;overflow:hidden;isolation:isolate}
.spn-banner--tall{min-height:clamp(440px,60vh,580px);align-items:center}
.spn-banner--standard{min-height:clamp(320px,42vh,440px)}
.spn-banner--compact{min-height:clamp(240px,32vh,340px)}
/* `.spn-banner .spn-banner__bg` (not just `.spn-banner__bg`) so the height beats the
   theme/catalogue `.spn-cat-page img{height:auto}` rule — otherwise the bg renders at
   intrinsic height, the banner clips its TOP, and object-fit/object-position do nothing. */
.spn-banner .spn-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:-2}
.spn-banner--tall .spn-banner__veil{background:
  linear-gradient(90deg,rgba(16,36,11,.86) 0%,rgba(16,36,11,.56) 38%,rgba(16,36,11,.22) 68%,rgba(16,36,11,.34) 100%),
  linear-gradient(180deg,rgba(16,36,11,.40) 0%,rgba(16,36,11,.12) 42%,rgba(16,36,11,.58) 100%)}
.spn-banner__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(18,38,12,.74) 0%,rgba(18,38,12,.42) 42%,rgba(18,38,12,.12) 72%,transparent 100%),
  linear-gradient(180deg,rgba(18,38,12,.30) 0%,rgba(18,38,12,.10) 40%,rgba(18,38,12,.50) 100%)}
.spn-banner__inner{position:relative;z-index:2;width:100%;max-width:1240px;box-sizing:border-box;color:#fff;padding:48px 24px 46px;margin-inline:auto}
/* Home hero: the trust strip below overlaps the banner's bottom ~52px, so the extra
   bottom padding lifts the text and centres it in the VISIBLE area above that bar
   (otherwise the buttons sit on / overlap the trust cards). */
.spn-banner--tall .spn-banner__inner{padding-top:24px;padding-bottom:84px}
.spn-banner__crumb{max-width:100%;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.85);
  margin:0 0 16px;white-space:normal;overflow-wrap:anywhere}
.spn-banner__crumb a{color:#fff;text-decoration:none;opacity:.92}
.spn-banner__crumb a:hover{opacity:1;text-decoration:underline}
.spn-banner .spn-eyebrow.is-light{color:var(--spn-gold-soft);margin-bottom:12px}
.spn-banner .spn-banner__title{font-family:var(--spn-head);color:#fff;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(30px,4.4vw,52px);margin:0;text-shadow:0 2px 22px rgba(0,0,0,.45);max-width:18ch}
.spn-banner--tall .spn-banner__title{font-size:clamp(36px,5.4vw,62px);max-width:16ch}
.spn-banner .spn-banner__sub{margin:16px 0 0;font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:rgba(255,255,255,.95);max-width:60ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.spn-banner__title .hl{color:var(--spn-gold-soft)}
.spn-banner__cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
@media(max-width:767px){
  .spn-banner--plant .spn-banner__bg{object-position:68% center!important}
  .spn-banner--site .spn-banner__bg{object-position:center center!important}
}
@media(max-width:640px){
  .spn-banner__inner{padding:36px 18px 34px}
  .spn-banner__crumb{width:min(100%,340px);font-size:12.5px;margin-bottom:14px}
  .spn-banner__cta .spn-btn{flex:1 1 auto}
}

/* ---- Nav menu: small leaf separators instead of circle dots ---------------*/
.site-header li.menu-item::after,.elementor-nav-menu .menu-item::after{
  background-color:transparent!important;border-radius:0!important;width:14px!important;height:14px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b9a2e' d='M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 9-4 13-9 13Z'/%3E%3Cpath fill='%235b9a2e' d='M4.6 20.4c1.8-5 5-8 10-9.6' opacity='.0'/%3E%3C/svg%3E")!important;
  background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;opacity:.9}

/* ---- Custom site footer ---------------------------------------------------*/
.spn-site-footer{position:relative;color:#e8efe0;overflow:hidden;font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:radial-gradient(120% 95% at 100% 0%,rgba(106,166,54,.20),transparent 55%),linear-gradient(160deg,#2c5827 0%,#22481c 56%,#1b3a16 100%)}
.spn-foot-top{display:block;height:4px;background:linear-gradient(90deg,var(--spn-green-bright),var(--spn-gold-soft) 50%,var(--spn-green-bright))}
.spn-foot-leaf{position:absolute;right:-50px;bottom:-70px;width:360px;height:360px;color:#fff;opacity:.05;pointer-events:none;z-index:1}
.spn-foot-inner{max-width:1240px;margin:0 auto;padding:62px 24px 38px;position:relative;z-index:2;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px}
.spn-foot-logo{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.spn-foot-logo svg{width:30px;height:30px;color:var(--spn-gold-soft)}
.spn-foot-logo b{font-family:var(--spn-head);font-size:22px;color:#fff;letter-spacing:-.01em}
.spn-foot-brand p{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6;margin:0 0 20px;max-width:36ch}
.spn-foot-contact{display:grid;gap:11px}
.spn-foot-contact a,.spn-foot-contact span{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.86);text-decoration:none;font-size:14.5px;line-height:1.45}
.spn-foot-contact a:hover{color:#fff}
.spn-foot-contact svg{width:18px;height:18px;color:var(--spn-gold-soft);flex:0 0 auto;margin-top:1px}
.spn-foot-social{display:flex;gap:14px;margin-top:18px}
.spn-foot-social a{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.86);text-decoration:none;font-size:14.5px;font-weight:600}
.spn-foot-social svg{width:28px;height:28px;color:var(--spn-gold-soft)}
.spn-foot-social a:hover,.spn-foot-social a:hover svg{color:#fff}
.spn-foot-note{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:2px 24px 26px;display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.55}
.spn-foot-note svg{width:18px;height:18px;color:var(--spn-gold-soft);flex:0 0 auto;margin-top:1px}
.spn-foot-note span{max-width:84ch}
.spn-foot-col h4{font-family:var(--spn-head);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--spn-gold-soft);margin:0 0 18px}
.spn-foot-col h4::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-1px;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0c24b' d='M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 9-4 13-9 13Z'/%3E%3C/svg%3E") center/contain no-repeat}
.spn-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.spn-foot-col li a{color:rgba(255,255,255,.8);text-decoration:none;font-size:14.5px;display:inline-flex;align-items:center;gap:9px;transition:color .15s,gap .15s}
.spn-foot-col li a::before{content:"";width:9px;height:9px;flex:0 0 auto;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0c24b' d='M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 9-4 13-9 13Z'/%3E%3C/svg%3E") center/contain no-repeat}
.spn-foot-col li a:hover{color:#fff;gap:12px}
.spn-foot-cta{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px}
.spn-foot-cta h4{color:#fff;font-family:var(--spn-head);font-size:18px;margin:0 0 8px;text-transform:none;letter-spacing:normal}
.spn-foot-cta p{color:rgba(255,255,255,.72);font-size:13.5px;margin:0 0 16px;line-height:1.55}
.spn-foot-cta .spn-btn{width:100%;margin-bottom:12px}
.spn-foot-wa{display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.82);font-size:13px;text-decoration:none}
.spn-foot-wa svg{width:16px;height:16px;color:var(--spn-gold-soft)}
.spn-foot-wa:hover{color:#fff}
.spn-foot-bottom{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.13)}
.spn-foot-bottom .in{max-width:1240px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.spn-foot-bottom p{margin:0;color:rgba(255,255,255,.62);font-size:13px}
.spn-foot-bottom a{color:rgba(255,255,255,.78);text-decoration:none}
.spn-foot-bottom a:hover{color:#fff}
.spn-foot-legal{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.spn-foot-inner{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.spn-foot-inner{grid-template-columns:1fr;padding:46px 18px 30px}.spn-foot-bottom .in{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---- check list (shared) --------------------------------------------------*/
.spn-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spn-checks li{position:relative;padding-left:34px;color:var(--spn-ink);font-size:15.5px;line-height:1.5}
.spn-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--spn-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c7726' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}