/** Clash Display Font */
@font-face {
  font-family: "ClashDisplay";
  src:
    url("./webfonts/ClashDisplay-Variable.woff2") format("woff2"),
    url("./webfonts/ClashDisplay-Variable.woff") format("woff"),
    url("./webfonts/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/** Clash Grotesk Font */
@font-face {
  font-family: "ClashGrotesk";
  src:
    url("./webfonts/ClashGrotesk-Variable.woff2") format("woff2"),
    url("./webfonts/ClashGrotesk-Variable.woff") format("woff"),
    url("./webfonts/ClashGrotesk-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
}

:root {
  --white: 255, 255, 255;
  --gray: 162, 162, 162;
  --black: 17, 15, 15;
  --black-variant: 28, 23, 23;
  --accent: 238, 19, 27;

  --fz-h1: 4rem;
  --fz-h2: 3.5rem;
  --fz-h3: 3rem;
  --fz-h4: 1.5rem;
  --fz-h5: 1.25rem;
  --fz-p: 1rem;

  --size-2xs: 0.5rem;
  --size-xs: 0.75rem;
  --size-s: 1rem;
  --size-m: 1.5rem;
  --size-l: 2rem;
  --size-xl: 3rem;
  --size-2xl: 7.5rem;
  --size-3xl: 12rem;
}

body {
  font-family: "ClashGrotesk";
  font-size: var(--fz-p);
  font-weight: 300;
  background: rgb(var(--black));
  color: rgb(var(--white));
}

/* COLORS */

.has-white-color {
  color: rgb(var(--white));
}

.has-gray-color {
  color: rgb(var(--gray));
}

.has-black-color {
  color: rgb(var(--black));
}

.has-accent-color {
  color: rgb(var(--accent));
}

/* FONT */

h1,
h2,
h3,
h4 {
  font-family: "ClashDisplay";
  font-weight: 400;
  line-height: 1;
}

strong {
  font-weight: 600;
}

h1 {
  font-size: var(--fz-h1);
}

h2 {
  font-size: var(--fz-h2);
}

h3 {
  position: relative;
  padding-left: var(--size-xl);
  font-size: var(--fz-h3);
}

h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: var(--size-l);
  height: var(--size-xl);
  background: url(images/icon-double-arrow.svg) center center no-repeat;
  background-size: contain;
}

h4 {
  font-size: var(--fz-h4);
}

h5 {
  font-size: var(--fz-h5);
  font-weight: 400;
}

p {
  font-size: var(--fz-p);
}

a {
  font-weight: 500 !important;
  position: relative;
  color: rgb(var(--gray));
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.has-icon {
  position: relative;
}

li {
  list-style: none;
}

li a::after,
.current-menu-item a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: rgb(var(--accent));
  transition:
    width 0.2s ease-out,
    left 0.2s ease-out,
    transform 0.2s ease-out;
}

li a:hover,
.current-menu-item a {
  color: rgb(var(--white));
}

li a:hover::after,
.current-menu-item a::after {
  width: 100%;
  left: 0;
  transform: translateX(0);
}

.btn a,
.btn.btn-primary a:hover {
  padding: var(--size-2xs) var(--size-s) !important;
  color: rgb(var(--accent));
  background: rgb(var(--black));
  border: 1px solid rgb(var(--accent));
  transition:
    background 0.2s ease-out,
    color 0.2s ease-out;
}

.btn a:hover,
.btn.btn-primary a {
  background: rgb(var(--accent));
  color: rgb(var(--black));
}

.btn.has-icon a,
.btn.has-icon a:hover {
  padding-right: var(--size-l) !important;
}

.btn.has-icon a::after,
.btn.btn-primary.has-icon a:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--size-s);
  transform: translateY(-50%);
  width: var(--size-xs);
  height: var(--size-xs);
  background: url("images/icon-arrow-right-accent.svg") center center no-repeat;
  background-size: contain;
}

.btn.has-icon a:hover::after,
.btn.btn-primary.has-icon a::after {
  background: url("images/icon-arrow-right-black.svg") center center no-repeat;
  background-size: contain;
}

/* HEADER */

header {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.site-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--size-l);
}

.main-navigation ul {
  gap: var(--size-m);
}

.main-navigation {
  font-family: "ClashDisplay";
  font-weight: 500;
}

#header-widget-area {
  display: flex;
  align-items: center;
  gap: var(--size-m);
}

/* HAS ICON */

.has-icon.icon-race-flag {
  padding-right: calc(var(--size-l) + var(--size-xs));
}

.has-icon.icon-race-flag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--size-l);
  height: var(--size-xl);
  background: url("images/icon-race-flag.svg") center center no-repeat;
  background-size: contain;
}

/* SECTIONS */

body:not(.home) .entry-content {
  margin-top: var(--size-2xl)
}

.site-header-wrapper,
section,
.site-footer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* SECTION - HERO */

#hero {
  display: flex;
}

.img-cover {
  height: 100%;
}

.img-cover figure,
.img-cover img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SECTION - PRESENTATION */

#presentation div {
  max-width: 960px;
}

/* SECTION - FAQ */

.faq-container {
  flex-wrap: wrap !important;
}

.faq-wrapper {
  height: fit-content;
  min-width: calc(50% - var(--size-s));
  transition:
    border-color 0.2s ease-out,
    color 0.2s ease-out;
}

.faq-wrapper h5 {
  transition: color 0.2s ease-out;
}

.faq-wrapper svg {
  transition: transform 0.2s ease-out;
}

.faq-wrapper svg path {
  transition: fill 0.2s ease-out;
}

.faq-wrapper-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.faq-wrapper:hover,
.faq-wrapper.faq-open {
  border-color: rgb(var(--accent)) !important;
}

.faq-wrapper.faq-open .faq-wrapper-answer {
  max-height: 100vh;
}

.faq-wrapper:hover h5,
.faq-wrapper.faq-open h5 {
  color: rgb(var(--accent));
}

.faq-wrapper.faq-open svg {
  transform: rotate(180deg);
}

.faq-wrapper:hover svg path,
.faq-wrapper.faq-open svg path {
  fill: rgb(var(--accent));
}

/* FOOTER */

footer .left-part {
  width: 25%;
}

footer .left-part .icon-social {
  width: var(--size-xl);
  height: var(--size-xl);
  padding: var(--size-xs);
  border-radius: 999px;
  background: transparent !important;
  border: 1px solid rgb(var(--accent));
  transition: background 0.2s ease-out;
}

footer .left-part .icon-social,
footer .left-part .icon-social .wp-block-safe-svg-svg-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .left-part .icon-social path {
  fill: rgb(var(--accent)) !important;
  transition: fill 0.2s ease-out;
}

footer .left-part .icon-social:hover {
  background: rgb(var(--accent)) !important;
}

footer .left-part .icon-social:hover path {
  fill: rgb(var(--black)) !important;
}

footer .right-part {
  gap: 4rem;
}

footer .menu {
  display: flex;
  flex-direction: column;
  gap: var(--size-s);
}

footer .menu a {
  font-weight: 400 !important;
}

/* FLEX */
/* 
.is-layout-flex {
  justify-content: space-between;
} */