/* ============================================================
   3DRONEMAPS - UITGEBREIDE UITLEG STYLING
   ============================================================ */

/* Basis instellingen: Dit geldt voor de hele website */
* {
    margin: 0;         /* Verwijdert standaard witruimte om elementen */
    padding: 0;        /* Verwijdert standaard binnenruimte */
    box-sizing: border-box; /* Zorgt dat padding de breedte van je vakjes niet verpest */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Het lettertype */
}

/* De 'onderkant' van je site: Zorgt dat alles beeldvullend is */
body, html {
    height: 100%;
    overflow-x: hidden; /* Zorgt dat je nooit horizontaal kunt scrollen (geen zijwaartse balk) */
}

/* ACHTERGROND VIDEO 
   Zorgt dat de drone-video altijd het hele scherm vult, ongeacht je schermgrootte. */
#bg-video {
    position: fixed;   /* Plakt de video vast op de achtergrond, ook bij scrollen */
    top: 0;
    left: 0;
    width: 100%;       /* Volle breedte */
    height: 100%;      /* Volle hoogte */
    z-index: -1;       /* Plaatst de video ACHTER alle tekst en knoppen */
    object-fit: cover; /* Zorgt dat de video beeldvullend is zonder te vervormen */
}

/* OVERLAY
   Een onzichtbare laag over de video die de content (de balk) verticaal centreert. */
.overlay {
    min-height: 100vh; /* Minimaal 100% van de schermhoogte */
    width: 100%;
    display: flex;     /* Activeert Flexbox: een systeem om dingen makkelijk te lijnen */
    align-items: center; /* Zet de inhoud (de balk) precies in het verticale midden */
    background: rgba(0, 0, 0, 0.2); /* Een heel lichte zwarte waas over de video (20%) */
}

/* DE GLAZEN BALK (FROSTED GLASS)
   Dit is de doorzichtige strook waar je logo en tekst in staan. */
.full-width-bar {
    width: 100%;       /* Loopt van de linker- naar de rechterkant van je scherm */
    background: rgba(255, 255, 255, 0.12); /* Zeer licht wit (12%) */
    backdrop-filter: blur(20px);           /* Maakt de video achter de balk wazig */
    -webkit-backdrop-filter: blur(20px);    /* Zelfde als hierboven, maar voor Safari */
    border-top: 1px solid rgba(255, 255, 255, 0.2);    /* Dun wit lijntje aan de bovenkant */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Dun wit lijntje aan de onderkant */
    padding: 30px 0;   /* Ruimte boven en onder de tekst binnen de balk */
    color: white;      /* Standaard tekstkleur in de balk */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Geeft de balk een subtiele schaduw */
}

/* CONTAINER
   Zorgt dat je logo en tekst niet tegen de randen van je scherm plakken op brede monitors. */
.container {
    max-width: 1200px; /* De tekst wordt nooit breder dan 1200 pixels */
    margin: 0 auto;    /* Centreert de container in het midden van de balk */
    display: flex;     /* Zet het logo en de tekst-sectie naast elkaar */
    align-items: center; /* Zorgt dat logo en tekst op dezelfde hoogte staan */
    padding: 0 40px;   /* Ruimte aan de zijkanten op kleinere schermen */
    gap: 50px;         /* De witruimte tussen je logo en je tekst */
}

/* LOGO */
.logo-section .logo {
    width: 160px;      /* De breedte van je logo */
    height: auto;      /* Hoogte schaalt automatisch mee om verhouding te bewaren */
    border-radius: 12px; /* Maakt de hoekjes van je logo-afbeelding een beetje rond */
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Een klein schaduwtje achter het logo */
}

/* TEKST SECTIE (De rechterkant van de balk) */
.text-section {
    flex: 1;           /* Zorgt dat dit deel alle overgebleven ruimte in de balk inneemt */
}

/* DE TITEL (3DRONEMAPS) */
.text-section h1 {
    font-size: 2.2rem; /* Grootte van de letters */
    margin-bottom: 8px; /* Ruimte onder de titel */
    letter-spacing: 1px; /* Zet de letters iets verder uit elkaar */
    color: #FF9933;    /* De oranje kleur uit je logo */
    text-transform: uppercase; /* Maakt er automatisch allemaal hoofdletters van */
}

/* DE INTRODUCTIE TEKST
   Nu ook werkend op de over-ons pagina omdat we '.text-section' ervoor hebben weggehaald. */
.intro-text {
    font-size: 1.05rem;
    line-height: 1.6;  /* De afstand tussen de regels tekst (voor betere leesbaarheid) */
    margin-bottom: 25px;
    color: #f8f8f8;    /* Bijna wit */
    max-width: 750px;  /* Voorkomt dat regels tekst te lang en onleesbaar worden */
    /* De schaduw die de tekst leesbaar houdt over de video:
       1px naar rechts, 1px naar beneden, 3px vervaging, 80% zwart */
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8); 
}

/* HET MENU (Navigatie) */
nav {
    display: flex;     /* Zet de knoppen naast elkaar */
    flex-wrap: wrap;   /* Als het scherm te smal is, gaan de knoppen naar de volgende regel */
    gap: 12px;         /* Ruimte tussen de knoppen */
}

/* DE KNOPPEN */
nav a {
    text-decoration: none; /* Verwijdert het standaard onderstrepen van links */
    color: white;          /* Kleur van de tekst in de knop */
    font-weight: 600;      /* Maakt de tekst een beetje dikgedrukt (Semi-bold) */
    padding: 10px 20px;    /* Ruimte binnenin de knop (hoogte breedte) */
    border-radius: 8px;    /* Ronde hoekjes van de knop */
    font-size: 0.85rem;    /* Grootte van de tekst in de knop */
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1); /* Zeer lichtgrijze achtergrond van de knop */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Een dun randje om de knop */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Zorgt dat de hover vloeiend gaat */
}

/* HOVER EFFECT (Als je met de muis op een knop staat) */
nav a:hover {
    background: #FF9933;  /* Knop wordt oranje */
    color: #000;          /* Tekst wordt zwart voor goed contrast */
    transform: translateY(-3px); /* De knop 'springt' 3 pixels omhoog */
    box-shadow: 0 8px 20px rgba(255, 153, 51, 0.4); /* De knop krijgt een oranje gloed */
    border: 1px solid #FF9933; /* De rand wordt ook oranje */
}

/* RESPONSIVE DESIGN: TABLETS
   Wat er gebeurt als het scherm smaller is dan 900 pixels. */
@media (max-width: 900px) {
    .container {
        flex-direction: column; /* Zet het logo BOVEN de tekst in plaats van ernaast */
        text-align: center;     /* Centreert alle tekst */
        gap: 25px;
    }

    .text-section {
        display: flex;
        flex-direction: column;
        align-items: center;    /* Centreert de titel, tekst en menu */
    }

    nav {
        justify-content: center; /* Centreert de knoppen in het menu */
    }
}

/* RESPONSIVE DESIGN: TELEFOONS
   Wat er gebeurt als het scherm smaller is dan 480 pixels. */
@media (max-width: 480px) {
    .text-section h1 {
        font-size: 1.6rem;      /* Maakt de titel iets kleiner voor op een telefoon */
    }
    
    .full-width-bar {
        padding: 20px 0;        /* Maakt de balk iets minder hoog */
    }
}