/* ==========================================================================
   site.css — nav system on top of Picnic
   Modes: dropdown | fullscreen | drawer
   AA-friendly: focus-visible, reduced motion
   ========================================================================== */

[hidden]{ display:none !important; }

:root{
  --wrap: 1100px;

  --bg:#fff;
  --surface:#fff;
  --text:#111;
  --border:#d6d6d6;
  --focus:#111;
  
  --hero-bg:#ffccaa;

  --shadow: 0 12px 40px rgba(0,0,0,.18);

  /* NAV sizing */
  --nav-height: 76px;
  --nav-pad-y: 10px;
  --nav-gap: 12px;

  /* Burger */
  --burger-size: 22px;

  /* Mobile menu styling */
  --menu-bg: #ffffff;            /* set this */
  --menu-text: #111111;
  --menu-radius: 14px;
  --menu-pad: 10px;
  --menu-gap: 6px;

  --link-pad-y: 12px;
  --link-pad-x: 12px;
  --link-radius: 12px;
  --link-hover: #f4f6ff;
  --link-current: #eef3ff;

  /* Drawer specifics */
  --drawer-w: 360px;
  --scrim: rgba(0,0,0,.45);

  /* Motion */
  --dur: 220ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --move: 10px;
  
   /* easy to change per site */
  --hero-img-webp: url("/assets/hero-bg.webp");
  --hero-img-jpg:  url("/assets/hero-bg.jpg");

  --hero-overlay: linear-gradient(
    90deg,
    rgba(0,0,0,.55),
    rgba(0,0,0,.20)
  );

  --hero-pos: center;
  --hero-size: cover;
}


*{ box-sizing:border-box; }
html{ background:var(--bg); color:var(--text); }
body{ margin:0; }

a:focus-visible, button:focus-visible, label:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:10px;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }

.skip-link{
  position:absolute; left:-999px; top:10px;
  background:var(--surface); color:var(--text);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:16px; }

/* NAV BAR */
nav.topnav{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:var(--nav-height);
  position:relative;
  z-index:50;
}
nav.topnav .nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nav-gap);
  padding:var(--nav-pad-y) 0;
  position:relative; /* anchor dropdown */
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.brand img{
  height: calc(var(--nav-height) - (2 * var(--nav-pad-y)));
  width:auto;
  display:block;
}

/* HOME HERO (full-width background band) */
header.hero{
  background: var(--hero-bg);
  width: 100%;
  padding: 56px 0;
  display: flow-root; /* prevents float-collapse so background is visible */
    color: #111;
}



header.hero-b {
  background-color: var(--hero-bg); /* fallback color */
  background-image:
    var(--hero-overlay),
    image-set(
      var(--hero-img-webp) type("image/webp"),
      var(--hero-img-jpg)  type("image/jpeg")
    );
  background-size: var(--hero-size);
  background-position: var(--hero-pos);
  background-repeat: no-repeat;

  /* keeps background visible even if inner content is short */
  display: flow-root;
  padding: 56px 0;
    color: #fff;
}




/* If you want the text to start a bit lower under the nav */
header.hero .wrap{
  padding-top: 30px; /* or use your variable if you have one */
}

.brand span{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Checkbox hidden */
.navchk{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0;
  border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* Desktop links */
.navlinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}
.navlinks a{ text-decoration:none; }

/* Burger button */
.navbtn{
  display:none;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;

  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:var(--surface);
  color: #111;          /* <-- change this to any color you want */
}
.navbtn__icon{
  width: var(--burger-size);
  height: var(--burger-size);
  display:block;
}


.navbtn__text{ font-weight:600; }


.navbtn:hover{ color: #0b5fff; }
.navbtn:focus-visible{ color: #0b5fff; }

/* Mobile menu base */
.navmenu{
  /* keep it present for animation; prevent clicks while closed */
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Mobile menu links (plain, no Picnic button classes) */
.navitem{
  display:block;
  padding: var(--link-pad-y) var(--link-pad-x);
  border-radius: var(--link-radius);
  color: var(--menu-text);
  text-decoration:none;
}
.navitem:hover, .navitem:focus-visible{ background: var(--link-hover); }
.navitem[aria-current="page"]{ background: var(--link-current); font-weight:700; }

/* Scrim default */
.navscrim{ display:none; }

/* Mobile breakpoint */
@media (max-width: 860px){
  .navlinks{ display:none; }
  .navbtn{ display:inline-flex; }
}

/* --------------------------
   MODE: dropdown (default)
-------------------------- */
.topnav[data-navmode="dropdown"] .navmenu{
  position:absolute;
  top: calc(100% + 8px);
  left:0; right:0;

  background: var(--menu-bg);
  border:1px solid var(--border);
  border-radius: var(--menu-radius);
  box-shadow: var(--shadow);

  padding: var(--menu-pad);
  display:flex;
  flex-direction:column;
  gap: var(--menu-gap);

  transform: translateY(calc(-1 * var(--move)));
}

.topnav[data-navmode="dropdown"] .navchk:checked ~ .navmenu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

/* --------------------------
   MODE: fullscreen
-------------------------- */
.topnav[data-navmode="fullscreen"] .navmenu{
  position:fixed;
  top: var(--nav-height);
  left:0; right:0; bottom:0;

  background: var(--menu-bg);
  border-top:1px solid var(--border);

  padding: 18px 16px 22px;
  display:flex;
  flex-direction:column;
  gap: var(--menu-gap);

  transform: translateY(calc(-1 * var(--move)));
}

.topnav[data-navmode="fullscreen"] .navchk:checked ~ .navmenu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}

/* --------------------------
   MODE: drawer (slide from right)
-------------------------- */
.topnav[data-navmode="drawer"] .navmenu{
  position:fixed;
  top: var(--nav-height);
  right:0; bottom:0;
  width: min(var(--drawer-w), 92vw);

  background: var(--menu-bg);
  border-left:1px solid var(--border);
  box-shadow: var(--shadow);

  padding: 18px 16px 22px;
  display:flex;
  flex-direction:column;
  gap: var(--menu-gap);

  transform: translateX(100%);
}

.topnav[data-navmode="drawer"] .navchk:checked ~ .navmenu{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform: translateX(0);
}

/* Scrim for drawer (click closes via label) */
@media (max-width: 860px){
  .topnav[data-navmode="drawer"] .navscrim{
    display:none;
  }
  .topnav[data-navmode="drawer"] .navchk:checked ~ .navscrim{
    display:block;
    position:fixed;
    inset:0;
    background: var(--scrim);
    z-index: 999; /* behind drawer (drawer inherits z-index from navmenu fixed; ok) */
  }
  .topnav[data-navmode="drawer"] .navmenu{
    z-index: 1000;
  }
}

/* Prevent background scroll for overlay modes when JS adds html.nav-open */
html.nav-open{ overflow:hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .navmenu{ transition:none !important; }
}