/* ============================================================================
   KP — Campaign Landing template (Willem-editable per page via ACF).
   No header/footer. Background image + colour fill the viewport; the content is
   a centred block. ACF: bg image/colour, accent + text colour, left + right images.

   Desktop (Willem's spec): right column 432px wide = top image (432×410) + form
   (432×510, white, square, no price-tag badge). Left image = same height as that
   whole right column. Mobile: only the top image + form (responsive).
   ============================================================================ */
html, body.kp-landing-body { margin: 0; padding: 0; }
/* Logged-in admins only: WP's admin-bar margin bump (html{margin-top:32px !important})
   leaks onto this header-less template even with show_admin_bar(false) — it shows as a
   white "header" strip at the top and forces a scrollbar. Cancel it for the landing body
   so the page always fills the viewport. (Visitors never see it; harmless when absent.) */
html:has(body.kp-landing-body) { margin-top: 0 !important; }

.kp-landing {
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--landing-bg, #fbfbf6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;       /* row sits near the top, not vertically centred */
    justify-content: center;
    padding: 4vh 24px 24px;        /* a bit higher; vh-based so it scales per screen */
    color: var(--landing-text, #1d1d1b);
    font-family: var(--font-body, sans-serif);
}

.kp-landing__inner {
    width: 100%;
    max-width: 1120px;             /* fits 648 (left) + 432 (right) + gap */
    display: flex;
    align-items: flex-start;        /* Dick 2026-08-26: align the left + right column TOPS (was center, which offset the tops); content unchanged. Left image keeps its proportions (img rules below). Mobile column-stack override at ≤767 is separate. */
    gap: 32px;
}

/* Left: image as tall as (top image + form) */
.kp-landing__left {
    flex: 1 1 auto;
    max-width: 648px;              /* live left-image width */
    min-width: 0;
}
.kp-landing__left img {
    width: 100%;
    height: auto;                  /* complete image, kept in proportion (no crop) */
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

/* Right: fixed 432px column = top image (432×410) above + form (432×510) */
.kp-landing__right {
    flex: 0 0 432px;
    width: 432px;
    display: flex;
    flex-direction: column;
    gap: 0;                         /* form attaches directly under the image */
}
.kp-landing__topimg img {
    display: block;
    width: 100%;
    height: 410px;
    object-fit: cover;
}
.kp-landing__form { width: 100%; }

/* Order form on landing pages: white, square, no badge, fixed 432×510 */
.kp-landing .kph-order-form {
    background: var(--color-white);
    border-radius: 0;
    width: 100%;
    /* Top padding clears the 23px image overlap below (margin-top:-23px + image
       z-index on top), so the first "Gegevens kind" yellow box is no longer cut
       in half by the image's pointer (Willem). Sides/bottom stay 10px for the
       375px fit. */
    padding: 32px 10px 10px;
    box-sizing: border-box;
}
/* Form is flex-column; de basis-`gap` (shared.css 10px) is de grootste bron van
   verticale ruimte TUSSEN de secties (sectie-koppen). Override naar 4px — dit is de
   belangrijkste knop voor "te veel witruimte boven de koppen" (Dick, ronde 2). */
.kp-landing .kph-order-form__form { gap: 4px; }
.kp-landing .kph-order-form__badge { display: none; }      /* no round price tag */
.kp-landing .kph-order-form__section-title,
.kp-landing .kph-order-form__section-sub,
.kp-landing .kph-order-form__consent { color: var(--landing-text, #1d1d1b); }
.kp-landing .kph-order-form__field input,
.kp-landing .kph-order-form__field select {
    border: 1px solid var(--color-border, #d9d9d9);   /* Willem: light-grey fields, not the accent colour */
    background: var(--color-white);
}
.kp-landing .kph-order-form__submit {
    background: var(--landing-accent, var(--color-primary));
    color: var(--color-white);
    border-radius: 12px;       /* Willem: more rounded corners */
    padding: 9px 18px;
    font-size: 16px;
    display: block;
    width: 90%;                /* Willem: 90% width, centred */
    margin: 0 auto 0;          /* Dick r2: knop strak onder de voorwaarden-tekst (#2) */
}

/* Overlap: pull the form up under the image; the IMAGE is the top layer so its
   bottom orange arrow overlaps the form box. */
.kp-landing .kph-order-form { margin-top: -23px; position: relative; z-index: 1; }
.kp-landing__topimg { position: relative; z-index: 2; }   /* image on top */

/* Field sizing matched to the live Forminator (material) form (15px font, ~10px
   vertical padding). The field-to-field spacing is the SECTION flex `gap` (base
   10px) — that's what was overriding the 2px; set it here + zero the per-element
   margins that would add to it. */
.kp-landing .kph-order-form__section { gap: 4px; margin-bottom: 2px; }   /* Dick r2: strakker — veld↔veld 6→4, sectie-marge 6→2 */
.kp-landing .kph-order-form__section + .kph-order-form__section { margin-top: 2px; }   /* Dick r2: ruimte boven de koppen 6→2 (samen met form-gap 4 → ~8px sectiegrens) */
.kp-landing .kph-order-form__section-title { font-family: var(--font-body); font-size: 13px; font-weight: 600; margin: 0; background: #f8d400; border-radius: 6px; padding: 4px 10px; }   /* Willem r3 (#1): symmetrisch — kop↔veld = veld↔veld (flex-gap 4px) */
.kp-landing .kph-order-form__section-title--plain { background: none; font-weight: 400; }   /* Willem: 'Geboortedatum kind' — no yellow box, not bold */
.kp-landing .kph-order-form__section:has(.kph-order-form__section-title--plain) { margin-top: -6px; }   /* Dick r2: 'Geboortedatum kind' direct onder de kind-velden (form-gap 4 + 2 - 6 = 0) */
.kp-landing .kph-order-form__section-sub   { font-size: 13px; margin: 0; }
.kp-landing .kph-order-form__date-label    { margin: 0; }
.kp-landing .kph-order-form__row   { margin: 0; gap: 12px; }
.kp-landing .kph-order-form__field { margin: 0; }
.kp-landing .kph-order-form__address .kph-order-form__row + .kph-order-form__row { margin-top: 4px; }
.kp-landing .kph-order-form__address + .kph-order-form__row { margin-top: 0; }   /* Willem r3 (#1): e-mail/telefoon op de veld↔veld-afstand (sectie-gap 4px), symmetrisch */
.kp-landing .kph-order-form__field input,
.kp-landing .kph-order-form__field select {
    height: 24px;            /* live form field box */
    box-sizing: border-box;
    padding: 2px 8px;        /* less vertical padding so descenders (g, j, p) aren't clipped */
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    margin: 0;
    border-radius: 4px;
}
.kp-landing .kph-order-form__consent { font-family: var(--font-body); font-size: 11px; margin-top: 0; gap: 8px; line-height: 1.7; text-align: left; }   /* Willem: bigger line-height so the small consent text reads better; margin-top → 0 (#3) */
.kp-landing .kph-order-form__section:has(.kph-order-form__consent) { margin-top: -2px; margin-bottom: 0; }   /* Dick r2: voorwaarden strak boven (form-gap 4 + 2 - 2 = ~4px) en knop strak eronder */
.kp-landing .kp-consent-req { color: var(--landing-accent, #FF5E00); font-weight: 700; }   /* Willem: * before the voorwaarden text */

/* Terms & conditions popup (content via ACF; white box, black text, X to close) */
.kp-landing .kp-tc-trigger { background: none; border: 0; padding: 0; color: #0066cc; font: inherit; text-decoration: underline; cursor: pointer; }   /* Willem: voorwaarden link blue */

/* Address manual-toggle + Wijzig/Opnieuw links: GREY on the white landing form
   (match the /bestellen/ registreren form, registreren.css L436-442). shared.css
   forces `.kph-order-form .kpf-gevonden-adres__*` to WHITE (for the coloured-panel
   form, specificity 0,2,0); the landing form reuses `.kph-order-form`, so a plain
   `.kp-landing .kpf-*` (also 0,2,0) only won by load order and flipped white↔orange
   between builds. Adding `.kph-order-form` raises this to 0,3,0 so grey always wins. */
.kp-landing .kph-order-form .kpf-manual-toggle,
.kp-landing .kph-order-form .kpf-gevonden-adres__change,
.kp-landing .kph-order-form .kpf-gevonden-adres__reset { color: var(--color-grey-mid); }
/* Consent checkbox: custom box so the border is actually honoured (native checkboxes
   ignore `border` and show a dark-grey box). Light-grey unchecked; accent fill + white check. */
.kp-landing .kph-order-form__consent input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 16px; width: 16px; height: 16px; margin: 1px 0 0;
    border: 2px solid var(--color-text, #1d1d1b); border-radius: 3px; /* Willem: darker so the box stands out on the white landing form */
    background: var(--color-white); cursor: pointer; position: relative;
}
.kp-landing .kph-order-form__consent input[type="checkbox"]:checked {
    background: var(--landing-accent, #FF5E00); border-color: var(--landing-accent, #FF5E00);
}
.kp-landing .kph-order-form__consent input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px; border: solid var(--color-white); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Inline required-field validation: warning sits below the field and pushes content down */
.kp-landing .kp-field-error { display: block; color: #b00020; font-size: 11px; line-height: 1.3; margin: 2px 0 0; }
.kp-landing .kph-order-form__field input.kp-field-invalid,
.kp-landing .kph-order-form__field select.kp-field-invalid { border-color: #b00020; }
.kp-tc-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); padding: 20px; }
.kp-tc-modal.is-open { display: flex; }
.kp-tc-modal__box {
    position: relative; background: var(--color-white); color: var(--color-black);
    max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
    border-radius: 8px; padding: 28px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.5;
}
.kp-tc-modal__box h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin: 16px 0 4px; color: var(--color-black); }
.kp-tc-modal__box h3:first-child { margin-top: 0; }
.kp-tc-modal__box p { margin: 0 0 10px; }
.kp-tc-modal__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--color-black); }
.kp-landing .kpf-leveradres-field input[type="text"] { width: 100%; height: 24px; box-sizing: border-box; padding: 2px 8px; font-size: 13px; line-height: 1.3; border-radius: 4px; }   /* Willem r3 (#2): zelfde vorm/grootte als de overige invoervelden */
.kp-landing .kpf-leveradres-count { font-size: 13px; margin: 1px 2px 0; }
.kp-landing .kpf-manual-toggle { font-size: 13px; margin: 0; }   /* Dick r2: 'Of vul je adres handmatig in' strak boven e-mail/telefoon (#1) */

/* Mobile: only the top image + form (no left image, responsive heights) */
@media (max-width: 767px) {
    .kp-landing { align-items: flex-start; padding: 0; }   /* Willem: full-bleed, no bg margin/border around form + image */
    .kp-landing__inner { flex-direction: column; align-items: center; gap: 14px; }
    .kp-landing__left { display: none; }
    .kp-landing__right { flex: 1 1 auto; width: 100%; max-width: none; }   /* form + top image fill the screen width */
    .kp-landing__topimg img { height: auto; }
    .kp-landing .kph-order-form { height: auto; overflow: visible; }
    /* keep the desktop multi-field-per-row layout on mobile (don't stack) */
    .kp-landing .kph-order-form__row { flex-wrap: nowrap; gap: 8px; }
    .kp-landing .kph-order-form__row .kph-order-form__field { flex: 1 1 0; min-width: 0; }
    .kp-landing .kph-order-form__field input,
    .kp-landing .kph-order-form__field select { font-size: 16px; height: auto; line-height: normal; padding: 8px 10px; } /* readable + no iOS zoom on mobile */
    .kp-landing .kpf-leveradres-field input[type="text"] { font-size: 16px; height: auto; line-height: normal; padding: 8px 10px; } /* Willem r3 (#2): zelfde grootte als de overige velden op mobiel (was 24px hoog); 16px tegen iOS-zoom */
}