/* =========================================================
   PERS & MEDIA — NIKKI DE BAL
   Volledige CSS
========================================================= */

:root {
    --pm-cream: #fbf6f0;
    --pm-cream-dark: #f2e8df;
    --pm-white: #ffffff;

    --pm-purple: #84658f;
    --pm-purple-dark: #65466f;
    --pm-purple-soft: #f1e9f3;

    --pm-brown: #55362c;
    --pm-text: #5f514b;
    --pm-muted: #786b65;

    --pm-border: rgba(101, 70, 111, 0.15);

    --pm-shadow:
        0 18px 48px rgba(85, 54, 44, 0.09);

    --pm-radius: 24px;
}


/* =========================================================
   BASIS
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--pm-text);
    background: var(--pm-cream);
}

main {
    margin: 0 !important;
    padding: 0 !important;
}

img {
    max-width: 100%;
}

.media-container {
    width: min(100% - 3rem, 1160px);
    margin-inline: auto;
}

.media-narrow {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.media-section {
    padding: 6rem 0;
    background: var(--pm-white);
}

.media-section--soft {
    background: var(--pm-cream);
}

.media-section--lavender {
    background:
        linear-gradient(
            135deg,
            rgba(250, 246, 251, 0.98),
            rgba(241, 232, 244, 0.98)
        );
}

.media-section--statement {
    background:
        radial-gradient(
            circle at top left,
            rgba(172, 137, 189, 0.13),
            transparent 38%
        ),
        var(--pm-cream);
}

.media-section h2,
.media-contact h2 {
    margin: 0 0 1.5rem;
    color: var(--pm-brown);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
}

.media-section h3 {
    color: var(--pm-brown);
}

.media-section p {
    color: var(--pm-text);
    font-size: 1.05rem;
    line-height: 1.85;
}

.media-section p + p {
    margin-top: 1rem;
}

.media-eyebrow {
    margin: 0 0 0.8rem;
    color: var(--pm-purple-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.media-eyebrow--center {
    text-align: center;
}

.media-heading {
    max-width: 780px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.media-heading p {
    margin-inline: auto;
}
/* ========================================
   HEADER NIET OVERSCHRIJVEN
========================================= */

body > header {
    min-height: unset;
}

/* =========================================================
   HERO — ZONDER AFBEELDING
========================================================= */

.media-hero {
    margin-top: 0 !important;
    padding: 4rem 0 5rem;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(177, 141, 195, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(210, 184, 132, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbf6f0,
            #f6eef6
        );
}

.media-hero__grid {
    display: block;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.media-hero__content {
    max-width: 820px;
    margin-inline: auto;
}

.media-hero__image {
    display: none;
}

.media-hero h1 {
    margin: 0;
    color: var(--pm-brown);
    font-size: clamp(3.2rem, 8vw, 6.4rem);
    line-height: 1;
}

.media-hero__subtitle {
    margin: 1.6rem 0 0;
    color: var(--pm-purple-dark);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 750;
}

.media-hero__roles {
    margin: 0.45rem 0 1.5rem;
    color: var(--pm-purple);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0.035em;
}

.media-hero__intro {
    max-width: 700px;
    margin: 0 auto;
    color: var(--pm-text);
    font-size: 1.12rem;
    line-height: 1.9;
}

.media-hero__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.25rem;
}


/* =========================================================
   KNOPPEN
========================================================= */

.media-button,
.media-btn {
    display: inline-flex;
    min-height: 50px;
    padding: 0.9rem 1.6rem;

    align-items: center;
    justify-content: center;

    border: 2px solid transparent;
    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.media-button:hover,
.media-btn:hover {
    transform: translateY(-2px);
}

.media-button--primary,
.media-btn {
    color: #ffffff;
    background: var(--pm-purple);
    box-shadow: 0 10px 25px rgba(132, 101, 143, 0.23);
}

.media-button--primary:hover,
.media-btn:hover {
    color: #ffffff;
    background: var(--pm-purple-dark);
}

.media-button--secondary {
    color: var(--pm-purple-dark);
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(132, 101, 143, 0.3);
}

.media-button--secondary:hover {
    background: #ffffff;
}

.media-button--light {
    color: var(--pm-purple-dark);
    background: #ffffff;
}

.media-button:focus-visible,
.media-btn:focus-visible,
.media-text-link:focus-visible,
.media-contact__email:focus-visible {
    outline: 3px solid rgba(181, 147, 199, 0.5);
    outline-offset: 4px;
}


/* =========================================================
   QUOTES
========================================================= */

.media-quote {
    max-width: 680px;
    margin: 2.5rem auto 0;
    padding: 1.5rem 1.8rem;

    color: var(--pm-purple-dark);
    background: var(--pm-purple-soft);

    border-left: 4px solid var(--pm-purple);
    border-radius: 14px;

    font-size: 1.2rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.7;
    text-align: left;
}

.media-big-quote {
    position: relative;
    margin: 3rem auto 0;
    padding: 2.7rem 3rem;
    max-width: 760px;

    color: var(--pm-purple-dark);
    background: rgba(255, 255, 255, 0.88);

    border: 1px solid var(--pm-border);
    border-radius: 24px;

    box-shadow: var(--pm-shadow);

    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}

.media-big-quote::before {
    content: "“";
    position: absolute;
    top: -1.2rem;
    left: 1.5rem;

    color: rgba(132, 101, 143, 0.25);
    font-family: Georgia, serif;
    font-size: 6rem;
    line-height: 1;
}


/* =========================================================
   TWEE KOLOMMEN
========================================================= */

.media-two-columns {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);
    gap: 4rem;
    align-items: center;
}

.media-two-columns--bio {
    align-items: start;
}

.media-highlight {
    padding: 2.5rem;
    background: var(--pm-white);

    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);

    box-shadow: var(--pm-shadow);
}

.media-highlight__icon {
    display: grid;
    place-items: center;

    width: 62px;
    height: 62px;
    margin-bottom: 1.3rem;

    background: var(--pm-purple-soft);
    border-radius: 50%;

    font-size: 1.8rem;
}

.media-highlight h3 {
    margin: 0 0 0.9rem;
    font-size: 1.5rem;
}

.media-highlight p {
    margin: 0;
}


/* =========================================================
   BOEKSECTIE — ZONDER AFBEELDING
========================================================= */

.media-book {
    display: block;
    max-width: 850px;
    margin-inline: auto;
}

.media-book__image {
    display: none;
}

.media-book__content {
    width: 100%;
    text-align: center;
}

.media-book__content > p:not(.media-book__status) {
    max-width: 750px;
    margin-right: auto;
    margin-left: auto;
}

.media-book__status {
    display: inline-flex;
    margin: 0 auto 1.8rem;
    padding: 0.55rem 0.95rem;

    color: var(--pm-purple-dark);
    background: var(--pm-purple-soft);

    border-radius: 999px;

    font-size: 0.9rem !important;
    font-weight: 750;
}

.media-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;

    max-width: 750px;
    margin: 2rem auto;
}

.media-tags span {
    padding: 0.55rem 0.85rem;

    color: var(--pm-purple-dark);
    background: var(--pm-cream);

    border: 1px solid var(--pm-border);
    border-radius: 999px;

    font-size: 0.86rem;
    font-weight: 700;
}

.media-text-link {
    display: inline-block;
    margin-top: 0.5rem;

    color: var(--pm-purple-dark);
    font-weight: 800;

    text-decoration-thickness: 1px;
    text-underline-offset: 0.3rem;
}


/* =========================================================
   KAARTEN — BESCHIKBAAR VOOR
========================================================= */

.media-card-grid,
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.media-card {
    min-width: 0;
    padding: 2rem;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(132, 101, 143, 0.14);
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(77, 52, 68, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 38px rgba(77, 52, 68, 0.1);
}

.media-card > span,
.media-icon {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.media-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.media-card p {
    margin: 0;
    color: var(--pm-text);
    font-size: 0.98rem;
    line-height: 1.7;
}


/* =========================================================
   EXTRA SECTIE “BESCHIKBAAR VOOR”
========================================================= */

.media-availability {
    width: min(100% - 3rem, 1160px);
    margin: 0 auto;
    padding: 6rem 0;
}

.media-header {
    max-width: 820px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.section-label {
    display: block;
    margin-bottom: 0.9rem;

    color: var(--pm-purple-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.media-header h2 {
    margin: 0 0 1.4rem;

    color: var(--pm-brown);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.15;
}

.media-header p {
    margin: 0;

    color: var(--pm-text);
    font-size: 1.05rem;
    line-height: 1.85;
}


/* =========================================================
   CONTACTBLOK BINNEN “BESCHIKBAAR VOOR”
========================================================= */

.availability-contact {
    max-width: 900px;
    margin: 5rem auto 0;
    padding: 3.5rem 2rem;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(250, 245, 251, 0.98),
            rgba(255, 255, 255, 0.98)
        );

    border: 1px solid var(--pm-border);
    border-radius: 28px;

    box-shadow: var(--pm-shadow);
}

.availability-contact h3 {
    margin: 0 0 1rem;

    color: var(--pm-brown);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.availability-contact p {
    max-width: 680px;
    margin: 0 auto 2rem;

    color: var(--pm-text);
    font-size: 1.05rem;
    line-height: 1.8;
}


/* =========================================================
   ONDERWERPEN
========================================================= */

.media-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    max-width: 980px;
    margin-inline: auto;
}

.media-topic {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;

    padding: 1.25rem 1.4rem;

    background: var(--pm-cream);
    border: 1px solid rgba(85, 54, 44, 0.08);
    border-radius: 16px;
}

.media-topic span {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    background: var(--pm-white);
    border-radius: 50%;

    font-size: 1.35rem;
}

.media-topic p {
    margin: 0;

    color: var(--pm-text);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.55;
}


/* =========================================================
   BIOGRAFIE
========================================================= */

.media-facts {
    padding: 2.25rem;

    background: var(--pm-white);
    border: 1px solid var(--pm-border);
    border-radius: 22px;

    box-shadow: var(--pm-shadow);
}

.media-facts h3 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
}

.media-facts dl {
    margin: 0;
}

.media-facts dl > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 1rem;

    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(85, 54, 44, 0.1);
}

.media-facts dl > div:last-child {
    border-bottom: 0;
}

.media-facts dt {
    color: var(--pm-purple-dark);
    font-weight: 800;
}

.media-facts dd {
    min-width: 0;
    margin: 0;

    color: var(--pm-text);
    line-height: 1.55;
}


/* =========================================================
   PERSMATERIAAL
========================================================= */

.media-download-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;

    max-width: 940px;
    margin-inline: auto;
    padding: 2rem;

    background: var(--pm-cream);
    border: 1px solid var(--pm-border);
    border-radius: 22px;
}

.media-download-box__icon {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    background: var(--pm-white);
    border-radius: 50%;

    font-size: 2rem;
}

.media-download-box h3 {
    margin: 0 0 0.5rem;
}

.media-download-box p {
    margin: 0;

    color: var(--pm-text);
    font-size: 0.98rem;
    line-height: 1.7;
}


/* =========================================================
   ONDERSTE DONKERE CONTACTSECTIE
========================================================= */

.media-contact {
    padding: 5rem 0;

    color: #ffffff;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.13),
            transparent 34%
        ),
        var(--pm-purple-dark);
}

.media-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: center;
}

.media-contact .media-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.media-contact h2 {
    color: #ffffff !important;
}

.media-contact p {
    max-width: 720px;
    margin: 0;

    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.05rem;
    line-height: 1.8;
}

.media-contact__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.media-contact__email {
    color: #ffffff;
    font-weight: 700;

    text-decoration-thickness: 1px;
    text-underline-offset: 0.3rem;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    margin-top: 0;
}
/* =========================================================
   PERSFOTO'S EN MEDIAKIT
========================================================= */

.media-resources {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf6f0 100%
        );
}

.media-resources__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;

    max-width: 1040px;
    margin-inline: auto;
}

.media-resource-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 1.5rem;

    padding: 2.25rem;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--pm-border);
    border-radius: 24px;

    box-shadow: var(--pm-shadow);
}

.media-resource-card--featured {
    background:
        linear-gradient(
            145deg,
            rgba(248, 240, 250, 0.98),
            rgba(255, 255, 255, 0.98)
        );

    border-color: rgba(132, 101, 143, 0.24);
}

.media-resource-card__icon,
.media-resource-request__icon {
    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    background: var(--pm-purple-soft);
    border-radius: 50%;

    font-size: 2rem;
}

.media-resource-card__content {
    min-width: 0;
}

.media-resource-card h3,
.media-resource-request h3 {
    margin: 0 0 0.8rem;

    color: var(--pm-brown);
    font-size: 1.45rem;
    line-height: 1.25;
}

.media-resource-card p,
.media-resource-request p {
    margin: 0 0 1.5rem;

    color: var(--pm-text);
    font-size: 1rem;
    line-height: 1.75;
}

.media-resource-list {
    display: grid;
    gap: 0.65rem;

    margin: 0 0 1.75rem;
    padding: 0;

    list-style: none;
}

.media-resource-list li {
    position: relative;
    padding-left: 1.65rem;

    color: var(--pm-text);
    line-height: 1.55;
}

.media-resource-list li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;

    color: var(--pm-purple);
    font-weight: 800;
}


/* Extra aanvraagblok */

.media-resource-request {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;

    max-width: 1040px;
    margin: 2rem auto 0;
    padding: 2rem;

    background: var(--pm-cream);
    border: 1px solid var(--pm-border);
    border-radius: 22px;
}

.media-resource-request__content {
    min-width: 0;
}

.media-resource-request p {
    margin-bottom: 0;
}


/* Versie-informatie */

.media-resource-version {
    max-width: 760px;
    margin: 2rem auto 0;

    color: var(--pm-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
    text-align: center;
}
/* =========================================================
   HEADER EXACT GELIJK AAN DE HOMEPAGINA
========================================================= */

.site-header,
header.site-header {
    min-height: 650px !important;
    padding: 55px 20px 35px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background-image: url("../images/jouw-home-achtergrond.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.header-inner {
    width: min(100% - 2rem, 1500px) !important;
    min-height: auto !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-logo {
    display: none !important;
}

.site-intro {
    display: block !important;
    text-align: center !important;
}

.site-intro h1 {
    margin: 0 0 42px !important;

    color: #4e2f27 !important;

    font-size: clamp(3.8rem, 6vw, 5.6rem) !important;
    line-height: 1 !important;
}

.site-intro > p:not(.site-motto):not(.site-values) {
    margin: 0 0 34px !important;

    color: #17382c !important;

    font-size: 1.2rem !important;
    line-height: 1.5 !important;
}

.site-motto {
    margin: 0 0 36px !important;

    color: #8a5c9d !important;

    font-size: 1.8rem !important;
    font-style: italic !important;
}
body > header {
    margin-bottom: 0 !important;
}

main {
    margin-top: 0 !important;
}

.media-hero {
    border-top: 0 !important;
}
/* Navigatie altijd aanklikbaar houden */
header {
    position: relative;
    z-index: 20;
}

header nav {
    position: relative;
    z-index: 30;
}

header nav a {
    position: relative;
    z-index: 31;
    pointer-events: auto;
}
/* =========================================================
   NAVIGATIE KLIKBAAR MAKEN
========================================================= */

header {
    position: relative !important;
    z-index: 1000 !important;
}

header nav {
    position: relative !important;
    z-index: 1001 !important;
}

header nav a {
    position: relative !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
}

/* Decoratieve lagen mogen geen klikken tegenhouden */
header::before,
header::after,
.site-intro::before,
.site-intro::after,
.site-divider::before,
.site-divider::after {
    pointer-events: none !important;
}

/* De eerste inhoudssectie mag niet boven de navigatie liggen */
.media-hero {
    position: relative !important;
    z-index: 1 !important;
}