/* De Tijdmachine custom by Luc - 2025 */
/* For old styles, look at old-jnd-styles.css */
/* Fonts */
@font-face {
  font-family: "Avant Garde Defected";
  src: url("../fonts/AvantGardeDefectedRegular.woff2") format("woff2"),
    url("../fonts/AvantGardeDefectedRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Avant Garde Defected";
  src: url("../fonts/AvantGardeDefected-Bold.woff2") format("woff2"),
    url("../fonts/AvantGardeDefected-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "ITC Avant Garde Gothic";
  src: url("../fonts/AvantGarde-Book.woff2") format("woff2"),
    url("../fonts/AvantGarde-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: BigDeal;
  src: url("../fonts/BigDeal.otf");
}

/* Base */
:root {
  /* Colors */
  --color-blue: hsl(181, 100%, 69%);
  --color-blue-dark: hsl(181, 100%, 40%);
  --color-yellow: hsl(45, 100%, 50%);
  --color-yellow-dark: hsl(45, 100%, 30%);
  --color-grey: hsl(0, 0%, 86%);
  --color-dark-grey: hsl(0, 0%, 12%);
  --color-black: hsl(0, 0%, 6%);

  --color-primary: var(--color-blue);
  --color-primary-foreground: hsl(0, 0%, 10%);
  --color-primary-dark: var(--color-blue-dark);
  --color-secondary: var(--color-yellow);
  --color-secondary-foreground: hsl(0, 0%, 10%);
  --color-secondary-dark: var(--color-yellow-dark);

  --color-background: var(--color-dark-grey);
  --color-background-dark: var(--color-black);
  --color-foreground: hsl(0, 0%, 100%);
  --color-foreground-muted: hsl(0, 0%, 80%);
  --color-foreground-dark: hsl(0, 0%, 90%);

  --gradient-primary-secondary: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );

  --gradient-secondary-secondary: linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-primary) 100%
  );

  /* Fonts */
  --font-heading: "zuume-edge", sans-serif;
  --font-body: "ITC Avant Garde Gothic", Helvetica, Arial, sans-serif;
  --font-button: "zuume-edge", sans-serif;
}

/* Body */
html,
body {
  overflow-x: hidden;
  position: relative;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-weight: 400;

  background-image: url("../img/2025/body_bg-darker.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;

  &:has(.lineup-page) {
    background: var(--color-background);
  }

  &.in-development {
    /* Development features only - use ?moonly in URL to enable  */
  }
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.nav__menu-item {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
}

h1 {
  font-size: 4rem;
  line-height: 4.5rem;

  @media screen and (max-width: 768px) {
    font-size: 3rem;
    line-height: 3.5rem;
  }
}

h2 {
  font-size: 3rem;
  line-height: 3.5em;

  @media screen and (max-width: 768px) {
    font-size: 2.5rem;
    line-height: 3rem;
  }
}

h3 {
  font-size: 2.5rem;
  line-height: 3rem;

  @media screen and (max-width: 768px) {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

h4 {
  font-size: 1.75rem;
  line-height: 2.25rem;

  @media screen and (max-width: 768px) {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

h5 {
  font-size: 1.5rem;
  line-height: 1.75rem;

  @media screen and (max-width: 768px) {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

h6 {
  font-size: 1.25rem;
  line-height: 1.5rem;

  @media screen and (max-width: 768px) {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

p {
  font-size: 1.2rem;
  line-height: 1.6rem;

  @media screen and (max-width: 768px) {
    font-size: 1rem;
    line-height: 1.3rem;
  }
}

a:not(.btn) {
  color: var(--color-primary);
}

.nav__menu-item {
  font-size: 1.5rem;
  line-height: 1.5rem;

  @media screen and (max-width: 768px) {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  a {
    color: white;
    text-decoration: none;
  }
}

/* Buttons */
.btn {
  font-family: var(--font-button);
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
  border: none;
  padding: 12px 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  outline: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  width: fit-content;

  &.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);

    &:hover {
      background-color: var(--color-primary-dark);
    }
  }

  &.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);

    &:hover {
      background-color: var(--color-secondary-dark);
    }
  }

  &.btn--white {
    background-color: var(--color-foreground);
    color: var(--color-background);

    &:hover {
      background-color: var(--color-foreground-dark);
    }
  }

  &.btn--black {
    background-color: var(--color-background);
    color: var(--color-foreground);

    &:hover {
      background-color: var(--color-background-dark);
    }
  }
}

/* Nav / Menu */
.nav-logo {
  height: 60px;
}

/* Newsletter */
.newsletter {
  /* background-image: url("https://detijdmachine.com/wp-content/themes/defected/assets/img/2025/cta_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
  background-color: var(--color-dark-grey);
  padding: 50px;

  &::after {
    display: none;
  }
}

/* Footer */
footer {
  background-color: var(--color-background);

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

  .footer__bottom {
    color: var(--color-foreground-muted);
    font-size: 1rem;
  }
}

/* Random */
/* Lineup CTA */
.lineup__cta {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 0 20px;
}

/* Utility classes inspired by Tailwind */
.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-full {
  width: 100%;
}

.bg-white {
  background-color: white;
}

.bg-body {
  background-color: var(--color-background);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.text-body {
  color: var(--color-foreground);
}

.text-white {
  color: white;
}

.text-secondary {
  color: var(--color-secondary);
}

.text-primary {
  color: var(--color-primary);
}

/* Custom utility classes */
.bg-cta {
  background-size: cover;
  /* Fallback, inline bg image is used if set */
  background-color: var(--color-background);
  background-image: url("../img/2025/cta_bg.webp");
}