/* =========================================================
   PVBA shared styles
   Used by every page: brand tokens, base type, buttons,
   header/nav, scroll reveal, and footer.
   Page-only styles live in a <style> block in that page.
   Design rules: see pvba-brand-reference.md
   ========================================================= */

:root{
  /* structure */
  --ink:#1A1A1A;
  --paper:#FAF7F0;
  --white:#FFFFFF; /* for cards that sit on paper and need to lift off it (the get-started tips) */

  /* California washes + deeper accent cousins */
  --coast:#CBE0E8;      --coast-ink:#356173;
  --desert:#F7E6BE;     --desert-ink:#8A6714;
  --mountain:#D2E0C4;   --mountain-ink:#4C6B3C;
  --sunset:#FFD9D3;     --sunset-ink:#B23325;

  /* the wavy rule: ink at 30%, a soft grey that stays soft on paper and on every wash */
  --rule:rgba(26,26,26,.3);

  /* soft backer tint for the outings blobs */
  --soft-blob:#E7D8CF;

  --display:'Space Grotesk',sans-serif;
  --body:'Public Sans',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(17px,0.8125rem + 0.333vw,19px);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;}
/* section headings: one size on every page. Set spacing per section, not size. */
h2{font-size:clamp(26px,4vw,38px);}
img{max-width:100%;display:block;}
a{color:inherit;}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
@media(min-width:761px){.wrap{padding:0 48px;}}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);font-weight:500;font-size:16px;
  padding:14px 26px;border-radius:4px;border:2px solid var(--ink);
  cursor:pointer;display:inline-block;text-decoration:none;transition:all .15s ease;
}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid:hover{background:#000;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-sm{padding:9px 18px;font-size:15px;}

/* square icon button (arrows and the like): same family as the homepage's panel close and social icons.
   44px square so it's an easy target for fingers and shaky hands. */
.icon-btn{
  width:44px;height:44px;border:2px solid var(--ink);border-radius:4px;
  background:var(--paper);color:var(--ink);cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;
}
.icon-btn:hover:not(:disabled){background:var(--ink);color:var(--paper);}
.icon-btn:disabled{opacity:.35;cursor:default;}
.icon-btn svg{width:20px;height:20px;}

/* "opens in a new tab" arrow, for links that leave the site.
   Pair it with <span class="sr-only">(opens in a new tab)</span> so screen readers hear it too. */
.icon-external{width:16px;height:16px;margin-left:8px;vertical-align:-2px;}

/* hidden on screen, still read aloud by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:2px solid var(--ink);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1240px;margin:0 auto;}
@media(min-width:761px){.nav{padding:14px 48px;}}
.brand{display:flex;align-items:center;flex-shrink:0;}
.brand img{display:block;height:56px;width:auto;}
@media(max-width:760px){.brand img{height:44px;}}

.nav-links{display:flex;gap:8px;align-items:center;list-style:none;}
.nav-links .nav-cta{margin-left:14px;}

/* parent trigger */
.nav-parent{
  display:flex;align-items:center;gap:5px;
  font-family:var(--body);font-weight:500;font-size:16px;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:4px;
  transition:color .15s ease, background .15s ease;
}
.nav-parent .caret{width:15px;height:15px;transition:transform .2s ease;}
.nav-parent:hover{color:var(--coast-ink);background:rgba(53,97,115,.08);}
.nav-parent:hover .caret{transform:translateY(2px);}
.has-menu.open .nav-parent{color:var(--coast-ink);}
.has-menu.open .nav-parent .caret{transform:rotate(180deg);}

/* dropdown panel */
.has-menu{position:relative;}
.submenu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:250px;
  list-style:none;background:var(--paper);border:2px solid var(--ink);border-radius:6px;
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:4px 5px 0 rgba(26,26,26,.12);z-index:10;
}
.has-menu.open .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{
  display:block;padding:10px 14px;border-radius:4px;
  text-decoration:none;color:var(--ink);font-size:15.5px;
  transition:background .12s ease;
}
.submenu a:hover{background:var(--coast);}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}

@media(max-width:860px){
  .nav-toggle{display:block;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:2px solid var(--ink);
    padding:8px 24px 20px;
  }
  .nav-links.open{display:flex;}
  .nav-links .has-menu{width:100%;}
  .nav-parent{width:100%;justify-content:space-between;font-size:17px;padding:14px 4px;border-bottom:1px solid #e6ddd0;border-radius:0;}
  .nav-parent:hover{background:none;}
  /* mobile: accordion, not floating panel */
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    border:none;border-radius:0;box-shadow:none;padding:0;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .has-menu.open .submenu{max-height:500px;}
  .submenu a{padding:12px 18px;font-size:16px;}
  .submenu a:hover{background:var(--coast);}
  .nav-cta{margin:16px 4px 0!important;}
  .nav-cta .btn{display:block;text-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .submenu,.nav-parent .caret{transition:none;}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease-out, transform .5s ease-out;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- wavy rule ----------
   Our horizontal rule: a wobbly 2px soft grey line (--rule) that echoes the section waves. Use it instead of
   a straight border or <hr>. Add .wavy-top or .wavy-bottom to an element and leave room for the
   8px line with that side's padding. The line is one long 1440px wave cropped by the element
   (not repeating tiles), so it never shows seams; don't use it on anything wider than 1440px. */
.wavy-top,.wavy-bottom{position:relative;}
.wavy-top::before,.wavy-bottom::after{
  content:"";position:absolute;left:0;right:0;height:8px;background:var(--rule);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8'%3E%3Cpath d='M0,4 C8,0 16,0 24,4 C32,8 40,8 48,4 C56,0 64,0 72,4 C80,8 88,8 96,4 C104,0 112,0 120,4 C128,8 136,8 144,4 C152,0 160,0 168,4 C176,8 184,8 192,4 C200,0 208,0 216,4 C224,8 232,8 240,4 C248,0 256,0 264,4 C272,8 280,8 288,4 C296,0 304,0 312,4 C320,8 328,8 336,4 C344,0 352,0 360,4 C368,8 376,8 384,4 C392,0 400,0 408,4 C416,8 424,8 432,4 C440,0 448,0 456,4 C464,8 472,8 480,4 C488,0 496,0 504,4 C512,8 520,8 528,4 C536,0 544,0 552,4 C560,8 568,8 576,4 C584,0 592,0 600,4 C608,8 616,8 624,4 C632,0 640,0 648,4 C656,8 664,8 672,4 C680,0 688,0 696,4 C704,8 712,8 720,4 C728,0 736,0 744,4 C752,8 760,8 768,4 C776,0 784,0 792,4 C800,8 808,8 816,4 C824,0 832,0 840,4 C848,8 856,8 864,4 C872,0 880,0 888,4 C896,8 904,8 912,4 C920,0 928,0 936,4 C944,8 952,8 960,4 C968,0 976,0 984,4 C992,8 1000,8 1008,4 C1016,0 1024,0 1032,4 C1040,8 1048,8 1056,4 C1064,0 1072,0 1080,4 C1088,8 1096,8 1104,4 C1112,0 1120,0 1128,4 C1136,8 1144,8 1152,4 C1160,0 1168,0 1176,4 C1184,8 1192,8 1200,4 C1208,0 1216,0 1224,4 C1232,8 1240,8 1248,4 C1256,0 1264,0 1272,4 C1280,8 1288,8 1296,4 C1304,0 1312,0 1320,4 C1328,8 1336,8 1344,4 C1352,0 1360,0 1368,4 C1376,8 1384,8 1392,4 C1400,0 1408,0 1416,4 C1424,8 1432,8 1440,4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") left center/1440px 8px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 8'%3E%3Cpath d='M0,4 C8,0 16,0 24,4 C32,8 40,8 48,4 C56,0 64,0 72,4 C80,8 88,8 96,4 C104,0 112,0 120,4 C128,8 136,8 144,4 C152,0 160,0 168,4 C176,8 184,8 192,4 C200,0 208,0 216,4 C224,8 232,8 240,4 C248,0 256,0 264,4 C272,8 280,8 288,4 C296,0 304,0 312,4 C320,8 328,8 336,4 C344,0 352,0 360,4 C368,8 376,8 384,4 C392,0 400,0 408,4 C416,8 424,8 432,4 C440,0 448,0 456,4 C464,8 472,8 480,4 C488,0 496,0 504,4 C512,8 520,8 528,4 C536,0 544,0 552,4 C560,8 568,8 576,4 C584,0 592,0 600,4 C608,8 616,8 624,4 C632,0 640,0 648,4 C656,8 664,8 672,4 C680,0 688,0 696,4 C704,8 712,8 720,4 C728,0 736,0 744,4 C752,8 760,8 768,4 C776,0 784,0 792,4 C800,8 808,8 816,4 C824,0 832,0 840,4 C848,8 856,8 864,4 C872,0 880,0 888,4 C896,8 904,8 912,4 C920,0 928,0 936,4 C944,8 952,8 960,4 C968,0 976,0 984,4 C992,8 1000,8 1008,4 C1016,0 1024,0 1032,4 C1040,8 1048,8 1056,4 C1064,0 1072,0 1080,4 C1088,8 1096,8 1104,4 C1112,0 1120,0 1128,4 C1136,8 1144,8 1152,4 C1160,0 1168,0 1176,4 C1184,8 1192,8 1200,4 C1208,0 1216,0 1224,4 C1232,8 1240,8 1248,4 C1256,0 1264,0 1272,4 C1280,8 1288,8 1296,4 C1304,0 1312,0 1320,4 C1328,8 1336,8 1344,4 C1352,0 1360,0 1368,4 C1376,8 1384,8 1392,4 C1400,0 1408,0 1416,4 C1424,8 1432,8 1440,4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") left center/1440px 8px no-repeat;
}
.wavy-top::before{top:0;}
.wavy-bottom::after{bottom:0;}

/* ---------- drifting wave edge ----------
   A wavy edge along the bottom of a section, in the color of the section below, that drifts
   slowly left like water. Use it by putting this inside a section (the section needs
   position:relative), with the path's fill set to the next section's color:
     <div class="wave-edge" aria-hidden="true"><svg viewBox="0 0 2400 40" ...>...</svg></div>
   The SVG is twice the page width with the waves drawn twice, so sliding it left by half its
   width lands on an identical frame and loops seamlessly. It stays still for visitors who've
   asked their device for reduced motion. */
.wave-edge{position:absolute;left:0;bottom:0;width:100%;height:40px;overflow:hidden;line-height:0;z-index:1;pointer-events:none;}
.wave-edge svg{display:block;width:200%;height:100%;}
@media(prefers-reduced-motion:no-preference){
  .wave-edge svg{animation:wave-drift 30s linear infinite;}
}
@keyframes wave-drift{to{transform:translateX(-50%);}}

/* ---------- falling feathers ----------
   A few faint wing feathers drifting down behind a section's content, swaying as they fall.
   Use it by adding .has-feathers to the section and this as its first child:
     <div class="feather-fall" aria-hidden="true"></div>
   js/site.js fills the layer with feathers. They're drawn in --feather-ink, so set that to the
   section's deeper accent (e.g. --sunset-ink) to keep them a soft tint of the wash, not grey.
   Each feather's wrapper is as tall as the section, so sliding it down by 100% carries the
   feather from just above the top edge to just below the bottom, whatever the section's height.
   For reduced-motion visitors they hold still, scattered where they are. */
.has-feathers{position:relative;overflow:hidden;isolation:isolate;}
.feather-fall{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.feather{position:absolute;top:0;height:100%;width:34px;color:var(--feather-ink,var(--ink));opacity:.22;
  transform:translateY(calc(var(--rest) + 120px));}
.feather svg{display:block;width:100%;height:auto;margin-top:-120px;overflow:visible;}
@media(prefers-reduced-motion:no-preference){
  .feather{animation:feather-fall var(--dur) linear var(--delay) infinite;}
  .feather svg{animation:feather-sway calc(var(--dur) / 4) ease-in-out var(--delay) infinite alternate;}
}
@keyframes feather-fall{from{transform:translateY(0);}to{transform:translateY(calc(100% + 120px));}}
@keyframes feather-sway{from{transform:translateX(-18px) rotate(-22deg);}to{transform:translateX(18px) rotate(16deg);}}

/* ---------- drifting photo gallery ----------
   A strip of photos drifting left, running edge to edge past the .wrap. Built by js/gallery.js,
   which explains the markup. Photos keep their own shape at one height, framed in 2px ink.
   Same seamless loop as the homepage ticker: the track holds two identical groups, and sliding
   it left by half its width lands on an identical frame. Spacing is padding on each photo (not
   a flex gap) so both halves are exactly the same width. js sets the speed from the track's
   width so it drifts at the same gentle pace however many photos there are. */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;}
.gallery-head .icon-btn{flex-shrink:0;}
.gallery-toggle svg[hidden]{display:none;}
.gallery-strip{overflow:hidden;}
.gallery-track{display:flex;width:max-content;animation:gallery-drift var(--gallery-dur,90s) linear infinite;}
.gallery-track:not(.ready){animation:none;} /* hold still until js has built both halves */
.paused .gallery-track{animation-play-state:paused;}
.gallery-group{display:flex;flex-shrink:0;list-style:none;}
.gallery-item{flex-shrink:0;padding-right:20px;}
.gallery-item img{height:clamp(220px,26vw,320px);width:auto;border:2px solid var(--ink);border-radius:4px;background:#e8e2d6;}
.gallery-item .photo-credit{margin-top:8px;}
@keyframes gallery-drift{to{transform:translateX(-50%);}}
@media(max-width:560px){.gallery-head{align-items:flex-start;}.gallery-item{padding-right:14px;}}

/* ---------- photo credit ----------
   The photographer's name after a little camera icon (the icon stands in for the word "Photo",
   which is still there for screen readers as .sr-only). Used by the homepage gallery and the
   birds carousel. */
.photo-credit{font-family:var(--display);font-size:14px;color:#555;display:flex;align-items:center;gap:6px;}
.photo-credit svg{width:17px;height:17px;flex-shrink:0;}

/* ---------- footer ---------- */
footer{background:var(--paper);padding:64px 0;border-top:2px solid var(--ink);}
/* Four columns: Audubon logo, address, follow us, newsletter.
   Each column is only as wide as its content, and the spare room is shared out evenly
   between them (space-between), so the gaps between columns always look equal. */
.foot-grid{display:grid;grid-template-columns:auto auto auto minmax(260px,340px);justify-content:space-between;gap:40px;}
.foot-grid h4{font-family:var(--display);font-size:16px;margin-bottom:14px;}
/* one text style for everything small in the footer: address, newsletter blurb, Audubon note */
.foot-text,.foot-grid address{font-style:normal;font-size:15px;line-height:1.6;color:#444;}
/* National Audubon Society logo, first column */
.foot-chapter img{display:block;width:160px;height:auto;}
/* "A chapter of the National Audubon Society", between the chapter's name and its address */
.foot-affiliation{margin-bottom:8px;white-space:nowrap;} /* one line in the 4-column layout; it can wrap once columns stack */
.foot-social{display:flex;gap:14px;}
/* social icons, email field, and sign up button are all 44px tall, so they line up in one row */
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:4px;color:var(--ink);transition:all .15s ease;}
.foot-social a svg{width:20px;height:20px;}
.foot-social a:hover{background:var(--ink);color:var(--paper);}
.news-form{display:flex;gap:8px;}
.news-form .btn{height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;}
.news-note{margin-top:12px;}
.news-form input{flex:1;height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:4px;font-family:var(--body);font-size:15px;background:var(--paper);}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr;justify-content:stretch;} .foot-affiliation{white-space:normal;}} /* 2 x 2 below 1100px, where four columns get cramped */
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:32px;}}