/* ===========================================
   COCINIA - Multi-tenant Stylesheet
   =========================================== */

/* -----------------------------------------
   FONTS - Loaded via preload in base.njk
   ----------------------------------------- */
/* Font import moved to HTML <head> for better performance */

/* -----------------------------------------
   CSS VARIABLES (easy to change)
   ----------------------------------------- */
:root {
  /* Colors — tenant values come from base.njk inline <style>, these are fallbacks only */
  --color-white: #ffffff;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  
  /* Fonts */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Open Sans', sans-serif;
  
  /* Spacing */
  --header-height: 64px;
  --sidebar-width: 256px;
  --mobile-nav-height: 56px;
}

/* -----------------------------------------
   BASE STYLES
   ----------------------------------------- */

/* Prevent layout shift when scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-cream);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* -----------------------------------------
   COMPONENTS
   ----------------------------------------- */

/* Back to top button - geleidelijke fade-in via JavaScript */
#back-to-top {
  opacity: 0;  /* GEEN !important - JS moet dit kunnen overschrijven! */
  visibility: hidden !important;
  pointer-events: none !important;
  transition: visibility 0s;
  width: 48px;
  height: 48px;
}

#back-to-top.visible {
  visibility: visible !important;
  pointer-events: auto !important;
  /* Opacity wordt via JS inline style gestuurd */
}

#back-to-top:hover {
  /* Hover blijft werkend via cascade */
}

/* Sidebar active link */
.sidebar-link.active {
  background-color: var(--color-secondary);
  color: var(--color-dark);
}
.sidebar-link:hover {
  filter: brightness(1.15);
}

/* Loading spinner */
.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--color-secondary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide scrollbar for mobile nav */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* -----------------------------------------
   UTILITY CLASSES
   ----------------------------------------- */

/* Icon sizes */
.icon-xs svg { width: 14px; height: 14px; }
.icon-sm svg { width: 16px; height: 16px; }
.icon-md svg { width: 20px; height: 20px; }
.icon-lg svg { width: 24px; height: 24px; }
.icon-xl svg { width: 32px; height: 32px; }
.icon-2xl svg { width: 54px; height: 54px; }
.icon-3xl svg { width: 96px; height: 96px; }

/* -----------------------------------------
   MULTI-TENANT UTILITY CLASSES
   Gebruikt door alle JS modules (tenant-aware)
   Waarden komen van CSS variabelen die base.njk
   per tenant injecteert (--color-dark, --color-gold, etc.)
   ----------------------------------------- */

/* Primaire kleur (identiteitskleur van het restaurant) */
.text-tenant-primary { color: var(--color-primary); }
.bg-tenant-primary   { background-color: var(--color-primary); }

/* Header & Footer achtergrond (instelbaar per tenant) */
.bg-tenant-header { background-color: var(--color-header-bg); }
.bg-tenant-footer { background-color: var(--color-footer-bg); }

/* Secundaire kleur (goud/accent) */
.text-tenant-secondary             { color: var(--color-secondary); }
.bg-tenant-secondary               { background-color: var(--color-secondary); }
.border-tenant-secondary           { border-color: var(--color-secondary); }
.bg-tenant-secondary\/10          { background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent); }

/* Hover states */
.hover\:text-tenant-secondary:hover { color: var(--color-secondary); }
.hover\:bg-tenant-secondary:hover   { background-color: var(--color-secondary); }
.hover\:border-tenant-secondary:hover { border-color: var(--color-secondary); }


/* Group-hover (Tailwind syntax) */
.group:hover .group-hover\:text-tenant-secondary { color: var(--color-secondary); }

/* Accent kleur */
.text-tenant-accent   { color: var(--color-accent); }
.border-tenant-accent { border-color: var(--color-accent); }

/* Dark kleur */
.text-tenant-dark { color: var(--color-dark); }
.bg-tenant-dark   { background-color: var(--color-dark); }

/* Light kleur */
.text-tenant-light { color: var(--color-light); }
.bg-tenant-light   { background-color: var(--color-light); }

/* Fonts */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* ---- Opacity variants (color-mix) ---- */
.bg-tenant-dark\/50  { background-color: color-mix(in srgb, var(--color-dark) 50%, transparent); }
.bg-tenant-dark\/80  { background-color: color-mix(in srgb, var(--color-dark) 80%, transparent); }
.bg-tenant-light\/10 { background-color: color-mix(in srgb, var(--color-light) 10%, transparent); }
.bg-tenant-light\/30 { background-color: color-mix(in srgb, var(--color-light) 30%, transparent); }
.bg-tenant-primary\/5  { background-color: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.bg-tenant-secondary\/10 { background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent); }
.bg-tenant-secondary\/20 { background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent); }
.text-tenant-light\/70 { color: color-mix(in srgb, var(--color-light) 70%, transparent); }
.text-tenant-light\/80 { color: color-mix(in srgb, var(--color-light) 80%, transparent); }
.text-tenant-light\/90 { color: color-mix(in srgb, var(--color-light) 90%, transparent); }
.text-tenant-primary\/50 { color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.text-tenant-primary\/70 { color: color-mix(in srgb, var(--color-primary) 70%, transparent); }

/* ---- Border opacity variants ---- */
.border-tenant-secondary\/20 { border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent); }
.border-tenant-secondary\/30 { border-color: color-mix(in srgb, var(--color-secondary) 30%, transparent); }
.border-tenant-secondary\/40 { border-color: color-mix(in srgb, var(--color-secondary) 40%, transparent); }

/* ---- Hover states ---- */
.hover\:bg-tenant-dark\/90:hover    { background-color: color-mix(in srgb, var(--color-dark) 90%, transparent); }
.hover\:bg-tenant-light\/50:hover   { background-color: color-mix(in srgb, var(--color-light) 50%, transparent); }
.hover\:bg-tenant-primary\/10:hover { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.hover\:bg-tenant-primary\/90:hover { background-color: color-mix(in srgb, var(--color-primary) 90%, transparent); }
.hover\:bg-tenant-secondary\/5:hover  { background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent); }
.hover\:bg-tenant-secondary\/10:hover { background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent); }
.hover\:bg-tenant-secondary\/20:hover { background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent); }
.hover\:bg-tenant-secondary\/90:hover { background-color: color-mix(in srgb, var(--color-secondary) 90%, transparent); }
.hover\:text-tenant-primary:hover  { color: var(--color-primary); }
.hover\:text-tenant-secondary:hover { color: var(--color-secondary); }
.hover\:border-tenant-secondary:hover { border-color: var(--color-secondary); }

/* ---- Focus states ---- */
.focus\:bg-tenant-secondary\/5:focus  { background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent); }
.focus\:border-tenant-secondary:focus { border-color: var(--color-secondary); }
.focus\:ring-tenant-secondary:focus   { --tw-ring-color: var(--color-secondary); }
.focus\:ring-tenant-secondary\/20:focus { --tw-ring-color: color-mix(in srgb, var(--color-secondary) 20%, transparent); }

/* ---- Ring utilities ---- */
.ring-tenant-primary { --tw-ring-color: var(--color-primary); }
.ring-tenant-secondary\/20 { --tw-ring-color: color-mix(in srgb, var(--color-secondary) 20%, transparent); }

/* ---- Gradient stops ---- */
.from-tenant-dark      { --tw-gradient-from: var(--color-dark); --tw-gradient-to: transparent; }
.from-tenant-dark\/80  { --tw-gradient-from: color-mix(in srgb, var(--color-dark) 80%, transparent); --tw-gradient-to: transparent; }
.from-tenant-light     { --tw-gradient-from: var(--color-light); --tw-gradient-to: transparent; }
.from-tenant-secondary\/10 { --tw-gradient-from: color-mix(in srgb, var(--color-secondary) 10%, transparent); --tw-gradient-to: transparent; }
.to-tenant-dark\/40    { --tw-gradient-to: color-mix(in srgb, var(--color-dark) 40%, transparent); }
.to-tenant-dark\/50    { --tw-gradient-to: color-mix(in srgb, var(--color-dark) 50%, transparent); }

/* ---- Header grid: logo=auto, nav=flex, badge=auto ---- */
.header-grid {
  grid-template-columns: auto 1fr auto;
}
.header-nav {
  gap: 1.75rem;
  transform: translateY(5px);
}

/* Nav link styling: active underline + hover effect */
.header-nav > a,
.header-nav > .dropdown-group > .dropdown-trigger {
  position: relative;
  padding-bottom: 10px;
}
.header-nav > a::after,
.header-nav > .dropdown-group > .dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.2s;
}
.header-nav > a:hover::after,
.header-nav > .dropdown-group:hover > .dropdown-trigger::after {
  background: color-mix(in srgb, var(--color-secondary) 40%, transparent);
}
.header-nav > a.text-tenant-secondary::after {
  background: var(--color-secondary);
}

/* Dropdown opent bij hover (puur CSS, !important overschrijft .hidden) */
@media (hover: hover) {
  .dropdown-group:hover > .dropdown-menu {
    display: block !important;
  }
}

/* ---- Header dropdown ---- */
.dropdown-menu {
  top: calc(100% + var(--dropdown-gap, 0px));
  animation: dropdown-in 0.15s ease-out;
}
/* Onzichtbare hover-brug — vult de gap tussen trigger en menu zodat
   hover niet verloren gaat bij cursor-transit naar beneden */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--dropdown-gap, 0px));
  left: 0;
  right: 0;
  height: var(--dropdown-gap, 0px);
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: block;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.dropdown-item:hover {
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}
.dropdown-item-title {
  font-size: 0.875rem;
  font-weight: 600;
  transition: color 0.15s;
}
.dropdown-item:hover .dropdown-item-title {
  color: var(--color-secondary);
}

/* ---- Section dark overrides ---- */
/* -----------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------- */
/* Mobile nav spacer is handled by spacer div in <main>, not body padding */

/* -----------------------------------------
   PRINT STYLES
   ----------------------------------------- */
@media print {
  header, footer, .sidebar-link, nav {
    display: none !important;
  }
  
  body {
    background: white;
    padding: 0;
  }
}

/* ========================================
   NEON OPEN/CLOSED BADGE
   ======================================== */

/* Base badge style — fixed size prevents layout shift while text loads */
.neon-badge {
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  text-transform: uppercase;
  min-width: 5.8rem;
  min-height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.4s, border-color 0.4s, text-shadow 0.4s, box-shadow 0.4s;
}

/* Open state - green neon glow */
.neon-open {
  color: #39ff14;
  border-color: #39ff14;
  text-shadow: 
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 20px #39ff14;
  box-shadow: 
    0 0 5px #39ff14,
    inset 0 0 5px rgba(57, 255, 20, 0.1);
  animation: neon-pulse 2s ease-in-out infinite;
}

/* Closed state - dimmed (light off) */
.neon-closed {
  color: #555;
  border-color: #444;
  text-shadow: none;
  box-shadow: none;
}

/* Subtle pulse animation */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* ========================================
   MOBILE NAVIGATION — Two-level
   ======================================== */

/* --- Sub-nav pills (top bar) --- */
.mobile-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #666;
  background: #f5f5f0;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.mobile-pill:hover {
  background: #e8e4da;
  color: #333;
}

.mobile-pill.active {
  background: var(--color-secondary);
  color: #000;
  font-weight: 600;
  scroll-margin-inline: 8px;
}

/* --- Section icons (bottom bar) --- */
.mobile-section-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 6px;
  color: #999;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.mobile-section-icon span {
  font-size: 0.625rem;
  margin-top: 2px;
  font-weight: 500;
}

.mobile-section-icon.active {
  color: var(--color-secondary);
}

/* Gold indicator line above active section */
.mobile-section-icon.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 0 0 2px 2px;
}

/* --- Swipe transition effect --- */
.mobile-swipe-out-left {
  animation: swipeOutLeft 0.2s ease-in forwards;
}
.mobile-swipe-out-right {
  animation: swipeOutRight 0.2s ease-in forwards;
}

@keyframes swipeOutLeft {
  to { opacity: 0; transform: translateX(-30px); }
}
@keyframes swipeOutRight {
  to { opacity: 0; transform: translateX(30px); }
}

/* -----------------------------------------
   SECTION THEME: dark/light background modes
   Applied by applySectionColors() in homepage-settings.js
   ----------------------------------------- */

/* Donkere secties — tekst wit */
.section-dark p,
.section-dark span:not(.no-theme),
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark a:not(.btn) {
  color: #ffffff !important;
}

/* Donkere secties — override hardcoded Tailwind classes */
.section-dark .text-tenant-primary,
.section-dark .text-tenant-dark {
  color: #ffffff !important;
}

/* Donkere secties — accenten in secondary */
.section-dark .text-tenant-secondary {
  color: var(--color-secondary) !important;
}

/* Donkere secties — titels in secondary kleur */
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--color-secondary) !important;
}

/* Donkere secties — uitzondering: witte/lichte cards binnenin */
.section-dark .bg-white p,
.section-dark .bg-white span,
.section-dark .bg-white h1,
.section-dark .bg-white h2,
.section-dark .bg-white h3,
.section-dark .bg-white h4,
.section-dark .bg-white a:not(.btn),
.section-dark [class*="bg-tenant-light"] p,
.section-dark [class*="bg-tenant-light"] span,
.section-dark [class*="bg-tenant-light"] h1,
.section-dark [class*="bg-tenant-light"] h2,
.section-dark [class*="bg-tenant-light"] h3 {
  color: var(--color-primary) !important;
}

/* Lichte secties — tekst donker */
.section-light p,
.section-light span:not(.no-theme),
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 {
  color: var(--color-primary) !important;
}

/* Lichte secties — accenten behouden */
.section-light .text-tenant-secondary {
  color: var(--color-secondary) !important;
}

/* Donkere sectie → SVG in secondary kleur */
.section-dark svg:not(.no-theme) path,
.section-dark svg:not(.no-theme) circle,
.section-dark svg:not(.no-theme) rect,
.section-dark svg:not(.no-theme) line,
.section-dark svg:not(.no-theme) polyline,
.section-dark svg:not(.no-theme) polygon {
  stroke: var(--color-secondary) !important;
}

.section-dark svg.filled:not(.no-theme) path,
.section-dark svg.filled:not(.no-theme) circle {
  fill: var(--color-secondary) !important;
}

/* Lichte sectie → SVG in primary kleur */
.section-light svg:not(.no-theme) path,
.section-light svg:not(.no-theme) circle,
.section-light svg:not(.no-theme) rect,
.section-light svg:not(.no-theme) line,
.section-light svg:not(.no-theme) polyline,
.section-light svg:not(.no-theme) polygon {
  stroke: var(--color-primary) !important;
}

/* --- Voucher CTA button — auto-contrast met sectie-achtergrond ---
   Default (lichte bg): goud border + primary tekst, goud hover-fill.
   Bij bg=secondary: swap naar primary border+tekst (anders valt goud weg in goud).
   Bij bg=primary/dark/black: tekst in goud (witte border blijft zichtbaar). */
[data-bg-color="secondary"] .voucher-cta-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-bg-color="secondary"] .voucher-cta-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

[data-bg-color="primary"] .voucher-cta-btn,
[data-bg-color="dark"] .voucher-cta-btn,
[data-bg-color="black"] .voucher-cta-btn {
  color: var(--color-secondary);
}
[data-bg-color="primary"] .voucher-cta-btn:hover,
[data-bg-color="dark"] .voucher-cta-btn:hover,
[data-bg-color="black"] .voucher-cta-btn:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/* --- FAQ antwoord spacing — subtiele afstand tussen vraag-knop en antwoord --- */
.faq-content p {
  margin-top: 0.5rem;
}

/* --- Sidebar section links (collapsed) --- */
.sidebar-section-link {
  border-left: 3px solid transparent;
}
.sidebar-section-link:hover {
  border-left-color: var(--color-secondary);
}
