/* Font imports */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

/* Theme colors */
:root {
    --primary: #0e566c;
    --primary-dark: #0a3c4d;
    --secondary: #bedfe6;
    --secondary-dark: #a3c9d3;

    --background: hsl(0, 0%, 100%);
    --text: hsl(210, 4%, 11%);

    --card-background: #f9f9fa;
    --card-border: #dbdbdc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: hsl(210, 4%, 11%);
        --text: hsl(240, 11%, 89%);

        --card-background: hsl(210, 4%, 14%);
        --card-border: hsl(210, 4%, 25%);
    }
}

/* Font formattting */
body {
    /* Lato lettertype via Google fonts met een fallback naar het ingebouwde 
    sans-serif lettertype. */
    font-family: Lato, sans-serif;
    /* Fontsize property ingesteld op 100% om problemen met oudere Internet 
    Explorer browsers te voorkomen met het gebruik van ems. */
    font-size: 100%;
    /* Kleurvariabelen die middels een color scheme makkelijk aangepast kunnen worden. */
    background-color: var(--background);
    color: var(--text);
}

h1,
h2,
h3,
h4 {
    font-weight: bold;
}

h1 {
    font-size: 2em; /* 32px */
}

h2 {
    font-size: 1.5em; /* 24px */
}

h3 {
    font-size: 1.125em; /* 18px */
}

h4 {
    font-size: 1em; /* 16px */
}

p {
    font-size: 1em; /* 16px */
    line-height: 1.5em;
}

/* Container classes */
.container {
    max-width: 1140px;
    /* Content van de webpagina centreren met een horzintale margin ingesteld op auto. */
    margin: 0 auto;
    /* Padding om een witruimte te creeëren aan de linker en rechter zijkant 
    voor browservensters smaller dan 1140 pixels. */
    padding: 0 20px;
}

.gridContainer {
    display: grid;
}

@media (min-width: 768px) {
    .gridContainer {
        grid-column-gap: 16px;
        grid-template-columns: repeat(12, 1fr);
    }
}

.flexContainer {
    /* Flex container voor webpagina's die minder hoog zijn dan 100% van de 
    viewport hoogte. De column waarde bij het flex-direction property wordt 
    gebruikt om de elementen alsnog onder elkaar te plaatsen. */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.flexContainer > footer {
    /* Verplaatst de footer in een flexbox container onderaan de pagina, 
    ongeacht de lengte van de inhoud van de webpagina. */
    margin-top: auto;
}

/* Common classes */

.button {
    /* Algemene opmaak voor de button. Met een shorthand voor de padding top,
    right, bottom en left. */
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: var(--primary);
    color: #fff;
    text-decoration: none;
}

.button:active {
    /* Korte animatie waarbij de knop 2 pixels naar beneden verplaatst wordt 
    wanneer gebruiker op knop klikt.  */
    transform: translateY(2px);
}

.card {
    /* Standaard kleuren voor kaart met CSS variabelen */
    background-color: var(--card-background);
    border: 1px solid var(--card-border);

    /* Afgeronde hoeken van 10 pixels. En een 'overflow: hidden' om te 
    voorkomen dat childs van de card buiten de afgeronde hoeken vallen */
    border-radius: 10px;
    overflow: hidden;
}

/* Header */
#siteHeader {
    /* Transition voor animatie bij het header.js script */
    transition: background-color 0.3s ease-in-out;

    /* Algemene formatting */
    color: #fff;
    text-align: right;
    position: fixed;
    width: 100%;
    padding: 20px 0;

    /* Z-index om te voorkomen dat andere elementen voor de header komen te staan */
    z-index: 1;
}

#siteHeader.scrolled,
#siteHeader.static {
    background-color: var(--primary);
}

#siteHeader.static {
    position: sticky;
    top: 0;
}

#siteHeader > .container {
    /* Opmaak door middel van CSS-flexbox ingesteld via het display property. 
    De op space-between ingestelde justify-content zorgt ervoor dat de nav in
    de header naar rechts verplaatst wordt. */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#siteHeader a {
    /* Algemene tesktopmaak voor links in de heeader. */
    text-decoration: none;
    color: #fff;
}

#siteHeader h1 {
    /* Het font-size property verkleint lettergrootte van h1 in header 
    relatief aan de lettergrootte van het parent element.  */
    font-size: 1.5em;
}

#siteHeader li {
    /* Plaatst de items in de navigatie lijst naast elkaar met een witruimte 
    ertussen van 20 pixels. */
    display: inline-block;
    margin-left: 20px;
}

#siteHeader li > a {
    /* Met de transition shorthand wordt een animatie toegevoegd voor wanneer 
    de gebruiker over een link in de lijst hovert. */
    transition: color 0.3s ease-in-out;
    color: rgba(255, 255, 255, 0.8);
}

#siteHeader li > a.active,
#siteHeader li > a:hover {
    /* Kleuren in de naviagtiebalk worden puur wit gemaakt wanneeer die pagina
    actief is, of de gebruiker met de buis over de link hovert. */
    color: #fff;
}

/* Breadcrumb section */

#siteBreadcrumb {
    background-color: var(--card-background);
    padding: 20px 0;
}

#siteBreadcrumb li {
    display: inline-block;
}

#siteBreadcrumb a {
    color: var(--text);
    text-decoration: none;
}

#siteBreadcrumb li + li:before {
    /* Plaatst een schuine streep tussen de li tags door middel van de before selector. */
    content: "/";
    color: var(--card-border);
    margin: 0 10px;
}

/* Website footer */
#siteFooter {
    background-color: var(--primary);
    color: #fff;
    padding: 40px 0;
}

#siteFooter h4 {
    grid-row: 1;
}

#siteFooter ul {
    grid-row: 2;
}

#siteFooter li {
    margin: 10px 0;
}

#siteFooter a {
    color: #fff;
    text-decoration: none;
}

/* Pas wanneer de browser breder is dan 768 pixels, worden de lijsten in de 
siteFooter weergegeven als twee kolommen breed. */
@media (min-width: 768px) {
    #siteFooter > .container > * {
        grid-column: span 2;
    }
}