/* Standard SEEDS header — one header for every route.

   Class names are `sh-` prefixed on purpose: this file loads alongside three
   stylesheets that were written for three separate sites, and all three define
   .site-header / .header-inner / .brand / .nav-toggle for their own headers.
   Values are literals rather than var() because the SEEDS custom properties
   are declared in styles.css, which the Explorer and Library pages don't load.
   The "Work Sans" @font-face is declared by all three, so the family resolves. */

.sh-header{
  position:sticky;top:0;z-index:200;
  background:rgba(246,248,239,0.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(14,42,23,0.08);
  transition:box-shadow 0.25s ease;
}
.sh-header.is-scrolled{box-shadow:0 4px 24px rgba(14,42,23,0.10);}

.sh-inner{
  width:min(1160px,100% - 2.5rem);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;min-height:74px;
  flex-wrap:nowrap;
}

.sh-brand{display:inline-flex;align-items:center;text-decoration:none;flex:none;}
.sh-logo{display:block;width:126px;height:40px;}

.sh-nav{display:flex;align-items:center;gap:1rem;margin-left:auto;}
.sh-list{display:flex;align-items:center;gap:0.8rem;list-style:none;padding:0;margin:0;}
.sh-list a{
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:0.92rem;white-space:nowrap;
  color:#2B4835;text-decoration:none;padding:0.35em 0.1em;border-bottom:2px solid transparent;
}
.sh-list a:hover{color:#286932;border-bottom-color:#1EAF32;}
.sh-list a[aria-current="page"]{color:#286932;border-bottom-color:#1EAF32;}
.sh-sep{width:1px;height:20px;background:#D4DAC6;}
.sh-eco a{color:#286932;}

.sh-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
  padding:0.7em 1.15em;border-radius:999px;border:2px solid transparent;
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:700;font-size:0.95rem;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  background:#2FF141;color:#2B4835;
  transition:background-color 0.18s ease,color 0.18s ease;
}
.sh-cta:hover{background:#53FF9C;color:#2B4835;}

.sh-toggle{
  display:none;align-items:center;gap:0.55rem;margin-left:auto;
  background:none;border:2px solid #2B4835;border-radius:999px;
  padding:0.45em 1em;color:#2B4835;
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:700;font-size:0.95rem;cursor:pointer;
}
.sh-bars{display:inline-flex;flex-direction:column;gap:4px;width:18px;}
.sh-bars span{display:block;height:2px;border-radius:2px;background:#2B4835;transition:transform 0.2s ease,opacity 0.2s ease;}
.sh-toggle[aria-expanded="true"] .sh-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.sh-toggle[aria-expanded="true"] .sh-bars span:nth-child(2){opacity:0;}
.sh-toggle[aria-expanded="true"] .sh-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Responsive ----------
   The desktop bar carries nine links plus a wide CTA and needs roughly 1140px
   to sit comfortably. Between that and the mobile menu it is tightened rather
   than left to cram — the old 880px breakpoint meant everything from 880px to
   1200px overflowed the 1160px container. Below 1024px it becomes the menu. */

@media (max-width:1200px){
  .sh-inner{gap:0.75rem;}
  .sh-nav{gap:1rem;}
  .sh-list{gap:0.62rem;}
  .sh-list a{font-size:0.88rem;}
  .sh-logo{width:112px;height:36px;}
  .sh-cta{font-size:0.9rem;padding:0.62em 1.05em;}
}

@media (max-width:1099px){
  .sh-toggle{display:inline-flex;}
  .sh-logo{width:120px;height:38px;}
  .sh-list a{font-size:1.05rem;}
  .sh-nav{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#F6F8EF;border-bottom:1px solid rgba(14,42,23,0.12);
    box-shadow:0 18px 30px rgba(14,42,23,0.14);
    padding:0.6rem 1.25rem 1.25rem;display:none;
    max-height:calc(100vh - 74px);
    max-height:calc(100dvh - 74px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .sh-nav.is-open{display:flex;}
  .sh-list{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .sh-list a{display:block;padding:0.85em 0.4em;border-bottom:1px solid #D4DAC6;}
  .sh-sep{display:none;}
  .sh-cta{margin-top:1rem;width:100%;font-size:1rem;padding:0.85em 1.5em;}
}

/* Phones: reclaim the gutters and shorten the bar. */
@media (max-width:420px){
  .sh-inner{width:min(1160px,100% - 1.6rem);min-height:64px;}
  .sh-logo{width:104px;height:33px;}
  .sh-toggle{padding:0.45em 0.7em;}
  .sh-toggle-label{display:none;}
  .sh-nav{
    padding:0.5rem 1rem 1rem;
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
  }
}

/* ---------- Legacy chrome kept below the standard header ----------
   The Explorer's own bar survives stripping because it carries working
   controls (the Index drawer button and the resource search). It is demoted
   to a toolbar: sticky *under* the standard header rather than at the top.

   Explorer's stylesheet derives its sticky sidebar offset and section
   scroll-margin from --header-h, so that variable is redefined here as the
   combined height of both bars (74px header + 56px toolbar); the toolbar's
   own height is then set explicitly so it doesn't inherit the new value. */

.sh-page--explorer{--header-h:130px;}
.sh-page--explorer .site-header{
  top:74px;z-index:40;
  background:rgba(246,248,239,0.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.sh-page--explorer .site-header .header-inner{min-height:56px;}

@media (max-width:420px){
  .sh-page--explorer{--header-h:120px;}
  .sh-page--explorer .site-header{top:64px;}
}