/* ALGEMENE STYLING */



:root {

    --font-size-sm: 0.775rem;   /* klein, bijschriften */

    --font-size-base: 1rem;     /* normale lopende tekst */
    --font-family-base: "bely", serif;
    --font-style-base: normal;
    --font-weight-base: 400;

    --font-size-lg: 1rem;    /*  h2 */
    --font-family-lg: "courier-prime", monospace;
    --font-style-lg: normal;
    --font-weight-lg: 400;

    --font-size-xxl: 4rem;     /* h1 */
    --font-family-xxl: "podium-soft-variable", sans-serif;  
    --font-width-xxl: "wdth" 64;
    --font-weight-xxl: 100;


    --background-color-light-mode: #F9FCE1;
    --text-color: #0D0125;
    --text-color-hover: #543FA4;
    --text-color-light: #F9FCE1;

    --layout-margin: 2em;
    --layout-padding: 30px;

    --caption-margin-top: 1.5em;

    --background-color-popover: #0D0125;



}

body, header, nav {
 background-color: var(--background-color-light-mode);
}

h1 {

    font-size: clamp(1.75rem, 8vw, var(--font-size-xxl));
    font-family: var(--font-family-xxl);
    font-variation-settings: var(--font-width-xxl);
    font-weight: var(--font-weight-xxl);
    color: var(--text-color);
}

h2 {
    font-size: clamp(1rem, 8vw, var(--font-size-lg));
    font-family: var(--font-family-lg);
    font-weight: var(--font-weight-lg);
    font-style: var(--font-style-lg);
    text-transform: uppercase;
    max-width: 40rem;
    color: var(--text-color);
}

h1, h2, main > p {
    margin: 0;
}
main {
    padding:0;
}

main p {
    font-size: clamp(1rem, 8vw, var(--font-size-base));
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    max-width: 30em; /* terug naar em, specifiek hier */
}

section {
    display: flex;
    flex-direction: column;

}


section > p > a {
      color: var(--text-color);

}

section > p > a:hover {
      color: var(--text-color-hover);

}

section > p > a:visited {
      color: var(--text-color);

}


/* Hamburger menu voor de one column layout */

nav {

    position:fixed;
    right:0;
    top:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
    padding: 30px;
    width: min(280px, 80vw);

    z-index: 10;
    translate:100% 0%;
    transition:translate .3s;

     
   

}

header button,
nav > button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-color);
    background-color: var(--background-color-light-mode);
    border: none;
}

header > button:hover,
header > button:active,
nav > button:hover,
nav > button:active {
    color: var(--text-color-hover);
}



.hamburger-icoon {
    stroke: currentColor;
    stroke-width: 30;
    stroke-linecap: round;
    fill: none;

}

.hamburger-svg {
    width: 24px;
    height: 24px;
}



 nav a {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    text-decoration: none;
    color: var(--text-color);
    }

nav a:hover {
    color: var(--text-color-hover);

}
   
nav > button {
    align-self: flex-end;
}

nav.toonMenu {

  translate:0% 0%;
}

header > button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-color);
  
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top:0;
    padding: 20px 30px;
}

/* De oog animatie */
header > a > img {
    width: 40px;
    height: auto;
}

header > a {
    display: flex;
    align-items: center;
    gap: 0.5em;
}



h1 {
  font-size: clamp(1.75rem, 8vw, var(--font-size-xxl));


}

main > h1 {
    min-width: 0;}

/* One column grid */


main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
    padding: var(--layout-padding);
    margin: var(--layout-margin);
    
}
 
img { 
    max-width: 100%;
    height: auto;
    display: block;

}


button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}


main > ul {
        display: grid;
        grid-template-columns: 1fr;
        list-style-type: none;
        padding: 0;
        margin: 0;
        gap: 1.5rem;
       

}


p > a {
    color: var(--text-color);
}

p > a:visited {
 color: var(--text-color);

}

p > a:hover {
 color: var(--text-color-hover);

}

 footer > ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    gap: 2em;
    padding: var(--layout-padding);
    margin: var(--layout-margin);

 }


 footer a, p {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    color: var(--text-color);


}


footer a:visited {
 color: var(--text-color);

}

footer a:hover {
 color: var(--text-color-hover);

}


main > ul > li {
    min-width: 0;
}

main > ul > li > button {
    display: block;
    width: 100%;
}

main > p {
    font-size: var(--font-size-lg);
    max-width: 30em; /* terug naar em, specifiek hier */

}


/* h1 en p met intro naast elkaar vanaf 600px */
@media (min-width: 800px) {

section {
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: flex-start;
    }


section h1 {
    flex: 0 0 auto; /* nooit krimpen, blijft op de natuurlijke breedte */
   
}

section p {
    flex: 1; /* neem de resterende ruimte in */
    min-width: 0; /* nodig zodat de paragraaftekst zelf nog kan afbreken*/
}

}
/* Grid vanaf schermbreedtes van 600px  */

@media (min-width: 600px) {
    main > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Grid vanaf schermbreedtes van 900px  */

@media (min-width: 900px) {
    main > ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Masonry grid, wordt vooralsnog alleen gesuport door Safari */

@supports (display: grid-lanes) {
    
    main > ul {
        display: grid-lanes;
        grid-template-columns: 1fr;
        flow-tolerance: 1em;
        gap: 1ch;
}


@media (min-width: 600px) {
    main > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    main > ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

}

/* Hamburger menu ongedaan maken bij multi-column layout */
@media (min-width:50em) {
  header > button {
    display:none;
  }
  
  nav {

    position:static;
    translate:unset;
    padding:0;
    width: auto; 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
    
  }
  
  nav button {

    display:none;
  }
}

/* Animatie van SVG's */
/* De buitenste doos: bepaalt de grootte en is het "ankerpunt" 
   voor de 4 afbeeldingen die er straks bovenop komen te liggen */

.oog-animatie {
    position: relative;
    display: inline-block;
    width: 150px;
    aspect-ratio: 3086.929 / 2182.677; /* verhouding uit de viewBox van mijn SVG's, zodat de hoogte automatisch klopt */
}

.oog-animatie img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0; /* standaard onzichtbaar, ook frame 1 */
}

/* frame 1 moet wel zichtbaar zijn in eerste instantie*/
.oog-animatie img:nth-child(1) {
    opacity: 1;
}
/* Alle frames delen dezelfde totale duur en houden hun eindstand vast */
.oog-animatie:hover img {
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Elk frame heeft zijn eigen naam, gekoppeld aan zijn eigen @keyframes hieronder */
.oog-animatie:hover img:nth-child(1) { animation-name: frame1; }
.oog-animatie:hover img:nth-child(2) { animation-name: frame2; }
.oog-animatie:hover img:nth-child(3) { animation-name: frame3; }
.oog-animatie:hover img:nth-child(4) { animation-name: frame4; }

/* Frame 1: zichtbaar van 0% tot 24%, daarna weg (kwart van 0.8s = 0-0.2s) */
@keyframes frame1 {
    0%, 24%   { opacity: 1; }
    25%, 100% { opacity: 0; }
}

/* Frame 2: zichtbaar van 25% tot 49% (0.2-0.4s) */
@keyframes frame2 {
    0%, 24%   { opacity: 0; }
    25%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Frame 3: zichtbaar van 50% tot 74% (0.4-0.6s) */
@keyframes frame3 {
    0%, 49%   { opacity: 0; }
    50%, 74%  { opacity: 1; }
    75%, 100% { opacity: 0; }
}

/* Frame 4: verschijnt bij 75% (0.6s) en blijft daarna staan */
@keyframes frame4 {
    0%, 74%    { opacity: 0; }
    75%, 100%  { opacity: 1; }
}


 @media (hover: none) {
    .oog-animatie img:nth-child(1) { animation: frame1-loop 3s linear infinite; }
    .oog-animatie img:nth-child(2) { animation: frame2-loop 3s linear infinite; }
    .oog-animatie img:nth-child(3) { animation: frame3-loop 3s linear infinite; }
    .oog-animatie img:nth-child(4) { animation: frame4-loop 3s linear infinite; }
}

@keyframes frame1-loop {
    0%, 4%   { opacity: 1; }
    5%, 100% { opacity: 0; }
}
@keyframes frame2-loop {
    0%, 4%   { opacity: 0; }
    5%, 9%   { opacity: 1; }
    10%, 100% { opacity: 0; }
}
@keyframes frame3-loop {
    0%, 9%    { opacity: 0; }
    10%, 14%  { opacity: 1; }
    15%, 100% { opacity: 0; }
}
@keyframes frame4-loop {
    0%, 14%   { opacity: 0; }
    15%, 90%  { opacity: 1; }  /* blijft lang open staan */
    95%, 100% { opacity: 0; }  /* valt weer dicht vlak voor de cyclus herbegint */
}

/* Styling popover */

dialog {
    border: none;
    padding: 1.5em;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--text-color) 50%, transparent);
    background-color: var(--background-color-popover);
}


dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog img {
    width: auto;
    height: auto;
    max-height: 70vh; 
}


.popover-inner {
    position: relative;
    padding-top: 1em; /* ruimte voor de knop, zodat de figure eronder begint */
}

dialog button[popovertarget] {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-family-lg);
    font-size: var( --font-size-sm);
    color: var(--text-color-light);
    text-transform: uppercase;

}



figcaption > h2 {
    margin-top: var(--layout-margin);
    color: var(--text-color-light);
    font-size: var( --font-size-sm);
    font-family: var(--font-family-lg);

}

figcaption > p {
    margin:0;
    font-family: var(--font-family-base);
    font-size: var( --font-size-sm);
    color: var(--text-color-light);

}