/*
=================================================
EGL CUSTOM HEADER
=================================================
*/

/* 1. DESIGN VARIABLES */
:root {
    --egl-primary: #06223C;
    --egl-secondary: #005AAA;
    --egl-cta: #FE9000;
    --egl-light: #FCFCFC;
    --egl-dark: #191919;
    --egl-line: rgba(6, 34, 60, 0.12);
    --egl-r: 5px;
    --egl-max: 1280px;
    --egl-header-h: 96px;
    --egl-shadow: 0 26px 80px rgba(6, 34, 60, 0.16);
    --egl-transition-speed: 0.58s;
    --egl-vh: 1vh;
}

/* 1A. TYPOGRAPHY — CUSTOM HEADER FONT STACK */
/*
   Uses Geomanist first, matching the supplied prototype.
   Falls back to system/site-safe sans-serif fonts if Geomanist is unavailable.
*/

 .egl-custom-header,
 .egl-custom-header *,
 .egl-full-menu,
 .egl-full-menu * {
    font-family: Geomanist, Inter, Avenir, Montserrat, "Segoe UI", Arial, sans-serif !important;
}

/* 1B. VIEWPORT STABILITY & SAFARI SHIELD */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Prevents Safari from showing white space during elastic scroll */
    -webkit-tap-highlight-color: transparent;
}

/* 
   Only apply scrollbar-gutter on devices with a precise pointer (mouse).
   This prevents an empty white strip on mobile devices with overlay scrollbars.
*/
@media (pointer: fine) {
    html {
        scrollbar-gutter: stable;
    }
}

body {
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    /* Helps iOS handle overflow transitions more smoothly */
    -webkit-overflow-scrolling: touch;
}

html {
	background-color: transparent;
}

body {
	background-color: var(--egl-light);
}

/* Kill any Divi-injected bottom spacing */
#page-container, #main-content {
    background-color: transparent !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. SAFE DIVI RESET — ONLY THE SHORTCODE SECTION */
/*
   This targets only the Divi section you manually marked with:
   egl-header-shortcode-section

   It no longer targets .et_pb_section:first-child.
   It no longer removes backgrounds from the hero section.
*/
 .egl-header-shortcode-section {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important;
}

 .egl-header-shortcode-section .et_pb_row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

 .egl-header-shortcode-section .et_pb_column,
 .egl-header-shortcode-section .et_pb_module,
 .egl-header-shortcode-section .et_pb_code,
 .egl-header-shortcode-section .et_pb_code_inner {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    min-height: 0 !important;
}

/* 3. HEADER STRUCTURAL POSITIONING */
 .egl-custom-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    height: var(--egl-header-h);
    display: flex;
    align-items: center;
    color: var(--egl-light);
    background: transparent;
    transition:
        height 0.26s ease,
        background 0.26s ease,
        box-shadow 0.26s ease,
        backdrop-filter 0.26s ease,
		-webkit-backdrop-filter 0.26s ease;
}

.egl-custom-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--egl-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: -1; /* Place behind logo/nav */
    opacity: 0; /* Start invisible */
    transition: opacity 0.3s ease; /* The smooth fade */
    pointer-events: none;
}

/* --- 3.1 DEFAULT STYLE --- */
/* Shows the solid background immediately on page load */
 .egl-custom-header--default::before {
    opacity: 1;
}

/* --- 3.2 TRANSPARENT STYLE --- */
/* Stays transparent until the user scrolls and .is-compact is added */

/* --- 3.3 COMPACT STYLE --- */
/* Starts at 60px height with a solid background immediately */
 .egl-custom-header--compact {
    height: 60px;
}
 .egl-custom-header--compact::before {
    opacity: 1;
}

 .egl-header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--egl-header-h);
	transition: min-height 0.26s ease, padding 0.26s ease;
}

/* 4. LOGO STYLING */
.egl-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.egl-logo {
	height: 48px;
	width: auto;
	display: block;
	transition: height 0.26s ease, transform 0.26s ease, opacity 0.18s ease;
}

@media (min-width: 481px) {
.egl-logo {
height: 60px;
}
}

@media (min-width: 1100px) {
.egl-logo {
height: 64px;
}
}

/* 5. DESKTOP NAVIGATION LAYOUT */
 .egl-desktop-nav {
    display: none;
}

 .egl-desktop-menu-list,
 .egl-desktop-menu-list ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 1100px) {
     .egl-desktop-nav {
	    display: block;
	    margin-left: auto;
	    margin-right: 24px;
		transition:
			margin-right 0.24s ease,
			transform 0.24s ease,
			opacity 0.18s ease;
	}

     .egl-desktop-menu-list {
        display: flex;
        align-items: center;
        gap: 8px;
    }

     .egl-desktop-menu-list > li {
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }

     .egl-desktop-menu-list > li > a {
        display: block;
        color: var(--egl-light) !important;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        font-size: 18px;
        line-height: 1;
        padding: 15px 11px;
        border-radius: var(--egl-r);
        text-decoration: none;
        transition: 
			background 0.18s ease,
			font-size 0.24s ease,
			padding-top 0.24s ease,
			padding-bottom 0.24s ease,
			letter-spacing 0.24s ease,
			line-height 0.24s ease;
    }

     .egl-desktop-menu-list > li > a:hover,
     .egl-desktop-menu-list > li:hover > a {
        background: rgba(255, 255, 255, 0.10);
    }

    /*
       Temporarily hide dropdowns until the dropdown styling phase.
       This keeps the header clean while we build incrementally.
    */
     .egl-desktop-menu-list .sub-menu {
        display: none;
    }
}

/* 6. HAMBURGER TOGGLE POSITIONING */
 .egl-menu-toggle {
    position: relative;
    flex: 0 0 34px;
    background: none;
    border: 0;
    cursor: pointer;
    width: 34px;
    height: 34px;
    display: block;
    z-index: 10005;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

 .egl-menu-toggle-line {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--egl-light);
    position: absolute;
    left: 4px;
    transform-origin: center;
    transition:
        transform 0.25s ease,
        top 0.25s ease,
        opacity 0.18s ease;
}

 .egl-menu-toggle-line-1 {
    top: 9px;
}

 .egl-menu-toggle-line-2 {
    top: 16px;
}

 .egl-menu-toggle-line-3 {
    top: 23px;
}

/* HAMBURGER ACCESSIBLE FOCUS STATE */
/*
   Remove browser/theme default focus box from mouse clicks,
   but preserve a custom accessible keyboard focus style.
*/
.egl-menu-toggle:focus {
    outline: none;
    box-shadow: none;
}

/*
   Keyboard-accessible focus state.
   This appears when tabbing to the hamburger button.
*/
.egl-menu-toggle:focus-visible {
    outline: 2px solid var(--egl-secondary);
    outline-offset: 4px;
    box-shadow: none;
}

/* 7. OVERLAY INITIAL STATE — HIDDEN */
 .egl-full-menu {
    position: fixed;
    top: 0;
    right: 0 !important; /* Force anchor to right */
	left: auto !important; /* Prevent expansion to the right */
	bottom: auto;
	
    width: 1px;
    height: 1px;
	
    background: var(--egl-primary);
    color: var(--egl-light);
    z-index: 10002 !important;
    opacity: 0;
    pointer-events: none;
    overflow-x: hidden;
	overflow-y: auto;

	overscroll-behavior: contain;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	
	transform-origin: top right !important;
	border-bottom-left-radius: 28px;
	
	background-color: var(--egl-primary) !important;
    isolation: isolate;
	
	/*
	 * The transition timing here is key:
	 * We want width/heigt to be the main event.
	 */
    transition:
        width 0.72s cubic-bezier(0.76, 0, 0.24, 1),
        height 0.75s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 0.16s ease 0.56s,
		border-radius 0.22s ease 0.36s;
}

/*
   Overlay menu internal scroll lock.

   This does NOT lock the page behind the overlay.
   That is handled separately by html/body.egl-scroll-locked.

   JavaScript adds this class only when the viewport height
   is taller than 1024px.
*/
.egl-full-menu.egl-overlay-scroll-locked {
    overflow-y: hidden !important;
    overscroll-behavior-y: none !important;
}

.egl-full-menu {
touch-action: pan-y;
overscroll-behavior-y: contain;
}

 .egl-custom-header.egl-menu-open {
    background: transparent;
}

 .egl-full-menu a {
    color: inherit;
}

/* Desktop Anchor Override */
@media (min-width: 1100px) {
     .egl-full-menu {
        top: 0; /* Keep pinned to top for expansion consistency */
        right: 0 !important;
    }
}

/* 8. WORDPRESS ADMIN BAR OFFSET — LOGGED-IN VIEW ONLY */
/*
   WordPress adds a black admin toolbar at the top of the screen for logged-in users.
   Because the custom header is fixed at top: 0, the admin bar can cover the header
   during testing. These rules move the custom header and overlay down only when
   the admin bar is present.

   Public visitors are not affected.
*/

/* 8. WORDPRESS ADMIN BAR OFFSET — PRECISION SYNC */

/*
   Use WordPress's own admin bar height variable instead of hardcoded 32px.
   The fallback keeps the layout safe if the variable is unavailable.
*/
body.admin-bar {
    --egl-admin-bar-offset: var(--wp-admin--admin-bar--height, 32px);
}

/*
   Keep the fixed header below the WordPress admin bar for logged-in users.
*/
body.admin-bar .egl-custom-header {
    top: var(--egl-admin-bar-offset);
}

/*
   Keep the overlay aligned below the WordPress admin bar.
*/
body.admin-bar .egl-full-menu {
    top: 0 !important;
}

/* 9. COMPACT HEADER STATE — CONTROLLED BY JAVASCRIPT */
 .egl-custom-header.is-compact {
    height: 60px;
    background: transparent;
    box-shadow: none;
}

 .egl-custom-header.is-compact::before {
    content: "";
    position: absolute;
    inset: 0;
	opacity: 1;
    background: var(--egl-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 0;
}

/* Logo scaling for all compact states */
 .egl-custom-header--compact .egl-logo,
 .egl-custom-header.is-compact .egl-logo {
    height: 36px;
}

@media (min-width: 481px) {
    .egl-custom-header--compact .egl-logo,
    .egl-custom-header.is-compact .egl-logo {
        height: 44px;
    }
}

@media (min-width: 1100px) {
    .egl-custom-header--compact .egl-logo,
    .egl-custom-header.is-compact .egl-logo {
        height: 48px;
    }
}

 .egl-custom-header.is-compact .egl-header-inner {
    min-height: 56px;
	position: relative;
}

.egl-custom-header.is-compact .egl-logo {
height: 36px;
}

@media (min-width: 481px) {
.egl-custom-header.is-compact .egl-logo {
height: 44px;
}
}

@media (min-width: 1100px) {
.egl-custom-header.is-compact .egl-logo {
height: 48px;
}
}

@media (min-width: 1100px) {
     .egl-custom-header.is-compact .egl-desktop-nav {
        margin-right: 24px;
    }

     .egl-custom-header.is-compact .egl-desktop-menu-list > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 16px;
		letter-spacing: 0.05em;
    }
}

/* 10. HAMBURGER OPEN STATE — CONTROLLED BY JAVASCRIPT */
 .egl-menu-toggle.is-open .egl-menu-toggle-line-1 {
    top: 16px;
    transform: rotate(45deg);
}

 .egl-menu-toggle.is-open .egl-menu-toggle-line-2 {
    opacity: 0;
}

 .egl-menu-toggle.is-open .egl-menu-toggle-line-3 {
    top: 16px;
    transform: rotate(-45deg);
}

/* 11. FULL-SCREEN MENU OPEN STATE — CONTROLLED BY JAVASCRIPT */
/*
   This creates the original expand-from-upper-right behavior.
   The detailed overlay layout is styled later.
*/
 .egl-custom-header.egl-menu-open .egl-full-menu {
    top: 0 !important;
	right: 0 !important;
	width: 100vw;
    height: calc(var(--egl-vh, 1vh) * 100) !important;
    opacity: 1;
    pointer-events: auto;
	
	transition:
		width 0.58s cubic-bezier(0.76, 0, 0.24, 1),
		height 0.58s cubic-bezier(0.76, 0, 0.24, 1),
		opacity 0.08s ease,
		border-radius 0.18s ease 0.28s;
}

/* CLOSED STATE */
body {
    overflow-x:hidden;
}


/* OPEN STATE */
html.egl-scroll-locked,
body.egl-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* 9.2 INNER CONTENT REVEAL
   Keeps menu content from appearing before the expanding panel has room.
*/

.egl-full-menu-inner {
width: 100%;
min-height: 100%;
padding: 78px 16px 32px;
opacity: 0;
transform: translateY(-10px);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}

/* When open, reveal content slightly after the panel begins expanding */
 .egl-custom-header.egl-menu-open .egl-full-menu-inner {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.3s ease 0.3s,
        transform 0.3s ease 0.3s;
}

/* Optional: slight rounded corner while expanding/collapsing */
 .egl-full-menu {
    border-bottom-left-radius: 28px;
}

 .egl-custom-header.egl-menu-open .egl-full-menu {
    border-bottom-left-radius: 5px;
    transition:
        width 0.58s cubic-bezier(.76, 0, .24, 1),
        height 0.58s cubic-bezier(.76, 0, .24, 1),
        opacity 0.08s ease,
        border-radius 0.18s ease 0.28s;
}



/* 13. DESKTOP DROPDOWNS - BASE STYLING */
@media (min-width: 1100px) {
    /*
       Base dropdown panel for standard top-level items:
       Visit, About, Worship, Give.
	
       Connect is handled separately below using the .egl-mega-menu class.
    */
	 .egl-desktop-menu-list > li {
        position: relative;
    }
	
     .egl-desktop-menu-list .sub-menu {
        display: block; /* Overrides the temporary display:none from the foundation phase */
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 260px;
        background: var(--egl-light);
        border-radius: var(--egl-r);
        box-shadow: var(--egl-shadow);
        padding: 12px;
        opacity: 0;
        visibility: hidden;
		pointer-events: none;
        transform: translateY(-10px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
        z-index: 1000;
    }

    /*
       Show only the submenu belonging to the item being hovered.
    */
     .egl-desktop-menu-list > li:hover > .sub-menu,
	 .egl-desktop-menu-list > li:focus-within > .sub-menu {
	    opacity: 1;
	    visibility: visible;
		pointer-events: auto;
	    transform: translateY(0);
	}
	
	 .egl-desktop-menu-list > li.menu-item-has-children::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 12px;
        display: block;
    }

    /*
       Standard dropdown links.
    */
     .egl-desktop-menu-list .sub-menu a {
        display: block;
        padding: 10px 14px;
        color: var(--egl-primary) !important;
        font-size: 15px;
        line-height: 1.5;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        transition:
            background 0.15s ease,
            color 0.15s ease;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

     .egl-desktop-menu-list .sub-menu a:hover {
        background: #F1F6FB;
        color: var(--egl-secondary) !important;
    }

    /*
       Prevent deeper standard dropdowns from floating separately.
       This matters because the Connect mega menu uses third-level items.
    */
     .egl-desktop-menu-list .sub-menu .sub-menu {
        top: auto;
        right: auto;
    }

    /* 14. CONNECT 6-COLUMN MEGA MENU STYLING */

    /*
       This targets only the first submenu directly under Connect.

       Required WordPress class:
       egl-mega-menu

       Required WordPress hierarchy:
       Connect
         Children
           child links
         Youth
           child links
         Young Adults
           child links
         Adults
           child links
         Bible Studies
           child links
         Events
           child links
    */
     .egl-desktop-menu-list .egl-mega-menu > .sub-menu {
        width: max-content;
		max-width: calc(100vw - 44px);
        right: 0px;
        display: grid;
        grid-template-columns: repeat(6, max-content);
        gap: 8px;
        padding: 20px;
		overflow-x: auto;
    }

    /*
       Each direct child of Connect becomes one mega-menu column.
    */
     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li {
        min-width: 132px;
		max-width: 190px;
        padding: 3px 10px 3px 0;
        border-right: 1px solid rgba(6, 34, 60, 0.08);
    }

     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li:last-child {
        border-right: 0;
    }

    /*
       Mega menu column headers:
       Children, Youth, Young Adults, Adults, Bible Studies, Events.
    */
     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li > a {
        display: block;
        padding: 8px 11px 6px;
        margin: 0 0 7px;
        color: var(--egl-secondary) !important;
        font-size: 15px;
        line-height: 1.5;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 800;
        border-radius: 0;
        border-bottom: 1px solid var(--egl-line);
        background: transparent;
        white-space: normal;
        cursor: pointer;
    }
	
	 .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li > a:hover {
	    color: var(--egl-primary) !important;
	    background: transparent;
	    border-bottom-color: var(--egl-secondary);
	}
	
	/*
       Default state:
       Connect's third-level column lists must not be visible or interactive
       unless the top-level Connect item is actively open.

       This prevents hidden Connect links from capturing hover while the user
       is interacting with Visit, About, Worship, or Give dropdowns.
    */
     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li > .sub-menu {
        position: static;
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        width: auto;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }

    /*
       Open state:
       Only reveal Connect's third-level column lists when the top-level
       Connect item itself is hovered or keyboard-focused.
    */
     .egl-desktop-menu-list .egl-mega-menu:hover > .sub-menu > li > .sub-menu,
     .egl-desktop-menu-list .egl-mega-menu:focus-within > .sub-menu > li > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /*
       Actual links inside the six Connect columns.
    */
     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li > .sub-menu a {
        padding: 6px 11px;
        color: var(--egl-primary) !important;
        font-size: 15px;
        line-height: 1.5;
        font-weight: 700;
        white-space: normal;
    }

     .egl-desktop-menu-list .egl-mega-menu > .sub-menu > li > .sub-menu a:hover {
        background: #F1F6FB;
        color: var(--egl-secondary) !important;
    }
	
	/*
	   Safety: prevent nested submenus inside standard dropdowns from appearing
	   as accidental floating panels. Connect's third-level menus are explicitly
	   restored by the .egl-mega-menu rules above.
	*/
	 .egl-desktop-menu-list > li:not(.egl-mega-menu) .sub-menu .sub-menu {
	    display: none !important;
	}
}

/* 16. FULL MENU OVERLAY — PHASE 9.1 REVISION */

/* 
   INNER CONTAINER: 
*/
body .egl-full-menu-inner {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-inline: 0 !important;
    padding: 78px 16px 32px !important;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

@media (min-width: 641px) {
    body .egl-full-menu-inner {
        padding: 92px 24px 40px !important;
    }
}

@media (min-width: 1100px) {
    body .egl-full-menu-inner {
        padding: 98px 34px 42px !important;
    }
}

/* 
   OVERLAY HEADER: 
   Matches prototype typography and spacing.
*/
body .egl-menu-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;

    margin: 0 0 44px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

body .egl-menu-head h2,
body .egl-menu-head p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

body .egl-menu-head h2 {
    margin: 0;
}

body .egl-menu-head p {
    margin: 0;
    max-width: 620px;
}

@media (min-width: 1100px) {
    body .egl-menu-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 72px;
        align-items: end;
    }

    body .egl-menu-head p {
        justify-self: end;
        text-align: right;
    }
}

body .egl-menu-head h2 {
font-family: Geomanist, Inter, Avenir, Montserrat, "Segoe UI", Arial, sans-serif !important;
font-size: clamp(34px, 12vw, 58px);
line-height: 0.92;
letter-spacing: -0.045em;
font-weight: 600;
color: var(--egl-light);
margin: 0;
}

@media (min-width: 641px) {
body .egl-menu-head h2 {
font-size: clamp(38px, 13vw, 68px);
line-height: 0.92;
}
}

@media (min-width: 1100px) {
body .egl-menu-head h2 {
font-size: clamp(44px, 16vw, 92px);
line-height: 0.84;
letter-spacing: -0.055em;
}
}

body .egl-menu-head p {
    font-family: Geomanist, Inter, Avenir, Montserrat, "Segoe UI", Arial, sans-serif !important;
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    max-width: 560px;
    margin-top: 0px;
    line-height: 1.5;
}



/* 17. MENU ITEM STYLING */
body .egl-overlay-menu-list,
body .egl-overlay-menu-list ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}

body .egl-overlay-menu-list {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}

/* 
   Ensure all overlay links are positioned to contain the underline 
   and that the underline only spans the width of the text.
*/
body .egl-overlay-menu-list a {
    position: relative;
    width: fit-content;
    text-decoration: none !important;
}

/* 
   The Underline:
   Starts at 0 width and uses 'currentColor' to automatically match 
   the Orange (CTA) of top-level items and White (Light) of sub-menu items.
*/
body .egl-overlay-menu-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Positioned slightly below the text */
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate the underline to full width on hover */
body .egl-overlay-menu-list a:hover::after {
    width: 100%;
}

/* TABLET OVERLAY LAYOUT */
@media (min-width: 641px) {
    body .egl-overlay-menu-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .egl-overlay-feature-card {
        grid-column: span 2;
    }
}
/* DESKTOP OVERLAY LAYOUT */
@media (min-width: 1100px) {
    body .egl-overlay-layout {
	    display: grid;
	    grid-template-columns: repeat(5, minmax(0, 1fr));
	    gap: 34px;
	    align-items: start;
	    width: 100%;
	    max-width: 100%;
	    min-width: 0;
	}

    /* The menu container spans the full width (all 5 columns) */
    body .egl-overlay-menu-column {
	    grid-column: 1 / -1;
	    min-width: 0;
	    max-width: 100%;
}

    /* The actual WordPress menu list splits into 5 columns */
    body .egl-overlay-menu-list {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 24px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
    }

    /* The feature card spans only the first 2 columns (Visit & About) */
    body .egl-overlay-feature-card {
        grid-column: span 2;
		max-width: none;
        margin-top: 20px; /* Space between menu and card */
    }
}

body .egl-overlay-menu-list > li {
    min-width: 0;
    max-width: 100%;
    border-top: 3px solid var(--egl-secondary);
    padding-top: 15px !important;
}

body .egl-overlay-menu-list > li > a {
    display: block;
    color: var(--egl-cta) !important;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    margin-bottom: 12px;
    text-decoration: none;
}

body .egl-overlay-menu-list .sub-menu a {
    display: block;
    color: var(--egl-light) !important;
    padding: 6px 0;
	line-height: 1.2em;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
}

body .egl-overlay-menu-list .egl-hide-overlay-title > a {
    display: none;
}

body .egl-overlay-menu-list .egl-hide-overlay-title {
    border-top: none;
    padding-top: 0 !important;
}

/* 18. FEATURE CARD STYLING (PROTOTYPE MATCH) */
body .egl-overlay-feature-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.075);
    border-radius: var(--egl-r);
    padding: 26px;
    color: var(--egl-light);
}

body .egl-overlay-feature-card h3 {
    color: var(--egl-light);
	font-size: 34px;
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 600;
    margin-bottom: 12px;
	margin-top: 12px;
}

body .egl-overlay-feature-card p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 18px;
}

body .egl-overlay-feature-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: var(--egl-r);
    background: var(--egl-cta);
    color: var(--egl-light) !important;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(254, 144, 0, 0.28);
    transition: transform 0.18s ease;
}

/* 17. MOBILE HEADER + OVERLAY RESPONSIVENESS — PHASE 10 */

/* Desktop header refinements */
@media (min-width: 1100px) {
    body .egl-header-inner {
        padding-left: 42px;
        padding-right: 42px;
    }

    body .egl-logo {
        height: 60px;
    }

    body .egl-custom-header.is-compact .egl-logo {
        height: 44px;
    }
}

/* Mobile overlay heading */
@media (max-width: 640px) {
    body .egl-menu-head {
        margin-bottom: 32px;
        padding-bottom: 20px;
    }

    body .egl-menu-head h2 {
        font-size: clamp(38px, 13vw, 68px) !important;
        line-height: 0.92;
        letter-spacing: -0.045em;
    }

    body .egl-menu-head p {
        max-width: 34rem;
        font-size: 16px;
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    body .egl-menu-head h2 {
        font-size: clamp(34px, 12vw, 58px) !important;
    }

    body .egl-menu-head p {
        font-size: 15px;
    }
}


/* Mobile tap target improvements */
@media (max-width: 640px) {
    body .egl-overlay-menu-list a {
        display: inline-flex;
        align-items: center;
    }

    body .egl-overlay-menu-list > li > a {
        min-height: 40px;
    }

    body .egl-overlay-menu-list .sub-menu a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* Short screen safety */
@media (max-height: 680px) {
    body .egl-full-menu-inner {
        padding-top: 72px !important;
        padding-bottom: 28px !important;
    }

    body .egl-menu-head {
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    body .egl-menu-head h2 {
        font-size: clamp(34px, 10vw, 64px) !important;
    }
}

/* 
   Surgical Fix: iOS Safari Resample Nudge 
   Triggers a layout recalculation to force Safari to update its bottom bar color.
*/
body.egl-safari-nudge {
    padding-bottom: 1px !important;
}

.egl-safari-tint-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--egl-vh, 1vh) * 100);
    min-height: 100dvh;
    background-color: var(--egl-primary) !important;
    z-index: 9999; 
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* REMOVED transition: opacity 0.3s ease; */
}

body.egl-menu-open .egl-safari-tint-layer {
    visibility: visible !important;
    opacity: 1 !important;
}
/* 
   Final Safari Tint Lock 
   Forces the root elements to match the meta tag instantly.
*/
html.egl-menu-open,
html.egl-menu-open body {
    background-color: var(--egl-primary) !important;
}

/* Ensure the tint layer is solid and visible */
body.egl-menu-open .egl-safari-tint-layer {
    visibility: visible !important;
    opacity: 1 !important;
    background-color: var(--egl-primary) !important;
}