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

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

  --bg-dark: #F5EFE4;
  --bg-card: #2B2824;
  --bg-card-hover: #363230;
  --accent: #D4AD5A;
  --accent-light: #e0c07a;
  --accent-dim: rgba(212, 173, 90, 0.08);
  --text-primary: #1F1B16;
  --text-secondary: #1F1B16;
  --text-muted: #1F1B16;
  --red-accent: #c45c50;
  --green-accent: #4a8e5f;
  --border: #E5DDC8;
}

/* ── SECTION TAGS: black letters, gold underline (except dessert) ── */
.section-tag {
  color: #1F1B16;
}
.section-tag::after {
  background: var(--accent);
}
/* Dessert section sits on dark banner — keep gold */
.dessert-content .section-tag {
  color: var(--accent);
}

/* ── MENU SECTION CTA: black text, gold border ── */
.menu-section > .btn-secondary {
  color: #1F1B16;
  border-color: var(--accent);
}

/* ── PRICE NOTE: "Let op" black ── */
.price-note strong {
  color: #1F1B16;
}

/* ── FOOTER: phone link black ── */
footer a[href^="tel:"] {
  color: #1F1B16;
}

/* ── CARD TEXT: light on dark cards ── */
.menu-card,
.price-card,
.review-card,
.order-card,
.res-form,
.dessert-banner,
.contact-section {
  color: #F5EFE4;
}

/* Dessert section — explicit overrides for nested heading/desc/items */
.dessert-content .section-title,
.dessert-content .section-desc,
.dessert-items li {
  color: #F5EFE4;
}
.price-card-label,
.price-card-per,
.price-card-details li,
.review-text,
.review-author,
.order-card-desc,
.order-card-title {
  color: #F5EFE4;
}
.price-card-amount {
  color: var(--accent);
}
.review-stars {
  color: var(--accent);
}

/* Form inputs on dark cards */
.res-form input,
.res-form select,
.res-form textarea {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #F5EFE4;
}
.res-form input::placeholder,
.res-form textarea::placeholder {
  color: rgba(245, 239, 228, 0.5);
}
.res-form label,
.res-form .form-label,
.res-form .res-field label {
  color: #F5EFE4;
}

/* Inline SVG icons inside form labels */
.res-form .res-field label svg,
.res-form .res-children-header label svg {
  stroke: #F5EFE4;
}

/* Button text on gold remains dark for contrast */
.price-card .btn-secondary:hover,
.order-card:hover {
  color: #1F1B16;
}

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

/* ── 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: #F5EFE4; }
nav:not(.scrolled) .nav-links:not(.mobile-open) a { color: #F5EFE4; }
nav:not(.scrolled) .mobile-toggle:not(.active) span:not(.mobile-badge) {
  background: #F5EFE4;
}

/* Scrolled nav — light background */
nav.scrolled {
  background: rgba(245, 239, 228, 0.95);
  border-bottom-color: #E5DDC8;
}

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

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

/* ── HERO: Keep dark ── */
.hero {
  background: #16181d;
  --text-primary: #F5EFE4;
  --text-secondary: #F5EFE4;
  --text-muted: #F5EFE4;
  --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: #1F1B16; }
.price-card .btn-secondary:hover { color: #1F1B16; }
.res-offline-cta { color: #1F1B16; }
.vacancy-badge { color: #1F1B16; }

/* Generic .btn-secondary — use Rule border for light bg */
.btn-secondary {
  border-color: #E5DDC8;
}
.btn-secondary:hover {
  border-color: #D4AD5A;
}

/* ── 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: #E5DDC8;
}

/* ── 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: #1F1B16;
  color: #F5EFE4;
  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: #1F1B16;
}

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

/* Bottom-of-form text — render cream on dark form card */
.res-note {
  color: #F5EFE4;
}
.res-note a {
  color: var(--accent);
}
.res-privacy {
  color: rgba(245, 239, 228, 0.7);
}
.res-privacy a {
  color: rgba(245, 239, 228, 0.7);
}
.res-privacy a:hover {
  color: #F5EFE4;
}

/* All-slots-unavailable banner — cream text on dark form card */
.slots-full-msg {
  color: #F5EFE4;
}
.slots-full-msg strong {
  color: var(--accent);
}

/* Time slots — gold by default (text reads on dark form card) */
.time-slot {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(212, 173, 90, 0.25);
}
.time-slot:hover:not(.unavailable) {
  color: var(--accent);
  background: rgba(212, 173, 90, 0.12);
  border-color: var(--accent);
}
.time-slot:active:not(.unavailable),
.time-slot:focus:not(.unavailable),
.time-slot:focus-visible:not(.unavailable) {
  color: var(--accent);
  outline: none;
}
.time-slot.selected {
  color: var(--accent);
  background: rgba(212, 173, 90, 0.18);
  border-color: var(--accent);
}

/* Native select dropdowns — option list rendered by browser, force dark text */
.res-form select {
  color: #F5EFE4;
}
.res-form select option {
  color: #1F1B16;
  background: #ffffff;
}

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

/* Outer card: cream background with dark title + sub */
.confirmation-card {
  background: #F5EFE4;
  border-color: #E5DDC8;
  color: #1F1B16;
}
.confirm-title {
  color: #1F1B16;
}
.confirm-sub {
  color: #4a4540;
}

/* Inner details panel: dark charcoal card with cream/white text */
.confirm-details {
  background: #1F1B16;
  border-radius: 8px;
}
.confirm-detail-label {
  color: var(--accent);
}
.confirm-detail-value {
  color: #F5EFE4;
}

/* Sluiten button — solid gold like AANVRAAG VERZENDEN */
.confirm-close {
  background: var(--accent);
  color: #1F1B16;
  border: none;
  padding: 0.9rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.confirm-close:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 173, 90, 0.3);
}

/* ── VACATURES (light theme) ── */
.vacancy-desc {
  color: #F5EFE4;
}
.vacancy-hours {
  color: rgba(245, 239, 228, 0.65);
}
.vacatures-empty {
  color: #F5EFE4;
}
.vacatures-contact {
  color: #1F1B16;
}
.vacatures-contact p {
  color: #1F1B16;
}

/* ── 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);
}

/* ── CONTACT BLOCK + MAP: dark card stands out on cream section ── */
.contact-block-location {
  background: var(--bg-card);
  border-color: var(--border);
}
.contact-block-location h3,
.contact-block-location p,
.contact-block-location a,
.contact-block-location p.location-address {
  color: #F5EFE4;
}
.contact-block-location a:hover {
  color: var(--accent);
}
.map-facade {
  background: var(--bg-dark);
}
.map-facade:hover {
  background: rgba(0, 0, 0, 0.04);
}
.map-container iframe {
  filter: none;
}

/* ── MOBILE ── */
@media (max-width: 1024px) {
  .mobile-sticky-cta {
    background: rgba(245, 239, 228, 0.96);
    border-top-color: #E5DDC8;
  }
  .mobile-sticky-cta .cta-reserveer,
  .mobile-sticky-cta .cta-bestellen {
    color: #1F1B16;
  }
  .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: #1F1B16;
  }
}