/* ==========================================================================
   GF Pets — Grand Forks pet-welfare resource
   Warm teal + amber palette. Custom modern CSS (no framework layout dep).
   Content is ALWAYS visible: nothing is gated on JavaScript.
   ========================================================================== */

:root{
  --teal-900:#0f3f38; --teal-800:#155249; --teal-700:#1f7a6b; --teal-600:#25907e;
  --teal-500:#2fa791; --teal-100:#dcefe9; --teal-50:#eef7f4;
  --amber:#f6b83f; --amber-dark:#e0a021; --coral:#e07a5f; --coral-dark:#c85f45;
  --ink:#233230; --ink-soft:#4c5b58; --muted:#6b7a77;
  --bg:#ffffff; --bg-alt:#f6faf8; --line:#e2ebe8;
  --radius:16px; --radius-sm:10px; --radius-lg:24px;
  --shadow-sm:0 2px 8px rgba(15,63,56,.06);
  --shadow:0 10px 30px rgba(15,63,56,.10);
  --shadow-lg:0 24px 60px rgba(15,63,56,.16);
  --maxw:1200px;
  --font-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-700); text-decoration:none}
a:hover{color:var(--coral-dark); text-decoration:underline}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px}

/* Safeguard: if any scroll-reveal markup ever ships, never let it hide content. */
[data-aos]{opacity:1 !important; transform:none !important}

/* ---- Header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--teal-700),var(--teal-500));
  color:#fff; display:grid; place-items:center; font-size:20px; box-shadow:var(--shadow-sm);
}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-family:var(--font-head); font-weight:700; font-size:1.28rem; color:var(--teal-800); letter-spacing:.2px}
.brand__sub{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
.nav__list{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav__link{
  font-family:var(--font-head); font-weight:500; font-size:.95rem; color:var(--ink-soft);
  padding:9px 14px; border-radius:999px; display:inline-block; transition:.18s;
}
.nav__link:hover{background:var(--teal-50); color:var(--teal-700); text-decoration:none}
.nav__link.is-active{background:var(--teal-700); color:#fff}
.nav__burger{display:none}

/* ---- Hero ---- */
.hero{position:relative; min-height:340px; display:flex; align-items:flex-end; overflow:hidden; background:var(--teal-800)}
.hero--home{min-height:460px}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(15,63,56,.10) 0%,rgba(15,63,56,.35) 45%,rgba(15,63,56,.86) 100%);}
.hero__inner{position:relative; z-index:2; padding-block:38px 40px; color:#fff}
.hero--home .hero__inner{padding-block:60px 56px}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(246,184,63,.92); color:#3a2b06; padding:7px 14px; border-radius:999px;
}
.hero__title{
  font-family:var(--font-head); font-weight:700; margin:0; max-width:22ch;
  font-size:clamp(1.85rem,4.4vw,3rem); line-height:1.12; text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero--home .hero__title{max-width:20ch}

/* ---- Layout: article + sidebar ---- */
.main-wrap{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; padding-block:52px 64px}
.prose{min-width:0}

/* ---- Prose typography ---- */
.prose h2{
  font-family:var(--font-head); font-weight:600; color:var(--teal-800);
  font-size:1.62rem; line-height:1.25; margin:2.2em 0 .6em; position:relative; padding-left:16px;
}
.prose h2::before{content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:5px; border-radius:4px;
  background:linear-gradient(var(--amber),var(--coral));}
.prose h3{font-family:var(--font-head); font-weight:600; color:var(--teal-700); font-size:1.18rem; margin:1.6em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.3em; padding-left:1.35em}
.prose li{margin:.4em 0}
.prose ul li::marker{color:var(--teal-600)}
.prose ol li::marker{color:var(--teal-700); font-weight:600}
.prose strong{color:var(--teal-900)}
.prose a{font-weight:600; border-bottom:1.5px solid var(--teal-100)}
.prose a:hover{border-color:var(--coral)}
.prose h2:first-child{margin-top:0}

.inline-figure{margin:1.8em 0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.inline-figure img{width:100%}

/* ---- Sidebar ---- */
.sidebar{align-self:start; position:sticky; top:92px; display:flex; flex-direction:column; gap:22px}
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.sidebar__card{padding:22px 22px 10px}
.sidebar__title{font-family:var(--font-head); font-size:1.05rem; color:var(--teal-800); margin:0 0 12px}
.sidebar__links{list-style:none; margin:0 0 8px; padding:0}
.sidebar__links li{margin:0}
.sidebar__links a{display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:var(--radius-sm);
  color:var(--ink-soft); font-weight:500; font-family:var(--font-head); font-size:.95rem; transition:.16s}
.sidebar__links a:hover{background:var(--teal-50); color:var(--teal-700); text-decoration:none; transform:translateX(3px)}
.sidebar__links i{color:var(--teal-600); width:20px; text-align:center}
.sidebar__cta{padding:22px; background:linear-gradient(150deg,var(--teal-700),var(--teal-800)); color:#eafaf5; border:none}
.sidebar__cta a{color:#fff; text-decoration:underline}
.sidebar__cta-eyebrow{font-family:var(--font-head); font-weight:600; margin:0 0 8px; color:var(--amber)}
.sidebar__cta p{margin:0 0 .4em}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600;
  padding:13px 22px; border-radius:999px; transition:.18s; cursor:pointer; border:2px solid transparent}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn--primary{background:var(--teal-700); color:#fff; box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--teal-800); color:#fff}
.btn--ghost{background:#fff; color:var(--teal-700); border-color:var(--teal-100)}
.btn--ghost:hover{border-color:var(--teal-500); color:var(--teal-800)}

/* ---- Footer ---- */
.site-footer{background:var(--teal-900); color:#c7ded7; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; padding-block:56px 34px}
.footcol h3{font-family:var(--font-head); font-size:.98rem; color:#fff; margin:0 0 16px; letter-spacing:.02em}
.footcol ul{list-style:none; margin:0; padding:0}
.footcol li{margin:.55em 0}
.footcol a{color:#a9cabf; font-size:.95rem}
.footcol a:hover{color:var(--amber); text-decoration:none}
.brand--footer{margin-bottom:14px}
.brand--footer .brand__name{color:#fff}
.footer-about{font-size:.9rem; line-height:1.7; color:#9fc0b6; margin:0 0 14px; max-width:42ch}
.footer-region{font-size:.88rem; color:var(--amber); display:flex; align-items:center; gap:8px; margin:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:22px}
.footer-bottom p{margin:0; font-size:.83rem; color:#8fb2a8}

/* ---- 404 ---- */
.error-wrap{min-height:52vh; display:grid; place-items:center; padding-block:70px}
.error-card{max-width:640px; text-align:center; padding:48px 40px}
.error-code{font-family:var(--font-head); font-weight:700; font-size:4.5rem; line-height:1;
  background:linear-gradient(135deg,var(--teal-600),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent}
.error-card h1{font-family:var(--font-head); color:var(--teal-800); margin:.2em 0 .3em; font-size:1.9rem}
.error-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px}

/* ---- Motion (decorative only; content is visible without it) ---- */
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero__img{animation:kenburns 9s ease-out both}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .main-wrap{grid-template-columns:1fr; gap:36px}
  .sidebar{position:static; flex-direction:row; flex-wrap:wrap}
  .sidebar__card,.sidebar__cta{flex:1 1 280px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav__burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; border-radius:12px; cursor:pointer; background:var(--teal-50)}
  .nav__burger span{display:block; height:2.5px; width:22px; margin-inline:auto; background:var(--teal-800); border-radius:2px; transition:.2s}
  nav[aria-label="Primary"]{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav__list{flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 16px}
  .nav__link{padding:12px 14px; border-radius:12px}
  .nav__toggle:checked ~ nav[aria-label="Primary"]{max-height:70vh}
  .nav__toggle:checked ~ .nav__burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav__toggle:checked ~ .nav__burger span:nth-child(2){opacity:0}
  .nav__toggle:checked ~ .nav__burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hero--home{min-height:380px}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .error-card{padding:36px 24px}
  .hero__inner{padding-block:28px 30px}
}