/**** Menu Stylesheet for Prevail Theme ****/

/* Desktop Navigation - Prevail Style */

/* Button icon (dropdown arrows) - Hidden on mobile, shown on desktop for items with submenus */
#topnav > li .button_icon {
    display: none;
}

/* Hamburger menu button - hidden by default, shown on mobile */
.togglemenu {
    display: none;
}

/* Desktop Navigation Styles */
@media all and (min-width: 1200px) {
    /* Hide mobile elements on desktop */
    .mobile_bottom_row, 
    .togglemenu, 
    .mobile_top_row, 
    .subnav_toggle { 
        display: none;
    }

    /* Main navigation container */
    #topnav { 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        display: flex; 
        align-items: center;
        gap: 25px;
    }

    #topnav li { 
        position: relative;
    }

    /* Top level links - Prevail style */
    #topnav > li > a { 
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 10px 15px;
        color: var(--color-dark);
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: var(--transition);
        white-space: nowrap;
    }

    #topnav > li > a:hover {
        color: var(--color-primary);
    }

    /* Flyout arrow styling for items with submenus */
    .drop_level2_wrapper .flyout_arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
    
    .drop_level2_wrapper .flyout_arrow svg {
        width: 16px;
        height: 24px;
        opacity: 0.5;
        transition: var(--transition);
    }
    
    .drop_level2_wrapper .flyout_arrow svg path {
        fill: var(--color-secondary);
    }
    
    .drop_level2_wrapper li:hover .flyout_arrow svg {
        opacity: 1;
    }
    
    .drop_level2_wrapper li:hover .flyout_arrow svg path {
        fill: var(--color-accent);
    }

    /* Dropdown wrapper - Prevail style */
    .drop_level2_wrapper { 
        position: absolute;
        top: calc(100% - 5px);
        left: 0;
        background: var(--color-white);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border-radius: 8px;
        min-width: 220px;
        padding: 10px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0);
        transition: var(--transition);
        margin-top: 0;
        z-index: 100;
    }

    /* Last nav item dropdown opens to the left */
    #topnav > li:last-child .drop_level2_wrapper {
        left: auto;
        right: 0;
    }

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

    /* Show dropdown on hover */
    #topnav > li:hover > .drop_level2_wrapper { 
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: block;
    }

    /* Dropdown links - Prevail style */
    #topnav li .drop_level2_wrapper a { 
        display: block;
        padding: 12px 24px;
        color: var(--color-dark);
        font-size: 16px;
        text-decoration: none;
        transition: var(--transition);
        font-family: var(--font-primary);
    }

    #topnav li .drop_level2_wrapper li:hover > a {
        background: var(--color-light);
        color: var(--color-primary);
        padding-left: 30px;
    }

    /* Flyout (Level 3 items) */
    #topnav li .drop_level2_wrapper li .drop_level2_wrapper { 
        position: absolute; 
        left: 100%; 
        top: -10px;
        margin-top: 0;
        margin-left: 5px;
    }

    #topnav li .drop_level2_wrapper li:hover .drop_level2_wrapper { 
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: block;
    }

    /* Nav panel container - no background on desktop */
    .nav_panel {
        position: relative;
        background: transparent !important;
        display: block;
        width: auto;
        height: auto;
    }

    .nav_panel_content {
        display: block;
        background: transparent !important;
    }

    /* Main nav wrapper */
    .main-nav {
        flex: 1;
        display: flex;
        justify-content: right;
        background: transparent;
    }
    
    /* Ensure mainnav has no background */
    #mainnav {
        background: transparent;
    }

    /* Hide mobile elements on desktop */
    .mobile_search_container,
    .mobile_top_row,
    .mobile_bottom_row {
        display: none !important;
    }

    /* Desktop search should be separate */
    .site-search {
        display: block;
    }
}

/* MEDIA QUERIES */
@media all and (max-width: 1250px){
	#topnav > li{ margin: 0 0.5rem;}
}

@media all and (max-width: 1200px){

	.main-nav {
		order: 2 !important;
		flex: 0 0 auto !important;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}
	
	/* Desktop navigation hidden on mobile - only hide the one in header, not in nav_panel */
	.main-nav > #mainnav {
		display: none !important;
	}
	
	/* Show navigation inside the mobile menu panel */
	.nav_panel #mainnav {
		display: block !important;
	}
	
	.togglemenu {
		background: transparent !important;
		display: flex !important;
		font-size: 0;
		border-radius: 4px;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 2px solid var(--color-dark) !important;
		cursor: pointer;
		position: relative;
		z-index: 101;
	}
	
	.togglemenu:hover {
		background: rgba(0, 0, 0, 0.05) !important;
	}
	
	.open_nav .togglemenu.open_menu_mobile {
		display: none !important;
	}
	
	.togglemenu svg{ vertical-align: middle; height: 22px; width: auto;}
	.open_nav .togglemenu svg{ height: 15px;}

	.togglemenu svg, .togglemenu svg *{ fill: var(--color-dark) !important;}

	/* Mobile navigation styling */
	#topnav {
		display: block !important;
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	#topnav > li {
		display: block !important;
		width: 100%;
		padding: 0.5rem 20px;
		border-bottom: 1px solid #e0e0e0;
		position: relative;
	}
	
	#topnav > li > a {
		display: inline-block !important;
		font-size: 18px;
		padding: 0.5rem 0;
		color: #000000;
		font-family: var(--font-primary);
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		white-space: normal !important;
		word-wrap: break-word;
		text-decoration: none;
	}
	
	#topnav > li > a:hover {
		color: var(--color-accent);
	}
	
	.button_icon {
		display: none !important;
	}
	
	.subnav_toggle {
		display: inline-block !important;
		position: relative;
		padding: 0.5rem;
		cursor: pointer;
		background: transparent !important;
		border: none;
		vertical-align: top;
	}
	
	.subnav_toggle_icon {
		font-size: 0;
	}
	
	.subnav_toggle svg {
		height: 10px;
		width: auto;
		vertical-align: middle;
		transition: all 0.3s;
	}
	
	.subnav_toggle svg,
	.subnav_toggle svg * {
		fill: var(--color-primary) !important;
	}
	
	.subnav_toggle.open svg {
		transform: rotate(180deg);
	}
	
	/* Mobile dropdown styles */
	#topnav > li > .drop_level2_wrapper {
		display: none !important;
		position: static !important;
		background: #ffffff;
		padding-left: 1rem;
		border-left: solid 2px #D8D8D8;
		margin-top: 0.5rem;
		box-shadow: none !important;
		width: auto !important;
	}
	
	#topnav > li > .drop_level2_wrapper.open {
		display: block !important;
	}
	
	#topnav > li > .drop_level2_wrapper ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#topnav > li > .drop_level2_wrapper li {
		padding: 0 0 0 1rem;
		border-bottom: none;
		position: relative;
	}
	
	#topnav > li > .drop_level2_wrapper li a {
		color: #000000 !important;
		font-size: 16px;
		padding: 0.5rem 0;
		display: block;
		white-space: normal !important;
		word-wrap: break-word;
		text-decoration: none;
	}
	
	#topnav > li > .drop_level2_wrapper li a:hover {
		text-decoration: underline;
		text-decoration-color: var(--color-accent);
		text-decoration-thickness: 2px;
		text-underline-position: under;
		color: var(--color-primary);
	}

	.mobile_search_container {
        border-radius: 5px;
        padding: 0 5px;
    }
    
    .mobile_search_container form.uk-search-default {
        background: #ffffff;
    }
    
    .mobile_search_container .uk-search-input {
        border: 1px solid #000000;
        color: #000000;
    }
    
    .mobile_search_container .uk-search-input::placeholder {
        color: #000000;
    }
}

.nav_panel {
    position: relative;
    background: #fff;
}

.nav span.button_icon svg, .button span.button_icon svg * {
    fill: var(--color-white) !important;
}

.nav span.button_icon svg {
    height: 8px;
    width: auto;
    vertical-align: middle;
}

.link > .button_icon{
	margin-left: 5px;
}

@media (max-width: 1200px){

	.nav_panel {
		position: fixed;
		right: -110%;
		top: 0px;
		width: 100vw;
		height: 100vh;
		        transition: all 0.3s;
		z-index: 100;
		background: var(--color-white) !important;
	}
	.nav_panel.open {
		right: 0;
	}
	.nav_panel_content {
		max-height: calc(100vh - 50px);
		overflow: auto;
		background: var(--color-white) !important;
	}
	.mobile_top_row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 1rem auto;
		width: 90%;
	}
	.mobile_bottom_row {
		margin: 2rem 0 0 0;
		background: var(--color-primary);
		padding: 2rem 0;
	}
	#topnav > li > .drop_level2_wrapper {
		display: none;
	}

	.utility_nav {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		width: 90%;
	}
	.utility_nav a {
		display: inline-block;
		padding: 0.25rem 0;
		margin: 0.25rem 0;
		text-decoration: none;
		color: var(--color-white);
		font-size: 1rem;
	}
	.utility_nav a:hover{
		text-decoration:underline;
	}
	
}

@media (min-width: 1200px){
	#topnav > li > a {
		display: flex !important;
		height: 100px;
		align-items: center;
		padding: 0 !important;
	}
}

#menu .default a.ln_default{
	font-weight: 700 !important;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--color-primary);
}

#menu ul > li > a.ln_default::before, 
#menu ul > li > span > a.ln_default::before, 
#menu ul > li > a:hover::before, 
#menu ul > li > span > a:hover::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: -2px;
    height: 100%;
    width: 6px;
    background: var(--color-accent);
    display: block;
    transform: translateX(-4px);
}


@media screen and (max-width:1200px){
	.open_nav li.active .subnav_toggle.mobile svg *{
		fill: var(--color-white) !important;
	}

	.open_nav li.active .drop_level2_wrapper a{
		color: var(--color-white) !important;
	}
}

a.m1.link[href="/"] span{
	display:none;
}

/* Main Navigation Container */
.main-nav {
  flex: 1;
  display: flex;
}

/* Mobile: prevent main-nav from taking full width */
@media (max-width: 1200px) {
  .main-nav {
    flex: 0 0 auto !important;
  }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.mobile-menu-toggle span {
  width: 28px;
  height: 3px;
  background: var(--color-dark);
  border-radius: 3px;
  transition: var(--transition);
}

/* Inside Navigation Menu (Side Nav) */
#inside_nav {
  font-family: var(--font-primary);
  background: #ffffff;
}

#inside_nav a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

#inside_nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#inside_nav ul li {
  padding: 0 0 0 2rem;
}

#inside_nav > ul > li {
  border-left: solid 2px #D8D8D8;
  padding-bottom: 1rem;
}

#inside_nav > ul > li > ul {
  padding-top: 0.5rem;
  display: none;
}

#inside_nav ul ul li a {
  font-size: 16px;
  font-weight: normal;
  color: var(--color-dark);
}

#inside_nav ul ul ul li {
  padding: 0 0 0 2rem;
}

#inside_nav .inside_drop_arrow {
  padding: 0 10px;
  margin-right: -10px;
  cursor: pointer;
}

#inside_nav .inside_drop_arrow svg {
  height: 10px;
  width: auto;
  vertical-align: middle;
  opacity: 0.6;
  transition: all 0.3s ease-in-out;
}

#inside_nav .inside_drop_arrow svg,
#inside_nav .inside_drop_arrow svg * {
  transition: all 0.3s ease-in-out;
  stroke-width: 1px;
}

#inside_nav .inside_drop_arrow.active svg {
  transform: rotate(90deg);
}

#inside_nav .inside_lvl1_link_wrapper {
  display: flex;
  justify-content: normal;
  align-items: center;
}

#inside_nav ul > li > a,
#inside_nav ul > li > span > a {
  color: #000;
  font-size: 1.125rem;
  font-weight: normal !important;
  position: relative;
}

#inside_nav ul ul li a:hover,
#inside_nav ul ul li a.ln2_default,
#inside_nav ul ul li a.ln3_default {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-position: under;
  color: var(--color-primary);
}

#inside_nav ul > li > a.ln_default::before,
#inside_nav ul > li > span > a.ln_default::before,
#inside_nav ul > li > a:hover::before,
#inside_nav ul > li > span > a:hover::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: -2px;
  height: 100%;
  width: 6px;
  background: var(--color-accent);
  display: block;
  transform: translateX(-4px);
}

#inside_nav ul ul li a::before {
  display: none !important;
}

#inside_nav .inside_drop_arrow:hover svg *,
#inside_nav .inside_drop_arrow.active svg * {
  fill: var(--color-accent);
}

/* Navigation Responsive Styles */
@media (max-width: 960px) {
  #inside_nav {
    order: 2;
    margin-top: 3rem;
  }
}


@media (min-width: 960px) {
  #inside_nav + .right_per_detail {
    margin-top: 3rem;
  }
}