/** * DNSai Navigation & Flyout Menu Fixes * Include this AFTER the main stylesheet on all pages * Last updated:2026-04-19 *//* ======================================================================== MENU ICON - ALWAYS ON TOP,PROPERLY CENTERED ======================================================================== */.menu-icon{z-index:1500 !important;cursor:pointer !important;font-size:28px;padding:10px 12px;margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;align-self:center;min-width:44px;min-height:44px;box-sizing:border-box;line-height:1;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}.flyout-menu.open ~ .nav-menu .menu-icon,.menu-icon{z-index:1500 !important;pointer-events:auto !important;}/* ======================================================================== FLYOUT MENU - IMPROVED SCROLLING & SIZING ======================================================================== */.flyout-menu{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}/* ======================================================================== NAV-SEARCH - Centered using flexbox ======================================================================== */.nav-search{flex:1;display:flex;justify-content:flex-start;align-items:center;margin-left:20px;}.nav-search form{display:flex;align-items:center;gap:8px;}.nav-search-input{padding:8px 14px;font-size:14px;border-radius:6px;}.nav-submit-button{padding:8px 16px;font-size:14px;border-radius:6px;white-space:nowrap;}/* ======================================================================== TABLET BREAKPOINT - 1024px ======================================================================== */@media (max-width:1024px){.nav-search form{gap:6px;}.nav-search-input{width:150px;padding:8px 12px;font-size:14px;}.nav-submit-button{padding:8px 14px;font-size:13px;}}/* ======================================================================== MOBILE BREAKPOINT - 768px ======================================================================== */@media (max-width:768px){/* Reduce nav padding to bring icon closer to edge */ .nav-menu{padding-right:8px !important;}.nav-links{display:none !important;}.nav-search{display:none !important;}.menu-icon{position:static !important;font-size:26px !important;padding:12px 16px !important;margin-left:auto !important;margin-right:0 !important;}.flyout-menu{width:75vw !important;max-width:320px !important;min-width:280px !important;}}/* ======================================================================== SMALL MOBILE - 480px ======================================================================== */@media (max-width:480px){.nav-menu{padding-right:4px !important;}.menu-icon{font-size:24px !important;padding:12px 14px !important;}.flyout-menu{width:80vw !important;max-width:85% !important;min-width:260px !important;}}/* ======================================================================== EXTRA SMALL - 360px ======================================================================== */@media (max-width:360px){.nav-menu{padding-right:2px !important;padding-left:12px !important;}.menu-icon{font-size:22px !important;padding:12px !important;}}/* ======================================================================== EXTRA SMALL - 320px ======================================================================== */@media (max-width:320px){.nav-menu{padding-right:0 !important;padding-left:10px !important;}.menu-icon{font-size:20px !important;padding:10px !important;}.flyout-menu{width:90vw !important;min-width:240px !important;}}/* ======================================================================== Z-INDEX HIERARCHY (consistent layering) ======================================================================== */.flyout-backdrop{z-index:1100 !important;}.flyout-menu{z-index:1200 !important;}.nav-menu{z-index:1300 !important;}.menu-icon{z-index:1500 !important;}body.flyout-open .menu-icon,.flyout-menu.open + .nav-menu .menu-icon{z-index:1500 !important;pointer-events:auto !important;}/* ======================================================================== FLYOUT HOME LINK - Prominent link at top of menu ======================================================================== */.flyout-home-link{display:block;color:#ffffff !important;padding:14px 16px;font-size:16px;font-weight:600;text-decoration:none;border-radius:10px;margin-bottom:8px;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);cursor:pointer;line-height:1.3;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:16px;}.flyout-home-link::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:#26c4ff;transform:scaleY(0);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);border-radius:0 2px 2px 0;}.flyout-home-link:hover::before{transform:scaleY(1);}.flyout-home-link:hover{background:rgba(38,196,255,0.12);color:#26c4ff !important;transform:translateX(4px);}body.light-mode .flyout-home-link{color:#1a1a1a !important;border-bottom:1px solid rgba(0,0,0,0.1);}body.light-mode .flyout-home-link::before{background:#0054ff;}body.light-mode .flyout-home-link:hover{background:rgba(0,84,255,0.08) !important;color:#0054ff !important;}/* ======================================================================== FLYOUT MENU SPACING - Compact layout with proper header room ======================================================================== *//* Reduce vertical spacing on all flyout menu links */.flyout-menu a{padding:10px 16px !important;}/* Reduce drawer toggle padding */.flyout-drawer-toggle{padding:10px 16px !important;min-height:38px !important;}/* Reduce drawer margin */.flyout-drawer{margin-top:2px !important;}/* Reduce drawer content link padding */.flyout-drawer-content a{padding:9px 16px 9px 20px !important;min-height:36px !important;}/* Reduce open drawer content padding */.flyout-drawer.open .flyout-drawer-content{padding-top:2px !important;padding-bottom:4px !important;}/* Compact home link */.flyout-home-link{padding:10px 16px !important;padding-bottom:12px !important;margin-bottom:4px !important;}/* Compact close button */.flyout-menu .flyout-close{padding-top:12px !important;margin-top:8px !important;}/* ======================================================================== FLYOUT MOBILE PADDING - Prevent nav bar overlap ======================================================================== */@media (max-width:768px){.flyout-menu{padding-top:95px !important;}}@media (max-width:480px){.flyout-menu{padding-top:90px !important;}}