/*
 * Visitekaartje — één stylesheet, geen build-stap.
 *
 * Twee accent-tokens, en het verschil is belangrijk: --vk-accent is de kleur
 * zoals de tenant hem koos en wordt alleen gebruikt als VLAK (de opvallende knop,
 * de focusring), waar de tekstkleur meebeweegt via --vk-on-accent.
 * --vk-accent-ink is diezelfde kleur, in PHP bijgestuurd tot hij als TEKST leesbaar
 * is op het oppervlak eronder — een diep accent op een donkere kaart zou anders
 * wegvallen. Gebruik voor gekleurde tekst dus altijd --vk-accent-ink.
 *
 * Alle kleuren, rondingen en lettertypes komen binnen als --vk-* custom
 * properties, die de layout in één <style>-blok uitschrijft vanuit
 * ThemeSettings::cssVars(). Wat een custom property niet kan uitdrukken
 * ("er is helemaal geen kaart", "de afbeelding is rond") staat als klasse op
 * <body>. Daardoor bevat dit bestand geen enkele tenant-specifieke waarde en
 * blijven de templates vrij van conditionele styling.
 */

/* ── Vangnet ────────────────────────────────────────────────────────────── */

/*
 * De "helder"-preset, hard neergezet. De layout overschrijft deze allemaal via
 * het inline <style>-blok; ze staan hier zodat een kaart die om welke reden dan
 * ook zonder tokens rendert (ThemeSettings nog niet aangemaakt, tabel nog niet
 * gemigreerd) er nog steeds uitziet als een kaartje in plaats van als kale HTML.
 */
:root {
    --vk-bg: #f4f4f2;
    --vk-bg-2: #e3e3df;
    --vk-bg-layer: linear-gradient(160deg, #f4f4f2 0%, #e3e3df 100%);
    --vk-ink: #141414;
    --vk-ink-soft: rgba(20, 20, 20, .68);
    --vk-ink-faint: rgba(20, 20, 20, .14);
    --vk-page-ink: #141414;
    --vk-page-ink-soft: rgba(20, 20, 20, .72);
    --vk-accent: #0f766e;
    --vk-accent-ink: #0f766e;
    --vk-accent-soft: rgba(15, 118, 110, .16);
    --vk-on-accent: #ffffff;
    --vk-dim: .45;
    --vk-card-bg: #ffffff;
    --vk-card-border: rgba(20, 20, 20, .08);
    --vk-card-blur: none;
    --vk-card-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
    --vk-radius: 14px;
    --vk-radius-btn: 10px;
    --vk-avatar-radius: 999px;
    --vk-align: center;
    --vk-align-items: center;
    --vk-btn-bg: rgba(20, 20, 20, .07);
    --vk-btn-ink: #141414;
    --vk-btn-border: rgba(20, 20, 20, .07);
    --vk-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vk-font-head: var(--vk-font-body);
    --vk-heading-weight: 700;
    --vk-heading-spacing: -0.015em;
}

/* ── Basis ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.vk {
    margin: 0;
    /* 100dvh, niet 100vh: op mobiel rekent vh de adresbalk mee, waardoor het
       kaartje bij het scrollen verspringt. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--vk-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--vk-page-ink);
    background: var(--vk-bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Achtergrond ────────────────────────────────────────────────────────── */

.vk-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--vk-bg-layer);
}

.vk-bg-afbeelding .vk-backdrop {
    background-image: var(--vk-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Het verdonkeringslaagje bepaalt het contrast bij een foto-achtergrond: de
   tekstkleur is in PHP op dít laagje afgestemd, niet op de foto zelf. */
.vk-bg-afbeelding .vk-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--vk-dim, 0.45));
}

/* ── Raamwerk ───────────────────────────────────────────────────────────── */

.vk-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fullscreen betekent hier "gecentreerd op een vol scherm", niet "nooit
       scrollen": bij acht knoppen en twee blokken loopt de kaart door en dat
       mag gewoon scrollen in plaats van afgekapt worden. */
    padding: clamp(20px, 6vw, 56px) clamp(16px, 5vw, 40px);
}

/* ── De kaart ───────────────────────────────────────────────────────────── */

.vk-card {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: var(--vk-align-items);
    gap: 18px;
    padding: clamp(24px, 5vw, 40px);
    text-align: var(--vk-align);
    color: var(--vk-ink);
    background: var(--vk-card-bg);
    border: 1px solid var(--vk-card-border);
    border-radius: var(--vk-radius);
    box-shadow: var(--vk-card-shadow);
    backdrop-filter: var(--vk-card-blur);
    -webkit-backdrop-filter: var(--vk-card-blur);
}

.vk-card--wide {
    max-width: 44rem;
    text-align: left;
    align-items: stretch;
}

/* Zonder kaart draagt de pagina-achtergrond de tekst; padding weg zodat het
   niet oogt als een onzichtbare doos. */
.vk-card-geen .vk-card {
    padding-inline: 0;
    color: var(--vk-page-ink);
}

/* ── Afbeelding ─────────────────────────────────────────────────────────── */

.vk-avatar {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: var(--vk-avatar-radius);
    border: 1px solid var(--vk-ink-faint);
    background: var(--vk-ink-faint);
}

.vk-avatar-geen .vk-avatar {
    display: none;
}

/* ── Tekst ──────────────────────────────────────────────────────────────── */

.vk-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vk-accent-ink);
}

.vk-name {
    margin: 0;
    font-family: var(--vk-font-head);
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: var(--vk-heading-weight);
    letter-spacing: var(--vk-heading-spacing);
    line-height: 1.15;
}

.vk-name--page {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
}

.vk-tagline {
    margin: -8px 0 0;
    font-size: 1.0625rem;
    color: var(--vk-accent-ink);
    font-weight: 600;
}

.vk-intro {
    margin: 0;
    color: var(--vk-ink-soft);
    max-width: 34ch;
}

.vk-align-links .vk-intro,
.vk-card--wide .vk-intro {
    max-width: none;
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.vk-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vk-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-radius: var(--vk-radius-btn);
    border: 1px solid var(--vk-btn-border);
    background: var(--vk-btn-bg);
    color: var(--vk-btn-ink);
    font-weight: 600;
    font-size: 0.9688rem;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}

/* De opvallende knop krijgt altijd het accent, ongeacht de knopstijl — dat is
   precies waarvoor de tenant 'm aanzet. */
.vk-link--primary {
    background: var(--vk-accent);
    border-color: transparent;
    color: var(--vk-on-accent);
}

/* Een gewone knop kleurt bij hover richting het accent, zodat ook de niet-
   opvallende knoppen voelen als iets waar je op klikt. */
.vk-link:not(.vk-link--primary):hover {
    background: var(--vk-accent-soft);
    border-color: transparent;
}

.vk-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.vk-link:active {
    transform: translateY(0);
}

.vk-link__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.vk-link__label {
    flex: 1;
    text-align: var(--vk-align);
}

.vk-icon {
    width: 1.25em;
    height: 1.25em;
    display: block;
}

.vk-icon--sm {
    width: 1em;
    height: 1em;
}

/* ── Blokken ────────────────────────────────────────────────────────────── */

.vk-block {
    width: 100%;
    padding-top: 6px;
    border-top: 1px solid var(--vk-ink-faint);
}

.vk-block__title {
    margin: 0 0 10px;
    font-family: var(--vk-font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vk-ink-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: var(--vk-align-items);
}

/* ── Openingstijden ─────────────────────────────────────────────────────── */

.vk-hours {
    margin: 0;
    display: grid;
    gap: 2px;
    font-size: 0.9375rem;
}

.vk-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
}

.vk-hours__day {
    color: var(--vk-ink-soft);
}

.vk-hours__time {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.vk-hours__time.is-closed {
    color: var(--vk-ink-soft);
}

.vk-hours__exceptions {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--vk-ink-soft);
}

.vk-hours__exceptions li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
}

/* Blijft verborgen tot card.js de echte status heeft berekend — een
   server-gerenderde badge zou in de page-cache verouderen. */
.vk-openbadge[hidden] {
    display: none;
}

/* Het accent zit in het bolletje, niet in de tekst of de vulling. Een badge die
   zijn kleur uit het accent haalt, valt weg zodra dat accent óók de achtergrond
   is (preset "Kleur") — zo houdt de tekst altijd hetzelfde contrast als gewone
   kaarttekst, ongeacht welke kleur de tenant kiest. */
.vk-openbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    background: var(--vk-ink-faint);
    color: var(--vk-ink-soft);
}

.vk-openbadge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.55;
}

.vk-openbadge.is-open {
    color: var(--vk-ink);
}

.vk-openbadge.is-open::before {
    background: var(--vk-accent-ink);
    opacity: 1;
}

/* ── Contactregels ──────────────────────────────────────────────────────── */

.vk-contact {
    width: 100%;
    margin: 0;
    /* Ook links/rechts op 0: de browser-default padding-inline-start van een <ul>
       schuift de gecentreerde regels anders ~40px uit het midden. */
    padding: 14px 0 0;
    border-top: 1px solid var(--vk-ink-faint);
    list-style: none;
    display: grid;
    gap: 7px;
    font-size: 0.9062rem;
    color: var(--vk-ink-soft);
}

.vk-contact__item {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content: var(--vk-align-items);
}

.vk-contact__icon {
    display: inline-flex;
    opacity: 0.7;
}

.vk-contact a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--vk-ink-faint);
}

.vk-contact a:hover {
    color: var(--vk-accent-ink);
    border-bottom-color: currentColor;
}

/* ── Juridische regel ───────────────────────────────────────────────────── */

.vk-legal {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--vk-ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: var(--vk-align-items);
}

.vk-legal a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--vk-ink-faint);
}

.vk-legal a:hover {
    color: var(--vk-ink);
}

.vk-legal__sep {
    opacity: 0.5;
}

.vk-back {
    font-size: 0.875rem;
    color: var(--vk-ink-soft);
    text-decoration: none;
    font-weight: 600;
}

.vk-back:hover {
    color: var(--vk-accent-ink);
}

/* ── Lopende tekst (privacy, voorwaarden, tekstblok) ────────────────────── */

.vk-prose {
    color: var(--vk-ink-soft);
    text-align: left;
}

.vk-prose > *:first-child {
    margin-top: 0;
}

.vk-prose > *:last-child {
    margin-bottom: 0;
}

.vk-prose h2,
.vk-prose h3 {
    font-family: var(--vk-font-head);
    color: var(--vk-ink);
    letter-spacing: var(--vk-heading-spacing);
    margin: 1.6em 0 0.5em;
    line-height: 1.25;
}

.vk-prose h2 {
    font-size: 1.125rem;
}

.vk-prose h3 {
    font-size: 1rem;
}

.vk-prose p,
.vk-prose ul,
.vk-prose ol {
    margin: 0 0 1em;
}

.vk-prose ul,
.vk-prose ol {
    padding-left: 1.25em;
}

.vk-prose li {
    margin-bottom: 0.35em;
}

.vk-prose a {
    color: var(--vk-accent-ink);
}

.vk-prose strong {
    color: var(--vk-ink);
}

/* ── Dialog ─────────────────────────────────────────────────────────────── */

.vk-dialog {
    width: min(42rem, calc(100vw - 32px));
    max-height: min(80dvh, 46rem);
    padding: 0;
    border: 1px solid var(--vk-card-border);
    border-radius: var(--vk-radius);
    background: var(--vk-card-bg, var(--vk-bg));
    color: var(--vk-ink);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* De kaartstijlen "lijn" en "geen kaart" laten --vk-card-bg doorzichtig; een
   dialog moet wél dekkend zijn, anders lees je de kaart erdoorheen. */
.vk-card-lijn .vk-dialog,
.vk-card-geen .vk-dialog,
.vk-card-glas .vk-dialog {
    background: var(--vk-bg);
    color: var(--vk-page-ink);
}

.vk-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

.vk-dialog__bar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--vk-ink-faint);
    background: inherit;
}

.vk-dialog__title {
    font-family: var(--vk-font-head);
    font-size: 1rem;
}

.vk-dialog__close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.6;
}

.vk-dialog__close:hover {
    opacity: 1;
}

.vk-dialog__body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(min(80dvh, 46rem) - 60px);
}

/* ── Toegankelijkheid ───────────────────────────────────────────────────── */

:where(a, button):focus-visible {
    outline: 2px solid var(--vk-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .vk-link {
        transition: none;
    }

    .vk-link:hover {
        transform: none;
    }
}

/* De sectie-builder-preview draait zonder JS. Er is hier niets dat JS moet
   onthullen, maar de dialog mag daar nooit als blok in beeld komen. */
.is-preview .vk-dialog {
    display: none;
}

@media print {
    .vk-backdrop,
    .vk-dialog,
    .vk-legal {
        display: none;
    }

    .vk-card {
        box-shadow: none;
        border-color: #ddd;
    }
}
