/* ============================================================
   Navigation
   HTML: <div id="nav"> > <nav id="nav_1" class="nav nav_1"> > ul > li > a [+ .arrow + ul]
   Toggle: #nav_toggle (Header)

   Mobile:  Burger → vertical accordion, submenus slide inline
   Desktop: Horizontal bar, submenus as absolute dropdowns on hover

   States (toggled by JS):
   - #nav.open / #nav.close → mobile menu visible/hidden
   - .arrow.is_open         → submenu expanded (mobile only)
   ============================================================ */


/* =============================================================================
   GLOBAL
   ============================================================================= */

/* Remove default list bullets */
.nav_1 ul li:before,
.nav_2 ul li:before,
.nav_3 ul li:before{
display:none;
}


/* =============================================================================
   BURGER TOGGLE
   ============================================================================= */

#nav_toggle{
display:flex;
justify-content:center;
align-items:center;
width:var(--nav-toggle-width);
}

.btn_nav_toggle{
height:2.25rem;
width:2.25rem;
margin:0;
padding:0;
cursor:pointer;
position:relative;
}

.btn_nav_toggle .status{
position:absolute;
top:1rem;
left:0;
}

.btn_nav_toggle .status,
.btn_nav_toggle .status:before,
.btn_nav_toggle .status:after{
content:'';
display:block;
background:var(--clr-nav-300);
height:1px;
width:2rem;
border-radius:1px;
transition:all ease-in-out 250ms;
}

.btn_nav_toggle .status:before{
transform:translateY(-8px);
}

.btn_nav_toggle .status:after{
transform:translateY(8px);
}

.btn_nav_toggle .status.active{
transform:rotate(45deg);
}

.btn_nav_toggle .status.active:before{
opacity:0;
}

.btn_nav_toggle .status.active:after{
transform:translateY(-2px) rotate(-90deg);
}


/* =============================================================================
   MOBILE (default, max-width: 79.5rem)
   ============================================================================= */
@media screen and (max-width: 79.5rem){

/* --- Nav Container --- */

#nav{
width:100%;
display:none;
z-index:100;
background:var(--bgr-nav-300);
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
}

#nav.open{
display:block;
animation:ani_nav_open .5s ease-out forwards;
}

#nav.close{
animation:ani_nav_close .5s ease-out forwards;
}

@keyframes ani_nav_open{
0%{
clip-path:polygon(0 0, 100% 0, 100% 0%, 0% 0%);
opacity:0;
}
100%{
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
opacity:1;
}
}

@keyframes ani_nav_close{
0%{
clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
opacity:1;
}
100%{
clip-path:polygon(0 0, 100% 0, 100% 0%, 0% 0%);
opacity:0;
}
}



/* --- Nav 1: Main menu --- */

#nav .nav_1{
width:100%;
}

#nav .nav_1 > ul{
display:flex;
flex-direction:column;
list-style:none;
margin:0;
padding:0;
max-height:calc(100dvh - 8rem);
overflow-y:auto;
overscroll-behavior:contain;
}

#nav .nav_1 > ul > li{
display:flex;
flex-wrap:wrap;
align-items:center;
border-bottom:var(--brd-primary-100) 1px solid;
-webkit-tap-highlight-color:var(--bgr-gray-100);
}

#nav .nav_1 > ul > li > a{
flex:1;
margin:0;
padding:.5rem .85rem;
font-family:var(--nav-font-family);
font-size:var(--fs-p);
color:var(--clr-nav-300);
text-decoration:none;
text-transform:uppercase;
}

#nav .nav_1 > ul > li > a:hover,
#nav .nav_1 > ul > li > a.on{
color:var(--clr-primary-300);
}


/* --- Arrow toggle (chevron) --- */

#nav .nav_1 .arrow{
display:flex;
justify-content:center;
align-items:center;
width:var(--nav-toggle-width);
height:auto;
margin:0 var(--subnav-toggle-spacing) 0 0;
padding:.5rem 0;
border-radius:var(--brd-radius-25);
background:var(--bgr-gray-400);
cursor:pointer;
}

#nav .nav_1 .arrow em{
display:inline-block;
width:1rem;
height:1rem;
background-color:var(--clr-primary-300);
-webkit-mask-image:url('/assets/img/icon/chevron-right.svg');
mask-image:url('/assets/img/icon/chevron-right.svg');
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
pointer-events:none;
transform:rotate(90deg);
transition:transform ease-in-out 250ms;
}

#nav .nav_1 .arrow.is_open em{
transform:rotate(-90deg);
}


/* --- Submenu: slides inline (animated) --- */

#nav .nav_1 li > ul,
#nav .nav_1 li > ul.hide{
width:100%;
list-style:none;
margin:0;
padding:0;
max-height:0;
overflow:hidden;
transition:max-height 350ms ease-out;
}

#nav .nav_1 li > ul.show{
max-height:30rem;
padding-block:.25rem;
transition:max-height 550ms ease-in;
}

#nav .nav_1 li > ul li{
border-bottom:var(--brd-primary-100) 1px solid;
}

#nav .nav_1 li > ul li:last-of-type{
border-bottom:0;
}

#nav .nav_1 li > ul a{
display:block;
width:100%;
margin:0;
padding:.35rem .5rem .35rem 1.5rem;
font-size:var(--fs-p);
color:var(--clr-primary-300);
text-decoration:none;
text-transform:none;
}

#nav .nav_1 li > ul a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--brd-gray-600) solid;
border-width:0 1px 1px 0;
border-radius:1px;
position:relative;
top:-.1rem;
transform:rotate(-45deg);
}

#nav .nav_1 li > ul a:hover,
#nav .nav_1 li > ul a.on{
color:var(--clr-primary-300);
}

/* 3rd level indent */
#nav .nav_1 ul ul li > ul a{
padding-left:3rem;
}


/* --- Nav 2 + Nav 3 (mobile) --- */

.nav_2 ul,
.nav_3 ul{
width:100%;
list-style-type:none;
margin:.5rem 0 0 0;
padding:0;
}

.nav_2 ul li,
.nav_3 ul li{
width:100%;
text-align:center;
margin:0;
padding:.5rem 0;
}

.nav_2 a,
.nav_3 a{
width:100%;
text-align:center;
color:var(--clr-primary-300);
text-decoration:none;
font-weight:bold;
font-size:var(--fs-p);
}

.nav_2 a:hover,
.nav_2 a.on,
.nav_3 a:hover,
.nav_3 a.on{
text-decoration:underline;
}


/* --- Subnav (hidden on mobile) --- */

.subnav_1{
display:none;
}

}


/* =============================================================================
   TABLET (45rem - 79.5rem)
   ============================================================================= */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.nav_2{
float:right;
display:flex;
width:auto;
height:2rem;
justify-content:flex-end;
align-items:center;
}

.nav_2 ul{
display:flex;
justify-content:flex-end;
list-style-type:none;
margin:0 .75rem 0 0;
padding:0;
}

.nav_2 ul li{
width:auto;
margin:0 .85rem 0 0;
padding:.5rem 0;
}

.nav_2 ul li:last-of-type{
margin:0;
}

}


/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width: 79.5rem){

/* Hide burger */
#nav_toggle{
display:none;
}

/* --- Nav 1: Horizontal bar --- */

.nav_1{
float:left;
width:80%;
margin:.75rem 0 0 0;
}

.nav_1 > ul{
display:flex;
justify-content:flex-start;
align-items:center;
gap:2rem;
list-style-type:none;
margin:0;
padding:.35rem 0;
}

.nav_1 > ul > li{
position:relative;
text-wrap:nowrap;
width:auto;
}

.nav_1 > ul > li:first-of-type{
display:none;
}

.nav_1 > ul > li:nth-of-type(2):after{
content:'';
position:relative;
top:.25rem;
right:0;
display:inline-block;
width:1.25rem;
height:1.25rem;
margin:0;
padding:0;
background:url('/assets/img/nav/icon/first.svg') no-repeat center center;
background-size:90%;
}

.nav_1 li .arrow em{
position:absolute;
top:.6rem;
right:-.95rem;
width:auto;
height:auto;
}

.nav_1 li .arrow em:after{
content: '';
width:.75rem;
height:.75rem;
display:inline-block;
margin:0;
padding:0;
background:url('/assets/img/nav/icon/arrow.svg') no-repeat center center;
background-size:90%;
-webkit-transform:rotate(90deg);
}

.nav_1 a{
display:inline-block;
font-family:var(--nav-font-family);
color:var(--clr-nav-300);
text-decoration:none;
font-weight:normal;
font-size:1.25rem;
text-transform:uppercase;
padding:.35rem 0 .25rem 0;
transition:border ease-in-out 50ms;
border-bottom:transparent 1px solid;
}

.nav_1 a:hover,
.nav_1 a.on{
border-bottom:var(--brd-nav-400) 1px solid;
}

.nav_1 .active{
font-family:var(--nav-bold-font-family);
border-bottom:var(--brd-nav-400) 1px solid;
}

/* --- Desktop Dropdown on hover --- */

.nav_1 ul ul{
display:none;
position:absolute;
top:100%;
left:-.5em;
z-index:1000;
width:auto;
min-width:17em;
max-height:none;
overflow:visible;
margin:0;
padding:.5rem 0;
background:rgba(255,255,255,.98);
border:var(--brd-gray-500) 1px solid;
border-radius:var(--brd-radius-5);
list-style:none;
transition:none;
}

.nav_1 > ul > li:hover > ul{
display:block;
}

.nav_1 ul ul li{
display:block;
text-align:left;
width:15.75em;
margin:0 .5rem;
padding:0;
border-bottom:var(--brd-gray-500) 1px solid;
}

.nav_1 ul ul li:first-of-type:after{
display:none;
}

.nav_1 ul ul li:last-of-type{
margin:0 .5rem;
border-bottom:0;
}

.nav_1 ul ul li > a{
float:left;
width:100%;
margin:.15rem 0;
padding:.25rem .5rem;
font-family:var(--nav-bold-font-family);
color:var(--clr-nav-300);
font-size:var(--fs-p);
text-decoration:none;
text-transform:none;
font-weight:normal;
border:0;
}

.nav_1 ul ul li > a:hover,
.nav_1 ul ul li > a.on{
background:var(--brd-nav-400);
color:var(--clr-nav-400);
border-radius:var(--brd-radius-25);
font-weight:bold;
border:0;
}

/* Hide 3rd level on desktop */
.nav_1 ul ul ul{
display:none;
}


/* --- Nav 2: Utility links --- */

.nav_2{
float:right;
display:flex;
height:2rem;
justify-content:flex-end;
align-items:center;
}

.nav_2 ul{
display:flex;
justify-content:flex-end;
list-style-type:none;
margin:0 .5rem 0 0;
padding:0;
}

.nav_2 ul li{
width:auto;
margin:0;
padding:0 .5em;
}

.nav_2 a{
color:var(--clr-primary-400);
font-family:var(--secondary-font-family);
text-decoration:none;
font-weight:normal;
font-size:var(--fs-p);
}

.nav_2 a:hover,
.nav_2 a.on{
text-decoration:underline;
}


/* --- Nav 3: Category bar --- */

.nav_3{
margin:.5rem 0;
padding:.25rem 0 .65rem 0;
background:var(--bgr-primary-400);
border-top:var(--brd-gray-400) 1px solid;
border-bottom:var(--brd-gray-400) 1px solid;
}

.nav_3 ul{
display:flex;
justify-content:center;
list-style-type:none;
margin:.5rem 0 0 0;
padding:0;
}

.nav_3 ul li{
width:auto;
margin:0;
padding:0 .5em;
}

.nav_3 a{
color:var(--clr-primary-300);
font-family:var(--primary-font-family);
text-transform:uppercase;
text-decoration:none;
font-weight:normal;
font-size:var(--fs-p);
}

.nav_3 a:hover,
.nav_3 a.on{
text-decoration:underline;
}


/* --- Subnav 1: Sidebar --- */

.subnav_1{
grid-area:subnav;
float:left;
width:16rem;
margin:0 0 2.5rem 0;
padding:0 0 0 1rem;
}

.subnav_1 ul{
float:left;
list-style-type:none;
margin:.25rem 0;
padding:0;
}

.subnav_1 ul li{
float:left;
text-align:left;
width:14rem;
min-height:2rem;
margin:0;
padding:0;
}

.subnav_1 ul li:last-child{
border-bottom:0;
}

.subnav_1 a{
float:left;
width:100%;
margin:.25rem 0;
padding:.25rem .5rem;
color:var(--clr-primary-100);
text-decoration:none;
font-size:var(--fs-p);
transition:background 50ms;
}

.subnav_1 a:hover,
.subnav_1 a.on{
background:var(--bgr-primary-400);
border-radius:var(--brd-radius-5);
}

.subnav_1 ul ul{
float:left;
width:100%;
display:block;
margin:0;
padding:0;
}

.subnav_1 ul ul > li{
float:left;
text-align:left;
width:14em;
margin:0;
padding:0 0 0 1rem;
border-bottom:var(--brd-gray-500) 1px solid;
}

.subnav_1 ul ul > li a:before{
display:inline-block;
content:'';
width:.45rem;
height:.45rem;
margin:0 .35rem 0 0;
border:var(--clr-primary-300) solid;
border-width:0 1px 1px 0;
border-radius:1px;
position:relative;
top:-.1rem;
transform:rotate(-45deg);
}

.subnav_1 ul ul > li a{
float:left;
width:100%;
margin:.25em 0;
padding:.15em .25em;
color:var(--clr-primary-100);
text-decoration:none;
font-size:var(--fs-p);
transition:background 50ms;
}

.subnav_1 ul ul > li a:hover,
.subnav_1 ul ul > li a.on{
background:var(--bgr-primary-400);
border-radius:var(--brd-radius-5);
}

}