/*
Theme Name: Skeeter Defeater DSM
Theme URI: https://skeeterdefeater.org/
Author: Built for Sara Thies
Description: Lightweight, handoff-friendly theme for Skeeter Defeater DSM — a spray-free, block-level mosquito-defense campaign for Des Moines neighborhoods. No build step, no page builder, no required plugins. Page and post content lives in the block editor so non-developers can maintain it. Colors and fonts are centralized in theme.json.
Version: 0.1.3
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skeeterdefeater
Tags: custom-colors, custom-logo, custom-menu, block-styles, wide-blocks, editor-style, accessibility-ready

Maintainer notes:
- Design tokens (colors, fonts, spacing, content width) live in theme.json. Change them there
  and both the site AND the block editor update together. The CSS variables below mirror them
  for the parts of the layout that theme.json can't reach (header, footer, nav).
- Fonts (Fraunces + Public Sans) load from Google Fonts, enqueued in functions.php. To change
  or remove them, edit the wp_enqueue_style('sd-fonts', ...) line in functions.php and the
  --sd-font-* variables below.
*/

:root{
  /* --- Palette (mirrors theme.json) --- */
  --sd-paper:#F0F1E8;      /* page background — a green-tinted parchment from Sara's art */
  --sd-paper-2:#E7E9DC;    /* slightly deeper panel background */
  --sd-canopy:#1E4D2B;     /* primary deep forest green */
  --sd-canopy-dark:#14371F;
  --sd-leaf:#4E8B3A;       /* mid-green accent */
  --sd-stream:#2C86A8;     /* water blue accent / links */
  --sd-droplet:#3FB0D8;    /* bright water highlight */
  --sd-ink:#17251A;        /* text — a green-black, not pure black */
  --sd-ink-soft:#4a5547;   /* muted text */
  --sd-sage:#C8CBB6;       /* hairlines / borders */

  /* --- Type --- */
  --sd-font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --sd-font-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- Layout --- */
  --sd-content:720px;      /* comfortable reading measure */
  --sd-wide:1160px;        /* outer container: header + wide tools */
  --sd-gutter:clamp(1.1rem,4vw,2rem);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--sd-paper);
  color:var(--sd-ink);
  font-family:var(--sd-font-body);
  font-size:1.075rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* --- Layout helpers --- */
.wrap{ width:100%; max-width:var(--sd-wide); margin-inline:auto; padding-inline:var(--sd-gutter) }
.measure{ max-width:var(--sd-content) }

/* --- Typography --- */
h1,h2,h3,h4{
  font-family:var(--sd-font-display);
  color:var(--sd-canopy);
  font-weight:560;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.05rem,5.2vw,3.15rem); font-weight:600 }
h2{ font-size:clamp(1.55rem,3.4vw,2.15rem); margin-top:1.9em }
h3{ font-size:clamp(1.2rem,2.2vw,1.45rem); margin-top:1.6em }
p,ul,ol{ margin:0 0 1.15em }
a{ color:var(--sd-stream); text-underline-offset:2px; text-decoration-thickness:1px }
a:hover{ color:var(--sd-canopy) }
strong{ font-weight:650 }
hr,.wp-block-separator{ border:0; border-top:1px solid var(--sd-sage); margin:2.4em 0 }
blockquote,.wp-block-quote{
  margin:1.8em 0; padding:.2em 0 .2em 1.25rem;
  border-left:3px solid var(--sd-leaf);
  font-size:1.15rem; color:var(--sd-ink);
}
:where(.entry-content) img{ height:auto; max-width:100%; border-radius:10px }

/* --- Skip link (accessibility) --- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--sd-canopy); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--sd-paper) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--sd-sage);
}
.header-inner{ display:flex; align-items:center; gap:1.75rem; min-height:64px }

.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--sd-ink) }
.brand-mark{ width:40px; height:40px; border-radius:10px; display:block;
  box-shadow:0 1px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05) }
.brand-name{ font-family:var(--sd-font-display); font-weight:600; font-size:1.22rem; color:var(--sd-canopy);
  letter-spacing:-.01em; line-height:1.05; white-space:nowrap }
.brand-name b{ color:var(--sd-leaf); font-weight:600 }

.primary-nav{ margin-left:auto }
.primary-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; margin:0; padding:0 }
.primary-nav a{ color:var(--sd-ink); text-decoration:none; font-weight:600; font-size:.96rem; white-space:nowrap }
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color:var(--sd-canopy); text-decoration:underline }

.header-cta{ flex:0 0 auto }

.nav-toggle{
  display:none; margin-left:auto;
  font:inherit; font-weight:650; cursor:pointer;
  background:transparent; border:1px solid var(--sd-sage); color:var(--sd-canopy);
  padding:.5rem .8rem; border-radius:9px;
}

/* --- Buttons --- */
.btn{ display:inline-block; font-weight:650; text-decoration:none; cursor:pointer;
  padding:.62rem 1.1rem; border-radius:11px; border:1px solid transparent; line-height:1.2;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease }
.btn-primary{ background:var(--sd-canopy); color:#fff }
.btn-primary:hover{ background:var(--sd-canopy-dark); color:#fff }
.btn-ghost{ background:transparent; color:var(--sd-canopy); border-color:var(--sd-canopy) }
.btn-ghost:hover{ background:var(--sd-canopy); color:#fff }

/* --- Spray-free badge --- */
.spray-free{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:650; color:var(--sd-canopy);
  background:color-mix(in srgb, var(--sd-leaf) 16%, var(--sd-paper));
  border:1px solid color-mix(in srgb, var(--sd-leaf) 45%, transparent);
  padding:.18rem .55rem; border-radius:999px;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
.site-main{ padding-block:clamp(2.5rem,7vw,4.75rem) }
.entry-header{ margin:0 0 2rem }
.entry-title{ margin:0 }
.entry-eyebrow{ font-weight:650; color:var(--sd-stream); font-size:.95rem; margin:0 0 .4rem }

/* The reading column is LEFT-aligned, so body text lines up with the header brand
   instead of floating in the middle. Wide elements — the interactive tools and any
   wide-aligned block — break out to the full container width so the page breathes. */
.entry-content > *{ max-width:var(--sd-content); margin-inline:0; }
.entry-content > .alignwide,
.entry-content > .sd-w{ max-width:var(--sd-wide) }
.entry-content > .alignfull{ max-width:none }
.entry-content > .has-large-font-size{ margin-bottom:1.5em }
.entry-content > .wp-block-buttons{ margin-block:1.9em }

/* --- Sources / references list --- */
.sd-sources{ font-size:.92rem; color:var(--sd-ink-soft) }
.sd-sources h2{ font-size:1.1rem; color:var(--sd-ink) }

/* =========================================================
   HOME (static front page — see front-page.php)
   ========================================================= */
.home-content > *{ max-width:var(--sd-content); margin-inline:auto } /* centered column */
.home-content > .alignwide{ max-width:var(--sd-wide) }
.home-content > .alignfull{ max-width:none }
.home-content > * + *{ margin-top:clamp(2.5rem,6vw,4rem) }   /* rhythm between sections */

/* Hero (a two-column block: text + Sara's arch) */
.sd-hero.wp-block-columns{ gap:clamp(1.5rem,4vw,3rem); align-items:center }
.sd-hero h1{ font-size:clamp(2.1rem,4.4vw,3.35rem); margin:0 0 .6rem }
.sd-hero .sd-lede{ font-size:1.2rem; line-height:1.55; color:var(--sd-ink); max-width:40ch }
.sd-hero img{ border-radius:16px; display:block }

/* Feature cards (the tools row) */
.sd-feature{ background:var(--sd-paper); border:1px solid var(--sd-sage); border-radius:16px;
  padding:1.45rem 1.5rem }
.sd-feature h3{ margin:0 0 .4rem; font-size:1.25rem }
.sd-feature p{ margin:0 0 .7rem }
.sd-feature p:last-child{ margin-bottom:0 }

/* Closing band */
.sd-band{ background:color-mix(in srgb, var(--sd-leaf) 12%, var(--sd-paper));
  border:1px solid color-mix(in srgb, var(--sd-leaf) 30%, transparent);
  border-radius:20px; padding:clamp(1.6rem,4vw,2.6rem) }
.sd-band > :first-child{ margin-top:0 }
.sd-band > :last-child{ margin-bottom:0 }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:4rem; background:var(--sd-canopy); color:#e9efe6 }
.site-footer a{ color:#cfe6c8 }
.site-footer a:hover{ color:#fff }
.footer-inner{ padding-block:2.6rem 2rem; display:grid; gap:1.2rem }
.footer-brand{ font-family:var(--sd-font-display); font-size:1.3rem; color:#fff; font-weight:600 }
.footer-note{ max-width:52ch; color:#c7d6c1; margin:0 }
.footer-arch{ width:130px; height:auto; opacity:.85 }
.footer-legal{ font-size:.85rem; color:#a9bda3; border-top:1px solid rgba(255,255,255,.15); padding-top:1.1rem }

/* =========================================================
   NEWSLETTER SIGNUP (Jetpack subscribe form)
   Jetpack wraps the form in .jetpack_subscription_widget / __container
   (NOT .wp-block-jetpack-subscriptions) and sets inline styles on the
   input, so the input rules need !important to win the cascade.
   ========================================================= */
.jetpack_subscription_widget{ max-width:560px }
.jetpack_subscription_widget form{ display:flex !important; flex-wrap:wrap; gap:.6rem; align-items:stretch; margin-top:.5rem }
#subscribe-email{ flex:1 1 240px; min-width:0; margin:0 }
#subscribe-submit{ flex:0 0 auto; margin:0; display:flex; align-items:stretch }
#subscribe-email input[type=email]{
  width:100% !important; height:100% !important; min-height:54px !important; box-sizing:border-box !important;
  border:1px solid var(--sd-sage) !important; border-radius:12px !important;
  padding:0 1.1rem !important; font-size:1.05rem !important; line-height:1.4 !important;
  background:#fff !important; color:var(--sd-ink) !important; box-shadow:none !important; margin:0 !important;
}
#subscribe-email input[type=email]:focus-visible{ outline:3px solid var(--sd-droplet) !important; outline-offset:2px }
#subscribe-submit .wp-block-button__link{
  border-radius:12px !important; min-height:54px !important; padding:0 1.6rem !important; margin:0 !important;
  white-space:nowrap; display:inline-flex; align-items:center; background:var(--sd-canopy); color:#fff;
}
#subscribe-email .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* Footer variant — sits on the dark green footer */
.footer-subscribe{ margin-top:.4rem }
.footer-sub-title{ font-family:var(--sd-font-display); color:#fff; font-size:1.3rem; font-weight:600; margin:0 0 .35rem }
.footer-sub-note{ color:#c7d6c1; margin:0 0 .85rem; max-width:48ch }
.site-footer #subscribe-submit .wp-block-button__link{ background:var(--sd-leaf); color:#fff }
.site-footer #subscribe-email input[type=email]{ border-color:transparent !important }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .nav-toggle{ display:inline-block }
  .primary-nav{ position:absolute; left:0; right:0; top:100%;
    background:var(--sd-paper); border-bottom:1px solid var(--sd-sage);
    padding:0 var(--sd-gutter);
    max-height:0; overflow:hidden; transition:max-height .2s ease }
  .primary-nav.is-open{ max-height:70vh; padding-block:.8rem 1.1rem }
  .primary-nav ul{ flex-direction:column; gap:.2rem }
  .primary-nav a{ display:block; padding:.6rem 0; border-bottom:1px solid var(--sd-sage) }
  .header-cta{ display:none } /* CTA also appears inside the open menu on mobile */
  .primary-nav .header-cta-mobile{ display:block; margin-top:.7rem }
}
@media (min-width:821px){
  .primary-nav .header-cta-mobile{ display:none }
}

/* --- Accessibility: focus + reduced motion --- */
:focus-visible{ outline:3px solid var(--sd-droplet); outline-offset:2px; border-radius:4px }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}