/* Mobile tap-to-call button (hidden on desktop) */ .nav-call{display:none;} /* mobile-nav.css — Single source of truth for mobile navigation. * Loaded LAST in so it overrides any page-specific inline CSS. * Pairs with the unified JS handler at the bottom of each page. */ /* ════ NAV SHAPE GUARDS (all widths) ════ * The desktop nav row needs 1174px to render at its natural size * (logo 187 + links 875 + padding 112). Below that, flex items were * shrinking and wrapping: the "Free Consultation" button went from * 178x34 to 121x60 and lost its shape, and the page overflowed * horizontally below 933px. These two rules make wrapping impossible; * the breakpoints below make sure it is never needed. */ .nav-links > li{flex:0 0 auto;} .nav-links > li > a{white-space:nowrap;} /* ════ COMPACT DESKTOP NAV (1101–1240px) ════ * Buys back ~120px by tightening gaps and padding rather than * squeezing the items themselves, so the full menu survives down to 1101px. */ @media(min-width:1101px) and (max-width:1240px){ nav{padding:0 28px;} .nav-links{gap:18px;} .nav-logo{height:60px;} .nav-portal{padding:7px 11px;letter-spacing:.06em;} .nav-cta-btn{padding:10px 16px;letter-spacing:.05em;} } @media(max-width:1100px){ /* Hamburger button visible */ .nav-toggle{display:flex!important;margin-left:auto!important;} /* Top-level menu: hidden by default, slides out when .open */ .nav-links{ display:none!important; position:absolute!important; top:100%!important; left:0!important; right:0!important; background:#fff!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:14px 0 18px!important; border-bottom:1px solid rgba(51,102,0,.11)!important; box-shadow:0 18px 36px rgba(0,0,0,.08)!important; max-height:calc(100vh - 64px)!important; overflow-y:auto!important; z-index:200!important; } .nav-links.open{display:flex!important;} /* Top-level menu items */ .nav-links > li{ display:block!important; width:100%!important; border-top:1px solid rgba(51,102,0,.06)!important; } .nav-links > li:first-child{border-top:0!important;} .nav-links > li > a{ display:block!important; padding:14px 22px!important; font-size:13.5px!important; color:#3a4a32!important; text-transform:uppercase!important; letter-spacing:.08em!important; font-weight:600!important; } /* Dropdown chevron — rotates when parent has .open */ .nav-dropdown > a::after{ float:right!important; margin-top:8px!important; transition:transform .25s ease!important; } .nav-dropdown.open > a::after{ transform:rotate(225deg) translate(2px,-2px)!important; } /* Submenu: HIDDEN by default. Visible ONLY when parent has .open */ .nav-submenu{ display:none!important; position:static!important; background:#f8faf5!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:4px 0!important; min-width:0!important; width:100%!important; transform:none!important; opacity:1!important; visibility:visible!important; max-height:none!important; overflow:visible!important; list-style:none!important; } .nav-dropdown.open > .nav-submenu{display:block!important;} /* Submenu items */ .nav-submenu > li{ display:block!important; border:0!important; width:100%!important; } .nav-submenu > li > a{ display:block!important; padding:11px 40px!important; font-size:12.5px!important; color:#3a4a32!important; text-transform:none!important; letter-spacing:.02em!important; font-weight:500!important; } /* CTA buttons inside mobile menu */ .nav-cta-btn{ margin:10px 22px 0!important; text-align:center!important; display:block!important; } .nav-portal{ margin:10px 22px 0!important; text-align:center!important; display:flex!important; justify-content:center!important; gap:0!important; } /* Hide the decorative desktop icon on mobile — it renders as a glitchy line */ .nav-portal::before{ display:none!important; content:none!important; } } /* ════ TAP-TO-CALL — phones only ════ * Kept at 760px rather than following the hamburger up to 1100px: * a tel: link belongs on a phone, not on a small laptop. */ @media(max-width:760px){ .nav-call{ display:flex!important; align-items:center; justify-content:center; width:44px;height:44px; margin-left:auto; color:#336600; border:1.5px solid #336600; border-radius:50%; flex:0 0 auto; } .nav-toggle{margin-left:8px!important;} }