/* Responsive
   Je eigen layout.css en style.css zijn voor een groot scherm gemaakt.
   Dit bestand past ze aan voor kleinere schermen, van groot naar klein:

   1. Overal                  basis die voor elk scherm geldt
   2. Tot 1280px breed        kleine laptops: minder witruimte
   3. Tot 1024px breed        tablets: menuknop, secties onder elkaar
   4. Tot 600px breed         telefoons: kleinere koppen en marges

   Een regel in een kleiner blok overschrijft dezelfde regel in een groter blok. */


/* ---------------------------------------------------------
   1. Overal
   --------------------------------------------------------- */

/* De vaste minimale breedte van 1200px uit layout.css loslaten */
body {
    min-width: 0;
}

img {
    max-width: 100%;
}

/* De menuknop is alleen nodig op kleine schermen */
.menu-knop {
    display: none;
}

/* Op een telefoon is de adresbalk soms wel en soms niet zichtbaar.
   svh rekent met de kleinste schermhoogte, zodat de etalage altijd past. */
.etalage {
    height: calc(100svh - 104px);
}

/* Geen hover op een touchscreen: bijschriften in het portfolio altijd tonen */
@media (hover: none) {
    .portfolio-item figcaption {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   2. Tot 1280px breed: kleine laptops
   --------------------------------------------------------- */
@media (max-width: 1280px) {

    header,
    .over-juul,
    .diensten,
    .werkwijze,
    .afsluiter,
    .contact-inhoud,
    .footer-inhoud,
    .copyright {
        padding-left: 48px;
        padding-right: 48px;
    }

    .pagina-intro,
    .pagina-tekst,
    .project-terug,
    .project-inhoud,
    .categorie h2 {
        padding-left: 48px;
        padding-right: 48px;
    }

    .filter {
        margin-left: 48px;
        margin-right: 48px;
    }

    .etalage-tekst {
        left: 48px;
    }

    .etalage-context {
        right: 48px;
    }

    .over-juul {
        gap: 56px;
    }

    /* Drie diensten die meebewegen met de breedte in plaats van 420px vast */
    .diensten-rij {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .quote-blok {
        left: 48px;
        width: 560px;
    }

    .afsluiter h2 {
        font-size: 120px;
    }

    .pagina-intro h1 {
        font-size: 140px;
    }
}


/* ---------------------------------------------------------
   3. Tot 1024px breed: tablets
   --------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Header en menuknop */
    header {
        position: relative;
        z-index: 10;
        height: 80px;
    }

    .logo img {
        height: 48px;
    }

    .logo span {
        font-size: 26px;
    }

    /* Hamburgermenu: drie streepjes die een kruisje worden als het menu open is */
    .menu-knop {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: -10px;
        padding: 0;
        background-color: transparent;
        border: 0;
        border-radius: 5px;
        cursor: pointer;
    }

    .menu-knop:focus-visible {
        outline: 2px solid #fbd200;
        outline-offset: 2px;
    }

    .hamburger {
        position: relative;
        display: block;
        width: 28px;
        height: 20px;
    }

    .hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #fafafa;
        border-radius: 2px;
        transition: top 0.3s, transform 0.3s, opacity 0.2s;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 8.5px;
    }

    .hamburger span:nth-child(3) {
        top: 17px;
    }

    .menu-knop[aria-expanded="true"] .hamburger span:nth-child(1) {
        top: 8.5px;
        transform: rotate(45deg);
    }

    .menu-knop[aria-expanded="true"] .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .menu-knop[aria-expanded="true"] .hamburger span:nth-child(3) {
        top: 8.5px;
        transform: rotate(-45deg);
    }

    /* Het menu klapt open onder de header */
    .hoofdnavigatie {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 8px 48px 32px;
        background-color: #12294f;
        border-top: 1px solid rgba(250, 250, 250, 0.15);
    }

    .hoofdnavigatie.open {
        display: block;
    }

    .hoofdnavigatie li {
        display: block;
        margin-left: 0;
    }

    .hoofdnavigatie a {
        display: block;
        padding: 14px 0;
        font-size: 18px;
    }

    .hoofdnavigatie a.knop-contact,
    .hoofdnavigatie .knop-contact > a {
        display: inline-block;
        margin-top: 12px;
        padding: 14px 24px;
    }

    /* Etalage */
    .etalage {
        height: calc(100svh - 80px);
    }

    .etalage-klein {
        height: 420px;
    }

    .etalage-tekst {
        right: 48px;
    }

    .etalage-tekst h1 {
        font-size: 64px;
    }

    .etalage-klein .etalage-tekst h1,
    .single-project .etalage-tekst h1 {
        font-size: 72px;
    }

    /* Koppen boven secties onder de tekst in plaats van ernaast */
    .sectie-kop,
    .pagina-intro,
    .afsluiter {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .sectie-kop {
        margin-bottom: 72px;
    }

    .sectie-kop h2,
    .werkwijze h2 {
        font-size: 72px;
    }

    /* Over Juul: foto boven de tekst */
    .over-juul {
        flex-direction: column;
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .over-juul img {
        width: 100%;
        max-width: 480px;
        height: 520px;
    }

    .over-juul-tekst {
        padding-top: 0;
    }

    .over-juul h2 {
        font-size: 56px;
    }

    /* Diensten: onder elkaar, zonder de trapsgewijze verspringing */
    .diensten {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .diensten-rij {
        grid-template-columns: 1fr;
        gap: 96px;
        max-width: 560px;
    }

    .dienst:nth-child(2),
    .dienst:nth-child(3) {
        margin-top: 0;
    }

    /* Werkwijze: de tijdlijn wordt verticaal */
    .werkwijze {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .tijdlijn {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tijdlijn::before {
        top: 40px;
        bottom: 40px;
        left: 39px;
        right: auto;
        border-top: 0;
        border-left: 2px solid #fbd200;
    }

    .tijdlijn li {
        min-height: 80px;
        padding-left: 112px;
    }

    .tijdlijn-nummer {
        position: absolute;
        top: 0;
        left: 0;
    }

    .tijdlijn h3 {
        margin-top: 10px;
    }

    .tijdlijn p br {
        display: none;
    }

    /* Testimonial: foto boven, quote eroverheen geschoven */
    .testimonial {
        height: auto;
        padding-bottom: 72px;
    }

    .testimonial img {
        position: static;
        display: block;
        width: 100%;
        height: 420px;
    }

    .quote-blok {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: -96px 48px 0;
        padding: 72px 40px 40px;
    }

    .quote-blok p {
        font-size: 40px;
    }

    .quote-blok::before {
        top: -45px;
        font-size: 180px;
    }

    /* Afsluiter */
    .afsluiter {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .afsluiter h2 {
        font-size: 96px;
    }

    /* Portfolio */
    .pagina-intro {
        padding-top: 80px;
    }

    .pagina-intro h1 {
        font-size: 110px;
    }

    .filter {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .filter ul {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 32px;
    }

    .filter li {
        margin-right: 0;
    }

    .categorie {
        padding-bottom: 80px;
    }

    .categorie h2 {
        font-size: 56px;
    }

    .portfolio-item {
        flex-basis: 50%;
    }

    .portfolio-item img {
        height: 380px;
    }

    /* Contact: formulier en contactkaart onder elkaar */
    .contact-inhoud {
        flex-direction: column;
        gap: 56px;
        padding-top: 64px;
        padding-bottom: 96px;
    }

    .formulier-blok,
    .contactkaart {
        width: 100%;
        box-sizing: border-box;
    }

    .contactkaart {
        margin-top: 0;
    }

    /* Footer: kolommen in een raster dat doorloopt */
    .footer-inhoud {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .footer-logo img {
        height: 88px;
    }

    .footer-socials {
        display: flex;
        gap: 20px;
    }

    .footer-socials img {
        margin-bottom: 0;
    }

    /* Tekst- en projectpagina's */
    .project-inhoud {
        padding-bottom: 96px;
    }

    .project-inhoud h2 {
        font-size: 44px;
    }
}


/* ---------------------------------------------------------
   4. Tot 600px breed: telefoons
   --------------------------------------------------------- */
@media (max-width: 600px) {

    body {
        font-size: 17px;
    }

    header,
    .over-juul,
    .diensten,
    .werkwijze,
    .afsluiter,
    .contact-inhoud,
    .footer-inhoud,
    .copyright,
    .pagina-intro,
    .pagina-tekst,
    .project-terug,
    .project-inhoud,
    .categorie h2 {
        padding-left: 24px;
        padding-right: 24px;
    }

    .filter {
        margin-left: 24px;
        margin-right: 24px;
        padding-left: 0;
    }

    /* Header */
    header {
        height: 72px;
    }

    .logo img {
        height: 40px;
    }

    .logo span {
        margin-left: 12px;
        font-size: 22px;
    }

    .hoofdnavigatie {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Etalage */
    .etalage {
        height: calc(100svh - 72px);
        min-height: 520px;
    }

    .etalage-klein {
        height: 360px;
        min-height: 0;
    }

    .etalage::after {
        background: linear-gradient(to top, rgba(18, 41, 79, 0.85), rgba(18, 41, 79, 0.15) 70%);
    }

    .etalage-tekst {
        left: 24px;
        right: 24px;
        bottom: 64px;
    }

    .etalage-tekst h1 {
        font-size: 48px;
    }

    .etalage-tekst h1 br {
        display: none;
    }

    .etalage-tekst p {
        margin-bottom: 24px;
    }

    .etalage-klein .etalage-tekst h1,
    .single-project .etalage-tekst h1 {
        font-size: 56px;
    }

    .etalage-context {
        left: 24px;
        right: 24px;
        bottom: 20px;
        font-size: 13px;
    }

    /* Secties */
    .over-juul,
    .diensten,
    .werkwijze,
    .afsluiter {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .sectie-kop {
        margin-bottom: 64px;
    }

    .sectie-kop h2,
    .werkwijze h2 {
        font-size: 56px;
    }

    .over-juul img {
        max-width: none;
        height: 400px;
    }

    .over-juul h2 {
        font-size: 44px;
    }

    .twee-kolommen {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .diensten-rij {
        gap: 88px;
    }

    .dienst-nummer {
        top: -52px;
        left: -4px;
        font-size: 88px;
    }

    .dienst-foto > img {
        height: 300px;
    }

    .dienst h3 {
        font-size: 36px;
    }

    .tijdlijn li {
        padding-left: 96px;
    }

    .testimonial img {
        height: 300px;
    }

    .quote-blok {
        margin: -64px 24px 0;
        padding: 56px 24px 28px;
    }

    .quote-blok p {
        font-size: 30px;
    }

    .quote-blok::before {
        top: -32px;
        left: 20px;
        font-size: 140px;
    }

    .afsluiter h2 {
        font-size: 72px;
    }

    .afsluiter h2 br,
    .afsluiter-tekst p br {
        display: none;
    }

    /* Portfolio: een foto en een stukje van de volgende */
    .pagina-intro {
        padding-top: 56px;
    }

    .pagina-intro h1 {
        font-size: 80px;
    }

    .filter {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .categorie h2 {
        font-size: 44px;
    }

    .sleep-hint {
        display: block;
        margin: 8px 0 0;
    }

    .portfolio-item {
        flex-basis: 85%;
    }

    .portfolio-item img {
        height: 340px;
    }

    .portfolio-item figcaption {
        padding: 20px;
        font-size: 28px;
    }

    /* Contactformulier in één kolom */
    .formulier {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .veld-breed {
        grid-column: 1 / -1;
    }

    .formulier-onderkant {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .knop-versturen {
        width: 100%;
    }

    .contactkaart {
        padding: 24px;
    }

    /* Footer */
    .footer-inhoud {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .footer-logo img {
        height: 72px;
    }

    /* Tekst- en projectpagina's */
    .pagina-tekst {
        padding-top: 40px;
        padding-bottom: 72px;
    }

    .pagina-tekst h2 {
        font-size: 32px;
    }

    .project-inhoud > p {
        font-size: 18px;
    }

    .project-inhoud h2 {
        font-size: 36px;
    }
}


/* Bezoekers die minder beweging willen: het kruisje verschijnt zonder animatie */
@media (prefers-reduced-motion: reduce) {
    .hamburger span {
        transition: none;
    }
}

/* ---------------------------------------------------------
   Tabellen in tekst- en projectpagina's
   --------------------------------------------------------- */

/* De tabel over de volle breedte van de tekst, zonder inspringing */
.pagina-tekst .wp-block-table,
.project-inhoud .wp-block-table {
    margin: 32px 0;
}

/* Rustige tabel: links uitgelijnd, tekst bovenaan elke cel, dunne lijnen */
.pagina-tekst table,
.project-inhoud table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
}

.pagina-tekst .wp-block-table thead,
.project-inhoud .wp-block-table thead {
    border-bottom: 0;
}

.pagina-tekst th,
.pagina-tekst td,
.project-inhoud th,
.project-inhoud td {
    padding: 14px 24px 14px 0;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid #c8cdd8;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

.pagina-tekst th,
.project-inhoud th {
    font-weight: bold;
    border-bottom: 2px solid #12294f;
}

/* Telefoons: elke rij wordt een blok onder elkaar */
@media (max-width: 600px) {

    .tabel-gestapeld,
    .tabel-gestapeld tbody,
    .tabel-gestapeld tr,
    .tabel-gestapeld td {
        display: block;
        width: 100%;
    }

    /* De kopregel is niet meer nodig: de kolomnamen staan nu bij elke cel */
    .tabel-gestapeld thead,
    .tabel-gestapeld .tabel-kop {
        display: none;
    }

    .tabel-gestapeld tr {
        padding: 20px 0;
        border-bottom: 1px solid #c8cdd8;
    }

    .pagina-tekst .tabel-gestapeld td,
    .project-inhoud .tabel-gestapeld td {
        padding: 0 0 12px;
        border: 0;
    }

    /* De eerste cel is de titel van het blok */
    .pagina-tekst .tabel-gestapeld td:first-child,
    .project-inhoud .tabel-gestapeld td:first-child {
        padding-bottom: 14px;
        font-size: 18px;
        font-weight: bold;
    }

    /* De kolomnaam klein boven de inhoud van elke cel */
    .tabel-gestapeld td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.5px;
        color: #4a6386;
    }

    .tabel-gestapeld td:first-child::before {
        display: none;
    }
}


/* Footer op telefoons: alles in het midden */
@media (max-width: 600px) {

    .footer-inhoud,
    .copyright {
        text-align: center;
    }

    .footer-logo img {
        margin: 0 auto;
    }

    .footer-socials {
        justify-content: center;
    }
}

/* Titels van tekstpagina's, zoals de privacyverklaring */
.pagina-intro-tekst h1 {
    font-size: 96px;
}

/* Lange woorden in koppen mogen afbreken in plaats van buiten beeld te lopen */
h1,
h2 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Formuliervelden mogen smaller worden dan hun inhoud */
.veld {
    min-width: 0;
}

/* Het datumveld op iPhone even breed als de andere velden */
.veld input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    min-height: 48px;
}

.veld input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

@media (max-width: 1024px) {
    .pagina-intro-tekst h1 {
        font-size: 72px;
    }
}

@media (max-width: 600px) {
    .pagina-intro-tekst h1 {
        font-size: 44px;
    }
}