/* =========================================
   BLITZ - ALGEMEEN
========================================= */

body {
    background-color: #fbf9fe;
}

main {
    overflow: hidden;
}

.sectie-label {
    margin: 0 0 12px;

    color: #8263a8;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* =========================================
   BROODKRUIMEL
========================================= */

.blitz-broodkruimel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    width: min(92%, 1250px);
    margin: 0 auto;
    padding: 22px 0;

    color: #696171;
    font-size: 0.95rem;
}

.blitz-broodkruimel a {
    color: #715491;
    text-decoration: none;
    font-weight: 700;
}

.blitz-broodkruimel a:hover,
.blitz-broodkruimel a:focus {
    text-decoration: underline;
}


/* =========================================
   BANNER
========================================= */

.blitz-pagina-header {
    padding: 0;
    background-color: #fdfbff;
}

.blitz-banner {
    position: relative;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 50px;

    width: min(94%, 1400px);
    margin: 0 auto 70px;
    padding: 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(204, 181, 231, 0.33),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fefcff 0%,
            #f2eafa 55%,
            #ebe6f8 100%
        );

    border: 3px solid #d5c3e7;
    border-radius: 36px;

    box-shadow:
        0 20px 50px rgba(94, 67, 125, 0.12);
}

.blitz-banner::before,
.blitz-banner::after {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
}

.blitz-banner::before {
    content: "⚡";
    left: 48px;
    bottom: 28px;
    font-size: 4.5rem;
}

.blitz-banner::after {
    content: "☁️";
    right: 48px;
    top: 30px;
    font-size: 4.2rem;
}

.blitz-banner-tekst {
    position: relative;
    z-index: 2;
}

.blitz-locatie {
    margin: 0 0 16px;

    color: #76569a;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blitz-banner h1 {
    margin: 0;

    color: #5a3f78;
    font-size: clamp(3rem, 6vw, 5.2rem);
    line-height: 1.05;
}

.blitz-banner-intro {
    max-width: 650px;
    margin: 25px 0 32px;

    color: #625b68;
    font-size: 1.15rem;
    line-height: 1.8;
}

.blitz-banner-knop,
.blitz-terug-knop {
    display: inline-block;
    padding: 16px 30px;

    color: #ffffff;
    background-color: #8766ad;

    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;

    box-shadow:
        0 10px 22px rgba(105, 75, 139, 0.2);

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

.blitz-banner-knop::before {
    content: "⚡ ";
}

.blitz-banner-knop:hover,
.blitz-banner-knop:focus,
.blitz-terug-knop:hover,
.blitz-terug-knop:focus {
    background-color: #715394;
    transform: translateY(-3px);
}

.blitz-banner-knop:focus-visible,
.blitz-terug-knop:focus-visible {
    outline: 4px solid #d9cae9;
    outline-offset: 4px;
}

.blitz-banner-afbeelding {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
}

.blitz-banner-afbeelding img {
    width: min(100%, 430px);
    height: auto;
    object-fit: contain;

    filter:
        drop-shadow(0 18px 18px rgba(91, 65, 122, 0.14));
}


/* =========================================
   UITLEG
========================================= */

.blitz-uitleg {
    padding: 90px 20px;
    background-color: #f2ecf8;
}

.blitz-uitleg-kaart {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 52px;

    text-align: center;
    background-color: #ffffff;

    border: 3px solid #d8c7e7;
    border-radius: 30px;

    box-shadow:
        0 15px 36px rgba(88, 62, 117, 0.09);
}

.blitz-uitleg-kaart h2,
.signalen-sectie h2,
.kind-tekst h2,
.volwassene-sectie h2,
.hulp-vragen-kaart h2,
.blitz-praat-kaart h2,
.erna-sectie h2,
.blitz-badge-sectie h2,
.blitz-afsluiting h2 {
    margin: 0 0 22px;

    color: #35644e;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.blitz-uitleg-kaart p {
    max-width: 730px;
    margin: 0 auto 18px;

    color: #615f65;
    font-size: 1.08rem;
    line-height: 1.8;
}

.blitz-belangrijk {
    color: #704d94 !important;
    font-size: 1.3rem !important;
    font-weight: 800;
}


/* =========================================
   SIGNALEN
========================================= */

.signalen-sectie {
    padding: 95px 20px;
    text-align: center;
    background-color: #fffdfb;
}

.signalen-intro {
    max-width: 720px;
    margin: 0 auto 45px;

    color: #66636a;
    font-size: 1.08rem;
    line-height: 1.75;
}

.signalen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    width: min(100%, 950px);
    margin: 0 auto;
}

.signaal-kaart {
    padding: 38px 30px;

    background-color: #ffffff;
    border: 3px solid #d8cae5;
    border-radius: 26px;

    box-shadow:
        0 14px 30px rgba(91, 71, 112, 0.08);
}

.signaal-kaart span {
    display: block;
    margin-bottom: 16px;
    font-size: 3rem;
}

.signaal-kaart h3 {
    margin: 0 0 14px;

    color: #684c86;
    font-size: 1.55rem;
}

.signaal-kaart p {
    margin: 0;

    color: #626168;
    line-height: 1.7;
}


/* =========================================
   VOOR HET KIND
========================================= */

.kind-sectie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;

    width: min(92%, 1150px);
    margin: 0 auto;
    padding: 100px 20px;
}

.kind-tekst p {
    color: #606168;
    font-size: 1.07rem;
    line-height: 1.8;
}

.kind-stappen {
    display: grid;
    gap: 18px;
}

.kind-stap {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 20px;

    padding: 24px;

    background-color: #f8f4fb;
    border: 2px solid #d8cae5;
    border-radius: 22px;
}

.kind-stap > span {
    font-size: 2.5rem;
}

.kind-stap h3 {
    margin: 0 0 7px;
    color: #684c86;
}

.kind-stap p {
    margin: 0;
    color: #65636a;
    line-height: 1.55;
}


/* =========================================
   VOOR VOLWASSENEN
========================================= */

.volwassene-sectie {
    padding: 95px 20px;
    text-align: center;
    background-color: #f1edf6;
}

.volwassene-intro {
    max-width: 820px;
    margin: 0 auto 45px;

    color: #626067;
    line-height: 1.75;
}

.wel-niet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    width: min(100%, 1050px);
    margin: 0 auto;
}

.hulp-kaart {
    padding: 40px 36px;
    text-align: left;

    background-color: #ffffff;
    border: 3px solid transparent;
    border-radius: 27px;

    box-shadow:
        0 14px 30px rgba(86, 67, 106, 0.08);
}

.wel-kaart {
    border-color: #b9d6c4;
}

.niet-kaart {
    border-color: #e3c0c8;
}

.hulp-kaart h3 {
    margin: 0 0 22px;
    color: #365f4c;
    font-size: 1.65rem;
}

.niet-kaart h3 {
    color: #8c5262;
}

.hulp-kaart ul {
    margin: 0;
    padding-left: 24px;
}

.hulp-kaart li {
    margin-bottom: 14px;
    color: #626168;
    line-height: 1.65;
}


/* =========================================
   HULP VRAGEN
========================================= */

.hulp-vragen-sectie {
    padding: 95px 20px;
    background-color: #fffaf4;
}

.hulp-vragen-kaart {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 52px;

    text-align: center;
    background-color: #ffffff;

    border: 3px solid #e4cfaa;
    border-radius: 30px;

    box-shadow:
        0 15px 36px rgba(113, 86, 42, 0.09);
}

.hulp-icoon {
    margin: 0 0 12px;
    font-size: 3.2rem;
}

.hulp-vragen-kaart > p:not(.sectie-label, .hulp-icoon) {
    color: #626168;
    line-height: 1.75;
}

.hulp-redenen {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.hulp-redenen p {
    margin: 0;
    padding: 17px 20px;

    color: #665e56;
    background-color: #fff7e9;

    border-left: 5px solid #d2ad68;
    border-radius: 0 15px 15px 0;

    text-align: left;
    line-height: 1.65;
}


/* =========================================
   BLITZ PRAAT
========================================= */

.blitz-praat-sectie {
    padding: 90px 20px;
    background-color: #f1ebf7;
}

.blitz-praat-kaart {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    gap: 48px;

    width: min(100%, 1000px);
    margin: 0 auto;
    padding: 48px;

    background-color: #ffffff;
    border: 3px solid #d4c2e4;
    border-radius: 30px;

    box-shadow:
        0 16px 38px rgba(87, 61, 117, 0.1);
}

.blitz-praat-kaart img {
    display: block;

    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(0 14px 15px rgba(87, 62, 116, 0.12));
}

.blitz-praat-tekst p {
    color: #626168;
    font-size: 1.06rem;
    line-height: 1.8;
}

.blitz-rustige-zin {
    margin-top: 24px !important;
    padding: 18px 22px;

    color: #694a8a !important;
    background-color: #f0e9f7;

    border-left: 6px solid #9574b9;
    border-radius: 0 17px 17px 0;

    font-weight: 800;
}


/* =========================================
   NA DE AANVAL
========================================= */

.erna-sectie {
    padding: 95px 20px;
    text-align: center;
    background-color: #fffdfb;
}

.erna-intro {
    max-width: 740px;
    margin: 0 auto 45px;

    color: #646168;
    line-height: 1.75;
}

.erna-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;

    width: min(100%, 1150px);
    margin: 0 auto;
}

.erna-kaart {
    padding: 32px 24px;

    background-color: #ffffff;
    border: 3px solid #d7c9e4;
    border-radius: 24px;

    box-shadow:
        0 12px 26px rgba(85, 65, 105, 0.07);
}

.erna-kaart span {
    display: block;
    margin-bottom: 15px;
    font-size: 2.7rem;
}

.erna-kaart h3 {
    margin: 0 0 12px;
    color: #694d86;
}

.erna-kaart p {
    margin: 0;
    color: #646168;
    line-height: 1.65;
}


/* =========================================
   BADGE
========================================= */

.blitz-badge-sectie {
    padding: 95px 20px;
    text-align: center;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(205, 184, 230, 0.3),
            transparent 36%
        ),
        #fdfbff;
}

.badge-kleine-titel {
    margin: 0 0 13px;

    color: #78569c;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.blitz-badge-sectie > h2 {
    margin-bottom: 42px;
}

.blitz-badge-kaart {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 40px;

    width: min(100%, 820px);
    margin: 0 auto;
    padding: 40px 48px;

    text-align: left;
    background-color: #ffffff;

    border: 3px solid #bca4d4;
    border-radius: 28px;

    box-shadow:
        0 16px 38px rgba(87, 61, 116, 0.13);
}

.blitz-badge-cirkel {
    display: grid;
    place-items: center;

    width: 160px;
    height: 160px;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #eee6f7 68%,
            #bda4d5 100%
        );

    border: 9px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 0 0 5px #aa8ac7,
        0 12px 24px rgba(83, 59, 110, 0.18);

    font-size: 4.5rem;
}

.blitz-badge-tekst h3 {
    margin: 0 0 12px;
    color: #684887;
    font-size: 2rem;
}

.blitz-badge-tekst p {
    margin: 0 0 12px;

    color: #626168;
    font-size: 1.05rem;
    line-height: 1.75;
}

.blitz-badge-tekst .badge-boodschap {
    color: #35664e;
    font-weight: 800;
}


/* =========================================
   AFSLUITING
========================================= */

.blitz-afsluiting {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: center;
    gap: 45px;

    width: min(92%, 1000px);
    margin: 90px auto;
    padding: 50px;

    background-color: #f0e9f7;
    border: 3px solid #d0bde1;
    border-radius: 30px;
}

.blitz-afsluiting img {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

.blitz-afsluiting p {
    color: #626168;
    font-size: 1.06rem;
    line-height: 1.75;
}


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

.blitz-footer {
    background:
        linear-gradient(
            180deg,
            #fbf9fe 0%,
            #eee8f5 100%
        );

    border-top: 1px solid #d7c8e5;
}

.blitz-footer h2 {
    color: #664783;
}

.blitz-footer .footer-boodschap {
    color: #6c6471;
}

.blitz-footer .footer-link {
    color: #ffffff;
    background-color: #8766ad;
    border-color: #8766ad;
}

.blitz-footer .footer-link:hover,
.blitz-footer .footer-link:focus {
    background-color: #715394;
    border-color: #715394;
}

.blitz-footer .footer-link-zacht {
    color: #715491;
    background-color: transparent;
    border-color: #bca7d0;
}

.blitz-footer .footer-link-zacht:hover,
.blitz-footer .footer-link-zacht:focus {
    color: #ffffff;
    background-color: #8766ad;
    border-color: #8766ad;
}

.blitz-footer .footer-copyright {
    color: #7b7082;
}