/* SiteHaul shared shell — header, footer, announce banner.
   Loaded after style.css on legacy pages so it wins the cascade for shared selectors. */

/* Reset legacy style.css layout rules — the old fixed-header math is wrong for the new
   sticky stack (announce 39px + header 96px = 135px total). main shouldn't need top
   padding because sticky elements take space in flow. scroll offsets are set so anchor
   jumps land below the full sticky stack on every breakpoint. */
:root{ --headerH: 96px; }
html{ scroll-padding-top: 135px; }
main#main{ padding-top: 0 !important; }
section[id]{ scroll-margin-top: calc(135px + 18px) !important; }
@media (max-width: 600px){
  html{ scroll-padding-top: 103px; }
  section[id]{ scroll-margin-top: calc(103px + 18px) !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ color-scheme: light; }
body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:#fbfbfd;
  color:#1d1d1f;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}

/* Dark mode disabled — site renders light always. */
img,picture{ max-width:100%; }
a{ color:inherit; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{
  position:fixed; top:8px; left:8px;
  padding:8px 12px; background:#000; color:#fff;
  z-index:9999; border-radius:6px;
}

/* ---------- Top stack (announce + header move together as one sticky unit) ---------- */
.top-stack{
  position:sticky;
  top:0;
  z-index:100;
}

/* ---------- Announcement strip ---------- */
.announce{
  display:block;
  background:#1d1d1f;
  color:#f5f5f7;
  text-align:center;
  padding:9px 16px;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.005em;
  text-decoration:none;
  transition:background .2s;
}
.announce::after{ content:" \203A"; opacity:0.7; margin-left:6px; }
.announce:hover{ background:#000; }

/* ---------- Header (parent .top-stack handles sticking) ---------- */
.site-header{
  background:rgba(251,251,253,0.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.nav-wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:96px;
  padding:0 22px;
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#1d1d1f;
  font-weight:600;
  font-size:17px;
  letter-spacing:-0.01em;
  position:relative;
  z-index:2;
}
.brand-logo{ height:80px; width:auto; display:block; }
@media (max-width: 600px){
  .nav-wrap{ height:64px; }
  .brand-logo{ height:48px; }
}
.brand-name{ display:none; }
.nav{
  display:flex;
  align-items:center;
  gap:24px;
}
/* Reset legacy style.css rules so subpages match index.html exactly */
.nav-wrap{ gap:0; }
.nav a{
  font-size:12.5px;
  font-weight:400;
  text-decoration:none;
  color:rgba(29,29,31,0.88);
  transition:color .2s;
  letter-spacing:0.005em;
  padding:0;
  border-radius:0;
  background:transparent;
}
.nav a:hover{
  color:#000;
  background:transparent;
}
.nav a[aria-current="page"]{ color:#000; font-weight:500; background:transparent; }
.nav-cta{
  display:inline-block;
  padding:6px 14px !important;
  border-radius:980px !important;
  background:#1d1d1f !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:500;
  transition:background .2s;
}
.nav-cta:hover{ background:#000 !important; }
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  width:32px;
  height:32px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
}
.nav-toggle-icon{
  display:block;
  width:18px;
  height:1.5px;
  background:#1d1d1f;
  position:relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:1.5px;
  background:#1d1d1f;
}
.nav-toggle-icon::before{ top:-6px; }
.nav-toggle-icon::after{ top:6px; }

@media (max-width: 840px){
  .nav-toggle{ display:flex; }
  /* Closed: hidden. All other styling lives on the open state for high specificity. */
  .nav{ display:none !important; }

  /* Open: full styling, every property locked with high-specificity + !important
     so style.css legacy mobile rules can't sneak through. */
  .site-header.nav-open .nav{
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    top:135px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    background:#ffffff !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    padding:24px 24px 32px !important;
    gap:0 !important;
    align-items:stretch !important;
    z-index:300 !important;
    border:0 !important;
    border-radius:0 !important;
    overflow-y:auto;
  }
  .site-header.nav-open .nav a{
    display:block !important;
    font-size:20px !important;
    font-weight:500 !important;
    color:#1d1d1f !important;
    background:transparent !important;
    padding:18px 4px !important;
    border-radius:0 !important;
    border-bottom:1px solid rgba(0,0,0,0.08) !important;
    width:100% !important;
    text-align:left !important;
    text-decoration:none !important;
  }
  .site-header.nav-open .nav a:hover,
  .site-header.nav-open .nav a:focus{
    background:rgba(0,0,0,0.03) !important;
    color:#000 !important;
  }
  .site-header.nav-open .nav .nav-cta{
    margin-top:18px !important;
    padding:14px 22px !important;
    font-size:15px !important;
    color:#fff !important;
    background:#1d1d1f !important;
    border-bottom:0 !important;
    border-radius:980px !important;
    text-align:center !important;
    width:auto !important;
    align-self:flex-start !important;
  }

  /* Animated hamburger → X */
  .site-header.nav-open .nav-toggle-icon{ background:transparent !important; }
  .site-header.nav-open .nav-toggle-icon::before{ top:0; transform:rotate(45deg); }
  .site-header.nav-open .nav-toggle-icon::after{ top:0; transform:rotate(-45deg); }
  .nav-toggle-icon::before,
  .nav-toggle-icon::after{ transition:transform .2s ease, top .2s ease; }
}
@media (max-width: 600px){
  .site-header.nav-open .nav{ top:103px !important; }
}

/* Prevent flash before /header.html and /footer.html load */
html:not(.partials-loaded) #site-header,
html:not(.partials-loaded) #site-footer{ visibility:hidden; }

/* ---------- Footer (multi-column) ---------- */
.ap-footer{
  background:#f5f5f7;
  color:rgba(29,29,31,0.7);
  padding:48px 24px 24px;
  font-size:12px;
  line-height:1.6;
}
.ap-footer a{ color:rgba(29,29,31,0.65); text-decoration:none; }
.ap-footer a:hover{ color:#1d1d1f; text-decoration:underline; }
.ap-footer-inner{ max-width:1200px; margin:0 auto; }
.ap-footer-cols{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  padding:8px 0 32px;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.ap-footer-col h4{
  font-size:12px;
  font-weight:600;
  color:#1d1d1f;
  margin:0 0 12px;
}
.ap-footer-col ul{ list-style:none; padding:0; margin:0; }
.ap-footer-col li{ margin:0 0 8px; }
.ap-footer-bottom{
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:11px;
  color:rgba(29,29,31,0.55);
}
.ap-footer-legal{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
@media (max-width: 720px){
  .ap-footer-cols{ grid-template-columns:repeat(2, 1fr); gap:24px; }
  .ap-footer-bottom{ flex-direction:column; align-items:flex-start; }
}