/* ==========================================================================
   Kinderplezier — Homepage Mobile (V4)
   Mobile-first. Uses shared.css for tokens, fonts, reset.
   ========================================================================== */

@font-face {
    font-family: "PeachyKeenJF";
    src: url("../fonts/PeachyKeenJF.woff2") format("woff2"),
         url("../fonts/PeachyKeenJF.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  HERO                                                                 ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

.kpm-hero {
    text-align: center;
    padding: 40px 24px 16px; /* H1: subtitle removed — tighter header→block gap */
}

.kpm-hero__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0 0 8px;
}

.kpm-hero__tagline {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    color: var(--color-text);
    margin: 0 0 16px;
}

.kpm-hero__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  KINDERBOEKEN BLOCK (orange card)                                     ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

.kpm-kinderboeken {
    background: var(--color-primary);
    border-radius: var(--radius-card);
    margin: 0 16px 36px;
    padding: 32px 0 28px;
    text-align: center;
    overflow: visible;
    position: relative;
}

.kpm-kinderboeken__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-white);
    margin: 0 0 12px;
    padding: 0 24px;
}

.kpm-kinderboeken__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-white);
    margin: 0 0 24px;
    padding: 0 24px;
}

.kpm-kinderboeken__books {
    margin: 0 -16px;
    text-align: center;
    position: relative; /* item 3: positioning context for .kph-link-overlay (regular → /pakketten/) */
}

.kpm-kinderboeken__books img {
    width: 100%;
    height: auto;
}

.kpm-kinderboeken .kpm-btn {
    margin-top: 24px;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  EERSTE BESTELLING CTA                                                ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* .kpm-eerste moved to shared.css so it can be reused across mobile pages */


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  PRIJS INFO                                                           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* H4 (Willem, email 2): .kpm-prijs (mobile "… verzendkosten)" price text) removed. */


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  LEZEN IS LEUK                                                        ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

.kpm-lezen {
    background: var(--color-accent);
    border-radius: 0;
    margin: 0 16px 0;
    padding: 48px 0 40px;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.kpm-lezen__card {
    background: var(--color-primary);
    border-radius: var(--radius-card);
    margin: -72px auto 0;
    width: 88%;
    padding: 28px 16px 32px;
    text-align: left;
}

.kpm-lezen__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 26px;
    color: var(--color-white);
    margin: 0 0 16px;
}

.kpm-lezen__text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
    margin: 0 0 20px;
}

.kpm-lezen__text p {
    margin: 0;
}

.kpm-lezen__card--white {
    background: var(--color-white);
    margin-top: 24px;
    margin-bottom: -60px;
}

.kpm-lezen__card--white .kpm-lezen__heading {
    color: var(--color-text);
}

.kpm-lezen__card--white .kpm-lezen__text {
    color: var(--color-text);
}

.kpm-btn.kpm-lezen__btn {
    background: var(--color-white);
    color: var(--color-text); /* H5 (Willem, email 2): purple #AE00FF → near-black for readability */
    border: none;
    font-size: 15px;
    min-height: 36px;
    padding: 0 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    width: 100%;
    text-align: center;
    white-space: normal;
}

.kpm-btn.kpm-lezen__btn.kpm-lezen__btn--dark {
    background: var(--color-text);
    color: var(--color-white);
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  QUOTE PHOTO                                                          ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

.kpm-quote-photo {
    margin: -60px 16px 0;
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--color-black);
    /* Willem #9: black space below the photo so the CTA sits clear of it
       instead of overlapping the photo's bottom edge. */
    padding-bottom: 28px;
}

.kpm-quote-photo__spacer {
    height: 150px; /* Willem: photo a bit lower — black-bg spacing above the photo */
}

.kpm-quote-photo img {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
}

.kpm-quote-photo__text {
    position: absolute;
    /* Willem (2026-06-18): clear the overlapping info-card (was 150px) but a touch
       higher than 185px so the quote sits a little up from the boy's face. */
    top: 172px;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Willem (2026-06-18): side gutters between the original 80% and the trimmed
       92% — a little more L/R padding while staying compact. */
    width: 86%;
}

.kpm-quote-photo__text p {
    font-family: var(--font-heading);
    font-weight: 400;
    /* Willem (2026-06-18): smaller + tighter so the quote is compact and does not
       cover the child's face (was 20px / 1.3). */
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-white);
    margin: 0;
    text-align: center;
}

.kpm-btn.kpm-quote-photo__btn {
    /* Willem #9: was position:absolute bottom:30px, which overlapped the bottom
       of the black photo. Flow it BELOW the photo (centered by the parent's
       text-align) so it sits clear of the photo block. Allow the long CTA text
       to wrap so it stays within the viewport instead of overflowing off-screen. */
    position: static;
    transform: none;
    margin: 18px auto 0;
    max-width: calc(100% - 16px);
    white-space: normal;
    line-height: 1.2;
    border: none;
    font-size: 22px;
    padding: 10px 36px;
    min-height: 48px;
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  SHARED BUTTON                                                        ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* Base .kpm-btn moved to shared.css so the shortcode buttons work site-wide */
.kpm-btn:active {
    background: #e63900;
}