/* ======================================================
   JMNDIJKSTRA MOTORSPORT
   STYLE.CSS - PART 1
====================================================== */

:root{

    --white:#ffffff;
    --offwhite:#fafafa;

    --text:#222;
    --text-light:#666;

    --light-blue:#79D4F7;
    --blue:#0069B4;
    --dark-blue:#002D72;
    --red:#D61F26;

    --shadow:0 18px 45px rgba(0,0,0,.08);

    --radius:20px;

    --transition:.35s ease;

    --max-width:1300px;

}

/* ==========================
RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body {
    font-family: "Bebas Neue", sans-serif;
    color: var(--text);
    background: white;
    overflow-x: hidden;
    line-height: 1.4;
    font-size: 1.2rem;
    letter-spacing: 0.8px;
}

img{

    width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

.section{

    padding:120px 0;

}

.light{

    background:var(--offwhite);

}

/* ==========================
REAL MARTINI DIVIDER
========================== */

.martini-divider {
    width: 100%;
    height: 45px;
    background: linear-gradient(
        to bottom,
        #001B3F 0px, #001B3F 3px,        /* dark blue line */
        #0074C8 3px, #0074C8 7.5px,      /* blue */
        #001B3F 7.5px, #001B3F 10.5px,   /* dark blue line */
        #0074C8 10.5px, #0074C8 15px,    /* blue */
        #001B3F 15px, #001B3F 18px,      /* dark blue line */
        #E01E26 18px, #E01E26 27px,      /* red */
        #001B3F 27px, #001B3F 30px,      /* dark blue line */
        #0074C8 30px, #0074C8 34.5px,    /* blue */
        #001B3F 34.5px, #001B3F 37.5px,  /* dark blue line */
        #0074C8 37.5px, #0074C8 42px,    /* blue */
        #001B3F 42px, #001B3F 45px       /* dark blue line */
    );
}

/* ==========================
NAVIGATION
========================== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    transition:.35s;

}

header.scrolled{

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(18px);

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.navbar{

    width: 100%;

    padding: 0 40px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-family:"Bebas Neue",sans-serif;

    font-size:2.3rem;

    letter-spacing:1px;

}

.logo-jmn {

    color: var(--blue);

}

.logo-dijkstra {

    color: var(--dark-blue);

}

.logo-motorsport {

    color: var(--red);

}

.nav-links{

    display:flex;

    gap:38px;

}

.nav-links a {
    font-weight: 600;
    position: relative;
    color: white; /* Makes the text white initially */
    transition: color 0.35s ease; /* Ensures a smooth fade between colors */
}

/* Add this new rule directly below to handle the white background state */
header.scrolled .nav-links a {
    color: var(--text); /* Changes the text back to dark gray/black */
}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--dark-blue);

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

.nav-button{

    background:var(--dark-blue);

    color:white;

    padding:14px 30px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.nav-button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(214,31,38,.30);

}

/* ==========================
HERO
========================== */

.hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.55),

        rgba(0,0,0,.40)

    );

}

.hero-content{

    position:relative;

    width:min(92%,1300px);

    margin:auto;

    color:white;

    z-index:2;

}

.hero-subtitle{

    display:inline-block;

    font-size:.9rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--light-blue);

    margin-bottom:20px;

}

.hero h1{

    font-family:"Bebas Neue",sans-serif;

    font-size:7rem;

    line-height:.9;

    margin-bottom:28px;

}

.hero-text{

    max-width:650px;

    font-size:1.2rem;

    color:#f5f5f5;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.button-primary{

    background:var(--red);

    color:white;

    padding:18px 38px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}

.button-primary:hover{

    transform:translateY(-4px);

}

.button-secondary{

    border:2px solid white;

    color:white;

    padding:18px 38px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}

.button-secondary:hover{

    background:white;

    color:black;

}

.button-blue {
    background: var(--blue);
    color: white;
    padding: 18px 38px;
    border-radius: 999px;
    font-weight: 700;
    transition: .35s;
}

.button-blue:hover {
    transform: translateY(-4px);
}

/* ==========================
RESULTS BAR
========================== */

.results{

    background:white;

    padding:35px 0;

    border-bottom:1px solid #ececec;

}

.results p{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    font-size:1.05rem;

    font-weight:600;

}

.results strong{

    color:var(--dark-blue);

}

.results span{

    color:var(--red);

}

/* ==========================
SECTION TITLES
========================== */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--red);

    font-weight:700;

    letter-spacing:4px;

    font-size:.85rem;

}

.section-title h2{

    margin-top:10px;

    font-family:"Bebas Neue";

    font-size:4rem;

    color:var(--dark-blue);

}

/* ======================================================
   ABOUT
====================================================== */

.about-grid{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.4s;

}

.about-image:hover img{

    transform:scale(1.02);

}

.about-text{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.about-text p{

    color:var(--text-light);

    font-size:1.08rem;

}

/* ======================================================
   PROKART
====================================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.card{

    background:white;

    border-left:8px solid var(--blue);

    border-radius:var(--radius);

    padding:40px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:nth-child(2){

    border-left-color:var(--red);

}

.card:nth-child(3){

    border-left-color:var(--dark-blue);

}

.card:nth-child(4){

    border-left-color:var(--blue);

}

.card:hover{

    transform:translateY(-8px);

}

.card h3{

    font-family:"Bebas Neue";

    font-size:2rem;

    color:var(--dark-blue);

    margin-bottom:15px;

}

.card p{

    color:var(--text-light);

}

/* ======================================================
   QUOTE
====================================================== */

.quote {
    position: relative; /* Belangrijk voor de absolute image */
    padding: 250px 0; /* Beetje extra padding voor de foto */
    text-align: center;
    overflow: hidden; /* Zorgt dat de vergrote image niet uitsteekt */
}

/* De achtergrondafbeelding styling */
.quote .quote-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    z-index: 0;
}

/* Zorg dat de tekst en overlay netjes over de image vallen */
.quote .overlay {
    z-index: 1; /* Bestaande class uit je hero hergebruiken */
}

.quote .relative-content {
    position: relative;
    z-index: 2; /* Boven de image en overlay */
}

/* Maak de tekst wit voor het contrast */
.quote p {
    max-width: 900px;
    margin: auto;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    color: var(--white); /* Aangepast van dark-blue naar wit */
}

/* ======================================================
   WHY SPONSORS
====================================================== */

.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates the 2 columns */
    gap: 40px;
    align-items: stretch; 
}

.sponsor-text-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sponsor-text-card p {
    margin-bottom: 25px;
    color: var(--text-light); /* Changed from light grey to dark grey for visibility */
    font-size: 1.08rem;
}

.sponsor-image-card {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sponsor-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.sponsor-image-card:hover img {
    transform: scale(1.02);
}

/* Updated parts-list to look like a clean, white card */
.parts-list {
    background: var(--white) !important;
    border: 1px solid #ececec;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 15px 40px;
    width: 100%;
    margin: 0; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.parts-list ul {
    display: grid; 
    grid-template-columns: repeat(3, auto); /* Dit maakt er 3 kolommen van */
    justify-content: center; 
    gap: 20px 40px; /* De 80px verkleind naar 40px zodat de 3 kolommen mooi passen */
    margin: 0 auto; 
}

.parts-list-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.5rem;
    color: var(--dark-blue);
    text-align: center;
    margin-bottom: 35px;
    letter-spacing: 1px;
}

.parts-list li {
    position: relative;
    padding-left: 32px;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--text); /* Dark text color */
}

.parts-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--blue);
}

/* Responsiveness for mobile screens */
@media(max-width: 900px) {
    .sponsor-grid {
        grid-template-columns: 1fr; /* Stacks all 4 blocks vertically on smaller screens */
    }
}

/* Increase brightness of the second sponsor image */
.sponsor-image-card img.bright-image {
    filter: brightness(1.6); 
}

/* ======================================================
   SPONSOR PACKAGES
====================================================== */

.packages{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

    margin-top:20px;

}

.package{

    position:relative;

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.package:hover{

    transform:translateY(-10px);

}

.package::before {
    content: "";
    display: block;
    width: 100%;
    height: 16px; /* Keeps the decal short */
    background: linear-gradient(
        90deg, /* Keeps the stripes vertical */
        #001B3F 0%, #001B3F 6.67%,        /* dark blue line */
        #0074C8 6.67%, #0074C8 16.67%,    /* blue */
        #001B3F 16.67%, #001B3F 23.33%,   /* dark blue line */
        #0074C8 23.33%, #0074C8 33.33%,   /* blue */
        #001B3F 33.33%, #001B3F 40%,      /* dark blue line */
        #E01E26 40%, #E01E26 60%,         /* red (centered) */
        #001B3F 60%, #001B3F 66.67%,      /* dark blue line */
        #0074C8 66.67%, #0074C8 76.67%,   /* blue */
        #001B3F 76.67%, #001B3F 83.33%,   /* dark blue line */
        #0074C8 83.33%, #0074C8 93.33%,   /* blue */
        #001B3F 93.33%, #001B3F 100%      /* dark blue line */
    );
}

.package h3{

    margin-top:35px;

    text-align:center;

    font-family:"Bebas Neue";

    font-size:2.4rem;

    color:var(--dark-blue);

}

.price{

    text-align:center;

    font-family:"Bebas Neue";

    font-size:4rem;

    color:var(--red);

    margin:10px 0 25px;

}

.package ul{

    padding:0 40px 45px;

}

.package li{

    margin-bottom:18px;

    color:var(--text-light);

    position:relative;

    padding-left:28px;

}

.package li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--red);

    font-weight:bold;

}

.featured{

    transform:scale(1.05);

}

.featured:hover{

    transform:scale(1.05) translateY(-10px);

}

/* ======================================================
   2027 SECTION
====================================================== */

.future{

    padding:120px 0;

    background:var(--dark-blue);

    color:white;

    text-align:center;

}

.future h2{

    font-family:"Bebas Neue";

    font-size:4rem;

    margin-bottom:20px;

}

.future p{

    max-width:700px;

    margin:0 auto 40px;

    color:#dddddd;

    font-size:1.1rem;

}

/* ======================================================
   GALLERY
====================================================== */

.gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.gallery img{

    width:100%;

    height:320px;

    object-fit:cover;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.4s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.03);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}

/* ======================================================
   GALLERY UITGEBREID (13 FOTO'S)
====================================================== */

.gallery img:nth-child(1),
.gallery img:nth-child(4),
.gallery img:nth-child(8),
.gallery img:nth-child(11),
.gallery img:nth-child(12) {

    grid-column: span 2;

    height: 420px;

}

.gallery img:nth-child(4) {
    object-position: center 15%; /* Moves the focus slightly down from the top */
}

.gallery img:nth-child(8) {
    object-position: center 23%; /* Moves the focus slightly down from the top */
}

.gallery img:nth-child(11) {
    object-position: center 15%; /* Moves the focus slightly down from the top */
}

/* ======================================================
   CONTACT
====================================================== */

.contact{

    padding:140px 0;

    text-align:center;

    background:white;

}

.contact h2{

    font-family:"Bebas Neue";

    font-size:4rem;

    color:var(--dark-blue);

    margin-bottom:20px;

}

.contact p{

    max-width:700px;

    margin:0 auto 40px;

    color:var(--text-light);

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

footer{

    background:#f5f5f5;

    color:#777;

    text-align:center;

    padding:30px;

    border-top:1px solid #e6e6e6;

}

/* ======================================================
   SCROLL ANIMATION
====================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ======================================================
   RIPPLE EFFECT
====================================================== */

.button-primary,
.button-secondary,
.nav-button{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    background:rgba(255,255,255,.45);

    pointer-events:none;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/* ======================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        to bottom,

        var(--light-blue),

        var(--blue),

        var(--dark-blue),

        var(--red)

    );

    border-radius:999px;

}

/* ======================================================
   TEXT SELECTION
====================================================== */

::selection{

    background:var(--red);

    color:white;

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:1100px){

    .hero h1{

        font-size:5rem;

    }

    .about-grid,
    .sponsor-grid{

        grid-template-columns:1fr;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .packages{

        grid-template-columns:1fr;

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-10px);

    }

    .gallery{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery img:nth-child(1),
    .gallery img:nth-child(4){

        grid-column:span 1;

        height:320px;

    }

}

@media(max-width:768px){

    .navbar{

        flex-direction:column;

        height:auto;

        padding:20px 0;

        gap:20px;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .hero{

        text-align:center;

    }

    .hero h1{

        font-size:3.8rem;

    }

    .hero-text{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .section{

        padding:90px 0;

    }

    .section-title h2{

        font-size:3rem;

    }

    .results p{

        flex-direction:column;

        gap:8px;

    }

    .results span{

        display:none;

    }

    .parts-list ul{

        grid-template-columns:1fr;

    }

    .gallery{

        grid-template-columns:1fr;

    }

    .gallery img{

        height:260px !important;

    }

    .contact h2{

        font-size:3rem;

    }

}

@media(max-width:500px){

    .hero h1{

        font-size:3rem;

    }

    .logo{

        font-size:1.8rem;

    }

    .button-primary,
    .button-secondary,
    .nav-button{

        width:100%;

        text-align:center;

    }

}

/* ======================================================
   RACES & RESULTATEN
====================================================== */

.race-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.race-card {
    background: white;
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: center;
    border-top: 5px solid var(--blue);
}

.resultaten .race-card,
.light .race-card {
    background: white;
}

.race-card:hover {
    transform: translateY(-8px);
}

.race-card.special {
    border-top-color: var(--red);
    background: var(--offwhite);
}

.race-date {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.race-card h3 {
    font-family: "Bebas Neue";
    font-size: 2rem;
    color: var(--dark-blue);
    margin-bottom: 5px;
}

.race-card p {
    color: var(--text-light);
    font-size: 0.95rem;
}

.race-result {
    font-family: "Bebas Neue";
    font-size: 3.5rem;
    color: var(--dark-blue);
    line-height: 1;
    margin: 15px 0;
}

@media(max-width:1100px) {
    .race-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:600px) {
    .race-grid {
        grid-template-columns: 1fr;
    }
}

.championship-card {
    background: white;
    border-radius: var(--radius);
    padding: 40px 50px;
    box-shadow: var(--shadow);
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 8px solid var(--dark-blue);
    transition: var(--transition);
}

.championship-card:hover {
    transform: translateY(-8px);
}

.championship-info {
    text-align: left;
}

.championship-info h3 {
    font-family: "Bebas Neue";
    font-size: 2.5rem;
    color: var(--dark-blue);
    margin-bottom: 10px;
}

.championship-info p {
    color: var(--text-light);
    font-size: 1.05rem;
    max-width: 600px;
}

.championship-position {
    font-family: "Bebas Neue";
    font-size: 5rem;
    color: var(--dark-blue);
    line-height: 1;
    margin-right: 160px;
}

/* Responsiveness voor de brede kaart */
@media(max-width:768px) {
    .championship-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px;
    }
    
    .championship-info {
        text-align: center;
    }
}

/* Team Grid onder 'Over Ons' */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 70px;
}

.team-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: center;
}

.team-card:hover {
    transform: translateY(-8px);
}

.team-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.team-card h3 {
    font-family: "Bebas Neue";
    font-size: 2.2rem;
    color: var(--dark-blue);
    margin: 25px 0 10px;
}

.team-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    padding: 0 30px 35px;
}

/* Responsiveness voor de team kaarten */
@media(max-width:900px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   SPONSOR LOGOS
====================================================== */

.sponsor-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-bottom: 80px;
    /* Nieuwe toevoegingen voor donkere achtergrond: */
    background: var(--dark-blue);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sponsor-logos img {
    height: 50px; 
    width: auto;
    object-fit: contain;
    opacity: 0.6;
    /* Geen invert nodig, wit op blauw is goed leesbaar */
    transition: var(--transition);
}

.sponsor-logos img.white-logo {
    filter: brightness(0) invert(1);
}

.sponsor-logos img:hover {
    opacity: 1;
    transform: translateY(-3px);
}

/* Responsiveness voor kleinere schermen */
@media(max-width: 768px) {
    .sponsor-logos {
        gap: 30px;
        margin-bottom: 60px;
    }
    
    .sponsor-logos img {
        height: 40px;
    }
}

/* Voeg dit toe onder je bestaande .sponsor-logos img CSS */

.sponsor-logos img.logo {
    height: 100px; /* Maak dit getal groter of kleiner naar wens */
}

/* Zorg dat het op mobiel ook goed in verhouding blijft */
@media(max-width: 768px) {
    .sponsor-logos img.logo {
        height: 80px; 
    }
}

.package li.package-spacer {
    height: 15px; /* Adjust this height to make the blank space bigger or smaller */
    margin-bottom: 0;
}

.package li.package-spacer::before {
    display: none; /* Hides the checkmark on the empty spacer item */
}

.button-custom-blue {
    background: var(--blue);
    color: white;
    padding: 18px 38px;
    border-radius: 999px;
    font-weight: 700;
    transition: .35s;
}

.button-custom-blue:hover {
    transform: translateY(-4px);
}

.button-custom-darkblue {
    background: var(--dark-blue);
    color: white;
    padding: 18px 38px;
    border-radius: 999px;
    font-weight: 700;
    transition: .35s;
}

.button-custom-darkblue:hover {
    transform: translateY(-4px);
}

.button-custom-red {
    background: var(--red);
    color: white;
    padding: 18px 38px;
    border-radius: 999px;
    font-weight: 700;
    transition: .35s;
}

.button-custom-red:hover {
    transform: translateY(-4px);
}

/* Add this to your style.css */
.price-prefix {
    display: block;        /* Pushes the price to the next line */
    font-size: 0.35em;      /* Makes "vanaf" 50% smaller than the price */
    font-weight: 400;      /* Optional: makes the font weight lighter to further emphasize the price */
    line-height: 1;        /* Keeps the spacing tight */
    margin-bottom: 2px;    /* Adds a tiny bit of breathing room between "vanaf" and the price */
    margin-top: 25px;
    text-transform: lowercase; 
    color: var(--text);
}