/* StockedSpots — shared styles.
   Layout/spacing stays as inline styles in the templates (pixel-faithful to the
   design). This file holds: design tokens, base rules, keyframes, the .sw-card /
   .sw-bar behaviors, and the :hover classes that replace the design runtime's
   non-standard style-hover="" attribute. */

:root{
  --accent:#DF453E;      /* CTAs, active bars, links, "latest" */
  --accent-dark:#c93b34;
  --teal:#1B3E41;        /* hero, footer, dark panels, headings */
  --teal-dark:#122c2e;   /* pressed states, image wells */
  --bg:#F0F2F2;          /* page background */
  --surface:#FFFFFF;
  --border:#E5E7E8;
  --sage:#A3B4B7;
  --ink-dark:#B5BEBF;    /* body on dark */
  --muted-dark:#97ADAF;  /* muted labels on dark, footer links */
  --ink:#32373c;         /* body on light */
  --muted:#7d8688;       /* muted on light */
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@keyframes sw-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}}

/* Card lift on hover (homepage/state/water cards, how-it-works, stat cards) */
.sw-card{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s}
.sw-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -24px rgba(27,62,65,.5);border-color:var(--sage)!important}

/* Animated bars (species / season charts). Width/height set inline per bar. */
.sw-bar{transition:width .9s cubic-bezier(.2,.8,.2,1),height .9s cubic-bezier(.2,.8,.2,1),background .18s}

select.sw-select{appearance:none;-webkit-appearance:none}

/* ── Hover classes (replace style-hover="") ───────────────────────────────── */
.nav-link{transition:background .18s}
.nav-link:hover{background:var(--border)}

.btn-red{transition:background .18s,color .18s}
.btn-red:hover{background:var(--accent-dark);color:#fff}

.btn-teal{transition:background .18s}
.btn-teal:hover{background:var(--teal-dark);color:#fff}

.btn-ghost-light{transition:background .18s,border-color .18s}
.btn-ghost-light:hover{background:var(--border);color:var(--teal)}

.btn-ghost-dark{transition:background .18s,color .18s}
.btn-ghost-dark:hover{background:rgba(240,242,242,.1);color:#fff}

.icon-round{transition:background .18s}
.icon-round:hover{background:var(--border)}

.quick-pill{transition:background .18s,color .18s}
.quick-pill:hover{background:var(--sage);color:var(--teal-dark)}

.chip{transition:background .18s,border-color .18s}
.chip:hover{background:var(--border);border-color:var(--sage);color:var(--teal)}

.result-row{transition:background .15s}
.result-row:hover{background:var(--bg)}

.crumb{transition:color .18s}
.crumb:hover{color:#fff}

.foot-link{transition:color .18s}
.foot-link:hover{color:#fff}

/* ── Responsive: collapse the big multi-column grids on small screens ──────── */
@media (max-width:900px){
  .grid-hero{grid-template-columns:1fr!important;gap:32px!important}
  .grid-2,.grid-2up{grid-template-columns:1fr!important}
  .grid-4{grid-template-columns:repeat(2,1fr)!important}
  .grid-3{grid-template-columns:1fr!important}
  .grid-species{grid-template-columns:1fr!important}
  .filter-bar{grid-template-columns:1fr!important}
  .hero-pad{padding-left:20px!important;padding-right:20px!important}
  .site-nav{display:none!important}       /* desktop links + CTA collapse into the hamburger panel */
  .mobile-menu-btn{display:flex!important}
}
.mobile-nav-panel.open{display:block!important}
.mobile-nav-panel .nav-link:last-of-type{border-bottom:none}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr!important}
  .quick-links{grid-template-columns:repeat(2,1fr)!important}
}