/* General styles */
:root {
    --header-height: 2.5rem;
    --primary-color: #daff59;
    --secondary-color: #ddff00;
    --text-color: #ffffff;
    --body-font: 'Proxima Nova', sans-serif;
    --normal-font-size: 1rem;

  /*========== Colors ==========*/
    --black-color: #131212;
    --black-color-light: #303030;
    --black-color-lighten: #4b4b4b;
    --white-color: #fff;
    --body-color: hsl(220, 100%, 97%);

  /*========== Font weight ==========*/
    --font-light: 200;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold:800;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }

body {
    font-family:'Proxima Nova', sans-serif;
    margin: 0;
    padding-top: 3.5rem;
    background-color: #131212;
    overflow: auto; /* or overflow: visible; */

}

/* NAV BAR*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  ul {
    list-style: none;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
  }
  a {
    text-decoration: none;
  }
  .container {
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--black-color);
    z-index: var(--z-fixed);
  }
  /*=============== NAV ===============*/
  .nav {
    height: var(--header-height);
  }
  .nav__logo,
  .nav__burger,
  .nav__close {
    color: var(--white-color);
  }
  .nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: 800;
    font-size: 1.5rem;
    font-family:'MuseoModerno';
    -webkit-tap-highlight-color: transparent;
  }
  .nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;
  }
  .nav__burger,
  .nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.5rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
  }
  .nav__close {
    opacity: 0;
  }
  /* Navigation for mobile devices */
  @media screen and (max-width: 1118px) {
      .container{
          max-width: 100%;
          height: 4rem;
          padding-left: 0;
          padding-right: 0;
          margin-inline: 1rem;
      }

    .nav__menu {
      position:absolute;
      left: 0;
      top: 2.5rem;
      width: 100%;
      height: calc(100vh - 2rem);
      overflow: auto;
      pointer-events: none;
      opacity: 0;
      transition: top .4s, opacity .3s;
    }
    .nav__menu::-webkit-scrollbar {
      width: 0;
    }
    .nav__list {
      background-color: var(--black-color);
      padding-top: 1rem;
    }
  }

  .nav__link {
    color: var(--white-color);
    background-color: var(--black-color);
    font-weight: var(--font-regular);
    color: #ffffff;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
  }
  .nav__link:hover {
    color: var(--primary-color);
  }
  /* Show menu */
  .show-menu {
    opacity: 1;
    top: 2.5rem;
    pointer-events: initial;
  }
  /* Show icon */
  .show-icon .nav__burger {
    opacity: 0;
    transform: rotate(90deg);
  }
  .show-icon .nav__close {
    opacity: 1;
    transform: rotate(90deg);
  }
  /*=============== DROPDOWN ===============*/
  .dropdown__item {
    cursor: pointer;
  }
  .dropdown__arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
  }
  .dropdown__link,
  .dropdown__sublink {
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    color: var(--white-color);
    background-color: var(--black-color-light);
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-regular);
    transition: background-color .3s;
    min-width: 220px;
  }
  .dropdown__link i,
  .dropdown__sublink i {
    font-size: 1.25rem;
    font-weight: initial;
  }
  .dropdown__link:hover,
  .dropdown__sublink:hover {
    background-color: var(--black-color-lighten);
  }
  .dropdown__menu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
  }

  /* Show dropdown menu & submenu */
  .dropdown__item:hover .dropdown__menu{
    max-height: 1000px;
    transition: max-height .4s ease-in;
  }
  /* Rotate dropdown icon */
  .dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
  }

  /* For small devices */
  @media screen and (max-width: 460px) {
    .nav__link {
      padding-inline: 1rem;
    }
  }
  /* For large devices */
  @media screen and (min-width: 1118px) {

    .nav {
      height: calc(var(--header-height) + 2rem);
      display: flex;
      justify-content: space-between;
    }
    .nav__toggle {
      display: none;
    }
    .nav__list {
      height: 100%;
      display: flex;
      column-gap: 3rem;
    }
    .nav__link {
      height: 100%;
      padding: 0;
      justify-content: initial;
      column-gap: .25rem;
    }
    .nav__link:hover {
      background-color: transparent;
    }

    .dropdown__item,
    .dropdown__subitem {
      position: relative;
    }

    .dropdown__menu,
    .dropdown__submenu {
      max-height: initial;
      overflow: initial;
      position: absolute;
      right: 0;
      top: 5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, top .3s;
    }

    .dropdown__link,
    .dropdown__sublink {
      padding-inline: 1rem 3.5rem;
    }

    .dropdown__subitem .dropdown__link {
      padding-inline: 1rem;
    }

    .dropdown__submenu {
      position: absolute;
      left: 100%;
      top: .5rem;
    }

    /* Show dropdown menu */
    .dropdown__item:hover .dropdown__menu {
      opacity: 1;
      top: 4.5rem;
      pointer-events: initial;
      transition: top .3s;
    }

    /* Show dropdown submenu */
    .dropdown__subitem:hover > .dropdown__submenu {
      opacity: 1;
      top: 0;
      pointer-events: initial;
      transition: top .3s;
    }
}






/* big image styling */

.image-wrapper{
    display:flex;
    margin: 1rem 1rem;
    overflow: hidden;
}

.map-image{
    width: 100%;
    height: 50vh;
    object-fit: cover; /* Fit within container */
    object-position: center;
    border-radius: 12px; /* Rounded corners */
}

/* Spactators styling */

.spectators {
    color: rgb(255, 255, 255);
}

.spectators-container {
    display: flex;
    gap: 4rem;
    align-items:first baseline;
    justify-content: space-between;
    padding: 2rem 4rem;
    border-radius: 12px;
    margin: 1rem 1rem;
    color: var(--text-color);
    background-color: #131212;
}

.spectators-info {
    flex: 1;
    padding-right: 2rem;
    max-width: 45%;
}

.spectators-location {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content:center;
    gap: 1rem 4rem;
    max-width: 600px;
}

.spectators-headline{
    font-size: 56px; /* Large headline */
    font-weight: 800; /* Bold weight */
    line-height: 0.9; /* Tight line height */
    text-transform: uppercase; /* Uppercase text */
    margin-bottom: 2rem; /* Space below headline */
    margin-top: 1.2rem;
}

.spectators-description{
        font-size: 16px;
        line-height: 150%;
        font-weight: 200;
        min-width: 300px;
    }

.locations-box {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    max-width: 260px;
}

/* Responsive design */
@media (max-width: 768px) {
    .spectators-container {
        padding: 1.25rem;
        gap: 1rem;
        flex-direction: column;
    }
    .spectators-info{
        max-width: 100%;
        padding: 0;
    }

    .spectators-location {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 1rem;
    }

    .map-image {
        height: 60vh;
        margin-top: .5rem;
    }

    .spectators-headline {
        font-size: 48px;
    }

}


/* Filter Styling */

.filter-bar {
    text-align: center;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width:fit-content;
    background-color: #323232;
    border-radius: 30px;
    display: flexbox;


}

.filter-btn {
    background-color: #323232;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
}

.filter-btn:hover {
    background-color: #202020;
}

.filter-btn.active {
    background-color: #131212; /* Change to desired color when active */
    color: #ffffff; /* You can adjust the text color for contrast */

}

.event-container {
    display: none; /* Hide all containers by default */
}

.event-container.show {
    display: block; /* Show only the container with the 'show' class */
}

.events-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1rem;
}

:root {
    --title-size: 44px;
    --date-size: 14px;
    --time-size: 60px;
    --caption-size: 14px;
}
.event-box {
    display: grid;
    grid-template-columns: 2fr 3fr; /* Two-column layout */
    justify-content: space-between;
    align-items: center;
    padding: 4rem;
    border-radius: 12px;
    margin: 10px 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.event-info {
    grid-column: 1;
    font-size: var(--date-size);
    padding-right: 2rem;
}

.event-date {
    margin-bottom: 10px;
    /*color: rgba(0, 0, 0, 0.7); /* Lighter color for date */
    text-align: left;
}

.event-title {
    font-size: var(--title-size);
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;

}

.event-timing {
    display: flex;
    justify-content: flex-end;
    grid-column: 2;
    column-gap: 6rem;

}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 1.25rem;
    border-left: .15rem solid;
    min-width: 150px;
}

.time {
    font-size: var(--time-size);
    font-weight: bold;
}

.caption {
    font-size: var(--caption-size);
}

@media (max-width: 768px) {
    .event-timing {
        flex-direction: column; /* Stack time boxes vertically */
        align-items: flex-end; /* Align them to the right */
    }

    .time-box {
        margin-left: 0; /* Remove left margin for stacked layout */
        margin-top: 1rem; /* Add some space between stacked boxes */
    }

    .event-box {
        padding: 1rem; /* Reduce padding for smaller screens */
    }

    .event-title {
        font-size: 32px;
    }

    .time {
        font-size: 40px;
    }

    .event-info {
        padding-right: 0.25rem;
    }
}


/* Elite Category Boxes */
.elite .elite-sprint {
    background-color: #daff59; /* Gold for Sprint */
    color: black;
}

.elite .elite-middle {
    background-color: #FF69B4; /* Orange-Red for Middle */
    color: black;
}

.elite .elite-mass-start {
    background-color: #12DD7C; /* Lime Green for Mass Start */
    color: black;
}

.elite .elite-mixed-relay {
    background-color: #ffffff; /* Dodger Blue for Mixed Relay */
    color: black;
}

/* Junior Category Boxes */
.juniors .junior-sprint {
    background-color: #49551E; /* Hot Pink for Sprint */
    color: white;
}

.juniors .junior-middle {
    background-color: #A3415F; /* BlueViolet for Middle */
    color: white;
}

.juniors .junior-long {
    background-color: #096F3E; /* Dark Orange for Long */
    color: white;
}

.juniors .junior-relay {
    background-color: #444444; /* Dark Turquoise for Relay */
    color: white;
}

/* Youth Category Boxes */
.youth .youth-sprint {
    color:#daff59;
    border-radius: 12px;
    box-shadow: 0 0 0 .15rem #daff59 inset;
}

.youth .youth-middle {
    color:#ddff00;
    box-shadow: 0 0 0 .15rem #ddff00 inset;
    border-radius: 12px;
}

.youth .youth-long {
    color:#12DD7C;
    box-shadow: 0 0 0 .15rem #12DD7C inset;
    border-radius: 12px;
}

.youth .youth-relay {
    color:#ffffff;
    box-shadow: 0 0 0 .15rem white inset;
    border-radius: 12px;
}

/* Active container display */
.show {
    display: block;
}


/* Finish Amenities */

.amenities-container {
    background-color: #131212;
    color: white;
    padding: 4rem;
    padding-top: 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 0 1rem;
}

.amenities-title {
    font-size: 24px;
    margin-bottom: 5rem;
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amenity-item i {
    font-size: 40px;
    margin-bottom: 10px;
}

.amenity-item p {
    font-size: 14px;
}

/* For responsiveness */
@media (max-width: 768px) {
    .amenities-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 4rem;
    }
}