/*********************************/
/* 1. LAYOUT & BASISSTRUCTUUR */
/*********************************/

/* Zorgt ervoor dat de body de hele viewport vult en de footer onderaan blijft */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Zorgt voor de benodigde ruimte aan de onderkant van de pagina (boven de fixed footer) */
main {
    padding-bottom: 5rem; 
}

/* Header Container */
header {
    padding-right: 1rem;
    padding-left: 1rem;
    z-index: 75;
    position: relative;
    width: 100%;
    margin-top: 0;
}

/* Stijl voor links in de header (onderstreping) */
header a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: .1rem;
}

header a:hover {
    text-decoration: none;
}

/* Algemene reset voor UL's */
ul {
    margin: 0;
}


/*********************************/
/* 2. TYPOGRAFIE BASISELEMENTEN */
/*********************************/

/* Standaard H1 (Vaak gebruikt in de header) */
h1 {
    font-family: var(--font-family-calibre);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.875rem;
    margin-top: 0;
    color: var(--color-text)
}

/* Standaard H2 (Gebruikt in grid items) */
h2 {
    font-family: var(--font-family-melkweg);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.35;
    margin: 0;
    color: var(--color-white-text);
}

/* Standaard H3 (Gebruikt voor 'Programma' en 'agenda') */
h3 {
    font-family: var(--font-family-melkweg);
    margin-top: 0;
    font-weight: 400;
    font-size: 3.5rem;
    line-height: .8;
    margin-bottom: 2rem;
    color: var(--color-text)
}

/* Standaard H4 (Gebruikt voor 'Highlights' header) */
h4 {
    font-family: var(--font-family-calibre);
    margin-top: 0;
    font-weight: bold;
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text)
}

/* Standaard H5 (Gebruikt in grid items) */
h5 {
    font-family: var(--font-family-calibre);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1;
    text-transform: uppercase;
    margin-top: 0;
    color: var(--color-white-text);
}

/* Standaard H6 (Gebruikt in highlight items) */
h6 {
    font-family: var(--font-family-calibre);
    margin-top: 0;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--color-text)
}

/* Algemene stijlen voor links in de main content */
main a {
    font-family: var(--font-family-melkweg);
    font-weight: 400;
    text-decoration: none;
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Algemene stijlen voor de <time> tag */
time {
    font-family: var(--font-family-melkweg);
    font-weight: 400;
    font-size: .875rem;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--color-white-text);
}


/* --- Specifieke Typografie Componenten --- */

/* Verwijder de margin en padding van de h4's die tijd-tags bevatten */
main > section > ul > li > a > h4 {
    padding: 0;
    margin: 0;
    flex-grow: 1;
    margin-right: auto;
    margin-left: auto;
}

/* H3 voor ADE 2025 titel in de Highlights sectie */
main > section > ul > li:first-child > a > h3 {
    font-family: var(--font-family-calibre);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: .75rem 0 .25rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Tijd tags in de highlights (Burst city en Arty Party) */
main > section > ul > li > a > h4 > time {
    font-family: var(--font-family-melkweg);
    margin-top: 0;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1;
    display: inline-block;
    margin-bottom: 0;
    color: var(--color-text);
}

/* H3 voor de Young Creatives titel */
main > section:nth-of-type(2) > h3 {
    font-family: var(--font-family-melkweg);
    font-weight: 400;
    font-size: 2.625rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    color: var(--color-text);
}

/* H4 'Highlights' header in de Programma sectie */
main section:nth-of-type(2) > ul:nth-of-type(2) + h4 {
    font-family: var(--font-family-calibre);
    color: var(--color-text);
    margin-top: 3rem;
    font-weight: bold;
    font-size: .875rem;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

section h5 ~ ul h4 {
    padding: 0.5rem 0rem 0rem;
}

/* 'Lees Meer' link in de laatste sectie (Young Creatives) */
section:last-of-type a > p {
    margin-top: 1.5rem;
    text-transform: none;
}


/*********************************/
/* 3. SECTIE & COMPONENT LAYOUTS */
/*********************************/

/* --- Sectie 1: Parallax Grid --- */

/* Parallax-effect voor de eerste sectie */
section:first-of-type {
    background-image: url('../images/achtergrond.jpg');
    background-size: cover;
    background-position: center center;
    position: relative;
    /* De animatie die we zometeen definiëren */
    animation: parallax linear;
    animation-timeline: scroll();
}

/* Parallax Keyframes (scroll-gestuurd) */
@keyframes parallax {
    from {
        background-position: bottom 0px center;
    }

    to {
        background-position: bottom -1000px center;
    }
}

/* Layout van de Grid Lijst */
main section:first-of-type ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0em;
}

/* Items die over de volle breedte gaan (spanning 2 kolommen) */
main section:first-of-type ul li:nth-child(1),
main section:first-of-type ul li:nth-child(4),
main section:first-of-type ul li:nth-child(7),
main section:first-of-type ul li:nth-child(10) {
    display: block;
    grid-column: 1 / span 2;
    width: 50%;
    margin: 2rem auto;
}

/* Items in de eerste kolom */
main section:first-of-type ul li:nth-child(2),
main section:first-of-type ul li:nth-child(5),
main section:first-of-type ul li:nth-child(8) {
    flex-shrink: 1;
    width: 100%;
    padding: 0.5rem;
}

/* Items in de tweede kolom (met margin-top offset) */
main section:first-of-type ul li:nth-child(3),
main section:first-of-type ul li:nth-child(6),
main section:first-of-type ul li:nth-child(9) {
    margin-top: 3.75rem;
    flex-shrink: 1;
    width: 100%;
    padding: 0.5rem;
}


/* --- Sectie 2: Programma & Filters --- */

section:nth-of-type(2) {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    z-index: 65;
    position: relative;
    width: 100%;
    padding-top: 2.5rem;
}

/* Knop Stijl Reset */
button {
    background-color: var(--color-background);
    border: none;
    color: var(--color-text);
    text-transform: uppercase;
    padding: 0 0 1rem;
    text-decoration: none;
}

/* Filter Knoppen Lijst Container */
ul:has(button) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
}

ul:has(button) li button:first-of-type {
    margin-right: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Niet-actieve knop stijl */
main section:nth-of-type(2) ul:first-of-type button {
    color: var(--color-event); /* Grijs voor inactieve knop */
}

/* Actieve knop stijl (overschrijft de inactieve kleur) */
main section:nth-of-type(2) ul:first-of-type .active-button {
    color: var(--color-text); /* Zwart voor actieve knop */
}

/* --- Evenementen Lijst (Detail Layout) --- */

main section:nth-of-type(2) ul:nth-of-type(3) li {
    margin-bottom: 1.5rem;
}

/* Stijlen voor de algemene evenementenlijst items */
main section:nth-of-type(2) > ul:nth-of-type(2) > li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0.8rem 0;
    line-height: 1;
    border-bottom: 0.5px solid var(--color-border-subtle);
}

/* Evenementenlijst: Linkse kolom (naam en type) */
main section:nth-of-type(2) > ul:nth-of-type(2) > li > div:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/* Evenementenlijst: Rechtse kolom (datum en tijd) */
main section:nth-of-type(2) > ul:nth-of-type(2) > li > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    width: 30%;
}

/* Evenementenlijst: Naam van het evenement */
main section:nth-of-type(2) > ul:nth-of-type(2) > li > div:first-of-type > a:first-of-type {
    font-family: var(--font-family-calibre);
    font-size: 1rem;
    line-height: 1.2;
    display: block;
    margin: 0 auto .5rem 0;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Evenementenlijst: Type/Genre van het evenement */
main section:nth-of-type(2) > ul:nth-of-type(2) > li > div:first-of-type > a:nth-of-type(2) {
    font-family: var(--font-family-calibre);
    font-size: .875rem;
    line-height: 1.2;
    margin: 0;
    color: var(--color-event);
    text-transform: uppercase;
}

/* Evenementenlijst: Tijd/Datum */
main section:nth-of-type(2) > ul:nth-of-type(2) > li time {
    font-size: 1rem;
    line-height: 1;
    font-family: var(--font-family-melkweg); 
}


/* --- Sectie 3: Agenda Link --- */

section:nth-of-type(3) {
    margin: 0;
    padding: 1.2rem 0;
    padding-left: 0.4rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

section:nth-of-type(3) h3 {
    margin: 0;
    margin-left: 0.2em;
}


/* --- Sectie 4: Young Creatives --- */

section:nth-of-type(4) {
    margin-right: auto;
    margin-left: auto;
    padding: 1.2rem;
}

/* Afbeelding in de laatste sectie */
section:last-of-type > img:first-of-type {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1.7777777778;
    margin-bottom: 1rem;
    margin-top: 1.2rem;
}


/*********************************/
/* 4. LOGO STYLING & ANIMATIES */
/*********************************/

/* Container voor de hele "MELKWEG" tekst (gecenterd) */
.melkweg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%; 
    max-width: 500px; 
    margin: 1.5rem auto;
}

.letter-box {
    position: relative;
    width: 100px; 
    aspect-ratio: 1 / 1;
    margin: 0 3px;
    overflow: hidden;
}

/* Basisstijl voor alle lijnen van de letters */
.letter-box span {
    background-color: var(--color-text);
    position: absolute;
}

/* --- Posities en Afmetingen van de Lijnen --- */

.links {
    width: 15%;
    height: 100%;
    top: 0;
    left: 0;
}

.rechts {
    width: 15%;
    height: 100%;
    top: 0;
    right: 0;
}

.boven {
    width: 100%;
    height: 15%;
    top: 0;
    left: 0;
}

.onder {
    width: 100%;
    height: 15%;
    bottom: 0;
    left: 0;
}

.verticaal {
    width: 15%;
    height: 100%;
    top: 0;
    left: 43%;
}

.horizontaal {
    width: 100%;
    height: 15%;
    top: 43%;
    left: 0;
}

/* Stijl voor de letter K */
.schuin {
    width: 15%;
    height: 120%;
    top: 60%;
    left: 0;
    transform-origin: top left;
    transform: rotate(-67deg);
}

.schuin-2 {
    width: 15%;
    height: 120%;
    top: 15%;
    right: -10%;
    transform-origin: top right;
    transform: rotate(67deg);
}

/* Stijl voor de letter G */
.klein-rechts {
    width: 15%;
    height: 50%;
    bottom: 0;
    left: 85%;
}

.klein-midden {
    width: 60%;
    height: 15%;
    bottom: 40%;
    left: 40%;
}

/* --- Keyframes voor Logo Animatie --- */

@keyframes slideDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(39px); }
}

@keyframes rotateLetter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); } 
}

@keyframes slideUpMid {
  0% { transform: translateY(0); }
  100% { transform: translateY(-19px); }
}

@keyframes slideRightMid {
  0% { transform: translateX(0); }
  100% { transform: translateX(20px); }
}

@keyframes slideUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-38px); }
}

@keyframes gRotate {
    0% { transform: rotate(0deg); }
    50% {transform: rotate(-180deg)}
    100% { transform: rotate(180deg); } 
}

/* Toepassen van de animaties op specifieke elementen */
.m-letter, .w-letter {
    animation: rotateLetter 1s;
    animation-delay: 1s;
    transform-origin: center center; 
}

.slideDown {
    animation: slideDown 1s ease;
}

.slideUpMid {
    animation: slideUpMid 1s ease;
} 

.slideRightMid {
    animation: slideRightMid 1s ease;
}

.slideUp {
    animation: slideUp 1s ease;
}

.g-letter {
    animation: gRotate 2s ease;
}

/*********************************/
/* 5. PIJLTJE DECORATIE ELEMENTEN */
/*********************************/

/* Stijlen voor het pijltje na de ADE-tekst */
section:nth-of-type(2) > ul:nth-of-type(3) li:first-child p::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.5em;
    background: url('../images/pijltje.svg') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}

/* Stijlen voor het pijltje na de h3 in de agenda sectie */
section:nth-of-type(3) a > h3::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 1.6em;
    background: url('../images/pijltje.svg') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}

/* Styling voor het pijltje na de 'Lees meer' alinea */
section:last-of-type a > p::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.5em;
    background: url('../images/pijltje.svg') no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}


/*********************************/
/* 6. TOEGANKELIJKHEID COMPONENTEN */
/*********************************/

/* Beweging Verminder Knop */
#verminder-beweging {
    /* Positie vastzetten: dit maakt de knop 'sticky' */
    position: fixed; 
    left: 1rem;
    /* Plaatsing: boven de footer */
    bottom: 4rem; 
    /* Z-index: Boven de main content, maar onder de footer (1001) */
    z-index: 999; 
    
    /* Opmaak */
    font-family: var(--font-family-calibre);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--color-border);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-radius: 1.5rem;
    opacity: 85%;
    transition: opacity 0.3s, background-color 0.3s, color 0.3s;
}

/* --- Bewegingsreductie State (JS Class) --- */

/* 1. Stop de Parallax scroll-animatie */
body.motion-reduced section:first-of-type {
    animation: none; 
    background-attachment: scroll; 
}

/* 2. Stop de Logo animatie */
body.motion-reduced .letter-box span {
    animation: none; 
}

/* Optioneel: Maak alle overgangen onmiddellijk om te voorkomen dat er nog 'beweging' is */
body.motion-reduced * {
    transition-duration: 0.001ms;
    animation-duration: 0.001ms;
}