/* MARK: FONT FAMILIES
*/

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/urbanist-400.woff2') format('woff2');
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/urbanist-500.woff2') format('woff2');
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/urbanist-600.woff2') format('woff2');
}

@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/urbanist-700.woff2') format('woff2');
}

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

body {
  --body-bg-color: var(--white-100);
  --body-text-color: var(--black-100);
  background-color: var(--body-bg-color);
  color: var(--body-text-color);
  interpolate-size: allow-keywords;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

main {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  margin-block: 2.5rem;

  @media (width >= 56.25rem) {
    row-gap: 4rem;
    margin-block: 4rem;
  }
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
}

video {
  max-width: 100%;
  height: auto;
  width: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10;
  padding: 1rem;
  background-color: var(--black-100);
  color: var(--white-100);
  opacity: 0;

  &:focus-visible {
    left: 50%;
    translate: -50% 0;
    opacity: 1;
    outline-offset: 5px;
  }
}

.visually-hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: clip;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  left: -9999px;
}

hgroup {
  display: flex;
  flex-direction: column;
  row-gap: 1.25rem;

  &.flipped {
    flex-direction: column-reverse;
  }
}

:where([class*="section"] > .container) {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto;
}

:where([class*="section"] .container) > * {
  grid-column: span 16;
}

.container {
  max-inline-size: var(--page-width);
  margin-inline: 1rem;
  width: 100%;

  &.narrow {
    max-inline-size: calc(var(--page-width) / 1.5);
  }
}

[class*="section"] {
  width: 100%;
  display: flex;
  justify-content: center;

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

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

.heading {
  --primary-color: var(--black-100);
  --secondary-color: var(--white-100);

  line-height: var(--line-height-s);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--primary-color);
  text-align: center;

  &.h1 {
    font-size: var(--font-size-2xl);

    @media (width >= 37.5rem) {
      font-size: var(--font-size-4xl);
    }

    @media (width >= 56.25rem) {
      font-size: var(--font-size-6xl);
    }
  }

  &.h2 {
    font-size: var(--font-size-2xl);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-4xl);
    }
  }

  &.h3 {
    font-size: var(--font-size-xl);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-2xl);
    }
  }

  &.h4 {
    font-size: var(--font-size-l);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-xl);
    }
  }

  &.h5 {
    font-size: var(--font-size-m);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-l);
    }
  }

  &.h6 {
    font-size: var(--font-size-s);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-m);
    }
  }

  &.h7 {
    font-size: var(--font-size-s);
  }

  &.h8 {
    font-size: var(--font-size-xxs);

    @media (width >= 56.25rem) {
      font-size: var(--font-size-xs);
    }
  }

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

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

.text {
  --primary-color: var(--black-100);
  --secondary-color: var(--white-100);

  line-height: var(--line-height-s);
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--black-100);

  &.t1 {
    font-size: var(--font-size-xl);
  }

  &.t2 {
    font-size: var(--font-size-l);
  }

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

  &.t4 {
    font-size: var(--font-size-s);
  }

  &.t5 {
    font-size: var(--font-size-xs);
  }

  &.t6 {
    font-size: var(--font-size-xxs);
  }

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

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

.wysiwyg {
  --primary-color: var(--black-100);
  --secondary-color: var(--white-100);

  display: flex;
  flex-direction: column;
  gap: 1rem;

  line-height: var(--line-height-s);
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--black-100);

  &.t1 {
    font-size: var(--font-size-xl);
  }

  &.t2 {
    font-size: var(--font-size-l);
  }

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

  &.t4 {
    font-size: var(--font-size-s);
  }

  &.t5 {
    font-size: var(--font-size-xs);
  }

  &.t6 {
    font-size: var(--font-size-xxs);
  }

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

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

.wysiwyg a {
  display: inline;
  color: var(--blue-100);

  &:hover {
    text-decoration: underline;
  }
}

.wysiwyg:is(ul, ol) {
    list-style: initial;
    list-style-position: inside;
  }

.wysiwyg li {
    padding-block: 0.5rem;
  }

.wysiwyg :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 1rem 0;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l);
}

:where(.icon)::before,
:where(.icon)::after {
  content: "";
  background-color: currentcolor;
  mask-repeat: no-repeat;
  mask-size: contain;
  display: none;
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  min-width: var(--icon-size, 1.5rem);
  min-height: var(--icon-size, 1.5rem);
}

.icon.icon-xxxl { --icon-size: 4rem; }
.icon.icon-xxl { --icon-size: 3rem; }
.icon.icon-xl { --icon-size: 2rem; }
.icon.icon-l  { --icon-size: 1.75rem; }
.icon.icon-m  { --icon-size: 1.5rem; }
.icon.icon-s  { --icon-size: 1.25rem; }
.icon.icon-xs { --icon-size: 1rem; }

.button-container {
  display: grid;
  align-items: center;
  gap: 0.5rem;
  width: 100%;

  @media (width >= 56.25rem) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: fit-content;
  }
}

.button-container .button {
  height: 100%;
}

.button {
  --primary-button-text-color: var(--white-100);
  --primary-button-hover-text-color: var(--black-100);
  --primary-button-bg-color: var(--black-200);
  --primary-button-hover-bg-color: var(--white-100);

  --secondary-button-text-color: var(--black-100);
  --secondary-button-hover-text-color: var(--white-100);
  --secondary-button-bg-color: var(--white-100);
  --secondary-button-hover-bg-color: transparent;

  --tertiary-button-text-color: var(--black-100);
  --tertiary-button-hover-text-color: var(--black-100);
  --tertiary-button-bg-color: var(--white-200);
  --tertiary-button-hover-bg-color: var(--white-100);

  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-button);
  letter-spacing: var(--letter-spacing-s);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-m);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  justify-content: center;
  transition: background-color 0.3s, border 0.3s, color 0.3s;
  width: 100%;
  text-transform: uppercase;  
  text-align: center;
  height: fit-content;

  @media (width >= 56.25rem) {
    width: fit-content;
  }

  &:focus-visible {
    outline-offset: 5px;
  }

  &.primary-button {
  background-color: var(--primary-button-bg-color);
  color: var(--primary-button-text-color);
  border: var(--border-transparent);

    &:hover {
      background-color: var(--primary-button-hover-bg-color);
      color: var(--primary-button-hover-text-color);
      border: var(--border-current);
    }
  }

  &.secondary-button {
    background-color: var(--secondary-button-bg-color);
    color: var(--secondary-button-text-color);
    border: var(--border-transparent);

    &:hover {
      background-color: var(--secondary-button-hover-bg-color);
      color: var(--secondary-button-hover-text-color);
      border: var(--border-current);
    }
  }

  &.tertiary-button {
    background-color: var(--tertiary-button-bg-color);
    color: var(--tertiary-button-text-color);
    border: var(--border-current);

    &:hover {
      background-color: var(--tertiary-button-hover-bg-color);
      color: var(--tertiary-button-hover-text-color);
    }
  }
}

.rounded-button {
  --primary-rounded-button-bg-color: var(--black-200);
  --primary-rounded-button-text-color: var(--white-100);
  --primary-rounded-button-hover-bg-color: var(--black-300);
  --primary-rounded-button-hover-text-color: var(--white-100);

  --secondary-rounded-button-bg-color: var(--white-100);
  --secondary-rounded-button-text-color: var(--black-100);
  --secondary-rounded-button-hover-bg-color: var(--white-200);
  --secondary-rounded-button-hover-text-color: var(--black-100);

  border-radius: 100%;
  padding: 0.75rem;
  box-shadow: var(--box-shadow);
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;

  @media (width >= 56.25rem) {
    padding: 1rem;
  }

  &:focus-visible {
    outline-offset: 5px;
  }

  &.primary-rounded-button {
    background-color: var(--primary-rounded-button-bg-color);
    color: var(--primary-rounded-button-text-color);

    &:hover {
      background-color: var(--primary-rounded-button-hover-bg-color);
      color: var(--primary-rounded-button-hover-text-color);
    }
  }

  &.secondary-rounded-button {
    background-color: var(--secondary-rounded-button-bg-color);
    color: var(--secondary-rounded-button-text-color);

    &:hover {
      background-color: var(--secondary-rounded-button-hover-bg-color);
      color: var(--secondary-rounded-button-hover-text-color);
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-color: var(--skeleton-start-bg-color);
  }
  100% {
    background-color: var(--skeleton-end-bg-color);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bg-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}