/*
* -------------------------------------------------------------------
* Between The Moves - Main Stylesheet
* Date: Januari 2026
* Author: Alexander Stenten
* Website: https://www.alexanderstenten.be/integration1/
* -------------------------------------------------------------------
*/


/*========Fonts (extern woff.2 files)=========*/

@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
    url('../fonts/ClashDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashDisplay-Light';
  src: url('../fonts/ClashDisplay-Light.woff2') format('woff2'),
    url('../fonts/ClashDisplay-Light.woff') format('woff');
  font-weight: light;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashDisplay-Regular';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
    url('../fonts/ClashDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



/*========Variables=========*/

:root {
  --deep-indigo: #100D36;
  --off-white: #EFE6DE;
  --coral-red: #F34932;

  --ff-body: "space-grotesk-variable", sans-serif;
  --ff-display: "ClashDisplay-Bold", sans-serif;

  --radius-25: 2.5rem;
  --radius-5: 5rem;

  --space-1: 1rem;
  --space-2: 2rem;
  --space-15: 1.5rem;
  --space-25: 2.5rem;
  --space-3: 3rem;
  --space-4: 4rem;
  --space-5: 5rem;
  --space-6: 6rem;
  --space-75: 7.5rem;
  --space-10: 10rem;

  --font-body: 1.5rem;
  --font-m: 2rem;
  --font-l: 3rem;
  --font-xl: 5rem;
  --font-xxl: 6rem;

  --lh-normal: 1.5;
  --lh-small: .9;

  --font-weight-bold: bold;
}



/*========Basic default styling=========*/

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

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-body);
  line-height: var(--lh-normal);
  font-size: var(--font-body);
  color: var(--deep-indigo);
  background-color: var(--off-white);
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: var(--deep-indigo);
  font-weight: var(--font-weight-bold);
}



/*========Not visible=========*/

.visually-hidden {
  display: none;
}



/*========fluid images=========*/

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



/*========Typography=========*/

/*----Heading-----*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-display);
  font-weight: var(--font-weight-bold);
}

h1,
h2 {
  font-size: var(--font-xl);
}

h3 {
  font-size: var(--font-l);
}


/*----Text-deco-----*/

.text-highlight {
  background-color: var(--coral-red);
  padding: 0 0.5rem 0.25rem 0.5rem;
  color: var(--off-white);
}

.text-red {
  color: var(--coral-red);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}

.tip__number {
  font-size: var(--font-xxl);
  margin-right: 0.2rem;
  background: none;
  padding: 0;
}

.brand {
  font-size: var(--font-m);
}



/*========Buttons=========*/

.button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--off-white);
  border-radius: var(--radius-5);
  padding: 12px var(--space-15);
  background: var(--coral-red);
  transition: 0.3s;
  white-space: nowrap;
}

.button__arrow {
  width: var(--space-25);
  height: var(--space-2);
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.button:hover .button__arrow {
  transform: translateX(.5rem);
}

button {
  text-decoration: none;
  font-weight: bold;
  border: none;
  font-size: var(--font-body);
  font-family: var(--ff-body);
  background: var(--coral-red);
  color: var(--off-white);
  border-radius: var(--radius-5);
  text-align: center;
}

button:hover {
  color: var(--coral-red);
  background-color: var(--off-white);
  border: solid 0.2rem;
}

button:focus-visible {
  outline: 0.2rem solid var(--deep-indigo);
}

.popup__button:hover{
  background-color: var(--deep-indigo);
}



/*========Navigation=========*/

.nav {
  display: flex;
  margin: var(--space-4) var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.nav__links {
  display: flex;
  gap: var(--space-25);
}

.nav__link:hover {
  text-decoration: underline;
}

.nav__link--button {
  display: inline;
}

.nav__link--button:hover {
  background: var(--deep-indigo);
  text-decoration: none;
}



/*========HERO=========*/

.hero {
  background-image: url(../assets/svg/hero_background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 2fr 1fr auto;
  grid-auto-flow: column;
  justify-items: start;
  gap: 0 var(--space-5);
  padding: 8.5rem 11.25rem 8rem 11.25rem;
  color: var(--off-white);
}

.hero__item--title {
  margin-top: var(--space-15);
  line-height: var(--lh-small);
}

.hero__item--text {
  grid-area: 2 / 1 / 4 / 1;
  align-self: self-end;
}

.hero__item--visual {
  grid-area: 1 / 2 / 3 / 3;
}

.hero__item--cta {
  align-self: center;
  margin-top: var(--space-25);
}



/*========Tips & Tricks=========*/

.tips__heading {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-items: center;
  margin: var(--space-10) 15rem;
  gap: var(--space-2);
}

.tips__heading-layout {
  justify-items: center;
}

.tips__heading-img {
  max-height: 15rem;
}

.tip__layout {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-6);
  margin: 5.625rem;
  align-items: center;
}

.tip__layout--3 {
  gap: var(--space-3);
}

.tip__content--1 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  gap: var(--space-4);
}

.tip__content--2 {
  display: grid;
  align-items: center;
  gap: var(--space-4);
}

.tip__content--3 {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 2fr auto;
  grid-template-rows: 2fr 1fr;
  align-items: center;
  gap: 0 var(--space-15);
  justify-items: left;
  align-items: center;
}

.tip__content--5 {
  display: grid;
  justify-items: left;
  grid-template-rows: 2fr 1fr;
  align-items: center;
}

.tip__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  justify-items: start;
}

.tip__title {
  line-height: var(--lh-small);
}

.drawnchesspattern {
  max-height: 28.125rem;
  width: 100%;
}



/*========Pop-up venster=========*/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: visibleFill;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  display: grid;
  grid-template-columns: 4fr .5fr;
  grid-template-rows: repeat(2, auto);
  justify-self: center;
  margin: var(--space-2) auto;
  width: 40%;
  padding: var(--space-15) var(--space-2);
  background: var(--off-white);
  color: var(--deep-indigo);
  border-radius: var(--radius-25);
}

.close {
  display: inline-flex;
  position: relative;
  transition: all 200ms;
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  color: var(--deep-indigo);
  padding: 0 0.8rem;
  border-radius: var(--radius-5);
  text-align: center;
  align-items: center;
  justify-content: center;
}

.close:hover {
  background-color: var(--coral-red);
  color: var(--off-white);
}

.popup__content {
  grid-area: 2 / 1 / 3 / 3;
  max-height: 80vh;
  overflow-y: auto;
}



/*========Challenge=========*/

.challenge {
  min-height: 100vh;
  height: 100%;
}

.challenge__cords {
  display: block;
  width: 100%;
  height: auto;
}

.challenge__content {
  padding: 100px var(--space-75) var(--space-75) var(--space-75);
  background-image: url("../assets/svg/challenge_chessboard.svg");
  background-size: cover;
  background-position-x: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  height: 100%;
}

.challenge__text {
  display: flex;
  flex-direction: column;
}

.challenge__quote {
  font-weight: bold;
  font-size: var(--space-25);
  margin-bottom: var(--space-1);
}

.challenge__item {
  list-style: decimal;
  list-style-position: inside;
}

.challenge__visuals {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-items: center;
  margin-top: var(--space-4);
}

.challenge__visualisation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}



/*========Footer=========*/

.footer {
  background-color: var(--deep-indigo);
  color: var(--off-white);
  padding: var(--space-5) var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  gap: var(--space-5);
  align-items: center;
}

.footer__socials {
  display: grid;
  gap: var(--space-1);
  justify-items: left;
}

.footer__image {
  display: inline-block;
  width: auto;
  max-height: 22.5rem;
  justify-self: center;
}

.footer__mail {
  color: var(--off-white);
  text-decoration: underline var(--coral-red) 12%;
  transition: 0.3s;
}

.footer__mail:hover {
  color: var(--coral-red);
  text-decoration: underline var(--coral-red) 18%;
}