@font-face {
  font-family: "Koekoek-Regular";
  src: url("Koekoek-Regular-Regular.otf") 
  format("opentype");
  font-weight: normal;
  font-style: normal;

}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

html {
  background: white;
}

html.dark {
  background: black;
}

body {
  margin: 0;
  padding: 40px;
  font-family: "Koekoek-Regular", sans-serif;
  background: white;
  color: black;
    letter-spacing: 1.2pt;
}

body.crosshair-cursor {
  cursor: none;
}

body.crosshair-cursor a,
body.crosshair-cursor button,
body.crosshair-cursor [role="button"],
body.crosshair-cursor input[type="submit"],
body.crosshair-cursor input[type="button"] {
  cursor: none;
}

/* Little crosshair that substitutes the pointer */
.crosshair-cursor .cursor-crosshair {
  position: fixed;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  z-index: 99999;
  background: linear-gradient(to right, transparent 6px, currentColor 6px, currentColor 10px, transparent 10px),
              linear-gradient(to bottom, transparent 6px, currentColor 6px, currentColor 10px, transparent 10px);
  color: red;
}

body.dark.crosshair-cursor .cursor-crosshair {
  color: yellow;
}

.black-section {
  background: black;
  color: white;
  margin-left: -40px;
  margin-right: -40px;
  padding: 4rem 0;
}


/* Header bovenaan */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.name-home a {
  color: inherit;          /* neemt de kleur van de parent over */
  text-decoration: none;   /* geen onderlijning standaard */
  transition: 0.2s ease;
  font-size: 20px;

}

.name-home a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  color: blue;
}


/* Navigatie rechtsboven */
nav {
  display: flex;
  gap: 100px;
  font-size: 20px;
}

nav a {
  color: black;
  text-decoration: none;
  transition: 0.2s ease;
}

nav a:hover {
  color: blue;
  text-decoration: underline;
  text-underline-offset: 6px;
}

nav a.active {
  color: red;              /* rood voor de actieve pagina */
  text-decoration: none;   /* geen onderlijning standaard */
}

nav a.active:hover {
  text-decoration: underline;  /* onderlijning bij hover */
  text-underline-offset: 6px;
  color: blue;
}

/* Theme toggle button (light/dark icon)
   Change dimensions: .theme-toggle (button size) and .theme-toggle-icon (circle size)
   Change position: margin-right / margin-left / margin-top / margin-bottom on .theme-toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0;
  margin-right: 0px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

.theme-toggle:hover {
  opacity: 0.6;
}

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid black;
  background: linear-gradient(to right, white 50%, black 50%);
  display: block;
  margin-top: -10px;
}

body.dark .theme-toggle-icon {
  border-color: white;
  background: linear-gradient(to right, white 50%, black 50%);
}

/* Sidebar links */
.sidebar {
  margin-top: 60px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}

.sidebar a {
  color: black;
  text-decoration: none;
  transition: 0.2s ease;
}

.sidebar a:hover {
  color: blue;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Afbeelding bij hover in het midden */
.hover-image-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.hover-image-container img {
  max-width: 700px;
  max-height: 700px;
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.45s ease;
}

/* Na 1s wordt blur weggefade (klasse via JS op index) */
.hover-image-container img.preview-sharp {
  filter: blur(0);
}

/* Fade-in + lichte zoom bij hover (standaard voor alle project-links) */
.project-link:hover ~ .hover-image-container img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Alleen bij Book Design sterker vergroten + kantelen */
.project-link-bookdesign:hover ~ .hover-image-container img {
  opacity: 1;
  transform: rotate(-30deg);
}

/* Extra stijlen voor projectpagina's */
.top-left {
  position: fixed;
  top: 40px;
  left: 40px;
  font-size: 20px;
}

.gallery {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding-top: 120px;
  padding-bottom: 60px;
}

.gallery img {
  width: 380px;
  height: auto;
  object-fit: cover;
  background: white;
}

.title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}

/* Dark mode */
body.dark {
  background: black;
  color: white;
}

body.dark img {
  background: white;
}

body.dark nav a {
  color: white;
}

body.dark nav a:hover {
  color: blue;
}

body.dark nav a.active {
  color: red;
}

body.dark nav a.active:hover {
  color: blue;
}

body.dark .sidebar a {
  color: white;
}

body.dark .sidebar a:hover {
  color: blue;
}

body.dark .info-text,
body.dark .contact-menu,
body.dark .contact-menu-list {
  color: white;
}

body.dark .description-black {
  color: white;
}

body.dark .resume-link a {
  color: white;
}

body.dark .resume-link a:hover {
  color: blue;
}

body.dark .email-menu {
  color: white;
}

body.dark .email-menu:hover {
  color: blue;
}

.top-left a {
  color: inherit;
  text-decoration: none;
}

.top-left a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Beschrijving */
.description {
  text-align: center;
  color: white; 
  max-width: 600px;
  margin: 80px auto;
  font-size: 18px;
  line-height: 1.6;
}

/* Beschrijving zwarte text*/
.description-black {
  text-align: center;
  color: black; 
  max-width: 600px;
  margin: 180px auto;
  font-size: 18px;
  line-height: 1.6;
}

.black-section {
  background-color: black;
  color: white; /* important for text */
  padding: 4rem 0;
}



/* Home button */
.homebutton-link a {
  color: white;
  text-decoration: none;
  transition: 0.2s ease;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 200px;
  font-size: 20px;
}

.homebutton-black a {
  color: black;
  text-decoration: none;
  transition: 0.2s ease;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 200px;
  font-size: 20px;
}

.homebutton-link a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.homebutton-black a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* Verticale galerij */
.vertical-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery img {
  width: 70%;
  height: auto;
  object-fit: cover;
}

/* Verticale galerij West Belgique */
.vertical-gallery-west {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery-west img {
  width: 85%;
  height: auto;
  object-fit: cover;
}

/* Twee kolommen galerij */
.vertical-gallery-2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 40px;
  margin-top: 80px;
  justify-content: center;
  justify-items: center;
}

.vertical-gallery-2-columns img {
  width: 80%;
  height: auto;
  object-fit: cover;
}

.vertical-gallery-koekoek {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: 80px;
}

.vertical-gallery-koekoek img {
  width: 90%;
  height: auto;
  object-fit: cover;
}

.vertical-koekoek {
  justify-content: center;
  margin-left: 200px;
}

.vertical-koekoek img {
  width: 80%;
  height: auto;
  object-fit: cover;
}

/* Koekoek page: flex column so glyph grid is truly centered in the viewport */
body.page-koekoek {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.page-koekoek .homebutton-link {
  flex-shrink: 0;
  text-align: center;
}

body.page-koekoek .homebutton-link a {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Koekoek Modulaarne – 9 columns × 6 rows (fixed grid) */
.koekoek-glyph-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: clamp(48px, 8vh, 88px) clamp(12px, 2.5vw, 32px);
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.koekoek-glyph-grid {
  border-collapse: separate;
  border-spacing: clamp(0.4rem, 1.4vw, 1.1rem) clamp(0.5rem, 1.8vh, 1.35rem);
  table-layout: fixed;
  margin: 0 auto;
  width: min(80vw, 1600px);
}

.koekoek-glyph-grid col {
  width: calc(100% / 9);
}

.koekoek-glyph-grid td {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: clamp(1rem, 4.5vh, 3.25rem) clamp(0.75rem, 2.8vw, 2.25rem);
  box-sizing: border-box;
}

.koekoek-glyph-grid .glyph {
  display: inline-block;
  font-family: "Koekoek-Regular", monospace;
  font-size: clamp(2rem, 7.5vw, 5.25rem);
  line-height: 1;
  color: #fff;
  transition: transform 0.2s ease;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

/* Whole cell is hover target; one glyph “active” per cell */
.koekoek-glyph-grid td:hover .glyph {
  transform: scale(2.45);
}

/* info text pagina */

.info-text{
  text-align: left;       /* tekst links uitlijnen */
  font-size: 20px;        /* lettergrootte 20px */
  max-width: 40ch;        /* breedte ongeveer 7 woorden */
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 60px;
}

.resume-link a {
  color: black;              /* link blijft zwart */
  text-decoration: none;     /* geen onderlijning standaard */
  transition: 0.2s ease;     /* vloeiende overgang */
  line-height: 1.8;
  font-size: 20px;
}

.resume-link a:hover {
  text-decoration: underline;      /* onderlijning bij hover */
  text-underline-offset: 6px;      /* optioneel: afstand van de onderlijning */
  text-decoration-thickness: 2px;
  color: blue;
}

/* contact me text pagina */

.contact-menu {
  text-align: left;       /* tekst links uitlijnen */
  font-size: 20px;        /* lettergrootte 20px */
  max-width: 40ch;        /* breedte ongeveer 7 woorden */
  line-height: 1.4;
  margin-top: 60px;
  margin-bottom: 40px;

}

.contact-menu-list {
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.email-menu {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: black;
  font-size: 20px;
  line-height: 1.9;
  display: inline-block;   /* maakt marge mogelijk */
  margin-top: 40px;        /* extra ruimte boven de knop */

}
.email-menu-koekoek {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: black;
  font-size: 20px;
  line-height: 1.9;
  display: inline-block;   /* maakt marge mogelijk */
  margin-top: 40px;        /* extra ruimte boven de knop */

}

.email-menu:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  color: blue;

}

.image-row {
    display: flex;
    justify-content: center;   /* centreert de foto's horizontaal */
    align-items: center;       /* zorgt dat ze dezelfde hoogte hebben */
    gap: 60px;                 /* ruimte tussen de foto's */
    margin: 40px 0;            /* wat ruimte boven/onder */
    margin-top: 90px;
    margin-bottom: 90px;
}

.image-row img {
    height: 750px;             /* kies zelf een hoogte */
    width: auto;               /* behoudt de juiste verhouding */
    object-fit: cover;         /* zorgt dat ze mooi gevuld blijven */
}



@media (max-width: 768px) {

  body {
    padding: 20px;
    font-size: 16px;
  }

  /* Header stacken */
  header {
    flex-direction: column;
    gap: 20px;
  }

  nav {
    gap: 40px;
    font-size: 18px;
  }

  /* Sidebar wordt gewone lijst */
  .sidebar {
    margin-top: 40px;
    line-height: 1.2;
  }

  .sidebar a {
    font-size: 18px;
  }

  /* Hover images uitschakelen op mobiel */
  .hover-image-container {
    display: none;
  }

  /* Galerijen */
  .gallery {
    flex-direction: column;
    gap: 40px;
    padding-top: 60px;
  }

  .gallery img {
    width: 100%;
  }

  /* Vertical galleries */
  .vertical-gallery img {
    width: 100%;
  }

  .vertical-gallery-2-columns {
    grid-template-columns: 1fr;
  }

  /* Info / contact tekst */
  .info-text,
  .contact-menu {
    max-width: 100%;
    font-size: 18px;
  }

  /* Grote beeldrij */
  .image-row {
    flex-direction: column;
    gap: 40px;
  }

  .image-row img {
    width: 100%;
    height: auto;
  }

}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1vw, 1vh;
  margin: 0 auto;
  padding-top: 120px;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* forces perfect square */

}

.absolute-links {
align-items: right;

}