/* =====================================================================
   Dansatoria designsysteem (fase 2, future-proof revisie)
   Avontuurlijk & levendig: oceaan-teal basis, koraal + zonnig geel accent.
   Mobiel-eerst, toegankelijk (WCAG), uitsluitend lokale assets (geen CDN).

   Architectuur:
     1. Primitieve tokens: ruwe waarden (palet, schaduwlagen). Niet direct
        in componenten gebruiken.
     2. Semantische tokens: betekenisvolle aliassen (surface, text, accent,
        elevation-*). Componenten gebruiken ALLEEN deze; thematiseren of een
        toekomstige dark mode is dan een kwestie van de semantische laag
        herdefiniëren.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Self-hosted fonts (geen Google Fonts / CDN).
   Plaats licentievrije .woff2-bestanden in /assets/fonts/ en activeer
   de @font-face-regels hieronder; werk daarna --font-display / --font-body
   bij. Tot die tijd geldt een verzorgde system-font stack.
   ---------------------------------------------------------------------
   @font-face {
       font-family: "Dansatoria Display";
       src: url("/assets/fonts/display.woff2") format("woff2");
       font-weight: 700 900; font-display: swap;
   }
   @font-face {
       font-family: "Dansatoria Body";
       src: url("/assets/fonts/body.woff2") format("woff2");
       font-weight: 400 600; font-display: swap;
   }
   --------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* === 1. Primitieve tokens ======================================= */
    --c-teal-900: #083b48;
    --c-teal-700: #0b5566;
    --c-teal-600: #0e7490;
    --c-teal-500: #0891b2;
    --c-teal-400: #22b8cf;
    --c-coral-300: #fda4af;
    --c-coral-500: #fb7185;
    --c-coral-600: #f43f5e;
    --c-sun-400: #fbbf24;
    --c-violet-500: #7c3aed;
    --c-ink-900: #0f172a;
    --c-slate-600: #475569;
    --c-slate-400: #94a3b8;
    --c-slate-200: #e2e8f0;
    --c-slate-50: #f8fafc;
    --c-white: #ffffff;

    /* Schaduwbron als HSL-kanalen voor gelaagde, zachte elevatie met alpha. */
    --shadow-hsl: 215 35% 18%;
    --shadow-1: 0 1px 2px hsl(var(--shadow-hsl) / .10);
    --shadow-2: 0 1px 2px hsl(var(--shadow-hsl) / .06),
                0 4px 8px -2px hsl(var(--shadow-hsl) / .10);
    --shadow-3: 0 2px 4px -1px hsl(var(--shadow-hsl) / .06),
                0 10px 20px -4px hsl(var(--shadow-hsl) / .14);
    --shadow-4: 0 4px 8px -2px hsl(var(--shadow-hsl) / .08),
                0 18px 32px -8px hsl(var(--shadow-hsl) / .18);
    --shadow-5: 0 8px 18px -4px hsl(var(--shadow-hsl) / .10),
                0 32px 56px -14px hsl(var(--shadow-hsl) / .24);
    --shadow-highlight: inset 0 1px 0 hsl(0 0% 100% / .18);

    /* === 2. Semantische tokens ====================================== */
    --surface: var(--c-white);
    --surface-sunken: var(--c-slate-50);
    --surface-brand: var(--c-teal-600);

    --text: var(--c-ink-900);
    --text-muted: var(--c-slate-600);
    --text-subtle: var(--c-slate-400);
    --text-on-brand: #ffffff;

    --border: var(--c-slate-200);
    --border-strong: color-mix(in srgb, var(--c-slate-200), var(--c-ink-900) 10%);

    --brand: var(--c-teal-600);
    --brand-strong: var(--c-teal-700);
    --brand-deep: var(--c-teal-900);
    --accent: var(--c-coral-500);
    --accent-strong: var(--c-coral-600);
    --highlight: var(--c-sun-400);

    --link: var(--c-teal-600);
    --link-hover: color-mix(in srgb, var(--c-teal-600), #000 16%);
    --focus-ring: var(--c-sun-400);

    /* Elevatie-aliassen: componenten verwijzen hiernaar, niet naar --shadow-n. */
    --elevation-card: var(--shadow-2);
    --elevation-card-hover: var(--shadow-4);
    --elevation-header: var(--shadow-3);
    --elevation-pop: var(--shadow-5);
    --elevation-accent: 0 8px 22px -6px color-mix(in srgb, var(--accent) 70%, transparent);

    /* Vorm & ritme */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --maxw: 1120px;
    --maxw-narrow: 720px;
    --space: clamp(2.5rem, 6vw, 5rem);
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Typografie */
    --font-display: "Dansatoria Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Dansatoria Body", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* === Basis (lage specificiteit via :where, makkelijk te overschrijven) === */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--surface-sunken);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3) {
    font-family: var(--font-display);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
}

:where(p) { margin: 0 0 1rem; }

:where(a) { color: var(--link); text-decoration: none; }
:where(a):hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .15em; }

:where(img) { max-width: 100%; height: auto; display: block; }

::selection { background: var(--highlight); color: var(--brand-deep); }

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* Skip-link-doel: focus opvangen zonder kader rond de hele hoofdinhoud. */
:where(main):focus { outline: none; }

/* === Layout =========================================================== */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 1.25rem;
    /* Container-context: componenten kunnen reageren op deze breedte
       i.p.v. alleen op de viewport. */
    container: content / inline-size;
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--space); }
.section__head { max-width: 46rem; margin-bottom: 2.5rem; }
.section__head h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.section__head p { color: var(--text-muted); font-size: 1.1rem; margin: 0; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent-strong);
    margin: 0 0 .75rem;
}
.lead { font-size: 1.2rem; color: var(--text-muted); }

/* Skip-link */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--text); color: #fff; padding: .6rem 1rem; z-index: 100;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* === Merk ============================================================= */
.brand {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.35rem; letter-spacing: .3px;
    color: var(--text-on-brand); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__accent { color: var(--highlight); }
.brand__mark {
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--highlight), var(--accent) 70%);
    box-shadow: 0 0 0 4px hsl(0 0% 100% / .15), var(--shadow-2);
}
.brand--footer { color: var(--text); font-size: 1.25rem; }

/* === Header =========================================================== */
.site-header {
    background: linear-gradient(120deg, var(--brand-deep), var(--brand-strong) 40%, var(--brand) 100%);
    color: var(--text-on-brand);
    box-shadow: var(--elevation-header);
    position: relative; z-index: 10;
}
.site-header__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding-block: 1rem; justify-content: space-between;
}
.nav { display: flex; gap: 1.25rem; flex: 1; }
.nav a { color: #fff; opacity: .92; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: #fff; text-decoration: underline; text-underline-offset: 5px; }

/* Taalwisselaar */
.lang-switch {
    display: inline-flex; gap: .25rem;
    background: hsl(0 0% 100% / .12);
    padding: .25rem; border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .12);
}
.lang-switch__link {
    color: #fff; font-weight: 700; font-size: .85rem;
    padding: .25rem .7rem; border-radius: var(--radius-pill); opacity: .8;
    transition: background-color .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}
.lang-switch__link:hover { opacity: 1; color: #fff; text-decoration: none; }
.lang-switch__link.is-active {
    background: var(--surface); color: var(--brand-strong); opacity: 1;
    box-shadow: var(--shadow-2);
}

/* === Buttons ========================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: var(--font-body);
    padding: .8rem 1.4rem; border-radius: var(--radius-pill); border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--accent {
    background: var(--accent); color: #fff;
    box-shadow: var(--elevation-accent), var(--shadow-highlight);
}
.btn--accent:hover { background: var(--accent-strong); box-shadow: var(--shadow-4), var(--elevation-accent); }
.btn--ghost { border-color: currentColor; color: #fff; }
.btn.is-disabled { opacity: .65; cursor: default; pointer-events: none; transform: none; }

/* === Hero ============================================================= */
.hero {
    color: #fff;
    background:
        radial-gradient(1200px 400px at 80% -10%, hsl(43 96% 56% / .35), transparent 60%),
        linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, var(--c-teal-400));
    background-size: 200% 200%;
    animation: hero-drift 18s var(--ease) infinite alternate;
    box-shadow: var(--shadow-3);
    position: relative; z-index: 1;
}
.hero__inner { padding-block: clamp(3.5rem, 9vw, 7rem); max-width: 44rem; }
.hero .eyebrow { color: var(--highlight); }
.hero__title { font-size: clamp(2.2rem, 6vw, 4rem); text-shadow: 0 2px 12px hsl(var(--shadow-hsl) / .25); }
.hero__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: hsl(0 0% 100% / .92); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

@keyframes hero-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

/* === Kaarten ========================================================== */
.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr; /* basis: gestapeld */
}
/* Component-gedreven responsiviteit: het aantal kolommen volgt de
   breedte van de content-container, niet de viewport. */
@container content (min-width: 560px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@container content (min-width: 880px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--elevation-card);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    display: flex; flex-direction: column;
    /* Eigen container-context zodat de kaartinhoud op de kaartbreedte reageert. */
    container: card / inline-size;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--elevation-card-hover); }

.card__media {
    position: relative; aspect-ratio: 16 / 10;
    display: flex; align-items: flex-start; padding: 1rem;
}
.card__media--hotels       { background: linear-gradient(135deg, var(--brand), var(--brand-strong)); }
.card__media--activities   { background: linear-gradient(135deg, var(--accent), var(--highlight)); }
.card__media--destinations { background: linear-gradient(135deg, var(--c-violet-500), var(--accent)); }

.card__body { padding: 1.25rem; }
.card__title { font-size: 1.25rem; }
.card__text { color: var(--text-muted); margin: 0; }

/* Bredere kaart: ruimere binnenmarges en grotere titel. */
@container card (min-width: 340px) {
    .card__body { padding: 1.5rem 1.5rem 1.75rem; }
    .card__title { font-size: 1.4rem; }
}

.badge {
    display: inline-block; background: hsl(var(--shadow-hsl) / .55); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .65rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1); backdrop-filter: blur(2px);
}

/* === Zoeken & productkaarten ========================================== */
.hero--compact .hero__inner { padding-block: clamp(2.5rem, 7vw, 4.5rem); max-width: 48rem; }

.search-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; max-width: 42rem; }
.search-form__input {
    flex: 1 1 16rem; min-width: 0;
    padding: .85rem 1.1rem; font: inherit; color: var(--text);
    background: var(--surface); border: 2px solid transparent; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-2);
}
.search-form__input::placeholder { color: var(--text-subtle); }
.search-disclosure { margin-top: 2rem; font-size: .85rem; color: var(--text-subtle); }

.product-card__body { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.product-card__media {
    position: relative; display: block; aspect-ratio: 16 / 10;
    background: var(--surface-sunken); overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media .badge { position: absolute; top: .75rem; left: .75rem; }
.product-card__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand), var(--accent)); }
.product-card__location { color: var(--text-muted); font-size: .95rem; margin: 0 0 .25rem; }
.product-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; margin-top: auto; padding-top: .75rem;
}
.product-card__price { font-weight: 700; color: var(--text); }
.product-card__cta { padding: .55rem 1.1rem; }

/* === Prose / statische pagina's ======================================= */
.prose { font-size: 1.05rem; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.prose p { color: var(--text-muted); }
.prose .lead { color: var(--text); }

/* Foutpagina */
.error-page__detail {
    white-space: pre-wrap; background: var(--text); color: #e2e8f0;
    padding: 1rem; border-radius: var(--radius-sm); overflow: auto; font-size: .85rem;
    box-shadow: var(--shadow-3);
}

/* Dev-notitie (alleen lokaal) */
.dev-note { font-size: .9rem; padding: .6rem 1rem; border-radius: var(--radius-sm); margin-block: 1.5rem; box-shadow: var(--shadow-1); }
.dev-note--ok { background: #dcfce7; color: #166534; }
.dev-note--warn { background: #fef9c3; color: #854d0e; }

/* === Footer =========================================================== */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: var(--space);
    box-shadow: var(--shadow-2);
}
.site-footer__inner {
    display: grid; gap: 2rem; padding-block: 3rem;
    grid-template-columns: 1fr;
}
/* Footer-grid reageert op de schermbreedte: site-footer__inner is zelf de
   .container (de 'content'-container), dus een container-query op hetzelfde
   element matcht niet. Daarom hier een media-query. */
@media (min-width: 640px) {
    .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__brand p { color: var(--text-muted); max-width: 28ch; }
.site-footer__col { display: flex; flex-direction: column; gap: .5rem; }
.site-footer__col h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-subtle); margin: 0 0 .25rem; }
.site-footer__col a { color: var(--text); }
.site-footer__bar { border-top: 1px solid var(--border); padding-block: 1.25rem; }
.site-footer__disclosure { font-size: .85rem; color: var(--text-muted); margin: 0 0 .35rem; }
.site-footer__copy { font-size: .85rem; color: var(--text-subtle); margin: 0; }

/* === Beweging beperken ================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero { animation: none; }
    .btn, .card, .lang-switch__link { transition: none; }
    .btn:hover, .card:hover { transform: none; }
}