/* waves.css — Stage 1 structural waves (51/74/73 + a11y/mobile utilities)
   Mobile-first companion stylesheet. Linked from every page <head>. */

/* Wave 51: visible keyboard focus */
:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}

/* Wave 51: skip link (visually hidden until focused) */
.skip-link{position:absolute;left:-9999px;top:0;background:#1a73e8;color:#fff;
  padding:12px 18px;z-index:1000;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus-visible{left:0;outline:3px solid #fff;outline-offset:2px}

/* Wave 51: 44x44 tap-target helper for small icon buttons */
.tap-target{position:relative}
.tap-target::after{content:"";position:absolute;inset:-12px}

/* Wave 51: form inputs readable / no iOS zoom */
input,select,textarea{font-size:16px}

/* Wave 73: fluid images */
img{max-width:100%;height:auto}

/* Wave 74: readable at 360px */
html{-webkit-text-size-adjust:100%}
body{min-width:0;overflow-x-wrap:break-word}

/* Wave 74: 24px section rhythm */
main>section{margin-block:24px}

/* Wave 74: subtle card shadows */
.card,.drink-card{box-shadow:0 1px 4px rgba(60,40,20,.10)}

/* Wave 74: press states */
.btn:active,.card:active,.drink-card:active{transform:scale(.98)}

/* Wave 74: rotating FAQ chevrons (CSS-drawn, decorative only) */
details.nutr-cat>summary{list-style:none;cursor:pointer}
details.nutr-cat>summary::-webkit-details-marker{display:none}
details.nutr-cat>summary::after{content:"";display:inline-block;width:.55em;height:.55em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:auto;align-self:center;flex:none;
  transition:transform .22s ease}
details.nutr-cat[open]>summary::after{transform:rotate(225deg)}

/* Wave 74: green-accented TOC (for later content stage) */
.toc{border-left:3px solid #2e7d32;background:#f4faf4;border-radius:0 10px 10px 0;
  padding:14px 18px;margin:24px 0}
.toc a{color:#1b5e20}

/* Wave 74: hamburger <=640px — 44x44 button, 48px rows */
.nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){
  #mobile-nav a{min-height:48px;display:flex;align-items:center;padding:12px 16px}
  #mobile-nav{display:none}
  #mobile-nav.open{display:block}
}