/* Font Declaraties */
@font-face {
    font-family: 'NPONovaText-Regular';
    src: url('fonts/NPONovaText-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NPONovaText-Bold';
    src: url('fonts/NPONovaText-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NPONovaText-Italic';
    src: url('fonts/NPONovaText-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* BELANGRIJK: Controleer DIT PAD en de EXACTE BESTANDSNAAM! */
@font-face {
    font-family: 'RuuddeWild';
    src: url('fonts/Ruud de Wild Font[3].ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Algemene styling */
:root {
    --primary-color: #FF5733; /* Een oranje/rood tint, typisch voor 'zon' */
    --secondary-color: #333;
    --text-color: #333;
    --light-text-color: #666;
    --white: #fff;
    --dark-bg: #222; /* Nieuwe variabele voor donkere achtergrond */
    --dark-text: #eee; /* Nieuwe variabele voor lichte tekst op donkere achtergrond */
    --border-radius: 10px; /* Iets kleinere radius */
    --box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Iets subtielere schaduw */
}

html {
    box-sizing: border-box; /* Belangrijk: voorkomt dat padding/border de breedte vergroten */
}
*, *::before, *::after {
    box-sizing: inherit;
}


body {
    font-family: 'NPONovaText-Regular', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    line-height: 1.5; /* Iets compacter lijnhoogte */
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background: url('images/persfoto.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative;
    overflow-x: hidden; /* Zorg ervoor dat de body geen horizontale scrollbar krijgt */
}

/* Overlay voor blur en verloop */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px); /* Iets minder blur */
    -webkit-backdrop-filter: blur(6px);
    background: linear-gradient(to bottom, rgba(255, 87, 51, 0.15), rgba(255, 195, 0, 0.15), rgba(255, 255, 255, 0.6)); /* Subtieler verloop */
    z-index: -1;
}

/* De content-wrapper is de container voor alle hoofdcontent, inclusief de kolommen */
.content-wrapper {
    max-width: 1100px; /* Iets kleiner maken */
    margin: 30px auto; /* Iets minder marge */
    padding: 0 20px; /* Iets minder horizontale padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Iets minder ruimte tussen hoofdsecties */
}

/* Visually Hidden voor toegankelijkheid */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Header Styling */
.main-header {
    background-color: var(--white);
    padding: 10px 20px; /* Iets minder padding */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07); /* Subtielere schaduw */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--primary-color); /* Dünnerer Rand */
}

/* Groepering voor logo en titel */
.logo-and-title {
    display: flex;
    align-items: center;
}

.main-header .logo {
    height: 40px; /* Iets kleiner logo */
    width: auto;
    display: block;
    margin-right: 12px; /* Iets minder marge */
}

.header-title {
    font-family: 'RuuddeWild', cursive;
    font-size: 2.5em; /* Kleiner lettertype */
    color: var(--primary-color);
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.5px; /* Iets minder spacing */
}

/* ========================================= */
/* STYLING: COMPACTE COUNTDOWN IN HEADER */
/* ========================================= */
.header-countdown {
    background-color: var(--dark-bg);
    color: var(--dark-text);
    padding: 6px 12px; /* Iets minder padding */
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em; /* Kleiner lettertype */
    white-space: nowrap;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.15); /* Subtielere schaduw */
}

.header-countdown .countdown-label {
    font-family: 'NPONovaText-Regular', sans-serif;
    font-size: 0.75em; /* Kleiner lettertype */
    margin-bottom: 2px; /* Iets minder marge */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6); /* Iets transparanter */
}

.countdown-timer-mini {
    font-family: 'NPONovaText-Bold', monospace;
    font-size: 1.1em; /* Kleiner lettertype */
    color: var(--primary-color);
    display: flex;
    align-items: baseline;
}

.countdown-timer-mini span {
    font-weight: bold;
}

/* ========================================= */
/* EINDE COUNTDOWN STYLING */
/* ========================================= */

/* ========================================= */
/* STYLING: DRIE KOLOMMEN */
/* ========================================= */
.columns-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Iets minder ruimte tussen kolommen */
    flex-wrap: wrap;
    margin-top: 20px; /* Iets minder marge */
}

.column {
    background-color: var(--white);
    padding: 25px; /* Iets minder padding */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.column h2 {
    font-family: 'NPONovaText-Bold', sans-serif;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 15px; /* Iets minder marge */
    font-size: 1.6em; /* Kleiner lettertype */
}

.column p {
    font-family: 'NPONovaText-Regular', sans-serif;
    color: var(--text-color);
    font-size: 0.95em; /* Iets kleiner lettertype */
    line-height: 1.6; /* Iets compacter lijnhoogte */
}

/* ========================================= */
/* AANGEPASTE STYLING: ROUTE LIJST IN EERSTE KOLOM */
/* ========================================= */
.route-list {
    margin-top: 10px; /* Iets minder marge */
    border-left: 1px solid var(--primary-color); /* Dunnere lijn */
    padding-left: 10px; /* Iets minder ruimte */
    position: relative; /* Belangrijk voor absolute positionering van de auto */
}

/* Styling voor het autootje */
.car-on-route-indicator {
    position: absolute;
    left: -25px; /* Zorgt dat het auto-icoon buiten de lijn staat */
    transform: translateY(-50%); /* Centreer verticaal */
    font-size: 1.5em; /* Grootte van de auto */
    color: #007bff; /* Een mooie blauwe kleur */
    background-color: var(--white); /* Witte achtergrond voor zichtbaarheid over de lijn */
    border-radius: 50%; /* Maak het rond */
    padding: 3px; /* Kleine padding om de auto heen */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Kleine schaduw */
    display: none; /* Standaard verborgen, wordt door JS getoond */
    z-index: 5; /* Zorg dat het boven de lijn ligt */
    transition: top 0.5s ease-out; /* Smooth animatie bij verplaatsing */
    line-height: 1; /* Zorgt dat de emoji netjes in het midden staat */
}


.route-day {
    margin-bottom: 15px; /* Iets minder ruimte tussen de dagen */
    position: relative;
}

.route-day:last-child {
    margin-bottom: 0;
}

/* Kleine cirkel op de lijn bij het begin van elke dag */
.route-day::before {
    content: '';
    position: absolute;
    left: -16px; /* Aangepaste positie voor dunnere lijn/padding */
    top: 8px; /* Hoger plaatsen om bij h3 te passen */
    transform: translateY(-50%);
    width: 8px; /* Kleiner punt */
    height: 8px; /* Kleiner punt */
    background-color: var(--primary-color);
    border-radius: 50%;
    border: 2px solid var(--white); /* Dunnere rand */
    z-index: 1;
}

.route-day h3 {
    font-family: 'NPONovaText-Bold', sans-serif;
    color: var(--secondary-color);
    margin-top: 0;
    margin-bottom: 8px; /* Iets minder marge */
    font-size: 1.1em; /* Kleiner lettertype */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.route-date-big {
    font-family: 'NPONovaText-Regular', sans-serif;
    font-size: 0.8em; /* Kleiner lettertype */
    color: var(--light-text-color);
    font-weight: normal;
}

.route-item {
    display: flex;
    align-items: center; /* Zorgt dat vlaggetje en tekst op één lijn liggen */
    margin-bottom: 6px; /* Iets minder marge tussen routepunten */
    color: var(--text-color);
    font-size: 0.9em; /* Kleiner lettertype */
    line-height: 1.1; /* Compacter lijnhoogte */
}

.route-item:last-of-type {
    margin-bottom: 0; 
}


.route-item i { /* Font Awesome iconen */
    color: red; /* Alle vlaggetjes rood */
    margin-right: 6px;
    font-size: 1em;
    flex-shrink: 0;
    transition: all 0.3s ease; /* Smooth overgang voor vlaggetjes */
}

/* Specifieke styling voor gepasseerde items (finishvlag) */
.route-item[data-item-status="passed"] i[data-flag-icon="flag"] {
    color: gray; /* Maak gepasseerde vlaggetjes grijs */
}

.route-item[data-item-status="passed"] i::before {
    /* Verander de Font Awesome class naar een finishvlaggetje */
    content: "\f11e"; /* Unicode voor fa-flag-checkered (finishvlag) */
    font-family: "Font Awesome 5 Free"; /* Zorg dat de juiste font family wordt gebruikt */
    font-weight: 900; /* Font Awesome Solid weight */
}


.route-item .route-time {
    font-size: 0.85em; /* Kleiner lettertype */
    color: var(--light-text-color);
    font-family: 'NPONovaText-Regular', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto; /* Zorgt dat de tijd rechts uitlijnt */
    display: flex; /* Maak het een flexbox om lampje en tekst uit te lijnen */
    align-items: center; /* Centreer verticaal de elementen in de span */
}

/* Nieuwe styling voor 'NU LIVE' tekst */
.route-item .route-time.live {
    font-family: 'NPONovaText-Bold', sans-serif; /* Dikgedrukt */
    color: var(--primary-color); /* Primaire kleur */
    font-size: 0.9em; /* Iets groter om op te vallen */
    text-transform: uppercase;
}

/* Styling voor het knipperende live-indicator lampje */
.live-indicator {
    display: inline-block;
    width: 8px; /* Grootte van het lampje */
    height: 8px;
    background-color: red; /* Rode kleur */
    border-radius: 50%; /* Rond maken */
    margin-right: 6px; /* Ruimte tussen lampje en tekst */
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); /* Initiële schaduw voor animatie */
    animation: pulse 1.5s infinite; /* Animatie toepassen */
}

/* Keyframes voor de knipper-animatie */
@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); /* Verspreiding van de schaduw */
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}


/* ========================================= */
/* ALGEMENE STYLING VOOR H3 BINNEN KOLOMMEN */
/* ========================================= */
.column h3 {
    font-family: 'NPONovaText-Bold', sans-serif;
    color: var(--secondary-color);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 5px;
}

/* ========================================= */
/* STYLING VOOR SOCIAL BUTTONS (NU IN KOLOM 2) */
/* ========================================= */
.social-buttons {
    display: flex;
    flex-direction: column; /* Knoppen onder elkaar */
    gap: 10px;
    margin-top: 15px; /* Houd deze marge */
    margin-bottom: 25px; /* Meer ruimte onder de knoppen */
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-family: 'NPONovaText-Bold', sans-serif;
    font-size: 0.95em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.social-button i {
    margin-right: 8px;
    font-size: 1.1em;
}

.social-button.radio2 {
    background-color: var(--primary-color);
    color: var(--white);
}
.social-button.radio2:hover {
    background-color: #e64d2e; /* Iets donkerder */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.social-button.instagram {
    background-color: #E1306C; /* Instagram roze */
    color: var(--white);
}
.social-button.instagram:hover {
    background-color: #c2295d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.social-button.contact {
    background-color: #5cb85c; /* Groen */
    color: var(--white);
}
.social-button.contact:hover {
    background-color: #4cae4c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ========================================= */
/* EINDE SOCIAL BUTTONS STYLING */
/* ========================================= */


/* ========================================= */
/* NIEUWE STYLING: LIVEBLOG FEED (IN KOLOM 2) */
/* ========================================= */
.liveblog-feed {
    background-color: #f9f9f9;
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(0,0,0,0.05);

    /* Belangrijk voor scrollen */
    max-height: 250px; /* Pas deze waarde aan naar smaak voor 2-3 berichten */
    overflow-y: auto; /* Scrollen inschakelen */
    -webkit-overflow-scrolling: touch; /* Voor soepel scrollen op mobiel */
}

.liveblog-feed::-webkit-scrollbar {
    width: 8px;
}

.liveblog-feed::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.liveblog-feed::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.liveblog-feed::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.liveblog-entry {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}

.liveblog-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.liveblog-time {
    display: block;
    font-family: 'NPONovaText-Bold', sans-serif;
    font-size: 0.8em;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.liveblog-entry p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--text-color);
}

/* Nieuwe stijl voor de dagscheiding */
.liveblog-day-separator {
    font-family: 'NPONovaText-Bold', sans-serif;
    font-size: 0.9em;
    color: var(--secondary-color);
    text-align: center;
    margin: 20px 0 15px 0; /* Ruimte boven en onder de separator */
    padding: 5px 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-color: #e9e9e9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Zorg dat de eerste separator geen bovenste marge heeft of lijn als die direct na de H3 komt */
.liveblog-feed .liveblog-day-separator:first-of-type {
    margin-top: 0;
    border-top: none;
}
/* ========================================= */
/* EINDE LIVEBLOG FEED STYLING */
/* ========================================= */


/* ========================================= */
/* STYLING VOOR MUZIEK HOOGTEPUNTEN (NU IN KOLOM 3) */
/* ========================================= */
.music-highlights {
    background-color: #f9f9f9;
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 15px;
    border: 1px solid rgba(0,0,0,0.05);
}

.music-highlights p {
    margin: 5px 0;
    font-style: italic;
    font-size: 0.88em;
    color: var(--light-text-color);
}
/* ========================================= */
/* EINDE MUZIEK HOOGTEPUNTEN STYLING */
/* ========================================= */


/* ========================================= */
/* STYLING VOOR INSTAGRAM FEED (NU IN KOLOM 3) */
/* ========================================= */
.instagram-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Min 100px, flexibel */
    gap: 10px;
    margin-top: 15px;
}

.instagram-post {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
    position: relative; /* Voor caption positioning */
}

.instagram-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.instagram-post img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Kleine scheiding */
}

.instagram-caption {
    padding: 8px;
    font-size: 0.75em;
    text-align: center;
    background-color: var(--white);
    white-space: nowrap; /* Voorkom afbreken van hashtags */
    overflow: hidden;
    text-overflow: ellipsis; /* ... als te lang */
}
/* ========================================= */
/* EINDE INSTAGRAM FEED STYLING */
/* ========================================= */


/* ========================================= */
/* STYLING: FOOTER LOGO'S */
/* ========================================= */
footer {
    text-align: center;
    padding: 20px; /* Iets minder padding */
    margin-top: auto;
    background-color: var(--secondary-color);
    color: var(--white);
    font-size: 0.9em; /* Iets kleiner lettertype */
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07); /* Subtielere schaduw */
    font-family: 'NPONovaText-Regular', sans-serif;
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logos {
    display: flex;
    gap: 15px; /* Iets minder ruimte tussen logo's */
    align-items: center;
}

.footer-logo {
    height: 35px; /* Iets kleiner logo */
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-logo:hover {
    opacity: 1;
}

/* ========================================= */
/* EINDE FOOTER LOGO STYLING */
/* ========================================= */


/* Responsiviteit */
@media (max-width: 992px) {
    .content-wrapper {
        max-width: 90%;
    }
    .columns-container {
        gap: 15px;
    }

    .column {
        flex: 1 1 calc(50% - 7.5px);
        padding: 20px;
    }

    .column h2 {
        font-size: 1.4em;
    }
    .column p {
        font-size: 0.9em;
    }

    .route-day h3 {
        font-size: 1em;
    }
    .route-item {
        font-size: 0.85em;
    }
    .route-item .route-time {
        font-size: 0.8em;
    }

    .car-on-route-indicator {
        font-size: 1.3em;
        left: -20px; /* Pas de positie aan voor kleinere schermen */
    }

    .instagram-feed {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Smaller op tablets */
    }

    .liveblog-feed {
        max-height: 200px; /* Aangepaste hoogte voor tablets */
    }
}

@media (max-width: 768px) { /* Telefoon */
    .main-header {
        padding: 8px 15px;
    }

    .main-header .logo {
        height: 30px;
        margin-right: 10px;
    }

    .header-title {
        font-size: 1.8em;
    }

    .header-countdown {
        padding: 5px 10px;
        font-size: 0.75em;
    }
    .countdown-timer-mini {
        font-size: 1em;
    }

    /* Kolommen op mobiel */
    .columns-container {
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .column {
        min-width: unset;
        width: 100%;
        padding: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .column h2 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    .column p {
        font-size: 0.85em;
    }

    /* Route lijst op mobiel */
    .route-list {
        margin-top: 8px;
        padding-left: 8px;
    }
    .route-day {
        margin-bottom: 10px;
    }
    .route-day::before {
        left: -12px;
        width: 6px;
        height: 6px;
        border: 1px solid var(--white);
    }
    .route-day h3 {
        font-size: 1em;
        margin-bottom: 5px;
    }
    .route-date-big {
        font-size: 0.75em;
    }
    .route-item {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        font-size: 0.8em;
        flex-wrap: nowrap;
    }

    .route-item .route-time {
        font-size: 0.75em;
        margin-left: auto;
        white-space: nowrap;
        text-align: right;
        margin-top: 0;
    }

    .car-on-route-indicator {
        font-size: 1.2em;
        left: -18px;
    }

    .route-item i {
        font-size: 0.9em;
        margin-right: 4px;
    }

    /* Social buttons op mobiel (blijven in kolom 2) */
    .social-buttons {
        flex-direction: column; /* Blijven onder elkaar */
    }

    /* Instagram feed op mobiel (nu in kolom 3) */
    .instagram-feed {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Groter op mobiel */
    }
    .instagram-caption {
        font-size: 0.7em;
        padding: 6px;
    }

    .liveblog-feed {
        max-height: 180px; /* Aangepaste hoogte voor kleinere telefoons */
    }


    /* Footer logo's op mobiel */
    .footer-logos {
        flex-direction: row;
        gap: 10px;
    }

    .footer-logo {
        height: 30px;
    }

    footer {
        padding: 15px;
    }
}

@media (max-width: 480px) { /* Kleinere telefoons */
    .header-title {
        font-size: 1.5em;
    }
    .header-countdown {
        font-size: 0.7em;
    }
    .countdown-timer-mini {
        font-size: 0.9em;
    }

    .content-wrapper {
        padding: 0 15px;
    }

    .car-on-route-indicator {
        font-size: 1.1em;
        left: -16px;
    }

    /* Instagram feed op kleinere telefoons */
    .instagram-feed {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    /* Footer logos kunnen op deze kleine schermen beter weer verticaal */
    .footer-logos {
        flex-direction: column;
        gap: 8px;
    }
	
	.liveblog-entry .liveblog-image {
    max-width: 100%; /* Afbeelding mag niet breder zijn dan de container */
    height: auto; /* Behoud aspect ratio */
    display: block; /* Zorgt ervoor dat het een block-element is */
    margin-top: 10px; /* Ruimte boven de afbeelding */
    margin-bottom: 10px; /* Ruimte onder de afbeelding */
    border-radius: 5px; /* Afgeronde hoeken, optioneel */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Lichte schaduw, optioneel */
	}
}