/*
Copyright 7 May 2024 - Little Fire Digital Ltd
-----------------------------------------------------------------------
Reuse and modification by permission only
*/
/*
	Created on : 7 May 2024, 12:23:22
	Author     : simon
	Copyright  : Little Fire Digital Ltd  7 May 2024
*/

body nav {
    display: block;
}

.slicknav_menu {
    display:none;
}
@media screen and ( max-width: 639px ) {
    /* #menu is the original menu */
    #div_nav nav {
        display:none;
    }

    .slicknav_menu {
        display:block;
    }

    #mobile_topbar .topbar_links {

    li {
    a {
&.your_booking {
     background-color: var(--jg-blue-darker);
 }
}
}

}

}

#div_nav {
    position: relative;
    margin: 0 auto;
    font-size: 1rem;

/* Mask to make header more readable given background image rotation */
&::after {
     content: '';
     position: absolute;
     top:-36px;
     left: 50%;
     display: block;
     max-width: 100vw;
     width: 100vw;
     height: calc( 200% );
     background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
     transform: translateX( calc( -50% ) );
     z-index: -1;
 }

#nav_mask {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    opacity: 0.5;
    z-index: 10;
}

.topbar {
    font-weight: 600;

ul.topbar_links {
    float: left;
    padding: 0;
    margin: 0;

li {
    display: inline-block;
    text-transform: uppercase;

&::after {
     content: '|';
     padding: 0 1px 0 5px;
 }
&:last-of-type {
&::after {
     display: none;
 }
}
}
}

.topbar_right {
    position: relative;
    top: -6px;
    float: right;
    display: flex;
    flex-direction: row;
    align-items: center;

.topbar_contact {
@media screen and ( min-width: 640px ) {
    display: flex;
    flex-direction: column;

    a {
        text-align: right;
    }
}
@media screen and ( min-width: 840px ) {
    display: unset;

    a {
        text-align: unset;
    }
}
}

a {
    margin-left: 10px;
}
}
}

svg {
    position: relative;
    z-index: 1000;
    overflow: visible;
    padding: 10px 0;

#nav_logo {
    fill: #fff;
    opacity: 1;
    pointer-events: none;
}

.nav_active {
    cursor: pointer;
    fill: #00000000;
}

.nav_arrow,
.nav_item {
    fill: #ffffff;
    opacity: .6;
    filter: drop-shadow(0 2px 3px #00000022);
}

.nav_group .nav_arrow {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.nav_group .nav_arrow,
.nav_group .nav_item {
    transition: opacity .5s ease, transform 0.05s ease;
}

.trek_active #nav_group_trek > .nav_item,
.ski_active #nav_group_ski > .nav_item,
.climb_active #nav_group_climb > .nav_item,
#trek_active:hover ~ #nav_group_trek > *,
#ski_active:hover ~ #nav_group_ski > *,
#climb_active:hover ~ #nav_group_climb > * {
    opacity: 1;
}

.trek_active #nav_group_trek > .nav_arrow,
.ski_active #nav_group_ski > .nav_arrow,
.climb_active #nav_group_climb > .nav_arrow {
    opacity: 0;
}

.nav_group {
    pointer-events: none;

&.active {
     opacity: 1;


.nav_item {
    fill: #ffffff;
    opacity: 1;
}
.nav_arrow {
    fill: #ffffff; /* Matches nav background */
    opacity: 1;
    transform: scaleY(-1) translateY( -24px );
}
}
}
}

/* Hide outline when user selects item in main nav CTS bar using a mouse, not via tab navigation */
a:not(:focus-visible),
rect:not(:focus-visible) {
    outline: none;
}

nav {
    position: absolute;
    width: 100%;
    margin: 0 auto 0 auto;
    line-height: 1.3;
    box-shadow: 5px 5px 6px hsla(0, 0%, 0%, 0.3), -8px 5px 6px hsla(0, 0%, 0%, 0.3);
    z-index: 1000;

/* Basic element styles */
.h1, .h2, .h3, .h4 {
    font-weight: bold;
}
.h2 {
    color: black;
    font-size: 1.3rem;
}
.h3 {
    color: black;
    font-size: 1.2rem;
}
.h4 {
    color: var(--jg-blue);
    font-size: 1rem;
}
ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}
a {
    font-size: 1rem ;
    text-decoration: none;
    color: var(--text);

&:hover {
     text-decoration: underline;
 }
}


/* Top level submenus - Climb/Trek/Ski */
.nav_primary_submenu {
    background-color: #ffffff;
    padding: 15px;
}
/* Submenu container */
.nav_tab {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;

ul {
    flex: 1 1 auto;
}
}
/* Categories - go horizontal accross menu */
ul[data-role="categories"] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;

& > li {
      flex: 1 1 auto;

& > ul {
      padding-top: 15px;
  }
}
.h3, .h2 {
    display: block;
    border-bottom: 2px solid var(--jg-blue);
    padding: 10px 0;
}

.list_by_date > .h2 {
    display: inline-block;
}
.nav_list {

    display: flex;
    flex-direction: column;
    padding: 10px 0;


}
}
/* Subcategories - go vertical/down in columns */
ul[data-role="subcategories"] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 15px;

&.side-by-side {
     padding-top: 0;
     flex-direction: row;

/* European Alps / Worldwide (Adventure) */
& > li {



.h3 {
    font-size: 1.1rem;
}

& > ul {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0;
      padding-top: 15px;

li {
&.nav_region_group:not(:first-of-type) {
     margin-top: 20px;
 }
}
}

}
}

li {
    flex: 1 1 auto;
}
}


/* Tabs*/
.nav_tab-labels {
    border-bottom: 2px solid var(--jg-blue);
    min-height: 40px;
}
li.list_by_date {
    position: absolute;
    top: -42px;
    right: 0;

a.h2 {
    padding: 0 20px 0 20px;
    border-bottom: none !important;
    color: var(--jg-blue);
}
}
.nav_tab-label {
    position: relative;
    display: inline-block;
    min-height: 40px;
    max-height: 40px;
    padding: 0 20px 0 20px;
    color: var(--text-lighter);

&.nav_tab_active {
     color: black;

&::after {
     content: '';
     position: absolute;
     display: block;
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 0 8px 8px 8px;
     border-color: transparent transparent var(--jg-blue) transparent;
     transform: rotate(0deg) translateX(-50%);
     bottom: 0;
     left: 50%;
 }
}
}

.nav_mobile_heading {
    display: none;
@media screen and ( max-width: 639px ) {
    display: unset;
}
}

}
}