/* =============================================================
   Pacho's Burger Truck — shared stylesheet
   The duplicated bits from every page live here ONCE: brand tokens,
   reset/base, the sticky header + nav (now with a mobile hamburger),
   the footer, reveal animations, focus states, reduced-motion.

   Page-unique sections (hero, story, menu, calendar, catering form,
   merch grid, order embed) stay in each page's own <style> block.
   A body class (.page-home / .page-diary / .page-catering /
   .page-merch / .page-order) carries the few intentional per-page
   tweaks so the look is identical to the original hand-built files.

   Fonts: Mac system faces first, Google Fonts as cross-platform
   fallback (loaded via <link> in each page <head>).
   ============================================================= */

:root{
  --paper:#F2EBDA; --paper-2:#EBE1C9; --ink:#171411; --ink-soft:#4C4538;
  --red:#E63946; --cyan:#34C6DE; --rule:rgba(23,20,17,.26);
  /* Mac face → … → Google fallback → generic */
  --serif:"Didot","Bodoni 72","Hoefler Text","Playfair Display",Georgia,serif;
  --book:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text","EB Garamond",Georgia,serif;
  --script:"Snell Roundhand","Apple Chancery","Pinyon Script",cursive;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--book);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1000px;margin:0 auto;padding:0 34px;}
.caps{text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;}

/* per-page container widths + caps tweak (preserve originals) */
.page-catering .wrap,.page-merch .wrap{max-width:1040px;}
.page-order .wrap{max-width:880px;}
.page-home .caps{letter-spacing:.32em;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- accessibility: visible focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.day:focus-visible,.pkg:focus-visible,.buy:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}

/* ---------- header ---------- */
header.bar{position:sticky;top:0;z-index:40;background:rgba(242,235,218,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--ink);}
.bar .row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;}
.bar img{height:24px;}
.bar nav{display:flex;gap:24px;align-items:center;}
.bar nav a{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;}
.bar nav a.active{border-bottom:1px solid var(--ink);}
.bar .order{border:1px solid var(--ink);border-radius:30px;padding:8px 18px;background:var(--red);color:#fff;}

/* per-page header tweaks (preserve originals) */
.page-home .bar nav{gap:26px;}
.page-merch .bar nav{gap:22px;}
.page-merch .bar nav a{letter-spacing:.15em;font-size:.72rem;}
.page-merch .bar .order{padding:8px 16px;}
.page-order .bar .row{max-width:1000px;margin:0 auto;padding-left:34px;padding-right:34px;}

/* hamburger (hidden on desktop) */
.nav-toggle{display:none;width:42px;height:36px;border:1px solid var(--ink);border-radius:8px;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .2s,opacity .2s;}
.nav-toggle .bars::before{position:absolute;top:-6px;left:0;}
.nav-toggle .bars::after{position:absolute;top:6px;left:0;}
.bar.nav-open .nav-toggle .bars{background:transparent;}
.bar.nav-open .nav-toggle .bars::before{transform:translateY(6px) rotate(45deg);}
.bar.nav-open .nav-toggle .bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------- footer ---------- */
footer.ft{text-align:center;padding:clamp(44px,6vw,72px) 0 32px;}
footer.ft .mascot{width:64px;margin:0 auto 16px;}
footer.ft .press{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  border-block:1px solid var(--rule);padding:16px 0;margin:20px auto;max-width:780px;}
footer.ft .press span{font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;opacity:.78;}
footer.ft .fine{font-style:italic;color:var(--ink-soft);font-size:.8rem;max-width:60ch;margin:0 auto;}

/* per-page footer tweaks (preserve originals) */
.page-home footer.ft .mascot{width:74px;}
.page-home footer.ft .fine{max-width:64ch;}
.page-diary footer.ft{padding:clamp(42px,6vw,68px) 0 32px;}
.page-merch footer.ft{padding:48px 0 32px;}
.page-order footer.ft,.page-catering footer.ft{padding:54px 0 32px;}

/* ---------- mobile: hamburger nav ---------- */
@media(max-width:780px){
  .nav-toggle{display:inline-flex;}
  .bar nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--paper);border-bottom:1px solid var(--ink);padding:6px 0 12px;display:none;}
  .bar.nav-open nav{display:flex;}
  .bar nav a{padding:13px 34px;letter-spacing:.16em;font-size:.82rem;}
  .bar nav a.active{border-bottom:none;text-decoration:underline;text-underline-offset:4px;}
  .bar nav a.order{margin:10px 34px 4px;text-align:center;border-radius:30px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1 !important;transform:none !important;transition:none;}
  *{scroll-behavior:auto !important;}
}
