/*HEADER*/
.site-header{
  background:linear-gradient(180deg,var(--color-blue), var(--color-violet) 50%,var(--color-red));
  height:110px;
  position:sticky;
  top:0;
  z-index:9;
}
.site-header__inner{
  align-items:center;
  display:flex;
  height:100%;
  justify-content:space-between;
}
.site-logo{
  align-items:center;
  display:flex;
  height:100%;
}
.site-logo img{
  height:100%;
  width:auto;
}
/*MENU*/
.menu-toggle{
  display:none;
}
.site-nav{
  background:transparent;
  border:0;
  display:block;
  padding:0;
  position:static;
  width:auto
}
.site-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  padding:0;
  gap:1.5em;
}
.site-nav a{
  font-family:var(--font-text);
  color:var(--color-white);
  border-radius:999px;
  border:2px solid transparent;
  font-weight:500;
  padding:.5em 1em;
  text-transform:uppercase;
  transition:all .2s ease;
}
.site-nav a:hover{
  border:2px solid var(--color-white);
  transition:all .2s,border-color .2s ease;
}
.site-nav a.nav-pill{
  background:var(--color-white);
  color:var(--color-blue);
}
.site-nav a.nav-pill:hover{
  background:var(--color-red);
  border:2px solid var(--color-red);
  color:var(--color-white);
}
/*FOOTER*/
.site-footer{
  background:var(--color-lightblue);
  color:var(--color-blue);
  padding:var(--gutter);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.5fr 2.5fr 2.5fr;
  gap:2em;
}
.site-footer h2{
  font-family:var(--font-text);
  font-size:1.5em;
  font-weight:600;
  padding-bottom:1em;
  text-transform:uppercase;
}
.site-footer p{
  font-size:.8em;
}
.site-footer img{
  max-width:80%;
}
.social-links{
  display:flex;
  gap:1em;
  margin-top:1em;
}
.social-links a{
  color:var(--color-blue);
}
.social-links a:hover{
  color:var(--color-red);
}
/*CONTENT*/
.container{
  margin:auto;
  max-width:var(--container);
  padding:var(--gutter);
}
section{
  padding:4em 0;
}
.section--white{
  background:var(--color-bg-white);
  color:var(--color-text);
}
.section--lightblue{
  background:var(--color-lightblue);
  color:var(--color-blue);
}
.section--blue{
  background:var(--color-blue);
  color:var(--color-white);
}
.section--red{
  background:var(--color-red);
  color:var(--color-white);
}
.section--gradient {
  background:linear-gradient(180deg,var(--color-blue), var(--color-violet) 50%,var(--color-red));
  color:var(--color-white);
}
.half-image {
  position: relative;
}
.half-image > * {
  position: relative;
  z-index: 2;
}
.half-image:has(.benefits)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: url("../img/donation-bg.jpg");
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.hero{
  background:
    linear-gradient(90deg,rgb(0 0 0 /.62),rgb(0 0 0 /.28) 45%,rgb(0 0 0 /.1)),
    url("../img/hero-bg.jpg") center 58%/cover;
  color:var(--color-white);
  min-height:600px;
  padding:1em 0;
}
.hero__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:600px;
}
.hero h1 {
  font-size:6em;
}
.hero__kicker{
  font-size: 2em;
  font-weight:400;
}
.hero__claim{
  font-size: 2.5em;
  font-weight:600;
  line-height:1.5em;
  text-transform:uppercase;
}
.hero__meta{
  font-size: 2em;
  font-weight:400;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1.1em;
  margin-top:5em;
}
.hero__countdown{
  display:flex;
  padding-top:1em;
  gap:1em;
}
.hero__countdown span{
  align-items:end;
  display:flex;
}
.hero__countdown strong{
  font-family:var(--font-title);
  font-size:4em;
  font-weight:100;
  line-height: 1em;
}
.hero__countdown small{
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
}
.info-grid,
.location-grid,
.race-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1em;
}
.final-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.final-cta img{
  max-width:25%;
  height:auto;
}
.cta__text{
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: flex-end;
  gap:1em;
}
.cta__text h2{
  font-size: 4em;
}
.cta__text p{
  font-size: 2em;
  font-weight: 400;
}
.timeline-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1em;
  margin-top:2em;
  position:relative;
}
.timeline-grid::before{
  background:var(--color-white);
  content:"";
  height:4px;
  left:0;
  position:absolute;
  right:0;
  top:2em;
}
.sponsor-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1em;
  margin-top: 1em;
}
.donation,
.benefits,
.ambassador{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1em;
}
.timeline-card{
  padding-top:4em;
  position:relative
}
.timeline-card::before{
  background:var(--color-white);
  border-radius:50%;
  content:"";
  height:16px;
  left:0;
  position:absolute;
  top:calc(2em - 6px);
  width:16px;
}
.timeline time{
  display:block;
  font-family:var(--font-title);
  font-size:2.3rem;
  line-height:.8
}
.timeline h3{
  margin-top:.75rem
}
.timeline p{
  font-size:.88rem;
  margin-top:.45rem
}
.info-card,
.location-card,
.race-card{
  display:flex;
  gap:1em;
  border-radius:var(--border-radius);
  padding:var(--gutter);
}
.info-card{
  background:var(--color-lightblue);
}
.race-card{
  flex-direction:column;
  color:var(--color-text);
  background:var(--color-lightred);
}
.info-card__icon,
.location-card__icon{
  align-items:center;
  font-size:4em;
  font-weight:900;
}
.info-card__icon {
  color:var(--color-blue);
}
.location-card__icon{
  color:var(--color-white);
}
.info-card h2,
.location-card h2{
  margin-bottom:1em;
  text-transform:uppercase
}
.info-card h2,
.info-card p {
  color:var(--color-blue);
}
.location-card h2,
.location-card p{
  color:var(--color-white);
}
.race-card h3{
  color:var(--color-red);
}
.races h2,
.timeline h2,
.benefits h2,
.faq h2{
  font-size: 4em;
}
.donation h2,
.ambassador h2,
.sponsors h2{
  font-size: 2em;
}
.timeline h2{
  color:var(--color-white);
}
.races h2,
.benefits h2{
  color:var(--color-red);
}
.sponsors h2,
.faq h2{
  color:var(--color-blue);
}
.races .subtitle,
.timeline .subtitle,
.donation .subtitle {
  font-size: 1.5em;
  margin-top:1em;
  margin-bottom:2em;
}
.races .subtitle {
  color:var(--color-red);
}
.donation .subtitle {
  font-size: 1em;
  color:var(--color-text);
}
.race-card__meta{
  font-weight:900;
}
.impact-list ul{
  list-style:none;
  margin:0;
  padding:0;
  display: grid;
  gap:2em;
}
.impact-list li span{
  display:block;
}
.impact-list li strong{
  font-family:var(--font-title);
  font-size:4em;
  font-weight:100;
  line-height: 1em;
}
.impact-list li small{
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
}
.check-list{
  list-style:none;
  margin:0;
  padding:0;
  display: grid;
  display:grid;
  gap:1em;
  margin:2em 0 0;
}
.check-list li{
  align-items:center;
  display:grid;
  grid-template-columns: 2em 1fr;
}
.check-list li::before{
  border:2px solid var(--color-blue);
  border-radius:50%;
  color:var(--color-red);
  content:"✓";
  display:grid;
  font-size:1em;
  font-weight:900;
  height:1.5em;
  place-items:center;
  width:1.5em
}
.benefits__image {
  display:flex;
  justify-content:center;
  align-items:center;
}
.benefits__image span{
  background:var(--color-white);
  padding:var(--gutter);
}
.ambassador__image img{
  max-width:100%;
  height:auto;
}
.sponsors__text{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  gap:1em;
}
.faq-list{
  display:grid;
  gap:1em;
  margin-top:2em;
}
.faq details{
  background:var(--color-lightblue);
  border-radius:var(--border-radius);
  color:var(--color-blue);
  padding:var(--gutter);
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  padding-right:2em;
  position:relative;
}
.faq summary::-webkit-details-marker{
  display:none;
}
.faq summary::after{
  content:"-";
  font-size:1.2em;
  position:absolute;
  right:0;
  top:0;
}
.faq details:not([open]) summary::after{
  content:"+";
}
.faq details p{
  margin-top:1em;
}