/*
Theme Name: Lehigh Valley International Airport (ABE) Child
Theme URI: http://www.flylvia.com
Description: Child theme for the Lehigh Valley International Airport (ABE) parent theme. Currently holds custom navigation styles.
Author: Weidenhammer Inc
Author URI: https://hammer.net
Template: abe
Version: 1.0.0
Tags: Responsive
Text Domain: abe-child
*/

/* ---------------------------------------------------------------------------
 * Add your custom styles below this line.
 *
 * Notes:
 * - The parent theme (abe) hardcodes its stylesheet via a <link> tag in
 *   header.php BEFORE wp_head(), so this child stylesheet (enqueued in
 *   functions.php) is loaded AFTER the parent CSS and will override it.
 * - Avoid editing the parent theme directly; use this file (and the child
 *   functions.php) for all customizations.
 * ------------------------------------------------------------------------- */

 /* parent <li> needs to be the positioning context */
#main-navigation ul li {
	position: relative;
}

/* show the sub-menu on hover/focus, override parent's display:none */
#main-navigation li:hover > .sub-menu,
#main-navigation li:focus-within > .sub-menu {
	display: block;
}

#main-navigation li.three-col:hover > .sub-menu,
#main-navigation li.three-col:focus-within > .sub-menu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	min-width: 600px;
}

/* the dropdown panel itself */
#main-navigation .sub-menu {
	background: #187DB4;
	min-width: 220px;
	padding: 8px 0;
	margin: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
	text-align: left;
}

#main-navigation .sub-menu li {
	display: flex;
    align-items: center;
	margin: 0;
    
}

#main-navigation .sub-menu li a {
	padding: 10px 16px;
	color: #fff;
	font-size: 15px;
	display: block;
    font-family: "Helvetica Neue LT W05_65 Medium";
    width: 100%;
}

#main-navigation .sub-menu li a:hover {
	background: #f3f5f9;
    color: #187DB4;
}


#main.hovered #main-navigation ul li .sub-menu li a, #main:hover #main-navigation ul li .sub-menu li a	{color: #fff;}
#main.hovered #main-navigation ul li .sub-menu li a:hover, #main:hover #main-navigation ul li .sub-menu li a:hover	{color: #187DB4;}




/* ---------------------------------------------------------------------------
 * Mobile Navigation
 *
 * The mobile drawer uses the same wp_nav_menu() output as the desktop menu,
 * but submenus are always displayed inline (no hover, no toggle). The parent
 * theme's `<li id="arrow">` injection and "tap-to-toggle" click handler are
 * neutralized via the inline <script> at the end of header.php.
 * ------------------------------------------------------------------------- */

/* The parent theme appends a Font Awesome chevron to top-level mobile links
 * to indicate a submenu can be opened. Since submenus are now always shown,
 * the chevron is meaningless — hide it. */
#mobile-navigation > ul > li > a::after,
#mobile-navigation > ul > li > a:after {
	content: none;
}

#mobile-nav-trigger{
    padding: 30px 0 24px 0;
}

#mobile-navigation > ul > li > a{
    background-color: #1470A2;
    padding: 10px 10px 6px;
    border: none;
}
#mobile-navigation > ul li {
    padding: 10px 10px 5px;
}

#mobile-navigation > ul {
    background-color: #187DB4;
}

/* Submenus: always visible, flowing inline below the parent item. */
#mobile-navigation .sub-menu {
	display: block;
	position: static;
	background: #187DB4;
	box-shadow: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#mobile-navigation .sub-menu li {
	display: flex;
	margin: 0;
	clear: both;
}

#mobile-navigation .sub-menu li a {
	background: transparent;
	margin: 0;
    padding: 0px 10px;;
	font-size: clamp(14px, 2.2vw, 18px);
	line-height: 1.3;
	color: #fff;
	display: block;
	transition: background-color .2s linear;
}

/* No hover effect on mobile — the design assumes touch / always-visible. */
#mobile-navigation .sub-menu li a:hover,
#mobile-navigation .sub-menu li a:focus {
	background: transparent;
}

#main.hovered #mobile-nav-trigger::before, #main.mobile-active #mobile-nav-trigger::before{
    content: none;
}

#mobile-nav-trigger::before{
    content: none;
}

#mobile-nav-trigger{
    width: auto;
}

#main #hamburger span{
    height: 4px;
    border-radius: 30%;
}

#main.hovered #hamburger span{
    height: 4px;
    border-radius: 30%;
    background:#187DB4;
}

#hamburger span:nth-child(1) {top: 0; left: 0; transform-origin: left center;}

#hamburger span:nth-child(2) {top: 10px; transform-origin: left center;}

#hamburger span:nth-child(3) {top: 20px; transform-origin: left center;}

#mobile-navigation-wrapper{
    padding: 155px 0 175px 0;
}

@media only screen and (max-width: 768px) {
    #main-navigation{
        height: 90px;
    }
    #navigation-block{
        padding-top: 0;
    }
    #logo{
        max-width: 65px;
        padding-top: 15px;
    }

   


}

/* Mobile Tertiary Navigation */
#mobile-navigation .mobile-tertiary-navigation ul {
	display: flex;
    color: #fff;
    justify-content: space-around;
    font-family: "Helvetica Neue LT W05_75 Bold";
    padding-top: 10px;

    li{
        padding: 10px 0px;
    }
	
    a{
        color: #fff;
        font-size: 14px;
    }

    .mobile-tertiary-navigation-separator{
        font-family: "Helvetica Neue LT W05_65 Medium";
    }
}

/* ---------------------------------------------------------------------------
 * Mobile Search Icon
 *
 * A search button that sits next to the hamburger on small screens. It opens
 * the existing #site-search modal (defined in footer.php) — the same modal
 * the desktop tertiary-nav "Search" link uses, so we don't duplicate markup.
 * ------------------------------------------------------------------------- */

#mobile-search-trigger {
	display: none;
	width: auto;
	height: auto;
	margin: 0 5px 0 0;
	padding: 30px 10px 24px 10px;
	font-size: 24px;
	line-height: 1;
	color: #fff;
	text-align: center;
	position: relative;
	float: right;
	z-index: 8001;
	transition: color .3s linear;

    .fal{
        font-weight: 900;
    }
}

#mobile-search-trigger:hover,
#mobile-search-trigger:focus {
	color: #1b8ecd;
}

/* Match the hamburger trigger's color-flip so the icon stays visible when the
 * parent's #main:hover / .mobile-active rules turn the header background white. */
#main.hovered #mobile-search-trigger,
#main:hover #mobile-search-trigger,
#main.mobile-active #mobile-search-trigger {
	color: #1f3f78;
}

#main.hovered #mobile-search-trigger:hover,
#main:hover #mobile-search-trigger:hover,
#main.mobile-active #mobile-search-trigger:hover {
	color: #1b8ecd;
}

/* Show at the same breakpoint where the hamburger trigger appears
 * (parent CSS reveals #mobile-nav-trigger at max-width: 1000px). */
@media only screen and (max-width: 1000px) {
	#mobile-search-trigger {
		display: block;
	}
    #tertiary-navigation {
		display: none;
	}

	header#main{
		position: sticky;
		top:0;
	}
	#announcement + header#main {
		top: 80px;

		
	}

	#mobile-navigation-wrapper{
		position:fixed;
		overflow-y: scroll;
	}
	body:has(#announcement) #mobile-navigation-wrapper{
		padding: 228px 0 175px 0;
		background-color: transparent;
	
	}
	#announcement {
		position: sticky;
		top: 0;
		z-index: 5000;
		min-height: 80px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	
}

@media only screen and (max-width: 420px) {
    #site-search {
        top: -80%;
    }
    #tsa-wait-times-modal {
        top: -80%;
    }
    
}

@media only screen and (max-width: 380px) {
	#mobile-search-trigger {
		padding: 30px 8px 41px 8px;
	}
 
}