/* ==========================================================================
   Slowpoke Coffee Co. — brand stylesheet
   Fonts: Baloo 2 (headings, chunky/rounded 70s poster type) + Mulish (body)
   Palette: burnt orange, avocado green, mustard gold, cream, cocoa brown —
   a warm retro surf-shack palette, no teal/coral (kept distinct from other
   sandbox siblings on purpose).
   ========================================================================== */

:root {
  /* Palette */
  --cream-50:   #fbf1de;
  --cream-100:  #f6e3c4;
  --cream-200:  #eed3a4;
  --cocoa-900:  #3b2a1e;
  --cocoa-700:  #5a4230;
  --cocoa-600:  #6f4e37;
  --rust-700:   #8a3418;
  --rust-600:   #b6472a;
  --rust-500:   #d9622b;
  --rust-400:   #e8834f;
  --mustard-600: #c8811a;
  --mustard-500: #e8a33d;
  --mustard-400: #f0bc63;
  --avocado-700: #3f4f28;
  --avocado-600: #5b6f3a;
  --avocado-500: #748f46;
  --avocado-400: #93ac66;
  --sunset-600: #c14f45;
  --sunset-500: #e2665a;
  --sunset-400: #ec8a7f;
  --sky-500:    #5b9aa0;
  --sky-400:    #82b8bd;
  --cream: #fffaf0;
  --white: #fffdf8;

  /* Semantic (light mode default) */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --surface: var(--white);
  --surface-tint: var(--cream-100);
  --surface-2: var(--cream-100);
  --text: var(--cocoa-900);
  --text-soft: var(--cocoa-700);
  --border: rgba(59, 42, 30, 0.18);
  --border-strong: rgba(59, 42, 30, 0.34);
  --accent: var(--rust-600);
  --accent-hover: var(--rust-700);
  --accent-contrast: #fffaf0;
  --avocado: var(--avocado-600);
  --avocado-hover: var(--avocado-700);
  --mustard: var(--mustard-500);
  --shadow-color: 59, 42, 30;
  --shadow-sm: 0 2px 8px rgba(var(--shadow-color), 0.10);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.14);
  --shadow-lg: 0 18px 44px rgba(var(--shadow-color), 0.2);

  --font-heading: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c140d;
    --bg-alt: #170f09;
    --surface: #2a1e14;
    --surface-tint: #33261a;
    --surface-2: #33261a;
    --text: #f3e6d2;
    --text-soft: #d3bfa2;
    --border: rgba(243, 230, 210, 0.14);
    --border-strong: rgba(243, 230, 210, 0.26);
    --accent: var(--mustard-400);
    --accent-hover: #ffd07d;
    --accent-contrast: #2a1e14;
    --avocado: var(--avocado-400);
    --avocado-hover: #a9c47f;
    --mustard: var(--mustard-400);
    --shadow-color: 0, 0, 0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c140d; --bg-alt: #170f09; --surface: #2a1e14; --surface-tint: #33261a; --surface-2: #33261a;
  --text: #f3e6d2; --text-soft: #d3bfa2;
  --border: rgba(243, 230, 210, 0.14); --border-strong: rgba(243, 230, 210, 0.26);
  --accent: var(--mustard-400); --accent-hover: #ffd07d; --accent-contrast: #2a1e14;
  --avocado: var(--avocado-400); --avocado-hover: #a9c47f; --mustard: var(--mustard-400);
  --shadow-color: 0, 0, 0;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: var(--cream-50); --bg-alt: var(--cream-100); --surface: var(--white); --surface-tint: var(--cream-100); --surface-2: var(--cream-100);
  --text: var(--cocoa-900); --text-soft: var(--cocoa-700);
  --border: rgba(59, 42, 30, 0.18); --border-strong: rgba(59, 42, 30, 0.34);
  --accent: var(--rust-600); --accent-hover: var(--rust-700); --accent-contrast: #fffaf0;
  --avocado: var(--avocado-600); --avocado-hover: var(--avocado-700); --mustard: var(--mustard-500);
  --shadow-color: 59, 42, 30;
  color-scheme: light;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 0.5em;
  color: var(--text);
  letter-spacing: 0.2px;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--text-soft); }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

.section-eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  color: var(--avocado);
  font-weight: 600;
  margin-bottom: 0.6em;
}
.section-lede {
  max-width: 560px;
  font-size: 1.05rem;
}
.section { padding: 88px 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn-ghost {
  background: rgba(255,255,255,0.16);
  color: var(--cocoa-900);
  border: 2px solid rgba(59, 42, 30, 0.35);
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .btn-ghost { color: var(--text); border-color: rgba(243,230,210,0.35); }
@media (prefers-color-scheme: dark) {
  .btn-ghost { color: var(--text); border-color: rgba(243,230,210,0.35); }
}
.btn-ghost:hover { background: rgba(255,255,255,0.32); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--avocado);
  border: 2px solid var(--avocado);
}
.btn-outline:hover { background: var(--avocado); color: #fffaf0; transform: translateY(-2px); }

.btn-full { width: 100%; }

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-soft);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-tint); color: var(--text); }

/* ---------- Background scene: sunburst + drifting clouds ---------- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #ffe6bd 0%, var(--cream-50) 55%, var(--cream-100) 100%);
}
:root[data-theme="dark"] .bg-scene { background: linear-gradient(180deg, #170f09 0%, #1c140d 60%, #1c140d 100%); }
@media (prefers-color-scheme: dark) {
  .bg-scene { background: linear-gradient(180deg, #170f09 0%, #1c140d 60%, #1c140d 100%); }
}
.bg-scene .sunburst {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--mustard-400) 0deg 9deg,
    transparent 9deg 20deg
  );
  opacity: 0.35;
  animation: spin 90s linear infinite;
}
:root[data-theme="dark"] .bg-scene .sunburst { opacity: 0.16; }
@media (prefers-color-scheme: dark) { .bg-scene .sunburst { opacity: 0.16; } }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.bg-scene .cloud {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.45;
  animation: drift 30s ease-in-out infinite;
}
.cloud-1 { top: 10%; left: 12%; }
.cloud-2 { top: 16%; right: 26%; animation-delay: -14s; }
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.bg-scene .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20vh;
  min-height: 140px;
}
.wave-back { fill: rgba(116, 143, 70, 0.14); }
.wave-mid { fill: rgba(232, 163, 61, 0.16); }
.wave-front { fill: rgba(59, 42, 30, 0.08); }
:root[data-theme="dark"] .wave-front { fill: rgba(0,0,0,0.28); }
@media (prefers-color-scheme: dark) { .wave-front { fill: rgba(0,0,0,0.28); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 250, 240, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .site-header { background: rgba(28, 20, 13, 0.86); }
@media (prefers-color-scheme: dark) { .site-header { background: rgba(28, 20, 13, 0.86); } }
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mascot {
  font-size: 2.2rem;
  animation: bob 3.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3px) rotate(-3deg); }
  60% { transform: translateY(0) rotate(2deg); }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--accent);
}
.brand-tag {
  font-size: 0.72rem;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.site-nav { display: flex; gap: 28px; }
.site-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-soft);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--mustard);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.staff-quicklinks { display: flex; align-items: center; gap: 6px; }
.staff-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--avocado);
  border: 2px solid var(--avocado);
  border-radius: var(--radius-full);
  padding: 8px 12px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.staff-quicklink:hover { background: var(--avocado); color: #fffaf0; transform: translateY(-1px); }
.staff-quicklink-icon { font-size: 1rem; }

/* ---------- Hero ---------- */
.hero { padding: 90px 0 60px; position: relative; overflow: hidden; }
.hero-inner { max-width: 720px; }
.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--avocado);
}
:root[data-theme="dark"] .eyebrow { color: var(--avocado-400); }
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--avocado-400); } }
.hero-title { color: var(--cocoa-900); margin-bottom: 0.15em; }
:root[data-theme="dark"] .hero-title { color: var(--text); }
@media (prefers-color-scheme: dark) { .hero-title { color: var(--text); } }
.hero-tagline {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.6em;
}
.hero-sub { font-size: 1.1rem; max-width: 540px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 1.6em; }
.hero-mascot {
  position: absolute;
  right: 4%;
  bottom: -10px;
  font-size: min(20vw, 250px);
  opacity: 0.92;
  filter: drop-shadow(0 20px 30px rgba(59,42,30,0.22));
  animation: paddle 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes paddle {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-8px); }
}
@media (max-width: 880px) {
  .hero-mascot { position: static; margin-top: 24px; text-align: center; font-size: 40vw; opacity: 0.85; }
}

/* ---------- Meet Groove ---------- */
.groove-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.groove-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: center;
}
.groove-portrait {
  position: relative;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, var(--cream-200), transparent 70%);
  border-radius: var(--radius-lg);
  padding: 30px 0;
}
.groove-emoji { font-size: 8rem; display: inline-block; }
.bob { animation: bob 3.6s ease-in-out infinite; }
.groove-sunnies {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-52%) rotate(-6deg);
  font-size: 2rem;
}
.groove-subtitle {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.groove-favorites { margin: 1.2em 0; display: grid; gap: 8px; }
.groove-favorites li { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.groove-quote { font-family: var(--font-heading); color: var(--avocado); font-size: 1.1rem; }
@media (max-width: 720px) {
  .groove-grid { grid-template-columns: 1fr; text-align: center; }
  .groove-favorites li { justify-content: center; }
}

/* ---------- Origin story ---------- */
.origin-section { background: var(--bg-alt); }
.origin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.origin-photo-stub {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.origin-photo-stub .big-icon { font-size: 5rem; }
.origin-photo-stub .van { font-size: 3rem; margin-top: 8px; }
@media (max-width: 860px) { .origin-grid { grid-template-columns: 1fr; } }

/* ---------- Menu ---------- */
.menu-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 32px 0 40px; }
.menu-tab {
  padding: 11px 22px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
}
.menu-tab:hover { border-color: var(--accent); }
.menu-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

.menu-panel { display: none; }
.menu-panel.active { display: block; animation: fadeUp 0.4s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.menu-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.menu-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.menu-item.featured {
  border: 2px solid var(--mustard);
  background: linear-gradient(135deg, rgba(232,163,61,0.12), rgba(116,143,70,0.06));
}
.menu-item-visual { width: 100%; max-width: 118px; margin: 0 auto 12px; }
.menu-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-item-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.menu-item-top h3 { font-size: 1.1rem; margin: 0; }
.menu-item-price { font-family: var(--font-heading); color: var(--accent); font-weight: 600; white-space: nowrap; }
.menu-item p { font-size: 0.94rem; margin-bottom: 10px; }

/* The illustrated cup / pastry-card preview kit moved to menu-preview.css,
   which pos.php links too: the register needs these same previews and was
   getting none of them from here. */


/* ---------- Home page menu highlights ---------- */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 36px 0;
}
.highlight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.highlight-card h3 { font-size: 1rem; margin: 4px 0 2px; }
.highlight-card .menu-item-price { font-size: 0.95rem; }
.highlights-cta { text-align: center; margin-top: 8px; }

/* ---------- Events ---------- */
.events-section { background: var(--bg-alt); }
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.event-icon { font-size: 2.4rem; margin-bottom: 10px; }
.event-time {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.event-card p:not(.event-time) { font-size: 0.94rem; }
.rsvp-btn { margin-top: 8px; }

/* ---------- Visit ---------- */
.visit-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.visit-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 24px 0; }
.visit-item h4 { margin-bottom: 4px; font-size: 1rem; }
.visit-item p { margin: 0; }
.visit-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.visit-note p { font-style: italic; margin: 0; font-size: 1.05rem; }
.visit-note-mascot { position: absolute; bottom: -14px; right: 18px; font-size: 3rem; }
@media (max-width: 860px) {
  .visit-grid { grid-template-columns: 1fr; }
  .visit-items { grid-template-columns: 1fr 1fr; }
}

/* ---------- Staff demo teaser (home page) ---------- */
.staff-teaser { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.staff-teaser-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.staff-teaser-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 1.6em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--cocoa-900); color: var(--cream-50); padding: 32px 0 0; }
:root[data-theme="dark"] .site-footer { background: #120c07; }
@media (prefers-color-scheme: dark) { .site-footer { background: #120c07; } }
.footer-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }
.footer-brand { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--mustard-400); margin: 0; }
.footer-tag { font-size: 0.85rem; color: rgba(251,243,231,0.75); margin: 2px 0 0; }
.footer-mascot { font-size: 1.8rem; }
.footer-disclaimer { border-top: 1px solid rgba(251,243,231,0.15); padding: 16px 24px 24px; }
.footer-disclaimer p { font-size: 0.82rem; color: rgba(251,243,231,0.6); margin: 0; text-align: center; }

.footer-staff-row {
  display: flex; justify-content: center; align-items: center; gap: 10px; padding: 4px 24px 14px; flex-wrap: wrap;
}
.staff-link {
  font-size: 0.76rem; color: rgba(251,243,231,0.55); text-decoration: underline;
  text-decoration-color: rgba(251,243,231,0.3); text-underline-offset: 3px;
}
.staff-link:hover { color: rgba(251,243,231,0.85); }
.staff-sep { color: rgba(251,243,231,0.3); font-size: 0.76rem; }

/* ---------- Reserve / RSVP modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(59,42,30,0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-panel {
  background: var(--surface); border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: 32px;
  position: relative; box-shadow: var(--shadow-lg); max-height: 88vh; overflow-y: auto;
  transform: translateY(16px) scale(0.98); transition: transform 0.25s ease;
}
.modal.open .modal-panel { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 14px; right: 14px; }
.modal-sub { font-size: 0.92rem; margin-bottom: 1.2em; }

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: var(--text); }
.form-row input, .form-row select {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.95rem;
}
.form-row input:focus, .form-row select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,98,43,0.2);
}
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-view-confirm { text-align: center; }
.confirm-mascot { font-size: 3.4rem; display: inline-block; margin-bottom: 8px; }
.confirm-lede { font-family: var(--font-heading); color: var(--accent); font-weight: 500; font-size: 1.05rem; }
.confirm-body { font-style: italic; margin-bottom: 1.4em; }
.hidden { display: none !important; }

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column;
    gap: 0; display: none; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 16px 24px; border-bottom: 1px solid var(--border); }
  .staff-quicklink-label { display: none; }
  .staff-quicklink { padding: 8px 10px; }
}

@media (max-width: 600px) {
  .section { padding: 60px 0; }
  .form-row-split { grid-template-columns: 1fr; }
  .visit-items { grid-template-columns: 1fr; }
  .header-actions { gap: 8px; }

  /* The header row needs more width than a small phone has once the staff
     quicklinks sit next to the wordmark. Flex items default to min-width:auto,
     so the wordmark refuses to shrink and pushes the staff links off the right
     edge instead. Reclaim the gutters and let the wordmark be the thing that
     gives, since it stays legible truncated and the staff links do not. */
  .header-row { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .brand { min-width: 0; gap: 8px; }
  .brand-text { min-width: 0; }
  /* Retiring the cart button gave this row back about 76px, which is enough for
     Groove to swim back into the header at phone widths. Measured at a real
     375px viewport with Baloo 2 and Mulish actually loaded: the mascot takes
     35px + 8px gap, which leaves the wordmark column exactly 150px, and the
     name at 1rem needs 144.1px. It fits, so Groove stays.
     The tagline does NOT come back. It needs 171.8px on one line against that
     same 150px, so it wraps to two lines and makes the header taller for no
     gain. It still reads in the hero and the footer, so it stays out of here.
     The wordmark also stays at 1rem: at its full 1.25rem it wants roughly 180px
     and would ellipsise. The ellipsis below is a guard for anything narrower
     than 375px (a 320px phone does truncate, and truncated still beats
     overflowing). */
  .brand-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-tag { display: none; }
  .header-actions { flex-shrink: 0; }
  /* Hold the staff links at the 44px touch minimum. */
  .staff-quicklink { min-width: 44px; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}