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

/* FONTS */
h1, h2, h3, h4, h5, h6, p, a, div {
    color: #ffffff;
    font-weight: 600;
    line-height: 1.65;
    font-family: "Open Sans", sans-serif;
}

body {
    background: #20253a;
}

/* HERO */
#hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#time {
    font-size: 60px;
    border: 5px solid white;
    width: 245px;
    display: inline-block;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
}

#quote {
    padding: 60px 0 30px 0;
    min-height: 180px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* De hoofdquote */
.main-quote {
    font-family: 'EB Garamond', serif; /* De nieuwe chique letter */
    font-size: 36px;                  /* Iets groter voor impact */
    font-weight: 700;
    font-style: italic;               /* Quotes zien er prachtig uit in italic Garamond */
    color: #ffffff;
    max-width: 850px;
    line-height: 1.2;
    letter-spacing: -0.5px;           /* Garamond oogt mooier als de letters iets dichter op elkaar staan */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* De auteur en het jaar */
.quote-author {
    font-family: 'Open Sans', sans-serif; /* We houden de auteur strak voor contrast */
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;        /* Maakt het een soort officieel label */
    letter-spacing: 3px;              /* Wijde spacing voor een moderne look */
    margin-top: 10px;
}

/* Het knopje iets meer ademruimte geven */
#quotebutton {
    margin-top: 40px !important;
}

.quote-box {
    margin: 60px auto !important; /* Iets minder extreem dan 100px */
    max-width: 90%;
}

/* De knop blijft zoals hij was, want die was al strak! */

/* Custom Styled Button */
#quotebutton {
    /* Transitions & Appearance */
    appearance: none;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    
    /* Layout & Sizing */
    display: inline-block;
    height: 3em;
    line-height: 3em;
    padding: 0 1.50em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.25em;
    
    /* Your Specific Styling Updates */
    background-color: #ffffff !important;
    color: #242943 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 25px 0 0 0 !important;
    
    /* Border/Shadow */
    border: 0;
    box-shadow: inset 0 0 0 2px #ffffff;
}

/* Hover State - Optional but recommended for usability */ 
#quotebutton:hover {
    opacity: 0.9;
    background-color: #f4f4f4 !important;
}

#date {
    font-size: 25px;
    margin: 50px auto 35px auto;
    display: inline-block;
    color: white;
    text-shadow: 2px 2px 2px #246B39;
    text-align: center;
    text-transform: capitalize;
}

#bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px);
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

/* DASHBOARD */
#dashboard {
    background: #242943;
}

.main {
    margin: auto;
}

h2 {
    margin-bottom: 20px;
}

#rechterkant {
    margin: auto 0;
    margin-left: auto;
}



/* TOPBAR BASIS */
.topbar {
    position: sticky;
    top: 0;
    background: #20253a;
    display: flex;
    align-items: center;      /* Verticaal uitlijnen */
    justify-content: space-between; /* Splitst in links, midden, rechts */
    z-index: 100;
    padding: 10px 200px;      /* Behoudt je breedte-instellingen */
    min-height: 80px;
}

/* De drie secties */
.topbar-left, .topbar-right {
    flex: 1;                  /* Zorgt dat links en rechts even breed zijn... */
    display: flex;
    align-items: center;
}

.topbar-center {
    flex: 2;                  /* ...zodat de zoekbalk precies in het midden blijft */
    display: flex;
    justify-content: center;
}

.topbar-right {
    justify-content: flex-end; /* Toggle plakt tegen de rechterkant */
}

/* Favicon */
#favicon {
    width: 45px;
    height: auto;
}

/* ZOEKEN (Aangepast voor Topbar) */
.search-wrapper {
    width: 100%;
    max-width: 500px;         /* Iets smaller gemaakt voor in de balk */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-search {
    width: 100%;
    padding: 10px 15px;       /* Iets compacter voor de topbar */
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: white;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.search-engines {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.search-engines button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

.search-engines button:hover {
    color: white;
    transform: translateY(-2px);
}

/* Toggle Knop Styling */
#toggleDark {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}

#toggleDark:hover {
    transform: scale(1.1);
}

/* Light Mode aanpassing */
body.light-mode #main-search {
    background: #ffffff;
    color: #242943;
    border-color: #ddd;
}

body.light-mode .search-engines button {
    color: #242943;
    opacity: 0.6;
}


/* FAVORITES */
#favorites-section {
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05); /* Heel licht achtergrondje */
    border-radius: 15px;
}

.section-divider {
    border: 0;
    height: 1px;
    background: #444;
    margin: 40px 0;
}

.fav-btn.active {
    color: gold;
    text-shadow: 0 0 5px orange;
}










/* Specifieke styling voor de Communicatie sectie */
#section-communicatie {
    margin: 50px 0;
}
/* CARD */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card:hover {
    transform: translateY(-1px);
}
/* Specifiek voor de Font Awesome iconen */
.card i {
    font-size: 65px;
    display: block;         /* Zorgt dat het een eigen blok inneemt */
    margin-bottom: 5px;     /* Extra witruimte onder het icoon */
}
.card a {
    text-decoration: none;
    text-align: center;
}
button.favoriet {
    color: gray;
}





/* ==========================================
   SPECIFIEKE STYLING VOOR KUNST KAARTEN
   ========================================== */

/* Reset de basis .card styling voor kunst */
.dashboard-section[id*="kunst"] .card,
.card.art-card {
    display: block;         /* Reset flexbox, kunst hoeft niet gecentreerd te worden */
    padding: 0;             /* Weg met de padding, de foto moet de hele kaart vullen */
    background: transparent; /* Geen achtergrondkleur nodig */
    border: none;           /* Geen randen */
    overflow: hidden;       /* Zorgt dat de zoom-animatie binnen de kaart blijft */
    width: 100%;            /* Vult de volledige grid-kolom */
    cursor: zoom-in;        /* Geeft aan dat je kunt klikken voor vergroting */
}

/* De afbeelding zelf binnen de kunst-kaart */
.dashboard-section[id*="kunst"] .card img,
.card.art-card img.kunst {
    width: 100%;            /* Forceer de afbeelding om de breedte van de kolom te pakken */
    height: auto;           /* Behoud de verhouding */
    aspect-ratio: 1 / 1;    /* Maak er een perfect vierkant van (pas aan naar wens, bijv. 3/2) */
    object-fit: cover;      /* Zorgt dat de foto mooi vult zonder te vervormen */
    border-radius: 12px;    /* Mooie afgeronde hoeken */
    display: block;         /* Voorkomt witruimte onder de afbeelding */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Zachte schaduw */
}

/* Hover effect voor kunst: zoom in en sterkere schaduw */
.dashboard-section[id*="kunst"] .card:hover img,
.card.art-card:hover img.kunst {
    transform: scale(1.05); /* Subtiele zoom */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Diepere schaduw */
}

/* De tekst (naam) onder het kunstwerk (optioneel) */
.dashboard-section[id*="kunst"] .card span,
.card.art-card span {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
    font-weight: 400;
}
/* Specifieke Grid voor de Kunst Sectie */
/* Zorg dat elke sectie die kunst-items bevat, de mooie 4-koloms grid krijgt */
.dashboard-section:has(.art-card) .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px;
}

/* De Kunst Kaartjes Reset */
#section-kunst .card.art-card {
    width: 100%;
    padding: 0;
    background: transparent;
}

#section-kunst .card.art-card img {
    width: 100%;           /* Vult de hele breedte van de 1/4 kolom */
    height: auto;
    aspect-ratio: 1 / 1;   /* Maakt ze mooi vierkant */
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

/* ==========================================
   Responsive Kunst Grid (Mobiel & Tablet)
   ========================================== */

/* Tablet: 3 kolommen */
@media (max-width: 1100px) {
    #section-kunst .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobiel: 2 kolommen (net als de rest) */
@media screen and (max-width: 768px) {
    /* Op mobiel willen we de kunst-secties vaak 2-breed houden 
       terwijl de icoontjes misschien 3 of 4-breed zijn */
    .dashboard-section:has(.art-card) .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}




/* GRID */
/* 1. DE STANDAARD GRID (Voor links/communicatie) */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    padding: 40px 0 100px 0;
}

/* 2. DE KUNST GRID (Lekker ruim) */
#section-kunst .grid,
.dashboard-section.kunst-area .grid {
    /* Maak de kolommen hier breder, bijv. minimaal 250px per kunstwerk */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px; /* Meer ruimte tussen de schilderijen */
}

/* 3. DE KUNST AFBEELDINGEN */
#section-kunst .card img {
    width: 100%;           /* Vult de hele breedte van de grid-kolom (300px+) */
    height: auto;          /* Behoudt de verhouding */
    aspect-ratio: 1 / 1;  /* Of 1 / 1 voor vierkant, wat jij mooi vindt */
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 0;      /* Geen marge nodig als er geen tekst onder staat */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Geeft ze wat diepte */
}

/* 4. DE KUNST KAARTEN (Geen padding nodig zoals bij links) */
#section-kunst .card {
    padding: 0;
    background: transparent;
    border: none;
}




/* LIGHTBOX GROTE FOTO */
#lightbox {
    display: none; /* Wordt 'flex' via JS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    
    /* DIT ZET ALLES IN HET MIDDEN */
    justify-content: center; 
    align-items: center;
    flex-direction: column; 
}

#grote-foto {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain; /* Zorgt dat de foto niet vervormt */
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}



/* ==========================================
   LIGHT MODE STYLING
   ========================================== */

/* Wanneer de body de class .light-mode heeft: */
body.light-mode {
    background: #f4f7f6; /* Lichte, rustige achtergrond */
    color: #242943;      /* Donkere tekst voor leesbaarheid */
}

/* Het Dashboard gedeelte (was voorheen donkerblauw) */
body.light-mode #dashboard {
    background: #f0f2f5 !important;
    transition: background 0.3s ease;
}

body.light-mode .card i, 
body.light-mode .card a, 
body.light-mode .card span,
body.light-mode footer a,
body.light-mode footer span {
    color: #242943 !important; /* Maakt alles donker zodra Light Mode aan staat */
}

/* Topbar en Footer aanpassen */
body.light-mode .topbar, 
body.light-mode footer {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
}

/* De titels (H2/H3) in de secties */
body.light-mode .dashboard-section h2, 
body.light-mode .dashboard-section h3 {
    color: #242943;
    opacity: 0.8;
}

/* De toggle knop zelf (optioneel: verander icoon kleur) */
body.light-mode #toggleDark {
    filter: invert(1); /* Draait kleuren van je icoontje om als het een plaatje is */
}

/* DRAGGING */
.dragging {
    opacity: 0.5;
}

/* FOOTER */
footer {
    background-color: #20253a;
}
footer a {
    font-size: 15px;
}


/* ==========================================
   1. STANDAARD (Desktop / Breed scherm)
   ========================================== */
.topbar, 
#dashboard, 
footer {
    padding: 25px 200px;
    transition: padding 0.3s ease;
}

#dashboard {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Quote Desktop Maat */
.quote-box {
    margin: 60px auto !important;
    width: 90%;
    max-width: 1100px;
}

.main-quote {
    font-family: 'EB Garamond', serif;
    font-size: 46px; /* Lekker groot op desktop */
    font-style: italic;
    line-height: 1.15;
    text-align: center;
}

/* ==========================================
   2. TABLET & SMALL DESKTOP (iPad Landscape / Kleine Laptops)
   ========================================== */
@media screen and (max-width: 1200px) {
    .topbar, 
    #dashboard, 
    footer {
        padding: 25px 50px; /* Meer ruimte aan de zijkanten op iPad landscape */
    }
}

/* ==========================================
   3. IPAD & TABLET (Nu inclusief iPad Mini Portrait)
   Vanaf 768px tot 1025px
   ========================================== */
@media screen and (min-width: 768px) and (max-width: 1025px) {
    .topbar, #dashboard, footer {
        padding: 25px 40px;
    }

    /* Forceer 4 kolommen voor de iPad Mini */
    .grid, #section-kunst .grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px;
    }

    .main-quote {
        font-size: 38px;
        line-height: 1.2;
    }

    /* Zorg dat de .center div op iPad weer gewoon gecentreerd staat */
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        display: block; /* Terug naar standaard layout ipv de mobiele flex-stack */
    }
}

/* ==========================================
   4. MOBIEL PORTRAIT (iPhone 14 Pro etc.)
   ========================================== */
@media screen and (max-width: 767px) {
    /* Voorkom zoom op iPhone door font-size op 16px te zetten */
    #search-input, 
    input[type="text"], 
    input[type="search"] {
        font-size: 16px !important;
    }

    /* Als 16px te groot oogt in je balk, schaal je het visueel terug */
    /* Bijvoorbeeld naar 0.85 (ongeveer 13.5px) */
    #search-input {
        transform: scale(0.9);
        transform-origin: left center; /* Zorgt dat hij netjes links blijft staan */
        width: 110%; /* Compensatie voor de schaalvergroting */
    }
}


@media screen and (max-width: 768px) and (orientation: portrait) {
    .topbar, #dashboard, footer {
        padding: 20px 20px; 
    }

    /* Klok & Datum */
    #time { font-size: 42px; width: 180px; border-width: 3px; }
    #date { font-size: 18px; margin: 30px auto 20px auto; }

    /* Quote */
    .quote-box {
        margin: 40px auto !important; 
        width: 95vw !important;
        max-width: none !important;
    }

    .main-quote {
        font-size: 26px;
        line-height: 1.2;
        padding: 0 10px;
    }

    /* Grid naar 2 kolommen */
    .grid, #section-kunst .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    /* Titels centreren */
    .dashboard-section h2, .dashboard-section h3 {
        text-align: center;
        margin-bottom: 35px;
    }
}

/* ==========================================
   5. SMARTPHONE LANDSCAPE (De "Botched" Fix)
   ========================================== */
@media screen and (max-width: 932px) and (orientation: landscape) {
    #hero { 
        height: auto; 
        min-height: 100vh; 
        padding: 40px 0; 
        display: flex;       /* Helpt bij het centreren van de inhoud */
        align-items: center;
        justify-content: center;
    }

    /* DE FIX VOOR DE BLAUWE RAND: */
    #bg {
        position: fixed;     /* Foto blijft op zijn plek, ook bij scrollen */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;         /* Altijd achter de tekst */
    }

    .overlay {
        position: fixed;     /* Overlay moet ook blijven staan */
        inset: 0;
        z-index: 0;
    }
    
    .center {
        position: relative;
        top: 0; 
        left: 0;
        transform: none;
        margin: 0 auto;
        z-index: 1;          /* Tekst bovenop alles */
    }

    #time { font-size: 35px; width: 140px; border-width: 3px; }
    .main-quote { font-size: 22px; line-height: 1.1; max-width: 90%; }
    .quote-box { margin: 10px auto !important; }
}

/* Extra kleine telefoons */
@media screen and (max-width: 320px) {
    .grid { grid-template-columns: 1fr; }
}