/* ============================================================
   KLR Outdoors — shared shell (header, footer, legal, 404)
   Page content blocks bring their own scoped styles.
   ============================================================ */

:root{
  --klr-black:#03050a;
  --klr-panel:#0b0e14;
  --klr-line:rgba(240,236,224,.10);
  --klr-white:#f0ece0;
  --klr-muted:rgba(240,236,224,.55);
  --klr-hunt:#c9a84c;
  --klr-fish:#4a9fd4;
  --klr-header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--klr-black);
  color:var(--klr-white);
  font-family:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------------------------------------------------------- header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  background:linear-gradient(to bottom,rgba(3,5,10,.65),rgba(3,5,10,0));
  border-bottom:1px solid transparent;
}
.site-header[data-scrolled="true"]{
  background:rgba(3,5,10,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--klr-line);
}
.site-header__inner{
  max-width:1280px;margin:0 auto;
  height:var(--klr-header-h);
  padding:0 clamp(18px,4vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header__logo{display:flex;align-items:center;flex-shrink:0}
.site-header__logo img{height:38px;width:auto}
.site-header__nav{
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
}
.site-header__item{position:relative;display:flex;align-items:center}
.site-header__nav a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--klr-muted);text-decoration:none;white-space:nowrap;
  padding:6px 0;transition:color .18s ease;
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"]{color:var(--klr-white)}

/* --- dropdown --- */
.site-header__subtoggle{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--klr-muted);
  padding:6px 2px;margin-left:2px;transition:color .18s ease;
}
.site-header__chev{width:12px;height:12px;transition:transform .2s ease}
.site-header__sub a{
  padding:10px 12px;font-size:12px;white-space:nowrap;
  border-left:2px solid transparent;transition:color .18s ease,border-color .18s ease,background .18s ease;
}

/* desktop: hover / click reveals an absolutely-positioned panel */
@media (min-width:1081px){
  .site-header__sub{
    position:absolute;top:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:210px;display:flex;flex-direction:column;
    background:rgba(3,5,10,.97);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--klr-line);
    padding:8px;
    opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    z-index:1001;
  }
  .site-header__sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .site-header__item--has-sub:hover .site-header__sub,
  .site-header__item--has-sub:focus-within .site-header__sub,
  .site-header__item--has-sub[data-open="true"] .site-header__sub{
    opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
  }
  .site-header__item--has-sub:hover .site-header__subtoggle,
  .site-header__item--has-sub:focus-within .site-header__subtoggle,
  .site-header__item--has-sub[data-open="true"] .site-header__subtoggle{color:var(--klr-white)}
  .site-header__item--has-sub:hover .site-header__chev,
  .site-header__item--has-sub:focus-within .site-header__chev,
  .site-header__item--has-sub[data-open="true"] .site-header__chev{transform:rotate(180deg)}
  .site-header__sub a:hover{color:var(--klr-white);border-left-color:var(--klr-hunt);background:rgba(240,236,224,.04)}
}
.site-header__social{display:flex;align-items:center;gap:12px;margin-left:6px}
.site-header__social a,
.site-footer__social a{
  color:var(--klr-muted);display:flex;transition:color .18s ease,transform .18s ease;
}
.site-header__social a:hover{color:var(--klr-hunt);transform:translateY(-1px)}
.site-header__social svg,
.site-footer__social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}

.site-header__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:9px;margin-right:-9px;
  background:none;border:0;cursor:pointer;
}
.site-header__toggle span{display:block;height:2px;width:100%;background:var(--klr-white);transition:transform .25s ease,opacity .2s ease}
.site-header__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-header__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .site-header__toggle{display:flex}
  .site-header__nav{
    position:fixed;inset:var(--klr-header-h) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(3,5,10,.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--klr-line);
    padding:8px clamp(18px,5vw,40px) 24px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .25s ease,opacity .25s ease;
    max-height:calc(100vh - var(--klr-header-h));overflow-y:auto;
  }
  .site-header__nav[data-open="true"]{transform:translateY(0);opacity:1;pointer-events:auto}
  .site-header__item{width:100%;flex-wrap:wrap;border-bottom:1px solid var(--klr-line)}
  .site-header__nav a{width:auto;padding:14px 0;font-size:15px}
  .site-header__item>a{flex:1}

  .site-header__subtoggle{width:52px;height:52px;padding:0;margin:0;color:var(--klr-white)}
  .site-header__chev{width:16px;height:16px}
  .site-header__item[data-open="true"] .site-header__chev{transform:rotate(180deg)}

  .site-header__sub{
    position:static;transform:none;left:auto;min-width:0;width:100%;
    flex-direction:column;align-items:flex-start;
    background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:2px 0 12px 16px;opacity:1;pointer-events:auto;z-index:auto;
    display:none;
  }
  .site-header__sub::before{display:none}
  .site-header__item[data-open="true"] .site-header__sub{display:flex}
  .site-header__sub a{
    width:100%;padding:12px 0;font-size:13px;letter-spacing:.16em;
    white-space:normal;border-left:0;color:var(--klr-muted);
  }
  .site-header__sub a:hover{background:none;border-left:0;color:var(--klr-white)}

  .site-header__social{margin:18px 0 0;gap:20px}
  .site-header__social svg{width:22px;height:22px}
}

/* ---------------------------------------------------------- footer */
.site-footer{
  background:#05070c;border-top:1px solid var(--klr-line);
  font-family:'Barlow',sans-serif;
}
.site-footer__inner{
  max-width:1280px;margin:0 auto;
  padding:64px clamp(20px,5vw,48px) 44px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
}
.site-footer__brand img{height:52px;width:auto;margin-bottom:18px;opacity:.9}
.site-footer__brand p{
  color:var(--klr-muted);font-weight:300;line-height:1.7;font-size:14px;max-width:420px;margin:0 0 20px;
}
.site-footer__social{display:flex;gap:16px}
.site-footer__social a{color:var(--klr-muted)}
.site-footer__social a:hover{color:var(--klr-hunt)}
.site-footer h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(240,236,224,.4);margin:0 0 18px;
}
.site-footer__links ul,.site-footer__contact ul{list-style:none;margin:0;padding:0}
.site-footer__links li,.site-footer__contact li{margin-bottom:12px}
.site-footer__links a,.site-footer__contact a{
  color:var(--klr-muted);text-decoration:none;font-size:14px;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;
  transition:color .18s ease;
}
.site-footer__links a:hover,.site-footer__contact a:hover{color:var(--klr-white)}
.site-footer__bar{
  border-top:1px solid var(--klr-line);
  max-width:1280px;margin:0 auto;
  padding:20px clamp(20px,5vw,48px);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,236,224,.35);
}
@media (max-width:760px){
  .site-footer__inner{grid-template-columns:1fr;gap:36px}
}

/* ---------------------------------------------------------- legal / 404 */
.page-legal #main,
.page-offset #main{padding-top:var(--klr-header-h)}
.legal{padding:clamp(48px,8vw,110px) clamp(20px,5vw,48px)}
.legal__inner{max-width:760px;margin:0 auto}
.legal__eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--klr-hunt);margin:0 0 14px;
}
.legal h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(44px,7vw,80px);line-height:.95;letter-spacing:.02em;
  margin:0 0 10px;color:var(--klr-white);
}
.legal__meta{color:var(--klr-muted);font-size:13px;margin:0 0 40px;font-weight:300}
.legal h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--klr-white);margin:36px 0 12px;
}
.legal p{color:rgba(240,236,224,.72);font-weight:300;line-height:1.8;margin:0 0 14px;font-size:15px}
.legal a{color:var(--klr-fish);text-decoration:none}
.legal a:hover{text-decoration:underline}

/* keep footer clear of the brag-board floating action button */
#klr-hunt-fab,#klr-fish-fab{z-index:900}

/* ---------------------------------------------------------- home page
   The old design had its own fixed secondary nav (".topbar") sized to
   Squarespace's tall header. The shared site header now covers nav, so
   the topbar is redundant and would collide with it. */
.page-home .topbar{display:none !important}
/* the split-hero's in-canvas mobile tab bar must never show on desktop
   (its JS can mis-fire if the viewport starts narrow then widens) */
@media (min-width:681px){.page-home #mobTabs{display:none !important}}
/* on mobile, drop the Hunting/Fishing toggle bar below the fixed site
   header instead of underneath/behind it (it's positioned absolute at
   top:0 inline, so it needs !important to move) */
@media (max-width:680px){
  .page-home #mobTabs{top:var(--klr-header-h) !important}
}

/* ---------------------------------------------------------- brag boards
   These widgets start with a thin back-link row at y:0 that would sit
   under the fixed header — nudge the whole widget down by the header. */
#klr-hunt-board,#klr-fish-board{padding-top:var(--klr-header-h)}