/* 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;
    }
  }









.h1{
    font-size: 80px;
}

.h2{
    font-size: 48px;
    font-weight: 500;
    text-transform: uppercase;
}

.h3{
    font-size: 24px;
    font-weight: 500;
}

.h4{
    font-size: 16px;
    font-weight: 500;
}

.h5{
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.p{
    font-size: 16px;
    font-weight: 200; /* Light weight */
    line-height: 150%;
    margin-bottom: 2rem; /* Space below description */
}




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


/* Page Intro Styling*/

.intro-container {
    margin: 0;
    display:grid; /* Display flex for horizontal alignment */
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    justify-content: space-between; /* Space between content and image */
    align-items: center;
    border-radius: 12px; /* Rounded corners */
    background-color: #131212; /* Match background with other sections */
    overflow: hidden; /* Ensure content fits within borders */
    padding: 4rem;
    padding-top: 0;
    padding-bottom:2rem ;

  }

  .content-column {
    display: flex;
    flex-direction:column; /* Stack items vertically */
    justify-content:space-between; /* Center content vertically */
    flex: 1; /* Allow to grow and shrink */
    color: #fff; /* White text color */
  }

  .content-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column; /* Stack heading and description */
    justify-content: flex-start; /* Align to start */
    max-width: 600px
  }

  .event-date{
    font-size: 14px;
    font-weight: 400;
    margin: 0;
  }

  .intro-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: 1rem; /* Space below headline */
    margin-top: 1.2rem;
  }

  .intro-description {
    font-size: 16px; /* Regular description font size */
    font-weight: 200; /* Light weight */
    line-height: 150%;
    margin-bottom: 2rem; /* Space below description */
  }

  .intro-disctance{
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-content:center;
  }

  .distance-box{
    display:flex;
    flex-direction: column;
    max-width: 260px;
  }

  .d-title{
    font-size: 16px;
    margin-top: 1.5rem;
  }

  .small-text{
    font-size: 14px;
    font-weight: 300;
    line-height: 150%;
    list-style-position:inside;
    margin: 0;
    padding:0;
  }


  .image-wrapper {
    display: flex; /* Flex container for image */
    flex: 1; /* Allow to grow */
    justify-content: center; /* Center image */
  }

  .intro-image {
    aspect-ratio: 0.93; /* Maintain aspect ratio */
    object-fit:cover; /* Fit within container */
    max-width: 100%; /* Ensure it doesn't overflow */
    border-radius: 12px; /* Rounded corners */

  }


  @media (max-width: 768px) {
    .intro-container {
      flex-direction: column; /* Stack content on smaller screens */
      align-items: center; /* Center items */
      grid-template-columns: 1fr;
      padding: 0;
    }

    .content-column {
      padding: 1rem; /* Responsive padding */
    }

    .intro-disctance{
    grid-template-columns: 1fr;
    gap: 2rem;
    }

    .distance-box{
        margin-top: 0;
    }

    .d-title{
    margin-top: 0;
    }

    .image-wrapper {
      width: 100%; /* Full width for image */
    }
  }


/* LINKS BOX STYLING */

.links{
    margin: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-radius: 12px;

}

.links-box{
    border-radius: 12px;
    padding: 2rem;
    justify-content: space-between;
    background-color: #ddff00;
}

.links h3{
    font-size: 16px;
    text-transform: uppercase;
    margin-top:0;
    margin-bottom:1rem;
}

.links ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.links a{
    font-size: 14px;
    color: #131212;
    line-height: 150%;
}

@media (max-width: 768px){
    .links{
        grid-template-columns: repeat(2, 1fr);
    }
    .links-box{
        padding: 1.5rem;
    }

}

@media (max-width: 460px){
    .links{
        grid-template-columns: repeat(1, 1fr);
    }
    .links-box{
        padding: 1.5rem;
    }

}



/* 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 */
}

.event-container.hide {
    display: none;
}

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

:root {
    --title-size: 44px;
    --specs-size: 14px;
    --distance-size: 60px;
    --controls-size: 60px;
    --climb-size: 60px;
    --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);
}

.event-specs {
    margin-bottom: 10px;
    text-align: left;
    font-weight:350;
    line-height: 140%;
    padding-right: 2rem;
    padding-top: .8rem;

}
.event-title {
    font-size: var(--title-size);
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    padding-right: 2rem;
}

.event-parameters {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 2rem 2rem;
    justify-content: end;
    align-content: start;
    grid-column: 2;
    column-gap: 6rem;

  }

  .parameters-box {
    display: flex;
    align-items: center;
    padding-left: 1.25rem;
    border-left: .15rem solid
  }

  .parameter-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

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

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



  @media (max-width: 768px) {
    .event-box {
        grid-template-columns: 1fr; /* Switch to single column layout */
        padding: 1rem;
    }

    .event-parameters {
        grid-column: 1;
        grid-template-rows: repeat(2, auto);
        gap: 1.5rem;
        margin-top: 1rem;
        justify-content: stretch;
    }

    .parameters-box {

        padding-top: 1rem;
    }

    .parameter-content {
        align-items: center;
        text-align: center;
    }
}


  @media (max-width: 460px) {
    .event-box {
        grid-template-columns: 1fr; /* Switch to single column layout */
    }

    .event-parameters {
        grid-column: 1;
        grid-template-columns: 1fr; /* Stack parameters vertically */
        grid-template-rows: repeat(4, auto);
        gap: 1.5rem;
        margin-top: 2rem;
        justify-content: stretch;
    }

    .parameters-box {

        padding-top: 1rem;
    }

    .parameter-content {
        align-items: center;
        text-align: center;
    }
}

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

/* Junior Category Boxes */

.juniors .junior-women {
    background-color: #49551E;
    color: white;
}

.juniors .junior-men {
    background-color: #096F3E;
    color: white;
}

/* Youth Category Boxes */

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

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



/* TERRAIN INFORMATION */

.terrain-summary{
    background-color: #131212;
    color: white;
    padding: 4rem;
    margin:0 1rem;
    border-radius: 12px;
    justify-content: center;
}
.terain-description{
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
}

.terrain-headline{
    font-size: 44px;
}

@media (max-width: 768px) {
    .terain-description{
        grid-template-columns: 1fr; /* Switch to single column layout */
    }
    .terrain-summary {
        margin-top: 1rem;
        padding: 1rem 0;
    }

    .terrain-headline {
        margin-bottom: 1rem;
    }
}

.terrain{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 1rem;
    flex: 1; /* Allow to grow and shrink */
}

.terrain-info{
    grid-row: 1 / span 2;
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem 2rem;
}

.terrain-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  .terrain-image, .terrain-image-secondary {
    width: 100%;
    border-radius: 8px;
    max-height: 200px;
    object-fit: cover;
}



.terrain-box{
    display: flex;
    flex-direction: column; /* Stack heading and description */
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem 2rem;
    justify-content: space-between;
    height: 100%; /* Ensures full height */
    box-sizing: border-box; /* Ensures padding is inside the height */
}

.box-content{
    border-left: .15rem solid;
    padding-left: 1.25rem;
    margin: 0; /* Remove margin */

}

.card-title{
    font-size: 16px;
    align-self: flex-start; /* Aligns to the top */
    margin-top: 0;
    margin-bottom: 1rem;
}

.terrain-heading{
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 90%;
    margin-bottom: 1rem;
    margin-top: 0;
    max-width: 250px;
}

.terrain-description{
    font-size: 12px;
    max-width: 250px;
}


@media (max-width: 768px){
    .terrain{
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Stack items from the top */
        padding: 0; /* Adjust padding for smaller screens */
    }

    .terrain-info{
        padding: 1rem 1rem;
    }

    .card-title {
        align-self: flex-start; /* Title stays on top */
        padding-bottom: 0.2rem; /* Less padding below the title */
    }

    .terrain-box{
        grid-template-columns: 1fr;
        flex-direction: column; /* Stack heading and description */
        padding: 1rem 1rem;
    }
    .box-content {
        align-self: flex-start; /* Content will follow below the title */
        padding-top: 0.5rem; /* Less padding above the content */
    }

}



/* 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(4, 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;
    }
}


/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center; /* Centers the text inside the footer */
    padding: 10px 0;
    position:relative; /* Fixes the footer to the bottom of the viewport */
    width: 100%; /* Ensures the footer spans the full width of the viewport */
    bottom: 0; /* Positions the footer at the very bottom of the page */
}