/* Font Card */
    @font-face{
        font-family:'Gilda Display';
        src:url('../minimalistic/Gilda_Display/GildaDisplay-Regular.ttf') format('truetype');
    }
    @font-face{
        font-family:'Nunito Sans';
        src:url('../minimalistic/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf') format('truetype');
    }

    :root {
        --color-primary: #000000;
        --color-text: #3d3d3d;
        --color-background: #FAF8F6;
        --font-gilda: 'Gilda Display', sans-serif;
        --font-nunito: 'Nunito Sans', sans-serif;
        --pw-accent: var(--color-primary);     /* zwart */
        --pw-ink: var(--color-text);           /* #3d3d3d */
        --pw-bg: var(--color-background);      /* #FAF8F6 */

        --pw-display: var(--font-gilda);       /* grote titels/namens */
        --pw-text: var(--font-nunito);         /* body, knoppen, labels */
    }

    /* Body Card */
    body {
        margin: 0;
        padding: 0;
        background: white;
        scroll-behavior: smooth;
    }

    /* Header & Navigatie Card */
    header {
        position: relative;
        z-index: 50;
        background: var(--color-background);
        padding: 0 20px;
    }

    nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* links – midden – rechts */
        align-items: center;
    }

    .header-container {
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* namen links */
        gap: 12px;
        padding: 10px 0;
    }

    .header-namen {
        position: relative;
        display: inline-block;
        font-size: 40px;
        color: var(--color-primary);
        margin-bottom: 10px;
        font-weight: 400;
        font-family: var(--font-gilda);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: -0.1em;
        white-space: nowrap; /* bij een lang menu viel "J & M" anders in drie regels */
    }
    
    .nav-toggle {
        font-size: 1.5rem;
        background: none;
        border: none;
        cursor: pointer;
        display: none;
        color: var(--color-primary);
    }

    /* --- PURE CSS 2-lijnige hamburger met animatie naar X --- */
    .nav-toggle {
        --size: 40px;          /* totale klikdoelgrootte */
        --line-w: 40px;        /* breedte van de lijnen */
        --line-h: 2px;         /* dikte van de lijnen (dun) */
        --gap: 6px;            /* tussenruimte tussen de 2 lijnen */
        --color: var(--color-primary);

        position: relative;
        display: inline-block;
        width: var(--size);
        height: var(--size);
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        outline-offset: 4px;
    }

    /* Lijnen worden getekend met ::before en ::after */
    .nav-toggle::before,
    .nav-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        width: var(--line-w);
        height: var(--line-h);
        background: var(--color);
        border-radius: 999px;
        transform-origin: center;
        transform: translateX(-50%);
        transition:
            transform 220ms ease,
            opacity 180ms ease,
            top 220ms ease,
            background-color 220ms ease;
        display: none;
    }

    /* Bovenste lijntje */
    .nav-toggle::before {
        top: calc(50% - (var(--gap) / 2) - var(--line-h));
    }

    /* Onderste lijntje */
    .nav-toggle::after {
        top: calc(50% + (var(--gap) / 2));
    }

    /* Hover/focus: subtiel meer ruimte (niet verplicht) */
    .nav-toggle:hover::before { top: calc(50% - (var(--gap) * 0.7) - var(--line-h)); }
    .nav-toggle:hover::after  { top: calc(50% + (var(--gap) * 0.7)); }

    /* GEOPEND = X (2 lijnen kruisen) */
    .nav-toggle.is-open::before {
        top: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
    .nav-toggle.is-open::after {
        top: 50%;
        transform: translateX(-50%) rotate(-45deg);
    }

    /* Optioneel: verander kleur in open staat */
    .nav-toggle.is-open::before,
    .nav-toggle.is-open::after {
        background-color: var(--color-primary);
    }

    /* Respecteer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .nav-toggle::before,
        .nav-toggle::after {
            transition: none;
        }
    }

    .nav-menu {
        grid-column: 2;
        justify-self: center;
        display: flex;
        /* Een lang menu (10+ pagina's) loopt in twee gecentreerde regels door in
           plaats van buiten het scherm; elk item blijft op één regel */
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        list-style: none;
        gap: 0 20px;
        margin: 0;
        padding: 0;
    }

    .nav-menu li {
        margin: 0 10px;
    }
    nav ul li a {
        color: var(--color-text);
        font-size: 12px;
        text-decoration: none;
        padding: 8px 12px;
        font-family: var(--font-nunito);
        letter-spacing: 0.20em;
        line-height: 28px;
        text-transform: uppercase;
        font-weight: 600;
        white-space: nowrap;
    }
    /* Acht of meer pagina's: compacter, zodat het menu op een gewoon scherm op
       één regel blijft in plaats van in twee drukke regels */
    .nav-menu:has(li:nth-child(8)) { gap: 0 4px; }
    .nav-menu:has(li:nth-child(8)) li { margin: 0 2px; }
    .nav-menu:has(li:nth-child(8)) li a { font-size: 11px; letter-spacing: 0.1em; padding: 8px 7px; }

    /* Hero Card */
    .hero-card{
        position: relative;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(12px, 2vw, 20px);
        margin-top: 35px;
    }

    .hero-card .hero-overlay{
        position: static;
        inset: auto;
        display: block;
        order: 1;
    }

    .hero-card :is(img, video){
        order: 2;
        display: block;
        width: min(1300px, 86%);
        height: 70vh !important;
        object-fit: cover;
        margin: 0 auto;
    }

    .hero-card .couple-names{
        font-family: var(--font-gilda);
        font-size: clamp(40px, 8vw, 72px);
        letter-spacing: 0.08em;
        color: var(--color-primary);
        margin: 0;
        text-transform: uppercase;
        font-weight: 400;
    }

    .hero-card .hero-overlay h2{
        margin-top: 0.5rem;
        font-size: clamp(18px, 2.5vw, 28px);
        color: #444;
        font-family: var(--font-nunito);
    }
   


    /* Title Card */
    .title-blok-h1{
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 50px;
        line-height: 60px;
        letter-spacing: 10%;
        font-style: normal;
        font-weight: 400;
        text-align: center;
    }
    .title-blok-h2{
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 35px;
        line-height: 45px;
        letter-spacing: 10%;
        font-style: normal;
        font-weight: 400;
        text-align: center;
    }
    .title-blok-h3{
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 10%;
        font-style: normal;
        font-weight: 400;
        text-align: center;
    }

    /* Tekst Card */
    .text-card {
        display: flex;
        justify-content: center;
    }
    .text-card .text-content {
        max-width: 860px;
        font-family: var(--font-nunito);
        color: var(--color-text);
        font-size: 17px;
        line-height: 28px;
        letter-spacing: 0%;
        font-weight: 300;
        text-align: center;
        padding: 0 16px;
    }
    .text-card .text-content h1 {
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 50px;
        line-height: 60px;
        letter-spacing: 10%;
        font-style: normal;
        font-weight: 400;
        text-align: center;
    }
    /* Lijsten in deze gecentreerde tekst: marker bij de regel houden;
       de default outside-marker hangt anders los aan de linkerrand
       van het volle-breedte blok terwijl de tekst centreert */
    .text-card .text-content ul,
    .text-card .text-content ol {
        list-style-position: inside;
        padding-left: 0;
        margin: 1em 0;
    }
    .text-card .text-content li {
        margin: 0.4em 0;
    }

    .title-text-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        text-align: center;
    }
    
    .title-text-grid h2 {
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 35px;
        line-height: 45px;
        letter-spacing: 0.05em;
        font-weight: 400;
        text-align: left;
        margin: 0;
    }
    .title-text-grid .text-content {
        font-family: var(--font-nunito);
        color: var(--color-text);
        font-size: 17px;
        line-height: 28px;
        font-weight: 300;
        text-align: left;
        max-width: 100%;
    }

    /* Quote Card */
    .quote-card {
        display: flex;
        justify-content: center;
    }
    .quote-card .quote-text blockquote{
        font-family: var(--font-gilda);
        color: var(--color-primary);
        font-size: 27px;
        font-weight: 400;
        text-align: center;
        letter-spacing: 0%;
        line-height: 37px;
    }

    .quote-text{
        max-width: 1440px;
        margin: 0 auto;
    }
    
    .quote-text h2 {
        font-family: var(--font-nunito);
        font-size: 13px;
        color: var(--color-primary);
        margin-top: 20px;
        text-align: center;
        text-transform: uppercase;
        position: relative;
        letter-spacing: 0.3em;
        padding-bottom: 20px;
    }
    .quote-card .quote-text blockquote::before {
        content: "";
        display: block;
        width: 240px;
        height: 100px;
        margin: 12px auto 0;
        background: url('/templates-assets/minimalistic/quote.png') no-repeat center;
        background-size: contain;
        transform: scaleX(-1);
        rotate: -12deg;
    }


    /* Grote foto Card */
    .grote-foto {
        width: 100%;
        height: auto;
    }
    .grote-foto h2 {
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-size: 35px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 10%;
        text-align: center;
        text-transform: uppercase;
    }
    .grote-foto img {
        margin-top: 35px;
        max-width: 1440px;
        margin: 35px auto 0 auto;
    }

    /* Foto + tekst Card */
    .foto-tekst{
        --bgShift: 125px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
    }

    .foto-tekst::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - var(--bgShift));
        right: 0;
        background: var(--color-background);
        z-index: 0;
    }

    .foto-tekst .image-side,
    .foto-tekst .text-side{
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .foto-tekst .image-side{
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
    }

    .foto-tekst .image-side img{
        width: 100%;
        height: 94%;
        object-fit: cover;
        aspect-ratio: 1 / 1;
    }

    .foto-tekst .text-side{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: 50px 70px;
        background: transparent;
    }

    .foto-tekst .text-side h2{
        color: var(--color-primary);
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 35px;
        line-height: 38px;
        text-transform: uppercase;
        text-align: left;
        max-width: 500px;
    }

    .foto-tekst .text-side .description{
        color: var(--color-text);
        font-family: var(--font-nunito);
        font-size: 17px;
        line-height: 28px;
        font-weight: 300;
        text-align: left;
        max-width: 500px;
    }

    @media (max-width: 768px){
        .foto-tekst{
            flex-direction: column;
        }
        .foto-tekst::before{
            display: none;
        }
    }


    /* Collage Card */
    /* ===== Basis ===== */
    .collage-grid{
    --tile-ratio: 4 / 5;     /* smalle portret-tegels */
    display: grid;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
    }

    /* Desktop default: 4 kolommen */
    .collage-grid{
    grid-template-columns: repeat(4, 1fr);
    }

    .collage-grid .tile{
    position: relative;
    aspect-ratio: var(--tile-ratio);
    overflow: hidden;
    }

    .collage-grid .tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    }

    /* Tablet (optioneel): 3 kolommen algemeen */
    @media (max-width: 1024px){
    .collage-grid{
        grid-template-columns: repeat(3, 1fr);
    }
    /* Als je l4 op tablet al 2 kolommen wilt, laat deze regel staan;
        anders kun je ’m weghalen. */
    .collage-grid.l4{
        grid-template-columns: repeat(2, 1fr);
    }
    }

    /* Telefoon: 2 kolommen voor l4 en l5 */
    @media (max-width: 640px){
    .collage-grid{
        gap: 12px;
        grid-template-columns: repeat(2, 1fr); /* algemene fallback */
    }

    /* expliciet voor zekerheid: l4 en l5 altijd 2 kolommen */
    .collage-grid.l4,
    .collage-grid.l5{
        grid-template-columns: repeat(2, 1fr);
    }

    /* optioneel: iets vriendelijkere hoogte op mobiel */
    .collage-grid .tile{
        aspect-ratio: var(--tile-ratio);
    }
    }

    /* Headline-styling */
    .collage-layout h2{
    font-family: var(--font-gilda);
    color: var(--color-primary);
    font-size: 35px;
    font-weight: 400;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    }

    
    /* ===== Schedule / Timeline (streepjes i.p.v. dots) ===== */
    .schedule-wrapper { position: relative; overflow: hidden; }

    .schedule-container {
        position: relative;
        z-index: 1;
        background-color: var(--color-background);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .schedule-heading {
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 35px;
        color: var(--color-primary);
        letter-spacing: .1em;
        text-transform: uppercase;
        margin: 40px auto 0;
    }

    /* Timeline + centrale lijn */
    .timeline{
        --line-color: #F0DFE0;
        --tick-color: var(--color-primary);
        --tick-width: 50px;    /* lengte van het streepje */
        --tick-offset: 36px;   /* verticale positie van het streepje */
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    /* Doorlopende verticale lijn in het midden */
    .timeline::before{
        content:"";
        position:absolute;
        inset: 0 auto 0 50%;
        width:1px;
        background: var(--color-primary);
        transform: translateX(-50%);
        z-index:0;
    }

    .timeline-item{
        position: relative;
        display: flex;
        align-items: flex-start;
        margin: 48px 0;
        min-height: 72px;
    }

    /* Links/rechts wisselen */
    .timeline-item:nth-child(odd){ justify-content: flex-end; } /* content links */
    .timeline-item:nth-child(even){ justify-content: flex-start; } /* content rechts */

    /* DOTS uitschakelen (we gebruiken streepjes) */
    .timeline-dot{ display:none; }

    /* Het korte streepje vanaf de middenlijn naar de content */
    .timeline-item::after{
        content:"";
        position:absolute;
        top: var(--tick-offset);
        height:1px;
        width: var(--tick-width);
        background: var(--color-primary);
        z-index:1;
    }

    .timeline-item:nth-child(even)::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Oneven items: ook centreren */
    .timeline-item:nth-child(odd)::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-content{
        position: relative;
        z-index:2;
        width:45%;
        padding: 0 24px;
        text-align: left;
    }
    .timeline-item:nth-child(even) .timeline-content{ text-align: right; }

    /* Typografie */
    .timeline-title{
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 24px;
        color: var(--color-text);
        margin: 0 0 6px 0;
    }

    .timeline-time{
        font-family: var(--font-nunito);
        font-size: 15px;
        letter-spacing: .2em;
        color: var(--color-text);
        margin: 0 0 12px 0;
        opacity:.8;
    }

    .timeline-description{
        font-family: var(--font-nunito);
        font-size: 17px;
        line-height: 28px;
        color: var(--color-text);
        margin: 0;
    }

    /* Laatste item: geen extra marge omlaag */
    .timeline-item.last{ margin-bottom: 0; }

    /* ===== Responsive ===== */
    @media (max-width: 768px){
        .timeline{ max-width: 640px; }
        .timeline-item{
            margin: 36px 0;
            justify-content: center;
            min-height: 0;
        }
        .timeline-content{
            width: 86%;
            padding: 0 16px;
            text-align: center !important;
        }
        /* Optie: streepjes verbergen op mobiel voor rust */
        .timeline-item::after{ display:none; }
    }


    /* Person Card */
    .person-card img{
        width: 302px;
        height: 360px;
        object-fit: cover;
        object-position: top;
    }

    .person-card h3{
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 30px;
        letter-spacing: 0em;
        text-align: left;
        color: var(--color-text);
    }

    .person-card p{
        font-family: var(--font-nunito);
        font-size: 16px;
        color: var(--color-text);
        font-weight: 400;
        letter-spacing: 0%;
        text-align: left;
        opacity: 0.8;
    }

    .person-card-wrapper:nth-child(even) img {
        margin-top: 40px;
    }



    /* Countdown Card */
    .card-countdown {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-countdown h2{
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 45px;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-primary);
        width: 40%;
        margin-bottom: 20px;
    }

    .countdown-timers {
        display: flex;
        gap: 2rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .countdown-value{
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 120px;
        letter-spacing: 0.1em;
        line-height: 1;
        color: var(--color-text);
        opacity: 0.2;
    }

    .countdown-label{
        font-family: var(--font-nunito);
        font-size: 12px;
        color: var(--color-text);
        text-transform: uppercase;
        letter-spacing: 0.15em;

        /* Nieuw: label in het midden van het getal */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none; /* klikken blijft op het getal/omgeving */
        margin: 0;            /* voorkomt extra flow-ruimte */
    }

    .countdown-unit {
        position: relative;
        padding: 0 2rem;
    }


    /* Map */

    .forever-map {
        max-width: 1440px;
        margin: 0 auto;
    }

    /* Countdown Map Card */
    .countdown-map{
        max-width: 1440px;
        height: 600px;
        margin: 0 auto;
        position: relative;
        --bgShift: 125px;
    }
    .countdown-map::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: calc(50% - var(--bgShift));
        background: var(--color-background);
        z-index: 0;
    }

    .countdown-map > *{
        position: relative;
        z-index: 1;
    }

    .countdown-map .countdown{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
    }

    .countdown-map .map{
        width: 50%;
    }

    .map-link-wrapper {
        margin-top: 12px;
        text-align: center;
    }

    .map-link {
        font-family: var(--font-nunito);
        font-size: 14px;
        text-decoration: underline;
        color: var(--color-primary);
    }

    .countdown-map .map .forever-map{
        height: 100%;
    }

    .countdown-map .countdown h2{
        font-family: var(--font-gilda);
        width: 70%;
        font-weight: 400;
        font-size: 40px;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-primary);
        margin-bottom: 10px;
    }

    .countdown-days{
        font-family: var(--font-nunito);
        font-weight: 400;
        font-size: 21px;
        line-height: 25px;
        color: var(--color-text);
        letter-spacing: 0em;
        width: 70%;
    }

    .countdown-map .live-countdown .countdown-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        justify-items: center;
        margin-top: 20px;
    }

    .countdown-map .live-countdown .countdown-item {
        background-color: white;
        width: 160px;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .countdown-map .live-countdown .countdown-item .countdown-number {
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 95px;
        line-height: 1;
        color: var(--color-text);
        opacity: 0.2;   
    }

    .countdown-map .live-countdown .countdown-item .countdown-text {
        font-family: var(--font-nunito);
        font-size: 12px;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        margin: 0;
    }

    @media (max-width: 768px){
        .countdown-map::before{ display: none; }
    }

    /* Form Card */

    .card-form{
        width: 70%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form-title::before{
        content: "";
        display: block;
        width: 130px;
        height: 90px;
        background: url('/templates-assets/minimalistic/contact.png') no-repeat center;
        background-size: contain;
    }

    .form-title{
        font-family: var(--font-gilda);
        font-weight: 400;
        font-size: 45px;
        letter-spacing: 0em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    .form-intro{
        font-family: var(--font-nunito);
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        color: var(--color-text);
        letter-spacing: 0em;
        margin-bottom: 50px;
    }

    .form-fields{
        display: flex;
        flex-wrap: wrap;
        width: 70%;
        justify-content: center;
    }

    .form-label {
        display: block;
        font-size: 12px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    .form-input,
    .form-select {
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--color-primary);
        background: transparent;
        font-size: 15px;
        font-family: var(--font-nunito);
        color: var(--color-text);
    }

    .form-textarea {
        width: 100%;
        border: 1px solid var(--color-primary);
        background: transparent;
        font-size: 15px;
        font-family: var(--font-nunito);
        color: var(--color-text);
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        outline: none;
    }

    .form-required {
        color: var(--color-text);
        margin-left: 2px;
    }


    .form-group{
        width: 90%;
        margin-bottom: 25px;
        text-align: left;
    }

    .form-group.full-width{
        width: 90%;
        flex: 0 0 90%;
    }

    .form-success{
        font-family: var(--font-nunito);
        color: var(--color-text);
        border: 1px solid var(--color-primary);
        width: 63%;
        padding: 7px 0;
        font-size: 16px;
    }

    /* Verwijdert alleen de browser focus-styling */
    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Inputs behouden hun eigen border-bottom styling */
    input,
    textarea,
    select {
        border: none;
        border-bottom: 1px solid var(--color-primary);
        background: transparent;
        border-radius: 0;
    }

    /* Focus mag geen blauwe lijn geven, maar behoudt border-bottom */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--color-primary); /* blijft hetzelfde */
    }

    /* Safari/iOS tap highlight verwijderen */
    input,
    textarea,
    select,
    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    /* Firefox focus rand uitschakelen */
    input:-moz-focusring,
    textarea:-moz-focusring,
    select:-moz-focusring {
        outline: none !important;
    }
        

    .form-submit{
        background-color: var(--color-primary);
        color: white;
        font-family: var(--font-nunito);
        padding: 12px 50px;
        border-radius: 0px;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 20px;
    }

    /* Foutmelding Card */
    .error-text {
        color: #ef4444;
    }

    /* Footer Card */
    footer {
        background-color: var(--color-background);
        font-family: var(--font-nunito);
        text-align: center;
        padding: 15px;
        font-size: 0.9rem;
        color: var(--color-primary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.2em;
    }

    /* Password Card */
.password-wrapper{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pw-bg) 85%, #ffffff), #ffffff);
  animation: fadeIn .6s ease;
}

/* 3) Kaart */
.password-card{
  background:#fff;
  width:100%;
  max-width:520px;
  padding: 2.25rem 2rem;
  border-radius:12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  text-align:center;
}

/* 4) Typografie */
.couple-names{
  font-family: var(--pw-display);
  font-weight:400;
  letter-spacing:.06em;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--pw-accent);
  margin: 0 0 .25rem;
  line-height:1.1;
}
.subtitle{
  font-family: var(--pw-text);
  font-size: 1rem;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: var(--pw-ink);
  opacity:.8;
  margin: 0 0 .75rem;
}
.info-text{
  font-family: var(--pw-text);
  font-size: .95rem;
  color: var(--pw-ink);
  opacity:.75;
  margin: 0 0 1.25rem;
}

/* 5) Form */
.password-card form{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  width:100%;
}

.password-card input[type="password"]{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb, var(--pw-ink) 35%, #ffffff);
  border-radius:10px;
  background:#fff;
  font-family: var(--pw-text);
  font-size:1rem;
  color: var(--pw-ink);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing:border-box;
}
.password-card input[type="password"]::placeholder{
  color: color-mix(in srgb, var(--pw-ink) 55%, #ffffff);
}
.password-card input[type="password"]:hover{
  border-color: color-mix(in srgb, var(--pw-ink) 55%, #ffffff);
}
.password-card input[type="password"]:focus{
  border-color: var(--pw-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-accent) 18%, transparent);
}

.password-card button[type="submit"]{
  width:100%;
  padding:.9rem 1rem;
  border:none;
  border-radius:10px;
  background: var(--pw-accent);
  color:#fff;
  font-family: var(--pw-text);
  font-weight:700;
  letter-spacing:.06em;
  font-size:1rem;
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.password-card button[type="submit"]:hover{ filter: brightness(1.02); }
.password-card button[type="submit"]:active{ transform: translateY(1px); }

/* 6) Foutmelding */
.error-text{
  color:#e63946;
  font-family: var(--pw-text);
  font-size:.95rem;
  margin: 0 0 .5rem;
}

/* 7) Animatie util (HTML gebruikt al fade-in) */
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.animate-fade-in{ animation: fadeIn .6s ease; }

/* 8) Mobile */
@media (max-width:640px){
  .password-wrapper{ padding: 1.25rem; }
  .password-card{ padding: 1.5rem 1.1rem; border-radius:10px; }
}


    @media (max-width: 768px) {
        nav{
            display: flex;
        }
        body{
            overflow-x: hidden;
        }

        .nav-toggle::before,
        .nav-toggle::after {
            display: block;
        }
        .header-namen {
            font-size: 30px;
        }

        .header-namen::after {
            width: 45px;
            height: 57px;
        }

        .header-container {
            justify-content: space-between;
            width: 100%;
        }
        nav ul li a {
            font-size: 1rem;
            padding: 0 20px;
        }
        .nav-toggle {
            display: block;
        }
        .nav-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 100;
            background: var(--color-background);
            display: none;
            flex-direction: column;
            text-align: left;
            padding: 10px 0;
            width: 100%;
        }
        .nav-menu.active {
            display: flex;
        }
        .nav-menu li {
            margin: 10px 0;
        }
        main {
            min-height: 100vh;
        }

        .container {
            background-position: center top;
            background-size: cover;
        }
       
        .hero-card .couple-names {
            font-size: 50px;
        }

        .hero-card .hero-title{
            font-size: 30px;
        }

        /* Mobiele kopteksten — voorkom verspringen */
        .title-blok-h1, .text-card .text-content h1 { font-size: 32px; line-height: 40px; }
        .title-blok-h2 { font-size: 26px; line-height: 34px; }
        .title-blok-h3 { font-size: 20px; line-height: 28px; }
        .title-text-grid h2 { font-size: 26px; line-height: 34px; }
        .foto-tekst .text-side h2 { font-size: 26px; line-height: 34px; }
        .grote-foto h2 { font-size: 26px; line-height: 34px; }
        .collage-layout h2 { font-size: 26px; }
        .schedule-heading { font-size: 26px; }
        .form-title { font-size: 30px; }
        .person-card h3 { font-size: 24px; }
        .quote-card .quote-text blockquote { font-size: 22px; line-height: 30px; }

        /* Mobiele side-padding */
        .title-blok-h1,
        .title-blok-h2,
        .title-blok-h3 {
            padding: 0 16px;
        }

        .quote-text {
            padding: 0 16px;
        }

        .card-form {
            width: 90%;
            padding: 0 16px;
        }

        .form-fields {
            width: 100%;
        }

        .form-group {
            width: 100%;
        }

        .people-grid,
        .people-grid + div {
            padding: 0 16px;
        }

        .schedule-container {
            padding: 0 16px;
        }

        .card-countdown {
            padding: 48px 16px;
        }

        .countdown-timers {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px 8px;
            max-width: 360px;
            margin-left: auto;
            margin-right: auto;
        }

        .googlemaps-card {
            padding: 0 16px;
        }

        .card-guestbook {
            padding: 0 16px;
        }

        .title-text-section h2, .title-text-section .text-content p{
            text-align: center;
        }

        .grote-foto{
            width: min(1300px, 86%) !important;
        }

        .foto-tekst{
            flex-direction: column;
        }

        .foto-tekst .image-side img{
            width: 100%;
        }

        .foto-tekst .image-side {
            padding: 16px;
        }

        .foto-tekst .text-side {
            padding: 30px 16px;
            text-align: center;
            align-items: center;
        }

        .timeline::before{
            display: none;
        }
        .schedule-wrapper::after{
            width: 200px;
            height: 250px;
        }

        .timeline-dot{
            display: none;
        }

        .timeline-item::before {
            display: none;
        }

        .timeline-item:nth-child(odd), .timeline-item {
            justify-content: center;
        }

        .timeline-content {
            width: 100%;
            padding: 0 16px;
            text-align: left !important;
        }

        .forever-map{
            width: min(1300px, 86%) !important;
        }

        .card-countdown h2 {
            width: 100%;
        }

        .countdown-unit {
            padding: 0;
        }

        .countdown-map {
            flex-direction: column;
        }

        .countdown-map .countdown{
            width: 100%;
        }

        .countdown-map .map{
            width: 100%;
            padding: 0 16px;
        }

        .countdown-value{
            font-size: 80px;
        }

        .countdown-unit:not(:last-child)::after {
            display: none;
        }

        .card-countdown h2{
            font-size: 28px;
        }
        
        /* Columns: Countdown + Map (mobile) */
        .countdown-map {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            height: unset !important; 
        }

        .countdown-map .countdown,
        .countdown-map .map {
            width: 100%;
        }

        .countdown-map .map{
            height: 400px;
        }

        .countdown-map .countdown {
            padding: 24px 16px;
        }

        .countdown-map .countdown h2 {
            width: 100%;
            font-size: 28px;
            line-height: 1.25;
            margin: 0 auto 8px;
            text-align: center;
        }

        .countdown-days {
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            text-align: center;
            margin: 4px auto 0;
        }

        .countdown-map .live-countdown .countdown-wrapper {
            gap: 12px;
            margin-top: 16px;
        }

        .countdown-map .live-countdown .countdown-item {
            width: 125px;
            height: 125px;
        }

        .countdown-map .live-countdown .countdown-item .countdown-text {
            font-size: 11px;
            letter-spacing: 0.12em;
        }

        .map .forever-map {
            width: 100% !important;
        }

        /* Map iframe hoogte op mobiel */
        .countdown-map .map iframe {
            width: 100%;
            height: 280px; /* pas aan naar 240-320 als nodig */
            border: 0;
            display: block;
        }

        .form-fields{
            display: flex;
            flex-direction: column;
        }

        .card-form::after {
            display: none;
        }

        .card-form {
            width: 90%;
        }

        .form-group {
            width: 100%;
        }

        .form-group.full-width{
            width: 100%;
        }

    }
/* Text input krijgt dezelfde styling als password input */
.password-card input[type="text"]{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb, var(--pw-ink) 35%, #ffffff);
  border-radius:10px;
  background:#fff;
  font-family: var(--pw-text);
  font-size:1rem;
  color: var(--pw-ink);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing:border-box;
}
.password-card input[type="text"]::placeholder{
  color: color-mix(in srgb, var(--pw-ink) 55%, #ffffff);
}
.password-card input[type="text"]:hover{
  border-color: color-mix(in srgb, var(--pw-ink) 55%, #ffffff);
}
.password-card input[type="text"]:focus{
  border-color: var(--pw-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-accent) 18%, transparent);
}

/* Button[type="button"] krijgt dezelfde styling als submit */
.password-card button[type="button"]{
  width:100%;
  padding:.9rem 1rem;
  border:none;
  border-radius:10px;
  background: var(--pw-accent);
  color:#fff;
  font-family: var(--pw-text);
  font-weight:700;
  letter-spacing:.06em;
  font-size:1rem;
  cursor:pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.password-card button[type="button"]:hover{ filter: brightness(1.02); }
.password-card button[type="button"]:active{ transform: translateY(1px); }

/* Foutmelding onder invite input */
#inviteError.error-text{
  margin-top: 10px;
  text-align: left;
}

/* ── Hide decoration toggles ──────────────────────────────────────────── */
.hide-deco-namen .header-namen { display: none !important; }
.hide-deco-quote .quote-card .quote-text blockquote::before { display: none !important; }
.hide-deco-form .form-title::before { display: none !important; }
/* Volledige foto tonen (niet bijsnijden) - opt-in per image-card (full_image) */
.image-card .grote-foto img.full-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Volledige foto ook voor foto-tekst en collage (full_image) */
.image-card .foto-tekst .image-side img.full-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
/* "Toon de hele foto" in de collage: leg elke rij op dezelfde hoogte en laat
   de breedte de verhouding volgen (net als een fotogalerij). Zo staan liggende
   en staande foto's even groot in beeld, in plaats van dat liggende foto's
   klein wegvallen. Niets wordt bijgesneden; de hele foto blijft zichtbaar. */
.collage-grid.full-photos {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    justify-content: center;
    gap: 12px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
}
.collage-grid.full-photos .tile {
    grid-area: auto !important;
    aspect-ratio: auto !important;
    height: clamp(200px, 24vw, 340px);
    max-height: none !important;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 10px;
}
.collage-grid.full-photos .tile img {
    position: static !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 640px) {
    .collage-grid.full-photos .tile { height: auto; width: 100%; }
    .collage-grid.full-photos .tile img { width: 100%; height: auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   EIGEN NAVIGATIE (aug 2026) — drie strakke haarlijnen (midden via
   background), geen franje; mobiel menu gecentreerd.
   ══════════════════════════════════════════════════════════════════ */
.nav-toggle {
    width: 42px; height: 42px; border: 0; position: relative; cursor: pointer;
    background: linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 26px 1px no-repeat;
}
.nav-toggle::before,
.nav-toggle::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 26px; height: 1px; border-radius: 0; background: var(--color-primary);
    transition: top 0.18s ease, transform 0.18s ease;
}
.nav-toggle::before { top: calc(50% - 8px); }
.nav-toggle::after  { top: calc(50% + 7px); }
.nav-toggle:hover::before { top: calc(50% - 10px); }
.nav-toggle:hover::after  { top: calc(50% + 9px); }
.nav-toggle.is-open { background-image: none; }
.nav-toggle.is-open::before { top: 50%; transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-open::after  { top: 50%; transform: translateX(-50%) rotate(-45deg); }
/* Bestaand template-eigen gebrek: .nav-toggle werd hierboven (regel 69/79)
   twee keer onvoorwaardelijk gedefinieerd, waarbij de tweede regel de eerste
   z'n display:none stilletjes weer op inline-block zette — de knop was dus
   altijd aanwezig, ook op desktop, alleen onzichtbaar omdat de oude lijntjes
   alleen via ::before/::after (mobiel-gated) tekenden. Dit nieuwe icoon tekent
   wél op .nav-toggle zelf, dus zonder deze regel lekt hij door op desktop. */
@media (min-width: 769px) {
    .nav-toggle { display: none; }
}
@media (max-width: 768px) {
    .nav-menu { text-align: center; align-items: center; padding: 18px 16px 22px; border-top: 1px solid rgba(0, 0, 0, 0.14); box-shadow: 0 24px 32px -26px rgba(0, 0, 0, 0.28); }
    .nav-menu li { margin: 4px 0; }
}