@font-face {
  font-family: "proxima-nova";
  src: url(../fonts/Proxima\ Nova\ Regular.ttf);
}

@font-face {
  font-family: "proxima-nova-light";
  src: url(../fonts/Proxima\ Nova\ Light.ttf);
}

@font-face {
  font-family: "proxima-nova-sBold";
  src: url(../fonts/Proxima\ Nova\ Semibold.ttf);
}

@font-face {
  font-family: "proxima-nova-eBold";
  src: url(../fonts/Proxima\ Nova\ Extrabold.ttf);
}

* {
  margin: 0;
  padding: 0;
  font-family: "proxima-nova";
}

/* https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    scroll-snap-type: none !important;
  }
}

:root {
  color-scheme: light dark;

  /* Achtergronden */
  --backgroundColor: light-dark(white, #00131a);
  --headerAchtergrondKleur: light-dark(#009fd8, #002e3f);
  --cardAchtergrondkleurHome: light-dark(#f0f0f1, #0d252c);
  --cardAchtergrondkleurHHW: light-dark(white, #00131a);

  /* Links en buttons */
  --grijzeButtons: light-dark(#4e565f, white);
  --grijzeButtonsHHW: white;
  --linkKleur: light-dark(black, white);
  --buttonHHWKleur: #28a745;
  --buttonHHWKleurHover: #51b772;
  --buttonHHWKleurActive: #298446;
  --buttonHHWKleurFocus: white;
  --buttonEnTekstHHWKleurBlauw: #009fd8;
  --hoverButtonLink: light-dark(#e2dfdf, #263c41);
  --hoverButtonLinkBlauw: #0285b0;
  --sectieAchtergrondKleurHHW: light-dark(#f0f0f1, #0d252c);

  --buttonBorderRadius: 0.5em;
  --cardBorderRadius: 0.75em;
  --blauweButtonHover: light-dark(#aadaef, #003e53);
  --accentKleurBlauwButtonAchtergrond: light-dark(#e2f4fc, #002e3f);
  --blauweKnopWitAchtergrondFocus: light-dark(black, white);

  /* Koppen en tekst */
  --h1Color: light-dark(white, white);
  --h4Kleur: light-dark(#4e565f, #d9d9d9);
  --pKleur: light-dark(black, #d9d9d9);
  --tekstKleur: light-dark(black, white);

  --datumEnSVGKleur: light-dark(red, #fe4a49);
  --ticketEnAantalKleur: var(--accentKleurBlauw);

  /* Overig */
  --accentKleurBlauw: #009fd8;

  --accentKleurBlauwFocus: light-dark(#0062d3, var(--accentKleurBlauw));
  --logoKleurHHW: white;
  --logoKleurHome: light-dark(var(--accentKleurBlauw), white);
  --pijltjeHamburger: light-dark(black, white);
}

html {
  scrollbar-gutter: stable;

  &:has(nav.toonMenu) {
    overflow: clip;
  }
}

body {
  background-color: var(--backgroundColor);
}

body > a[href="#main"] {
  position: absolute;
  left: -9999999em;
  z-index: 999;
  color: var(--linkKleur);
}

body > a[href="#main"]:focus {
  left: 0.5em;
  border: 0.2em solid var(--accentKleurBlauw);
}

h1 {
  color: var(--h1Color);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;

  font-family: "proxima-nova-sBold";
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.25em;
}

@media (width > 40em) {
  h1 {
    font-size: 2.5em;
  }
}

@media (width > 60em) {
  h1 {
    font-family: "proxima-nova-eBold";
    font-size: 3.5em;
  }
}

h2 {
  font-size: 1.8em;
  font-family: "proxima-nova-sBold";
  font-weight: 700;
}

h3 {
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1em;
  font-family: "proxima-nova-sBold";
}

label {
  position: absolute;
  left: -999999em;
}

@media (width > 50em) {
  h2 {
    font-size: 2.1em;
  }

  h3 {
    font-size: 1.3em;
  }

  p {
    font-size: 1.2em;
  }
}

h4 {
  color: var(--h4Kleur);
}

li {
  list-style-type: none;
}

p {
  font-weight: 600;
  color: var(--pKleur);
}

a {
  text-decoration: none;
  color: var(--linkKleur);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  height: 4em;
  background-color: var(--backgroundColor);
  padding: 0.7rem 1rem;
}

header section {
  display: flex;
  align-items: center;
  gap: 1em;

  button {
    display: flex;
    align-items: center;
    appearance: none;
    border: none;
    background: none;
    height: 3em;

    > svg {
      height: 3em;
      color: var(--grijzeButtons);
    }
  }

  button:hover {
    cursor: pointer;
  }

  a {
    display: flex;
    align-items: center;

    > svg {
      height: 2.5em;
      color: var(--grijzeButtons);
    }
  }
}

header nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  translate: 100% 0%;
  transition: 0.15s;

  ul li {
    list-style-type: none;
  }
}

header nav section a:first-of-type > svg {
  color: var(--logoKleurHome);
  height: 2em;
}

nav.toonMenu {
  background-color: var(--backgroundColor);
  translate: 0% 0%;
  padding: 0 1rem;
}

nav.toonMenu section button {
  display: flex;
  align-items: center;

  cursor: pointer;
}

nav.toonMenu section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4em;
  padding-top: 0.7em;

  button svg {
    height: 3em;
    color: var(--grijzeButtons);
  }
}

nav.toonMenu ul {
  display: grid;
  gap: 1em;
  align-items: start;
}

@media (width > 50em) {
  nav.toonMenu ul {
    gap: 2em;
    padding: 0 5rem;
  }
}

nav.toonMenu ul li:nth-of-type(1) a {
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: var(--buttonEnTekstHHWKleurBlauw);
  border-radius: var(--buttonBorderRadius);
  padding: 0.5rem 0.5rem;
}

nav.toonMenu ul li:nth-of-type(1) a:hover {
  background-color: var(--hoverButtonLinkBlauw);
}

nav.toonMenu ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;

  color: var(--linkKleur);
  font-size: 1.1em;

  cursor: pointer;
}

@media (width > 7em) {
  nav.toonMenu ul li a {
    border-radius: var(--buttonBorderRadius);
    background-color: var(--cardAchtergrondkleurHome);
    height: 3em;

    svg {
      color: var(--pijltjeHamburger);
      height: 1em;
    }
  }

  nav.toonMenu ul li a:active {
    transform: scale(1.02);
  }

  nav.toonMenu ul li a:active {
    transform: scale(1);
  }
}
@media (width > 50em) {
  nav.toonMenu ul li:nth-of-type(1) a {
    border: none;
    height: 3em;
    font-size: 1.3em;

    text-decoration: none;
  }
}
@media (width > 50em) {
  nav.toonMenu ul li a {
    border: none;
    background: none;
    height: 1em;

    font-size: 1.2em;
  }

  nav.toonMenu ul li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accentKleurBlauw);
    transform: scale(1.02);
    transition: 0.2s;

    svg {
      color: var(--accentKleurBlauw);
      transform: scale(1.5);
      transition: 0.2s;
    }
  }

  nav.toonMenu ul li:nth-of-type(1) a:hover {
    transform: none;
    text-decoration: none;
  }
}

nav.toonMenu ul li:nth-of-type(1) a:nth-of-type(1) {
  color: white;
}

nav.toonMenu ul li:nth-of-type(1) a:nth-of-type(1):focus {
  transform: scale(1.01);
  outline: 0.2em solid white;
  outline-offset: -0.3em;
}

input {
  width: 100%;
}

time {
  font-weight: 600;
  color: var(--datumEnSVGKleur);
}

footer {
  padding: 0 1em;
  border-top: 0.1em solid grey;
  padding-top: 3rem;
}

footer section h3,
footer section h3 {
  margin-bottom: 1rem;
}

footer details {
  border: 0.1em solid grey;
  border-radius: var(--buttonBorderRadius);
}

footer summary {
  display: flex;
  padding: 1rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  position: sticky;
  justify-content: space-between;
  align-items: center;

  list-style: none;
  svg {
    height: 1em;
    transform: rotate(90deg);
  }
}

footer details[open] summary {
  svg {
    transform: rotate(-180deg);
  }
}

footer details[open] nav {
  /* padding: 0.5rem 1rem; */
  max-height: 13em;
  overflow-y: scroll;
}

footer section:nth-of-type(1) nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

footer section:nth-of-type(1) li:nth-of-type(1) {
  border-top: 0.1em solid grey;

  /* https://developer.mozilla.org
  /en-US/docs/Web/CSS/Reference/Properties/border-top-left-radius */
  border-top-left-radius: var(--buttonBorderRadius);
  border-top-right-radius: var(--buttonBorderRadius);

  a {
    color: var(--accentKleurBlauw);
  }
}

footer > section:nth-of-type(1) li {
  padding: 1rem;
  list-style-type: none;
  font-family: "proxima-nova-light";
  font-size: 1.1em;
  border-bottom: 0.1em solid grey;
  color: var(--accentKleurBlauw);
  cursor: pointer;
  gap: 1em;
}

footer section:nth-of-type(1) li:hover {
  background-color: var(--accentKleurBlauwButtonAchtergrond);
}

footer > section:nth-of-type(2) {
  display: none;
}

footer > section:nth-of-type(3),
footer > section:nth-of-type(4) {
  padding-top: 2rem;
}

footer > section:nth-of-type(3) ul,
section:nth-of-type(4) ul {
  display: grid;
  gap: 1em;

  li {
    list-style-type: none;
    display: flex;

    a {
      color: var(--h4Kleur);
    }
  }
}

footer > section:nth-of-type(5) button {
  display: flex;
  width: 100%;
  justify-content: center;
  appearance: none;
  border: none;
  align-items: center;
  padding: 1rem 2rem;
  margin-top: 2em;
  gap: 0.5em;
  font-size: 1em;
  font-family: "proxima-nova-sBold";
  color: var(--buttonEnTekstHHWKleurBlauw);
  background-color: var(--accentKleurBlauwButtonAchtergrond);

  border-radius: var(--buttonBorderRadius);
  cursor: pointer;

  svg {
    order: -1;
    height: 1em;
  }
}

footer > section:nth-of-type(5) button:hover {
  background-color: var(--accentKleurBlauw);
  color: white;
}

footer > section:nth-of-type(5) button:focus {
  transform: scale(1.01);
  outline: 0.2em solid var(--accentKleurBlauw);
  outline-offset: -0.3em;
}

footer > section:nth-of-type(6) {
  display: grid;
  grid-template-rows: max-content max-content;
  grid-template-columns: max-content max-content;

  grid-template-areas:
    "appStore    appstoreRating"
    "googlePlay  googlePlayRating";

  gap: 1em;

  padding: 2rem 0;
  align-items: center;
}

footer > section:nth-of-type(6) a:nth-of-type(1) svg {
  grid-area: appStore;
  height: 2.5em;
}

footer > section:nth-of-type(6) a:nth-of-type(2) {
  grid-area: googlePlay;

  img {
    height: 3em;
  }
}

footer section:nth-of-type(6) section:nth-of-type(1) {
  grid-area: appstoreRating;
  font-size: 0.9em;

  svg {
    height: 1.3em;
  }
}

footer > section:nth-of-type(6) section:nth-of-type(2) {
  grid-area: googlePlayRating;
  font-size: 0.9em;

  svg {
    height: 1.3em;
  }
}

@media (width > 50em) {
  footer {
    display: grid;
    gap: 2em;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "menu   volgOns   hoeHetWerkt";
    padding-bottom: 2rem;
  }

  footer details {
    display: none;
  }

  footer summary {
    display: none;
  }

  footer > section:nth-of-type(1) {
    display: none;
  }

  footer > section:nth-of-type(2) {
    display: grid;
    grid-area: menu;

    /* https://developer.mozilla.org
    /en-US/docs/Web/CSS/Reference/Properties/grid-row */
    grid-row: 1 / span 2;
    padding-top: 2rem;
    gap: 2em;

    h3 {
      font-size: 1.5em;
    }
    ul {
      display: grid;
      gap: 1em;
    }

    li {
      list-style-type: none;
    }

    ul li a {
      font-size: 1.2em;
      color: var(--h4Kleur);
    }
  }

  footer section:nth-of-type(3) {
    grid-area: volgOns;
    grid-row-start: 1;

    h3 {
      font-size: 1.5em;
    }
    ul li a {
      font-size: 1.2em;
    }
  }

  footer section:nth-of-type(4) {
    grid-area: volgOns;
    grid-row-start: 2;

    h3 {
      font-size: 1.5em;
    }

    ul li a {
      font-size: 1.2em;
    }
  }

  footer section:nth-of-type(5) {
    grid-area: hoeHetWerkt;
    grid-row-start: 1;

    button {
      padding: 1.5rem 2rem;
      font-size: 1.2em;
    }
  }

  footer section:nth-of-type(6) {
    grid-area: hoeHetWerkt;
    grid-row: 2;

    section {
      p {
        font-size: 1.1em;
      }
    }
  }
}

@media (width > 60em) {
  footer {
    padding: 2rem 4rem;
  }

  footer section:nth-of-type(5) button {
    padding: 1.5rem 2rem;
    font-size: 1.2em;
  }
}

@media (width > 80em) {
  footer {
    padding: 2rem 10rem;
  }
}