/* menu.css — the Gubly Menu page. The page carries its own inline styling from
   the design; this file only adds the base, and folds it down on small screens. */

html{ scroll-behavior:smooth; overflow-x:hidden }
body{
  margin:0;
  overflow-x:clip;
  background:#F5F0E2;
  color:#241F15;
  font-family:Nunito, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
*{ box-sizing:border-box }
a{ color:inherit; text-decoration:none }
a:hover{ color:#2C5E3F }
::selection{ background:#F2BE45; color:#241F15 }
section{ scroll-margin-top:108px }
img{ max-width:100% }
button:focus-visible, a:focus-visible{ outline:2.5px solid #2C5E3F; outline-offset:3px; border-radius:6px }

/* the tab rows are rendered by menu-tab.js */
#tab-web button:hover, #tab-extras button:hover, #tab-social button:hover{ background:#FFFDF4 }

@media (max-width: 1000px){
  .gb-tab-grid{ grid-template-columns:1fr !important }
  .gb-receipt{ position:static !important }
}

@media (max-width: 860px){
  .gb-3, .gb-2{ grid-template-columns:1fr !important }
  #tab-extras{ grid-template-columns:1fr !important }
  .gb-nav{ display:none !important }
  .gb-table{ overflow-x:auto !important }
  .gb-table > div[style*="1.6fr 1fr 1fr"],
  .gb-table > div[style*="1.5fr 1fr 1fr 1fr"]{ min-width:560px }
  .gb-tab-card{ padding:28px 18px 32px !important; border-radius:30px !important }
  .gb-tab-cta{ padding:22px 20px !important; border-radius:24px !important }
  /* the doodles and floating mascots are decoration, not content */
  img[style*="position: absolute"], .gb-doodle{ display:none !important }
}

@media (max-width: 560px){
  section{ scroll-margin-top:88px }
  .gb-tab-card h2{ font-size:38px !important }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; scroll-behavior:auto !important }
}

/* ── plus one: the two little screens that keep working ────── */
@keyframes gb-slot{
  0%,18%   { border-color:rgba(36,31,21,.16); background:transparent; color:#241F15 }
  26%,46%  { border-color:#2C5E3F; background:rgba(44,94,63,.12); color:#241F15 }
  54%,100% { border-color:rgba(36,31,21,.16); background:transparent; color:#241F15 }
}
@keyframes gb-confirm{
  0%,58%   { opacity:0; transform:translateY(6px) }
  68%,92%  { opacity:1; transform:none }
  100%     { opacity:0; transform:translateY(6px) }
}
@keyframes gb-stamp{
  0%,10%   { background:transparent; color:rgba(251,242,216,.35); transform:scale(1) }
  18%      { background:#F2BE45; color:#241F15; transform:scale(1.18) }
  26%,84%  { background:#F2BE45; color:#241F15; transform:scale(1) }
  92%,100% { background:transparent; color:rgba(251,242,216,.35); transform:scale(1) }
}
@media (prefers-reduced-motion: reduce){
  .gb-slot, .gb-stamp{ animation:none !important }
}