/* ══════════════════════════════════════════════════════
   MIRU — Light Theme Override
   Load AFTER styles.css. Remove this <link> to revert.
   ══════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES ── */
:root {
  color-scheme: light;

  --bg-dark: #f8f5f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f1ea;
  --accent: #d4ad5a;
  --accent-light: #e0c07a;
  --accent-dim: rgba(212, 173, 90, 0.08);
  --text-primary: #2a2622;
  --text-secondary: #2a2622;
  --text-muted: #4a4540;
  --red-accent: #c45c50;
  --green-accent: #4a8e5f;
  --border: rgba(212, 173, 90, 0.18);
}

/* ── SCROLLBAR ── */
html {
  scrollbar-color: var(--accent) #f0ece4;
}
::-webkit-scrollbar-track {
  background: #f0ece4;
}

/* ── FONT SWITCHER (demo widget) ── */
#font-switcher {
  background: #ffffff;
  border-color: rgba(212, 173, 90, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
#font-switcher .fs-label { color: var(--text-muted); }
#font-switcher button {
  color: var(--text-muted);
  border-color: rgba(212, 173, 90, 0.2);
}

/* ── NAVIGATION ── */

/* Transparent nav over dark hero — keep light text */
nav:not(.scrolled) .nav-logo-text { color: #f0ece4; }
nav:not(.scrolled) .nav-links:not(.mobile-open) a { color: #f0ece4; }
nav:not(.scrolled) .mobile-toggle:not(.active) span:not(.mobile-badge) {
  background: #f0ece4;
}

/* Scrolled nav — light background */
nav.scrolled {
  background: rgba(248, 245, 240, 0.95);
  border-bottom-color: rgba(212, 173, 90, 0.12);
}

/* Nav CTA hover — dark text on gold */
.nav-cta:hover {
  color: #2a2622 !important;
}

/* Mobile menu — light overlay */
.nav-links.mobile-open {
  background: rgba(248, 245, 240, 0.98);
}

/* ── HERO: Keep dark ── */
.hero {
  background: #16181d;
  --text-primary: #f0ece4;
  --text-secondary: #f0ece4;
  --text-muted: #b0aba3;
  --bg-dark: #16181d;
  --bg-card: #1e2028;
  --bg-card-hover: #262830;
  --border: rgba(212, 173, 90, 0.1);
  --accent-dim: rgba(212, 173, 90, 0.12);
}

/* ── BUTTONS: text-on-accent fixes ──
   Anywhere var(--bg-dark) is used as text color on gold bg,
   override to dark since --bg-dark is now cream outside hero. */

.menu-section > .btn-secondary:hover { color: #2a2622; }
.price-card .btn-secondary:hover { color: #2a2622; }
.res-offline-cta { color: #2a2622; }
.vacancy-badge { color: #2a2622; }

/* Generic .btn-secondary — darker border for light bg */
.btn-secondary {
  border-color: rgba(42, 38, 34, 0.15);
}
.btn-secondary:hover {
  border-color: rgba(42, 38, 34, 0.3);
}

/* ── CARDS & SECTIONS ── */

/* Softer shadows on light backgrounds */
.menu-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.price-card:hover {
  border-color: rgba(212, 173, 90, 0.25);
}

/* Price note box */
.price-note {
  border-color: rgba(212, 173, 90, 0.2);
}

/* ── RESERVATION FORM ── */

/* Time slot unavailable */
.time-slot.unavailable {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

/* Tooltips — keep dark for contrast */
.time-slot.unavailable[data-tooltip]:hover::before,
.time-slot.unavailable.show-tooltip[data-tooltip]::before {
  background: #2a2622;
  color: #f0ece4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.time-slot.unavailable[data-tooltip]:hover::after,
.time-slot.unavailable.show-tooltip[data-tooltip]::after {
  border-top-color: #2a2622;
}

/* Submit area subtle gold tint — slightly stronger on light */
.res-submit-area {
  background: rgba(212, 173, 90, 0.04);
}

/* ── CONFIRMATION OVERLAY ── */
.confirmation-overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* ── ORDER CARDS ── */
.order-card:hover {
  border-color: rgba(212, 173, 90, 0.25);
}

/* ── REVIEWS ── */
.review-card:hover {
  border-color: rgba(212, 173, 90, 0.3);
}

/* ── MAP ── */
.map-container iframe {
  filter: grayscale(0.2) contrast(0.95);
}
.map-facade:hover {
  background: #f0ece4;
}

/* ── MOBILE ── */
@media (max-width: 1024px) {
  .mobile-sticky-cta {
    background: rgba(248, 245, 240, 0.96);
    border-top-color: rgba(212, 173, 90, 0.15);
  }
  .mobile-sticky-cta .cta-reserveer:hover,
  .mobile-sticky-cta .cta-bestellen:hover,
  .mobile-sticky-cta .cta-reserveer:active,
  .mobile-sticky-cta .cta-bestellen:active {
    color: #2a2622;
  }
}