/* Theme Variables */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --custom-color-primary: 76 159 183;
    --custom-color-primary-foreground: 255 255 255;
    --custom-color-secondary: 248 106 63;
    --custom-color-secondary-foreground: 255 255 255;
    --custom-color-secondary-light: #71A889;
    --custom-color-secondary-medium: #3C725B;
    --custom-color-secondary-deep: #214738;
    --custom-color-success: 0 172 114;
    --custom-color-typo: #164F63;
    --custom-color-background: #F5F5F4;
    --custom-color-background-card: #DEE6E1;
    --custom-color-white: #fff;
    --custom-color-black: #000;
    --black-mix: 40 40 40;
    --white-mix: 1 1 1;
    --radius: 0.2rem;
    --custom-font-sans: "Montserrat";
    --custom-font-serif: "Montserrat";
    --custom-font-accent: "Montserrat";
}

.header {
  display: flex;
  padding: 1rem 1.5rem;
  text-transform:uppercase;
  color:#2f3e4a;
  font-family: var(--custom-font-sans);
  font-size: 14px;
  position:sticky;
  top: 0;
  z-index: 49;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
  justify-content:space-between;
}

.ad__location-carpool_list_bottom,
.ad__location-carpool_submission_validated_bottom{
  margin-top:2rem;
}

.logo {
  height: 32px;
}

.header__logo-image{
  max-height:3rem;
}

.header-right {
  display: flex;
  margin-left: auto;
  gap: 1rem;
  align-items: center;
}

.header__undernav div {
  font-size: 14px;
  gap: 0.5rem;
}

.header__undernav div a:hover, .active {
  color: #4c9fb7;
  text-decoration:none;
}

.langswitcher {
  all: unset;
  position: relative;
}

.fancy-drop-down__header{
  margin-right: 1rem;
}

.fancy-drop-down__content {
  background-color: white;
  color: #2f3e4a;
}

.fancy-drop-down__content li:hover {
  color: #4c9fb7;
}

.fancy-drop-down__menu-arrow svg path {
  fill: #4c9fb7;
}

.fancy-drop-down__toggle svg path {
  stroke: #4c9fb7;
}

.burger-icon,
.mobile-menu {
  display: none;
}

.menu-toggle {
  display: none;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 900; 
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-toggle:checked ~ .menu-overlay {
  opacity: 1;
  pointer-events: all;
}


@media screen and (max-width: 1024px) {
  .header-right {
    display:none;
  }
  
 .burger-icon {
    display: block;
    cursor: pointer;
    font-size: 2rem;
    color: #2f3e4a;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 20rem;
    background-color: white;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    display: block;
  }
  
  .menu-toggle:checked ~ .mobile-menu {
    transform: translateX(0);
  }

  .mobile-menu ul {
    padding: 1rem;
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgb(229, 231, 235);
  }

  .mobile-menu-header .logo {
    height: 32px; 
  }
  
  .burger-close {
    font-size: 2rem;
    cursor: pointer;
  }

  .only-mobile ul, .header__undernav div  {
    flex-direction: column;
  }

  .header__undernav {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(229, 231, 235);
  }

  .stg-account ul {
    display: flex;
    padding-top: 0.7rem;
    justify-content: center;
    gap: 1rem;
    flex-direction: column;
  }

  .langswitcher .fancy-drop-down__header {
    margin-top: 1rem;
  }

}

@media screen and (min-width: 1024px) {
  .event-search-algolia__filter-bar {
    top:64px;
  }
}


.hero__vail,
.popin-howitworks__button{
  display:none;
}
.page-home .hero{
    background:none;
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height:325px;
}

.page-home .hero .heading{
  display:none;
}

.button{
  background-color:#4c9fb7;
  border-color:#4c9fb7;
  color:#fff;
  font-size:13px;
}

.button--login{
  background:none;
  color:#4c9fb7;
}

.card .button--primary{
  background-color:#00205f;
  border-color:#00205f;
}

.card .button--inverted .text-secondary {
  color: white;
}

.card .button--inverted span svg path {
  color: white;
  fill: white;
}

.event-grid__title{
    color:#fff;
}

.event-grid__button{
    background:#2F3E4A;
    border:#2F3E4A;
    color:#fff;
}

.footer{
    background: #4c9fb7;
    color:#fff;
}

.links {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 2rem 4rem;
  max-width: 100rem;
  margin: auto;
}

.socials, .about {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.socials ul {
  display: flex;
  justify-content: space-between;
}

.about ul {
  display: flex;
  flex-direction : column;
  gap: 1rem;
  font-size: 14px;
}

.footer span {
  font-size: 18px;
  font-weight: 600;
}

.footer-logo {
  height: 50px;
}

.clubs {
  padding: 2rem;
  background-color:#00205f;
}

.clubs ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  max-width: 100rem;
  margin: auto;
}

.clubs img {
  width: auto;
  height: 40px;
}

.footer--stadium-go a, .footer__by-stadium-go{
  font-size:.9rem;
}

.footer__by-stadium-go {
  background-color : black;
  color: white;
  padding: 1rem;
}

.footer__by-stadium-go span {
   font-size: 15px;
}

.footer__by-stadium-go svg {
   height: .8rem;
}

@media screen and (max-width: 720px) {
  .links {
    flex-direction: column;
  }

  .footer-logo {
    height: 30px;
  }
  .page-home .hero{
    min-height:110px;
  }
  .page-home .hero img{
    object-fit: contain;
  }
  .event-search-algolia{
    margin-top:2rem;
  }
}


.page-proposer-un-covoiturage .steps{
    background:#2F3E4A;
    color:#fff;
}
.steps .container div span{
    background:#2F3E4A;
    color:#fff;
    border:1px solid #fff;
}
.steps .container div:first-child span{
    background:#fff;
    color:#2F3E4A;
}
@media (min-width: 1500px){
  .page-home .hero{
      min-height:390px;
  }
}

.page-faq .hero__wrapper .heading{
  display:none;
}
.page-faq .hero{
  min-height:325px;
}
.page-faq a img{
  width:35px;
}
.page-faq .cardFaq-category{
  font-size:1.2rem;
}

/* SPECIFIC CLUBS RULES */
body.user-favorite-club-gc-zurich .card-carpool--driver-favorite-club-fc-zurich{
  display:none;
}
body.user-favorite-club-fc-zurich .card-carpool--driver-favorite-club-gc-zurich{
  display:none;
}