/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  WIJ BOEKENPLEZIER — brand overrides (loaded only when kp_brand() is   ║
   ║  'wijboekenplezier', after every page stylesheet)                      ║
   ╚════════════════════════════════════════════════════════════════════════╝
   Willem, ticket #247 (2026-09-30): the blue of the old WIJ site instead of
   the orange/yellow blocks, with white buttons on the blue.
   Blue = #35b0e5, measured on the old wijboekenplezier.nl (largest coloured
   background area on its homepage, 2026-10-01). */

/* ── Body font Manrope (#284, WIJ Special Media: "die gebruiken we ook op WIJ.nl";
      Dick 2026-10-15 "yes"). Self-hosted variable font 200–800 (SIL OFL, Google Fonts v20),
      latin + latin-ext only; headings stay PeachyKeenJF. ── */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-body: "Manrope", Helvetica, sans-serif;
    --wij-blue: #35b0e5;
    --wij-blue-light: #e3f4fc;  /* #250: "heel lichtblauw" instead of the grey blocks */
    --wij-navy: #1d6f99;        /* #250: Prentenboek card, instead of green */
}

/* ── Home specials (#250, Mathijs via Willem): Prentenboek card green → navy, so
      WIJ no longer reads as KB. ⛔ The nijntje card stays the shared YELLOW —
      [WILLEM SAID IT, 2026-10-05, #258] "Bij nijntje mogen we geen andere kleuren
      gebruiken" (nijntje brand rules); the #250 blue override is removed. ── */
.kph-special-card--prentenboek { background: var(--wij-navy); }

/* ── "Wij Boekenplezier, juist nu!" band yellow → the hero blue (#250 follow-up,
      Willem 2026-10-01: "Hij bedoelde inderdaad het grote gele blok verderop") ── */
.kph-info-section,
.kpm-lezen { background: var(--wij-blue); }

/* ── Every grey block → very light blue (#250), desktop + mobile.
      `body` prefix: block stylesheets (waarom.css, reviews.css) are enqueued
      when the block renders, i.e. AFTER this file, so equal specificity loses. ── */
body .kpf-hero__text,
body .kpf-question,
body .kpfm-intro__card,
body .kpc-addresses,
body .kpcm-address,
body .kpc-grey-box,
body .kpl-hero__text,
body .kplm-hero__card,
body .kpv-hero__text,
body .kpvm-hero__card,
body .kpt-brievenbus,
body .kpm-pakket-brievenbus__card,
body .kpwaarom,
body .kpwaarom-m,
body .kph-reviews,
body .kpm-reviews,
body .kpr-reviews .mcr-review-card,
body .kprm-review {
    background: var(--wij-blue-light);
}

/* ── Home: the hero block (desktop .kph-hero, mobile .kpm-kinderboeken) ── */
.kph-hero,
.kpm-kinderboeken {
    background: var(--wij-blue);
}
.kph-hero__cta,
.kpm-kinderboeken .kpm-btn {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--wij-blue);
}
.kph-hero__cta:hover { background: var(--color-bg); }

/* ── "Zo eenvoudig werkt … in 3 stappen" (#247.3): the WIJ photo is bright on the
      left, where the light heading sits — a soft shade behind the heading only.
      ::before paints above the photo and below the (later) overlay. ── */
.kph-how--wijboekenplezier .kph-how__photo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}
/* Mobile: the title sits centred on the top of the photo → shade from the top.
   The overlay lives inside .kpm-how__photo, so lift it above the shade. */
.kpm-how__overlay { z-index: 1; }
.kpm-how__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

/* ── "Geniet · Lees · Ontdek" block (#247.2): titles in the WIJ blue ── */
.kp-trio__title { color: var(--wij-blue); }

/* ── Contact: the chat — its own primary colour, so header, send button,
      input ring, user bubbles and links all follow ── */
.kpc-chat {
    --color-primary: var(--wij-blue);
}

/* ── "Voorlezen is ontzettend belangrijk" block: Over (.kp-cta) and
      Contact (.kpc-banner), desktop + mobile ── */
.kp-cta__text,
.kp-cta-m__card,
.kpc-banner__text,
.kpcm-banner__card {
    background: var(--wij-blue);
}
.kp-cta__btn,
.kp-cta-m__btn,
.kpc-banner__btn,
.kpcm-banner__btn {
    background: var(--color-white);
    color: var(--wij-blue);
}

/* ── Header logo (#284, Dick 2026-10-15: "Match the heigt, not the the width, keep it in
      proportion"): the WIJ logo is ~4:1, so in the shared 126×61 contain-box it fitted the
      width and came out ~half the height of the KP/KB logos. Keep the box height, let the
      width follow the logo. Desktop header only; the phone header already matches (44px). ── */
@media (min-width: 768px) {
    .kph-header__logo,
    .kph-header__logo img {
        width: auto;
    }
}