/* ---------------------
   Variables globales
--------------------- */

:root {
  --font-primary: 'NeueHaasDisplayRoman', sans-serif;
  --font-bold: 'NeueHaasDisplayBold', sans-serif;
  --font-thin: 'NeueHaasDisplayThin', sans-serif;

  --color-text: black;
  --color-link-hover: lightgrey;
  --color-footer-border: lightgrey;
}

/* ---------------------
   Reset & Global Styles
--------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* ça force tout à rester dans le viewport */
}

body {
  font-family: var(--font-primary);

}

/* ---------------------
   Fonts declarations
--------------------- */

@font-face {
  font-family: 'NeueHaasDisplayRoman';
  src: url('../fonts/NeueHaasDisplayRoman.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NeueHaasDisplayBold';
  src: url('../fonts/NeueHaasDisplayBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NeueHaasDisplayThin';
  src: url('../fonts/NeueHaasDisplayThin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------
   Overlay
--------------------- */

#page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1000; /* Ensures the overlay is above all other elements */
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out;
}

/* ---------------------
   Header styles
--------------------- */

.header {
  width: 100%;
  position: fixed;
  letter-spacing: 0.03rem;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 20px;
  padding: 20px;
  background-color: transparent; /* none is invalid */
  color: var(--color-text);
  z-index: 1;
}

.header a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
  padding: 8px 0 4px 0;
  transition: color 0.3s;
}

.header a:hover {
  color: var(--color-link-hover);
}

/* Header grid positioning */

.kieran-burr {
  font-family: var(--font-bold);
  grid-column: span 4;
}

.overview {
  grid-column: 5;
}

.archive {
  grid-column: 6 / span 1;
}

.about {
  grid-column: 7 / span 1;
}

.instagram {
  grid-column: 13 / span 1;
  text-align: left;
}

/* Icon positioning */

.picto {
  position: fixed;
  right: 20px;
  top: 27px;
  width: 30px;
    z-index: 9999;
}







/* ---------------------
   Footer styles
--------------------- */

.footer-wrapper {
  background-color: none;
  margin-top: 100px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;
  color: var(--color-text);
  z-index: 1;
  font-size: 16px;
}

.footer-columns a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 16px;
  padding: 8px 0 4px 0;
  transition: color 0.3s;
}

.footer-columns a:hover {
  color: var(--color-link-hover);
}

/* Footer row 1 */

.footer-row1 {
  border-top: 1px solid var(--color-footer-border);
  border-bottom: 1px solid var(--color-footer-border);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 20px;
  padding: 20px 0 100px 0;
  font-size: 1rem;
}

.footer-description {
  font-size: 40px;
  text-align: left;
  grid-column: span 8;
}

/* Footer columns grid */

.footer-columns {
  background-color: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 20px;
  padding: 20px 20px;
  color: var(--color-text);
  z-index: 1;
  margin-bottom: 300px;
}

.footer-reach {
  grid-column: span 4;
}

.footer-find {
  grid-column: 5 / span 4;
}

.copyright {
  grid-column: 13 / span 3;
  text-align: left;
}

/* ---------------------
   Content fade effects
--------------------- */

#content {
  opacity: 0;
  transition: opacity 0.8s ease;
}

#content.fade-in {
  opacity: 1;
}

#content.fade-out {
  opacity: 0;
}

/* ---------------------
   MEDIA QUERIES
--------------------- */

@media (max-width: 1024px) {
  .header {
    grid-template-columns: repeat(16, 1fr);
  }

  /* Footer adjustments */

  .footer-row1 {
    grid-template-columns: repeat(16, 1fr);
  }

  .footer-row2 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    padding: 20px 0;
    margin-bottom: 100px;
  }

  .footer-links-group1 {
    grid-column: 1 / span 5;
    border: 1px solid orange; /* debug? */
  }

  .footer-links-group2 {
    grid-column: 5;
  }

  .footer-links-group3 {
    grid-column: 7;
  }

  /* Header grid adjustments */

  .kieran-burr {
    grid-column: 1 / span 5;
  }

  .overview {
    grid-column: 12 / span 1;
  }

  .about {
    padding-left: 20px;
    grid-column: 14 / span 1;
  }

  .archive {
    display: none;
  }

  .instagram {
    grid-column: 16 / span 1;
    text-align: right;
  }

  .footer-description {
    font-size: 30px;
    text-align: left;
    grid-column: span 8;
  }

  .copyright {
    grid-column: 14 / span 3;
    text-align: right;
  }

  .picto {
    display: none;
  }
}

@media (max-width: 768px) {
  .header {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }

  .kieran-burr {
    grid-column: span 4;
  }

  .overview {
    grid-column: 5;
  }

  .about {
    grid-column: 6;
  }

  .instagram {
    display: none;
  }

  .footer-wrapper {
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
  }

  .footer-row1 {
    grid-column: 1 / span 8;
    width: 100%;
  }

  .footer-description {
    font-size: 30px;
    grid-column: 1 / span 8;
  }

  .footer-columns {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }

  .footer-reach {
    grid-column: 1 / span 4;
  }

  .footer-find {
    grid-column: 5 / span 4;
  }

  .copyright {
    margin-top: 50px;
    position: relative;
    grid-column: 1 / span 8;
    text-align: left;
  }

  .picto {
    display: none;
  }
}