/* =====================================
   Smaakspoor België — Professional Corporate Theme
   Complete style.css for all pages
   - Mobile-first, flexbox-only layouts
   - Brand colors & typography
   - Mobile menu + Cookie consent banner
   ===================================== */

/* --------- CSS Reset / Normalize --------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Trebuchet MS', 'Segoe UI', Roboto, Arial, sans-serif; color: #2E2A26; background-color: #F7F9FC; line-height: 1.6; }
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { padding-left: 1.25rem; margin: 0 0 1rem 0; }
a { color: #1E466C; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #2F6B4F; outline-offset: 2px; }

/* --------- Design Tokens --------- */
:root {
  /* Brand */
  --brand-primary: #2E2A26; /* espresso */
  --brand-secondary: #2F6B4F; /* deep green */
  --brand-accent: #F5EFE6; /* warm accent */

  /* Corporate neutrals (blue/gray palette) */
  --ink: #1F2937;           /* slate-800 for body copy on light */
  --ink-strong: #0F172A;    /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --line: #E2E8F0;          /* slate-200 */
  --surface: #FFFFFF;       /* white */
  --bg: #F7F9FC;            /* light blue-gray */
  --navy: #182334;          /* corporate navy for footer */
  --link: #1E466C;          /* corporate blue */
  --link-hover: #15324F;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Spacing scale */
  --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-60: 60px;
}

/* --------- Typography --------- */
body { color: var(--ink); font-size: 16px; }
.h1, h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--ink-strong); margin: 0 0 16px; }
.h2, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--ink-strong); margin: 0 0 16px; }
.h3, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink-strong); margin: 0 0 12px; }
.h4, h4 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink-strong); margin: 0 0 8px; }
.p, p { margin: 0 0 12px; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 700; }

/* --------- Containers & Global Layout (Flex-only) --------- */
.container { width: 100%; max-width: 1200px; padding: 0 20px; margin: 0 auto; display: flex; flex-direction: column; }
.content-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.text-section { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Mandatory spacing classes */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--brand-accent); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Generic section styling */
main > section { margin-bottom: var(--sp-60); padding: var(--sp-40) var(--sp-20); display: flex; }
main > section .content-wrapper { gap: 24px; }
/* Hero style: first section standout */
main > section:first-of-type { background: var(--brand-accent); border-bottom: 1px solid var(--line); }

/* Lists with icons */
.text-section ul li, .text-section ol li { margin-bottom: 8px; }
.text-section ul li img, .text-section ol li img { width: 18px; height: 18px; margin-right: 10px; }
.text-section ul li, .text-section ol li { display: flex; align-items: center; gap: 8px; }

/* Details/summary */
details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
details + details { margin-top: 12px; }
summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--ink-strong); list-style: none; }
details[open] summary { border-bottom: 1px solid var(--line); background: #FAFBFF; }
details p { padding: 12px 14px; margin: 0; color: var(--ink); }

/* --------- Header & Navigation --------- */
header { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); }
header .container { padding-top: 12px; padding-bottom: 12px; }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--muted); font-weight: 600; padding: 8px 10px; border-radius: var(--radius-sm); transition: background-color .2s ease, color .2s ease; }
.main-nav a:hover { color: var(--ink-strong); background: #EEF2F7; text-decoration: none; }

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; border: 1px solid var(--brand-secondary); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; text-decoration: none; }
.header-cta a:first-child { background: var(--brand-secondary); color: #FFFFFF; }
.header-cta a:first-child:hover { background: #275A42; box-shadow: var(--shadow-md); }
.header-cta a:last-child { background: transparent; color: var(--brand-secondary); }
.header-cta a:last-child:hover { background: #E7F1EC; }

/* Primary CTAs inside content */
.text-section > div a, .text-section > a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; margin-right: 8px; margin-top: 8px; border-radius: var(--radius-sm); border: 1px solid var(--link); font-weight: 700; color: #FFFFFF; background: var(--link); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; text-decoration: none; }
.text-section > div a:hover, .text-section > a:hover { background: var(--link-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }

/* Footer */
footer { background: var(--navy); color: #DCE6F2; padding: 32px 0; }
footer .content-wrapper { flex-direction: row; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
footer a { color: #B9D1EA; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }
footer h3, footer h4 { color: #FFFFFF; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* --------- Mobile Navigation (Hamburger) --------- */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow-sm); transition: background-color .2s ease, box-shadow .2s ease; }
.mobile-menu-toggle:hover { background: #F2F5FA; box-shadow: var(--shadow-md); }

.mobile-menu { position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 92%; background: var(--surface); box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18); transform: translateX(100%); transition: transform .35s ease; z-index: 1200; display: flex; flex-direction: column; padding: 20px; border-left: 1px solid var(--line); }
/* open state driven by aria attribute */
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; }
.mobile-nav a { padding: 14px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-strong); font-weight: 700; background: #FAFBFF; box-shadow: var(--shadow-sm); }
.mobile-nav a:hover { background: #EEF2F7; text-decoration: none; }

/* Hide desktop nav on mobile */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .mobile-menu { display: none; }
  .main-nav { display: flex; }
}

/* --------- Testimonials (Contrast-safe) --------- */
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--ink-strong); }

/* --------- Utility Cards for Articles (Verhalen) --------- */
.text-section article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }
.text-section article + article { margin-top: 12px; }

/* --------- Cookie Consent Banner & Modal --------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px rgba(16,24,40,0.08); padding: 16px 20px; z-index: 1100; transform: translateY(0); transition: transform .3s ease; }
.cookie-banner.hidden { transform: translateY(110%); }
.cookie-banner .cookie-text { color: var(--ink); font-size: 14px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-weight: 700; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.cookie-accept { background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary); }
.cookie-accept:hover { background: #275A42; box-shadow: var(--shadow-md); }
.cookie-reject { background: #F2F5FA; color: var(--ink-strong); }
.cookie-reject:hover { background: #E6EBF3; }
.cookie-settings { background: transparent; color: var(--link); border-color: var(--link); }
.cookie-settings:hover { background: #E7F0FA; }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1300; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.cookie-modal.open { pointer-events: auto; opacity: 1; }
.cookie-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); }
.cookie-modal-content { position: relative; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 20px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; z-index: 1; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FAFBFF; }
.cookie-row .label { font-weight: 700; color: var(--ink-strong); }
/* Toggle switch */
.switch { position: relative; width: 42px; height: 24px; background: #CBD5E1; border-radius: 999px; transition: background .2s ease; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.switch.on { background: var(--brand-secondary); }
.switch.on::after { transform: translateX(18px); }
.cookie-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* --------- Forms (generic link-like CTAs present) --------- */
label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink-strong); }
input[type="text"], input[type="email"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm) inset; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand-secondary); box-shadow: 0 0 0 3px rgba(47,107,79,0.15); }

/* --------- Media Queries --------- */
@media (min-width: 768px) {
  .h1, h1 { font-size: 40px; }
  .h2, h2 { font-size: 28px; }
  .h3, h3 { font-size: 22px; }

  .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  /* Ensure readable width */
  .text-section { flex: 1 1 720px; max-width: 800px; }
  footer .content-wrapper { align-items: flex-start; }

  /* Text-image sections turn into row */
  .text-image-section { flex-direction: row; }
}

@media (min-width: 1024px) {
  .h1, h1 { font-size: 48px; }
  .h2, h2 { font-size: 32px; }
}

/* --------- Additional UI Refinements --------- */
/* Inline link styles distinct from nav */
main a { color: var(--link); }
main a:hover { color: var(--link-hover); }

/* Emphasis and blockquotes */
strong { color: var(--ink-strong); }
blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--brand-secondary); background: #F2F7F4; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }

/* ------- Accessibility & States ------- */
[disabled], .is-disabled { opacity: .6; pointer-events: none; }

/* --------- Prevent content overlap & ensure gaps --------- */
main > section .testimonial-card + .testimonial-card { margin-top: 16px; }
main > section nav a { margin-right: 8px; margin-bottom: 8px; }

/* --------- Special handling for lists with contact info --------- */
.text-section ul { display: flex; flex-direction: column; gap: 8px; }

/* --------- Decorative subtle card style for info blocks --------- */
.info-slab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }

/* --------- Ensure images inside lists align properly --------- */
.text-section li img { flex: 0 0 auto; }

/* --------- Print tweaks (corporate) --------- */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; color: #000; }
}