/* Canaprep — shared site navigation (mobile toggle + sheet).
 * ---------------------------------------------------------------------------
 * ONE file, linked from every page and emitted by every generator
 * (see canaprep_nav.py). Theme-neutral: it styles the same class names the
 * site already uses (header.site / .wrap / .wide / nav / nav.site) so it works
 * on the dark pages and on the three legacy light pages without either one
 * having to know about the other.
 *
 * Without JavaScript the menu is NOT hidden: it wraps into a full-width list
 * with >=48px rows, so a phone visitor can always reach /news/, /store/,
 * /guides/, /blog/, /about.html and /contact.html. JavaScript only upgrades
 * that list into a collapsible sheet.
 *
 * No emoji anywhere — the icon is an inline SVG in the markup.
 */

/* ---------- the toggle ---------- */
.cp-navtoggle{
  display:none;
  width:44px;height:44px;          /* 44x44 minimum touch target */
  margin-left:auto;
  padding:0;
  align-items:center;justify-content:center;
  cursor:pointer;
  background:transparent;
  border:1.5px solid currentColor;
  border-radius:10px;
  color:inherit;
  font:inherit;line-height:0;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,color .15s ease;
}
.cp-navtoggle svg{display:block;width:22px;height:22px;fill:currentColor}
.cp-navtoggle:hover{background:rgba(226,104,31,.18)}
.cp-navtoggle[aria-expanded="true"]{background:rgba(226,104,31,.18)}

/* ---------- authored, always-visible keyboard focus ---------- */
header.site a:focus-visible,
header.site nav a:focus-visible,
header.site nav.site a:focus-visible,
.cp-navtoggle:focus-visible{
  outline:3px solid #F0A94A;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- small screens ---------- */
@media (max-width:900px){
  header.site .wrap,
  header.site .wide{
    flex-wrap:wrap;
    height:auto;
    min-height:66px;
    row-gap:6px;
    padding-top:8px;
    padding-bottom:8px;
  }
  /* the no-JS fallback: a full-width, wrapping list of real links */
  header.site nav,
  header.site nav.site,
  header.site .nav nav{
    flex-basis:100%;
    margin-left:0;
    display:block;
    gap:0;
    font-size:1rem;
  }
  header.site nav ul,
  header.site nav.site ul{
    display:block;
    margin:0;padding:0;
    list-style:none;
  }
  header.site nav li,
  header.site nav.site li{display:block;margin:0}
  header.site nav a,
  header.site nav.site a,
  header.site .nav nav a{
    display:flex;
    align-items:center;
    min-height:48px;               /* >=48px rows */
    padding:10px 4px;
    border-right:0;
    border-left:0;
    border-bottom:1px solid rgba(128,128,128,.35);
    color:inherit;
    text-decoration:none;
  }
  header.site nav.site{
    background:transparent;
    border-top:0;
    border-bottom:0;
  }
  /* JavaScript present: collapse the list into a toggleable sheet */
  html.cp-js .cp-navtoggle{display:inline-flex}
  html.cp-js header.site nav,
  html.cp-js header.site nav.site,
  html.cp-js header.site .nav nav{display:none}
  html.cp-js header.site nav.is-open,
  html.cp-js header.site nav.site.is-open,
  html.cp-js header.site .nav nav.is-open{display:block;animation:cp-nav-sheet .18s ease-out}
}
@keyframes cp-nav-sheet{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (min-width:901px){.cp-navtoggle{display:none !important}}

@media (prefers-reduced-motion: reduce){
  .cp-navtoggle,
  header.site nav,
  header.site nav.site,
  header.site .nav nav{transition:none !important}
  html.cp-js header.site nav.is-open,
  html.cp-js header.site nav.site.is-open,
  html.cp-js header.site .nav nav.is-open{animation:none !important}
}