/* =========================================================
   Mobile Navigation From Scratch
   993px and above = desktop menu
   992px and below = hamburger drawer
========================================================= */

@media (max-width: 992px) {

:root {
	--ttfive-drawer-width: 320px;
}

.header-menu-wrapper .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open:not(.always-shown) {display: flex !important; align-items: center !important; justify-content: center !important;}
.wp-block-navigation__responsive-container-open svg {width: 35px !important; height: 35px !important;}
.header-menu-wrapper .wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container {position: fixed !important; left: 0 !important; right: auto !important; top: 0 !important; bottom: 0 !important; width: var(--ttfive-drawer-width) !important; max-width: 85vw !important; height: 100vh !important; background: #ffffff !important; color: #1c1c1c !important; transform: translateX(-100%) !important; transition: transform 0.3s ease-in-out !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 99999 !important; padding: 0 !important; display: block !important;}
.header-menu-wrapper .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {display: flex !important; flex-direction: column !important; transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;}html.has-modal-open {position: relative;}
html.has-modal-open::before {content: ""; position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.45); z-index: 99998; margin: 0 !important;}
.wp-block-navigation__responsive-container-close {display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 12px !important; right: 16px !important; z-index: 2 !important; cursor: pointer !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {padding-top: 48px !important; width: 100% !important; box-sizing: border-box !important; gap: 0 !important;}
.ttfive-mobile-nav-logo {padding: 4px 20px 14px; text-align: center; border-bottom: 1px solid #eeeeee; width: 100%; box-sizing: border-box;}
.ttfive-mobile-nav-logo * {margin: 0 !important;}
.ttfive-mobile-nav-logo img {max-height: 100px; width: auto; margin: 0 auto !important; display: inline-block;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100% !important;  box-sizing: border-box !important;  display: flex !important;  flex-direction: column !important;  gap: 10px !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {width: 100% !important; max-width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; box-sizing: border-box !important; position: relative !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {width: 100% !important; max-width: 100% !important; padding: 10px 20px 10px 28px !important; box-sizing: border-box !important; word-break: break-word !important; text-decoration: none !important; color: #1c1c1c !important;}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important;}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child > a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > a.wp-block-navigation-item__content {display: flex !important; align-items: center !important; flex: 1 1 auto !important; width: auto !important; max-width: calc(100% - 44px) !important; min-width: 0 !important; order: 1 !important;}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.has-child > button.wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > button.wp-block-navigation-submenu__toggle {flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; height: 48px !important; order: 2 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; cursor: pointer !important; color: #1c1c1c !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; position: static !important; width: auto !important; height: auto !important; color: #1c1c1c !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {width: 14px !important; height: 14px !important; stroke: currentColor !important; color: #1c1c1c !important; transition: transform 0.25s ease !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {transform: rotate(180deg) !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {order: 3 !important; display: none !important; position: static !important; inset: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-basis: 100% !important; background: #fafafa !important; box-shadow: none !important; border: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {display: none !important;}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle[aria-expanded="true"]
~ .wp-block-navigation__submenu-container {display: flex !important; flex-direction: column !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {width: 100% !important; max-width: 100% !important; border-bottom: none !important;}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {padding: 12px 20px 12px 42px !important; font-size: 16px !important; line-height: 1.4 !important;}
/* .ttfive-mobile-nav-cta{display: none;} */
.ttfive-mobile-nav-social {padding: 8px 20px 22px; text-align: center; width: 100%; box-sizing: border-box;}
.ttfive-mobile-nav-social-label {font-size: 16px; color: #777777; margin: 0 0 10px;}
.ttfive-mobile-nav-social-icons {display: flex; justify-content: center; gap: 14px;}
.ttfive-mobile-nav-social-icon {width: 40px; height: 40px; border-radius: 50%; background: #f3f3f3; display: flex; align-items: center; justify-content: center; color: #333333; flex-shrink: 0;}
/* Remove hover underline from mobile menu */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation-item__content::after {display: none !important;}
/* Optional hover style */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation-item__content:hover {background-color: #f5f5f5 !important; color: #252525 !important; opacity: 1 !important;}
/* Top-level active row full background */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-item,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-parent,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-ancestor {background-color: #252525 !important;}

/* Top-level active link text */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-parent > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-ancestor > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li > a[aria-current="page"] {color: #ffffff !important;}

.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-item > button svg,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-parent > button svg,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-ancestor > button svg {color: #ffffff !important;}

/* Keep submenu area light even when parent About is active */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-parent > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-ancestor > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__container > li.current-menu-item > .wp-block-navigation__submenu-container {background: #F5F5F5 !important;}

/* Submenu active item color */
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container li.current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container li.current-menu-parent > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container li.current-menu-ancestor > a,
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container li > a[aria-current="page"] {background-color: #ffffff !important; color: #1c1c1c !important;}

.ttfive-mobile-nav-social-icons {display: flex; justify-content: center; align-items: center; gap: 14px;}
.ttfive-mobile-nav-social-icon img {width: 30px !important; height: 30px !important; object-fit: contain; display: block;}
}