/**************************
* MARK: Fonts
**************************/

@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/Fonts/Press_Start_2P/PressStart2P-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Handjet";
  src: url("../assets/Fonts/Handjet/Handjet-VariableFont_ELGR\,ELSH\,wght.ttf");
  font-weight: 100 900;
  font-style: normal;
}

/**************************
* MARK: Custom properties
**************************/

html {
  color-scheme: light dark;

  --pink: #fd3db5;
  --light-pink: #fdcdea;
  --white: white;
  --black: black;
  --red: red;
  --green: green;

  --backdrop-transparent: rgb(0 0 0 / 0%);
  --backdrop-dark: rgb(0 0 0 / 60%);

  --background: light-dark(var(--white), var(--pink));
  --color: light-dark(var(--pink), var(--black));
  --color-h1: light-dark(var(--pink), var(--black));

  --background-button: light-dark(var(--pink), var(--black));
  --color-button: light-dark(var(--white), var(--pink));
  --background-button-hover: light-dark(var(--black), var(--white));
  --color-button-hover: var(--pink);
  --border-button: light-dark(var(--black), var(--white));

  --accent-color: light-dark(var(--pink), var(--white));

  accent-color: var(--accent-color);
  scrollbar-gutter: stable;
}

/**************************
* MARK: Theme keuzes
**************************/

html:has([value="light-theme"]:checked) {
  color-scheme: light;
}

html:has([value="dark-theme"]:checked) {
  color-scheme: dark;
}

/**************************
* MARK: Algemene styling
**************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: "Press Start 2P", system-ui;
  background-color: var(--background);
  color: var(--color);
}

article {
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/**************************
* MARK: Navigation
**************************/

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
}

nav a {
  display: inline-block;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.8;
  padding: 0.8rem 1rem;
  background-color: var(--background-button);
  color: var(--color-button);
  border: 2px solid var(--border-button);
  border-radius: 0.5rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

nav a:focus-visible {
  outline: 3px solid var(--color);
  outline-offset: 4px;
}

nav a:hover {
  background-color: var(--background-button-hover);
  color: var(--color-button-hover);
}

nav a:active {
  transform: scale(0.96);
}

/**************************
* MARK: Header and theme icons
**************************/

header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--background);
}

header label {
  grid-row: 1;
  cursor: pointer;
}

header label:first-of-type {
  grid-column: 2;
}

header label:nth-of-type(2) {
  grid-column: 3;
}

header input {
  opacity: 0;
  margin: 0;
}

header label img {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

header label:hover img {
  transform: scale(1.1);
}

header input:checked + img {
  outline: 2px solid currentColor;
  border-radius: 0.5rem;
}

header input:focus-visible + img {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

header details,
header h2 {
  grid-column: 1 / -1;
}

/**************************
* MARK: Bewegingsinstellingen knop
**************************/

header button#openMotionDialog {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

header button#openMotionDialog img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

header button#openMotionDialog:hover {
  background: transparent;
  border: none;
}

header button#openMotionDialog:active {
  transform: none;
}

header button#openMotionDialog:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/**************************
* MARK: Headings
**************************/

h1 {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  color: var(--color-h1);
  font-size: clamp(2.5rem, 8vw, 6rem);
  text-align: center;
  overflow-wrap: anywhere;
}

h2 {
  line-height: 1.8;
}

/**************************
* MARK: Variabele fonts
**************************/

h2.handjet-title {
  font-family: "Handjet", sans-serif;
  font-size: 200px;
  font-weight: 300;
  text-align: center;
  line-height: 1;

  font-variation-settings:
    "ELGR" 1,
    "ELSH" 0;

  animation-name: game-on;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes game-on {
  0% {
    font-weight: 300;
    font-variation-settings:
      "ELGR" 1,
      "ELSH" 0;
  }

  100% {
    font-weight: 900;
    font-variation-settings:
      "ELGR" 2,
      "ELSH" 16;
  }
}

html.reduce-motion h2.handjet-title {
  animation-name: none;
  font-weight: 900;
  font-variation-settings:
    "ELGR" 2,
    "ELSH" 16;
}

/**************************
* MARK: Main content
**************************/

main {
  display: grid;
  gap: 2rem;
  padding: 1rem;
}

main:has(img) {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

main img {
  width: 100%;
  height: 14rem;
  object-fit: contain;
  background-color: var(--white);
  border: 2px solid var(--black);
  padding: 1rem;
  border-radius: 0.5rem;
}

/**************************
* MARK: Responsive grid
**************************/

@media (width > 40em) {
  main:has(img) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width > 60em) {
  main:has(img) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/**************************
* MARK: Buttons
**************************/

button {
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.8;
  padding: 0.8rem 1rem;
  background-color: var(--background-button);
  color: var(--color-button);
  border: 2px solid var(--border-button);
  border-radius: 0.5rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}

button:focus-visible {
  outline: 3px solid var(--color);
  outline-offset: 4px;
}

button:hover {
  background-color: var(--background-button-hover);
  color: var(--color-button-hover);
}

button:active {
  transform: scale(0.96);
}

/**************************
* MARK: Details and summary
**************************/

details {
  border: 2px solid currentColor;
  padding: 1rem;
  line-height: 1.8;
}

summary {
  cursor: pointer;
  padding: 0.5rem;
}

summary:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

summary:hover {
  background-color: var(--background-button);
  color: var(--color-button);
}

summary:active {
  background-color: var(--background-button-hover);
  color: var(--color-button-hover);
}

details:open {
  border-color: var(--pink);
}

details:open summary {
  background-color: var(--background-button);
  color: var(--color-button);
}

/**************************
* MARK: Dialogs
**************************/

dialog {
  position: fixed;
  width: min(90%, 40rem);
  max-height: 85vh;
  overflow-y: auto;
  margin: auto;
  background-color: var(--background);
  color: var(--color);
  border: 2px solid currentColor;
  border-radius: 0.5rem;
  padding: 1.5rem;

  opacity: 0;
  transform: translate3d(200%, 200%, 0) rotate(45deg);

  transition:
    opacity 200ms ease,
    transform 400ms ease,
    display 400ms allow-discrete,
    overlay 400ms allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translate3d(200%, 200%, 0) rotate(45deg);
  }
}

dialog::backdrop {
  background-color: var(--backdrop-transparent);
  backdrop-filter: blur(0);

  transition:
    background-color 200ms ease,
    backdrop-filter 200ms ease,
    display 200ms allow-discrete,
    overlay 200ms allow-discrete;
}

dialog[open]::backdrop {
  background-color: var(--backdrop-dark);
  backdrop-filter: blur(3px);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: var(--backdrop-transparent);
    backdrop-filter: blur(0);
  }
}

dialog h2 {
  padding-right: 0.5rem;
}

dialog p {
  line-height: 1.8;
  font-size: 0.75rem;
}

dialog form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

dialog form p {
  flex-basis: 100%;
}

html:has(dialog[open]:modal) {
  overflow: hidden;
}

/**************************
* MARK: Dialog buttons
**************************/

.dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.dialog-buttons button {
  max-width: 100%;
}

.dialog-buttons button[aria-pressed="true"] {
  border: 3px solid var(--pink);
}

.dialog-buttons button[aria-pressed="false"] {
  border: 2px solid var(--border-button);
}

.dialog-buttons button:focus:not(:focus-visible) {
  outline: none;
}

.dialog-buttons button:focus-visible {
  outline: 3px solid var(--border-button);
  outline-offset: 3px;
}

/**************************
* MARK: Footer
**************************/

footer {
  margin-top: 2rem;
  padding: 1rem;
}

footer button#openCookieModal {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  border: 2px solid var(--border-button);
}

/**************************
* MARK: Console gallery
**************************/

main.console-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

main.console-gallery figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  background-color: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 0.5rem;
  overflow: hidden;
}

main.console-gallery figure img {
  width: 100%;
  height: 14rem;
  object-fit: contain;
  background-color: var(--white);
  border: 0;
  padding: 0;
  border-radius: 0;
}

main.console-gallery .console-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  min-width: 0;
  margin-top: 1rem;
}

main.console-gallery figcaption {
  position: static;
  max-width: 100%;
  margin: 0;
  padding: 0.75rem;
  background-color: var(--pink);
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 0.25rem;
  font-size: 0.65rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
  text-align: center;
}

/**************************
* MARK: Meer informatie links
**************************/
.more-info {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 0.8rem 0.5rem;
  background-color: var(--background-button);
  color: var(--color-button);
  border: 2px solid var(--border-button);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.65rem;
  line-height: 1.8;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.more-info:hover {
  background-color: var(--background-button-hover);
  color: var(--color-button-hover);
}

.more-info:focus-visible {
  outline: 3px solid var(--color);
  outline-offset: 4px;
}

.more-info:active {
  transform: scale(0.96);
}

/**************************
* MARK: Grid view
**************************/

main.console-gallery.grid-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/**************************
* MARK: List view
**************************/

main.console-gallery.list-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 55rem;
  margin-inline: auto;
}

main.console-gallery.list-view figure {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

main.console-gallery.list-view figure img {
  height: 8rem;
}

main.console-gallery.list-view .console-info {
  margin-top: 0;
}

main.console-gallery.list-view figcaption {
  text-align: left;
}

/**************************
* MARK: Layout controls
**************************/

.layout-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 1rem;
}

/**************************
* MARK: Responsive console layout
**************************/

@media (width > 40em) {
  main.console-gallery.grid-view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width > 60em) {
  main.console-gallery.grid-view {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 30em) {
  main.console-gallery.list-view figure {
    grid-template-columns: minmax(0, 1fr);
  }

  main.console-gallery.list-view figure img {
    height: 10rem;
  }

  main.console-gallery.list-view figcaption {
    text-align: center;
  }
}

/**************************
* MARK: Reduced motion
**************************/

@media (prefers-reduced-motion: reduce) {
  dialog,
  dialog::backdrop {
    transition: none;
  }

  button:active,
  .more-info:active {
    transform: none;
  }

  header label:hover img {
    transform: none;
  }
}

/**************************
* MARK: Minder beweging
**************************/

html.reduce-motion dialog,
html.reduce-motion dialog::backdrop {
  transition: none;
}

html.reduce-motion dialog[open] {
  transform: none;
}

html.reduce-motion button:active,
html.reduce-motion .more-info:active {
  transform: none;
}

html.reduce-motion header label:hover img {
  transform: none;
}

/**************************
* MARK: Console detailpagina
**************************/

main.console-detail {
  display: block;
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding: 1rem;
}

.console-detail article {
  width: 100%;
  line-height: 1.8;
}

.detail-figure {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 0.5rem;
}

.detail-figure img {
  width: 100%;
  max-width: 50rem;
  height: 42rem;
  object-fit: contain;
  padding: 0.25rem;
  background-color: var(--white);
  border: 0;
  border-radius: 0;
}

.detail-figure figcaption {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.8;
}

.console-detail section {
  margin-block: 2rem;
  line-height: 1.8;
}

/**************************
* MARK: Animatie console detailpagina
**************************/

@keyframes --console-bewegen {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 0 -10px;
    rotate: 1deg;
  }

  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

.detail-figure img {
  animation-name: --console-bewegen;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  .detail-figure img {
    animation: none;
    translate: 0 0;
    rotate: 0deg;
  }
}

html.reduce-motion .detail-figure img {
  animation: none;
  translate: 0 0;
  rotate: 0deg;
}

html.normal-motion .detail-figure img {
  animation-name: --console-bewegen;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media (max-width: 30em) {
  .detail-figure {
    padding: 0.75rem;
  }

  .detail-figure img {
    height: 30rem;
  }
}

/**************************
* MARK: UX van HTML
**************************/

main form {
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: 35rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 2px solid var(--black);
  border-radius: 0.5rem;
  background-color: var(--light-pink);
  color: var(--black);
}

main form fieldset {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  border: 0;
  padding: 0;
}

main form legend {
  padding: 0 0 1rem;
  font-weight: bold;
}

main form label {
  margin-top: 0.5rem;
}

main form input,
main form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--pink);
  border-radius: 0.5rem;
  background-color: var(--white);
  color: var(--black);
  font: inherit;
}

main form textarea {
  resize: vertical;
}

main form input:focus,
main form textarea:focus {
  border-color: var(--pink);
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

main form label:has(+ input:focus),
main form label:has(+ textarea:focus) {
  font-weight: bold;
}

main form label:has(+ [required])::after {
  content: " *";
  color: var(--red);
}

main form label:has(+ [required]:valid)::after {
  color: var(--green);
}

main form button {
  margin-top: 1rem;
}

@media (max-width: 40em) {
  main form {
    width: calc(100% - 2rem);
    margin: 1.5rem auto;
    padding: 1rem;
  }
}

/**************************
* MARK: Interessantere layouts
**************************/

.intro {
  container-type: inline-size;
}

.intro h2:not(.handjet-title) {
  font-size: clamp(1.5rem, 5cqi, 2rem);
}

/**************************
* MARK: Homepage
**************************/

main.home-page {
  display: block;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding: 1rem;
}

.home-hero {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-block: 2rem;
  text-align: center;
}

.home-hero h2 {
  margin: 0;
  line-height: 1.8;
}

.home-hero-figure {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.home-hero-image {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: min(65vh, 42rem);
  object-fit: contain;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  animation: psp-bewegen 3s ease-in-out infinite;
}

.home-hero h3 {
  margin: 0;
  line-height: 1.8;
}

/**************************
* MARK: Homepage animatie
**************************/

@keyframes psp-bewegen {
  0% {
    translate: -14px 0;
  }

  50% {
    translate: 14px 0;
  }

  100% {
    translate: -14px 0;
  }
}

/**************************
* MARK: Homepage FAQ
**************************/

.home-page .favorite {
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
}

.home-page .favorite h2 {
  margin: 0;
  line-height: 1.8;
}

.home-page .intro {
  margin-block: 2rem;
  line-height: 1.8;
}

.home-page .intro h2 {
  margin-top: 0;
}

/**************************
* MARK: Homepage responsive
**************************/

@media (max-width: 30em) {
  .home-hero {
    gap: 1rem;
    padding-block: 1rem;
  }

  .home-hero-image {
    height: 55vh;
  }
}

/**************************
* MARK: Homepage minder beweging
**************************/

@media (prefers-reduced-motion: reduce) {
  .home-hero-image {
    animation: none;
    translate: 0 0;
  }
}

html.reduce-motion .home-hero-image {
  animation: none;
  translate: 0 0;
}

html.normal-motion .home-hero-image {
  animation: psp-bewegen 3s ease-in-out infinite;
}