/* =========================
   FONTS – lettertypes
   ========================= */

/* integral lettertype */
@font-face {
    font-family: "integral";
    src: url("../fonts/integral-bold.woff2");
}

/* Manifold regular */
@font-face {
    font-family: "Manifold";
    src: url("../fonts/manifold-regular.woff2");
    font-weight: 400;
}

/* Manifold demi-bold */
@font-face {
    font-family: "Manifold";
    src: url("../fonts/manifold-demibold.woff2");
    font-weight: 600;
}

/* Manifold bold */
@font-face {
    font-family: "Manifold";
    src: url("../fonts/manifold-bold.woff2");
    font-weight: 700;
}

/* Timberwolf display font (korting cijfers) */
@font-face{
    font-family:"timberwolf";
    src: url("../fonts/timberwolf.woff2");
    font-weight: 400;
}

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

*, *::after, *::before {
    box-sizing: border-box;
}

/* =========================
   CSS VARIABELEN – kleuren + thema
   ========================= */
/* uitgelegd door Sanne en August onze klasgenoot */
/* root: kleurvariabelen voor light/dark thema */
:root {
    color-scheme: light dark;

    --color-text: light-dark(#000000, #ffffff);
    --color-text1: light-dark(#ffffff,#ffffff);
    --color-text2: light-dark(#ffffff, #000000);
    --color-bg: light-dark(#ffffff, #000000);
    --color-button: light-dark(#000000,#ffffff);

    --color-footer-bg: light-dark(#ffe2e2,#ffffff);
    --color-footer-text: light-dark(#000000, #000000);
    --color-background-grey: light-dark(#6c6c6c, #8e8e8e);
    --color-background-pink: light-dark(#ffedee, #161616);

    --color-accent-red: light-dark(#ff0140,#ff0140);
    --color-muted: light-dark(#6b6b6b, #c6c5c5);
    --color-border: light-dark(#7a7a7a,#ffffff);

    --club-hover-border: light-dark(#000000, #000000); 
    
    --gradient-top: rgba(0, 0, 0, 1);
    --gradient-bottom: rgba(203, 203, 203, 0);
 
    --color-scroll-red: #ff0000;
    --color-scroll-white: #7373739d;
 
    --color-border-white: rgba(0, 0, 0, 0.25);
}

/* =========================
   BODY + algemene H2
   ========================= */

body {
    font-family: "Manifold";
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
}
/* Uitleg in de les en door August */
body > a[href="#main"] {
    position: absolute;
    left: -9999em;          
    background: var(--color-accent-red);
    color: var(--color-text2);
    padding: .10em 1em;
    text-decoration: none;
    z-index: 999;
}

/* Skip link tonen als hij focus heeft (Tab) */
body > a[href="#main"]:focus {
    left: .0em;          
}

/* standaard h2*/
h2 {
    font-family: "integral";
    padding: 0em 0em 0em 0.5em;
    font-size: clamp(1.6em, 3vw, 4em);
}

/* =========================
   HEADER – algemeen
   ========================= */
/* Bron: Display flex https://codepen.io/Romaisa-Zaman/pen/azNyOeG */
/* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items */
/* Bron: sticky https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */
/* Bron: z-index https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/z-index */

/* balk bovenaan met logo, nav en CTA */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;  
    position: sticky;
    background-color: var(--color-background-pink);
    top: 0;   
    z-index: 10;
    padding: 0.5em;
}

/* HEADER logo svg */
header svg {
    width: 8em;
    padding: 1em;
}
/* Bron: selectoren https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:first-of-type */
/* Bron: https://www.w3schools.com/cssref/sel_nth-last-of-type.php */
/* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:nth-last-child */
/* Selectoren uitgelegd door mijn verloofde die IT heeft gedaan en oude klasgenoot Alisha */
/* Sommige selectoren begrijp ik niet heel goed die heb ik samen gedaan dus niet er op door vragen */

/* HEADER JOIN NOW knop (mobiel rechts) */
header > a:nth-of-type(2) {
    background: var(--color-accent-red);
    padding: 1em 1.4em;
    color: var(--color-text1);
    text-decoration: none;
    font-size: .7em;
    letter-spacing: .05em;
}

/* hover voor JOIN NOW (header) */
header > a:nth-of-type(2):hover {
    background: var(--color-text);
    color: var(--color-text2);
}


/* Bron: transform https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/scale */
/* klik-animatie JOIN NOW (header) */
header > a:nth-of-type(2):active {
    transform: scale(0.95);
}

/* HEADER hamburgerbutton voor mobiel menu */
header > button {
    background: none;
    border: none;
    color: var(--color-text);
}

/* icoon in hamburgerbutton */
header button svg {
    width: 5em;
    fill: var(--color-text);
}

/* hover op hamburger icoon */
header button svg:hover {
    cursor: pointer;
}

/* klik-animatie op hamburger */
header > button:active {
    transform: scale(0.9);
}

/* =========================
   NAV – MOBIEL
   ========================= */
/* Bron: flex-direction https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction */
/* inset uitgelegd in de klas */
/* Bron: translate https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/translate */

/* uitschuivend volledig scherm menu */
header nav {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: fixed;
    inset: 0;
    translate: 100% 0;
    transition: .4s ease;
    background-color: var(--color-background-pink);
}

/* logo in nav */
header nav > svg {
    width:10em;
    padding: 2em 1em 0em 1em;
    fill:var(--color-text);
}

/* nav open toestand (inschuiven) */
header nav.is-open {
    translate: 0 0;
}

/* sluitknop bovenin nav */
header nav > button {
    position: absolute;
    top: 1.5em;
    right: 2em;
    background: none;
    border: none;
    fill:var(--color-text);
}

/* kruisje in sluitknop */
header nav > button svg path {
    stroke: var(--color-text);
}

/* Bron: oefeningen in de klas https://codepen.io/Romaisa-Zaman/pen/ByKJjXd */
/* Bron: relative https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */

/* hoofdlinks in nav (eerste lijst) */
header nav ul:first-of-type > li > a {
    position: relative;
}

/* Content uitleg van Sanne */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position */
/* https://codepen.io/Romaisa-Zaman/pen/ByKJjXd */

/* rood streepje onder nav-link */
header nav ul:first-of-type > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15em;
    width: 100%;
    height: 0.9em;
    background-image: url("../images/grotevettestreep.svg");
    opacity: 0;
    transform: rotate(-3deg);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Bron: z-index https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/z-index */
/* hover/focus rood streepje tonen */
header nav ul:first-of-type > li > a:hover::after,
header nav ul:first-of-type > li > a:focus-visible::after {
    opacity: 1;
    z-index: -1;
}

/* Bron: Uitleg van Sanne https://codepen.io/Romaisa-Zaman/pen/xbVmjMe?editors=1100 */
/* rood streepje bij huidige pagina */
header nav ul:first-of-type > li > a[aria-current="page"]::after {
    opacity: 1;
    z-index: -1;
}

/* rood streepje van current weg als andere link hover heeft */
header nav ul:first-of-type:has(a:hover) a[aria-current="page"]::after {
    opacity: 0;
}

/* link rond logo linksboven in header */
header > a:first-of-type {
    margin-right:auto;
    fill:var(--color-text);
}

/* logo zelf in header-link */
header > a:first-of-type svg {
    width: 11em;
    height: auto;
}

/* taalselect dropdown in nav */
header nav > select {
    width: 5em;
    background: transparent;
    color: var(--color-text);
    border: none;
    padding: .6em;
    font-family: "Manifold";
    font-size: .9em;
    cursor: pointer;
}

/* kleine hover animatie taalkeuze */
header nav > select:hover{
    transform: scale(0.95);
}

/* nav lijstjes (primaire links en CTA-links) */
header nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    font-family: "Manifold";
    font-weight: 400;
    font-size: 1em;
    text-transform: uppercase;
    gap:1em;
    padding:1em;
}

/* algemene nav-links */
header nav a {
    text-decoration: none;
    color: var(--color-text);
}

/* onderste ul in nav (CTA’s onderaan) */
header nav > ul:last-of-type {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 1em 1.5em;
}

/* FREE TRIAL knop in nav onderaan */
header nav > ul:last-of-type > li:first-of-type > a {
    display:flex;
    align-items: center;
    justify-content: center;
    border: 0.1em solid var(--color-border);
    height: 3em;
    color: var(--color-text);
    text-decoration: none;
    font-family: "Manifold";
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

/* hover op FREE TRIAL in nav */
header nav > ul:last-of-type > li:first-of-type > a:hover {
    background: var(--color-text);
    color: var(--color-text2);
}

/* klik animatie FREE TRIAL */
header nav > ul:last-of-type > li:first-of-type > a:active {
    transform: scale(0.95);
}

/* JOIN NOW knop in nav onderaan */
header nav > ul:last-of-type > li:nth-of-type(2) > a {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    background: var(--color-accent-red);
    color: var(--color-text1);
    text-decoration: none;
    font-family: "Manifold";
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

/* hover JOIN NOW (nav) */
header nav > ul:last-of-type > li:nth-of-type(2) > a:hover {
    background: var(--color-text);
    color: var(--color-text2);
}

/* klik animatie JOIN NOW (nav) */
header nav > ul:last-of-type > li:nth-of-type(2) > a:active {
    transform: scale(0.95);
}

/* =========================
   HEADER – DESKTOP
   ========================= */

/* media geleerd van Sanne */
@media (min-width: 54em) {

    /* hamburger verbergen op desktop */
    header > button {
        display: none;
    }

    /* sluitknop nav verbergen op desktop */
    header nav button {
        display: none;
    }

    /* nav in header (geen overlay) */
    header nav {
        display: flex;
        position: static;
        flex-direction: row;
        translate: 0 0;
        align-items: center;  
    }
    
    /* nav lijsten naast elkaar */
    header nav ul {
        flex-direction: row;
        padding: 1em;           
        gap: 1.5em;           
    }

    /* logo in nav verbergen */
    header nav > svg {
        display: none;
    }

    /* JOIN NOW knop naast logo verbergen op desktop */
    header > a:nth-of-type(2) {
        display: none;
    }

    /* FREE TRIAL knop in nav verbergen op desktop */
    header nav > ul:last-of-type > li:first-of-type > a {
        padding:1.7em;
        display:none;
    }

    /* JOIN NOW knop in nav extra padding op desktop */
    header nav > ul:last-of-type > li:nth-of-type(2) > a {
        padding: 1.8em;
    }

    /* onderste ul positie normaal in de flow */
    header nav > ul:last-of-type {
        position: static;
        padding: 1em; 
    }

    /* logo schaalt mee */
    header svg {
        max-width: 100%;
    }

    /* menu-links fontgrootte responsief */
    /* Bron: over clamp https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp */
    header nav ul li a {
        font-size: clamp(0.5em, 1.2vw, 0.8em);
    }

    /* CTA links fontgrootte op desktop */
    header nav > ul:last-of-type > li a {
        font-size: clamp(0.7em, 1vw, 1.2em);
    }
}

/* extra brede schermen: hamburger weg */
@media (min-width: 100em) {

    /* hamburger niet tonen */
    header > button {
        display: none;
    }

    /* nav-sluitknop niet tonen */
    header nav button {
        display: none;
    }
}

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

/* algemene footer-achtergrond en tekstkleur */
footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

/* logo bovenin footer */
footer > img {
    max-width: 100%;
    padding: 7em 0em 4em 1em;
}
/* Over column https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction */

/* algemene ul in footer (kolommen) */
footer ul {
    display: flex;    
    flex-direction: column;
    list-style: none;
    padding: 0 0 1em 1em;
    row-gap: 0.6em;
}
/* Bron: grid https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts */

/* eerste footer kolom met hoofdlinks */
footer section:first-of-type ul a {
    text-decoration: none;
    font-family: "integral";
    color: var(--color-footer-text);
    font-size: 1em;
}

/* appstore */
footer > a:first-of-type {
    display: flex;
    gap: 0.2em;
    padding: 0 0 1em 1em;  
    align-items: center;
}

/* appstore-afbeeldingen */
footer > a:first-of-type img {
    transition: transform 0.15s ease;
}

/* hover animatie appstore knoppen */
footer > a:first-of-type img:hover {
    transform: translateY(-0.15em);
}

/* klik animatie appstore knoppen */
footer > a:first-of-type img:active {
    transform: scale(0.92);
}
/* Bron: column https://www.w3schools.com/cssref/pr_grid-template-columns.php */

/* social icons lijst */
footer section:nth-of-type(2) ul {
    display: grid;
    grid-template-columns: 2.5em 2.5em 2.5em 2.5em 2.5em;
    gap: 1em;
    align-items: center;
}

/* social icon afbeeldingen */
footer section:nth-of-type(2) ul > li a img {
    transition: transform 0.15s ease;
}

/* hover op social icons */
footer section:nth-of-type(2) ul > li a:hover img {
    transform: translateY(-0.15em);
}

/* klik animatie social icons */
footer section:nth-of-type(2) ul > li a:active img {
    transform: scale(0.92);
}

/* titels in footer-kolommen (Clubs / Meer info / Support) */
footer h3 {
    font-family: "Manifold";
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 0; 
}

/* footer-links in kolommen */
footer section ul a {
    text-decoration: none;
    color: var(--color-footer-text);
    font-family: "Manifold";
}

/* hover onderstreping footerlinks */
footer section ul a:hover {
    text-decoration: underline;
}

/* onderste lijst met juridische links */
footer section:last-of-type ul {
    font-family: "Manifold";
    text-transform: uppercase;
    font-size: 0.75em;
    padding: 0 0 0 1em;
}

/* kleur juridische links */
footer section:last-of-type ul a {
    color: var(--color-muted);
}

/* copyrightregel onderaan */
footer p {
    color: var(--color-muted);
    font-size: 0.75em;
    padding: 1em 0em 4em 1em;
}
/* Bron: column 1fr https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns */

/* blok met Clubs / Meer info / Support (3 kolommen op termijn) */
footer > section:nth-of-type(3) {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
}

/* veel uitleg gekregen van mijn verloofde over grid */
/* FOOTER breder scherm */
@media (min-width:40em) {

    /* clubs/info/support in 2 kolommen */
    footer > section:nth-of-type(3) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* hoofdlinks onder logo */
    footer > section:first-of-type ul {
        flex-direction:column;         
        row-gap: 0;             
    }

    /* eerste sectie (Memberships etc.) */
    footer > section:nth-of-type(1) {
        font-size: 1.5em;

    }
    /* copyrightblok positie */
    footer > p {
        font-size: 0.9em;
    }
}

/* FOOTER – DESKTOP GRID */
@media (min-width: 58em) {

    /* complete footer als 4 koloms grid */
    footer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        padding: 1em 0em 0em 3em;
    }

    /* logo over volledige breedte bovenin */
    footer > img {
        grid-column: 1 / -1;
    }

    /* eerste sectie links in kolom 1 memberships etc */
    footer > section:nth-of-type(1) {
        grid-column: 1; 
        grid-row: 2; 
        padding:0em 0em 10em 0em;
    }

    /* blok met clubs/info/support in 3 kolommen */
    footer > section:nth-of-type(3) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column: 2 / 5;         
    }

    /* appstore knoppen onder eerste kolom */
    footer > a:first-of-type {
        grid-column: 1;
        grid-row: 2;
    }

    /* social icons daaronder */
    footer > section:nth-of-type(2) {
        grid-column: 1;
        grid-row: 3;
        justify-self: left;
    }

    /* copyrightblok positie */
    footer > p {
        grid-column: 1;
        grid-row: 5;
        justify-self: flex-start;
        padding: 0em;
        font-size: 0.9em;
    }

    /* juridische links over volle breedte (apart blok) */
    footer > section:last-of-type {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    
    /* juridische links naast elkaar in één rij */
    footer > section:last-of-type ul {
        display: flex;
        flex-direction: row;
        justify-self: flex-end;
        gap: 2rem;              
        padding:2em;   
    }
}