/* EcoCloud shared mega-menu header — dark-teal "control room" theme. Self-contained, scoped to
.opnav, hardcoded so it themes identically on every page. Pure CSS (hover + :focus-within), CSP-safe.
Link with: . */
.opnav-skip{position:absolute;left:-9999px;top:14px;z-index:1200;background:#E9553C;color:#04121C;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;text-decoration:none;}
.opnav-skip:focus{left:14px;outline:2px solid #fff;outline-offset:2px;}
.opnav .mi[aria-current="page"] .mi-t,.opnav .opnav-link[aria-current="page"]{color:#E9553C;}
.opnav .mi[aria-current="page"] .mi-ic{color:#E9553C;}
nav.opnav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;
padding:13px 40px;background:rgba(251,248,242,0.85);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
border-bottom:1px solid rgba(21,19,9,0.08);box-shadow:0 1px 0 rgba(21,19,9,0.04) inset;font-family:'Inter',system-ui,sans-serif;}
.opnav *{box-sizing:border-box;}
.opnav .opnav-logo{display:inline-flex;align-items:center;gap:13px;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:27px;letter-spacing:-0.015em;color:#151309;text-decoration:none;}
.opnav .opnav-logo .opnav-wm b{color:#E9553C;font-weight:600;}
.opnav .opm{width:58px;height:58px;flex:0 0 auto;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;will-change:transform;filter:drop-shadow(0 2px 8px rgba(233,85,60,.28));}
.opnav .opnav-logo:hover .opm{transform:scale(1.12) rotate(10deg);filter:drop-shadow(0 4px 14px rgba(233,85,60,.6));}
@media(max-width:980px){.opnav .opm{width:46px;height:46px;}}
.opnav .opnav-links{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0;}
.opnav .nav-item{position:static;display:inline-flex;align-items:center;}
.opnav .nav-trigger,.opnav .opnav-link{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#443F33;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 0;text-decoration:none;transition:color .2s;}
.opnav .nav-trigger::after{content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .25s;opacity:.55;}
.opnav .nav-item:hover .nav-trigger,.opnav .nav-item:focus-within .nav-trigger,.opnav .opnav-link:hover{color:#E9553C;}
.opnav .nav-item:hover .nav-trigger::after,.opnav .nav-item:focus-within .nav-trigger::after{transform:rotate(-135deg) translateY(2px);}
.opnav .mega{position:absolute;top:100%;left:0;right:0;background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F2 100%);border-top:1px solid rgba(233,85,60,0.22);border-bottom:1px solid rgba(21,19,9,0.07);box-shadow:0 32px 74px -30px rgba(21,19,9,0.26),0 1px 0 rgba(233,85,60,0.10) inset;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;max-height:calc(100vh - 58px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(233,85,60,0.32) transparent;}
.opnav .mega::-webkit-scrollbar{width:9px;}
.opnav .mega::-webkit-scrollbar-thumb{background:rgba(233,85,60,0.30);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
.opnav .mega::-webkit-scrollbar-thumb:hover{background:rgba(233,85,60,0.48);background-clip:padding-box;}
.opnav .mega::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:radial-gradient(60% 100% at 50% 0%,rgba(233,85,60,0.07),transparent 70%);pointer-events:none;}
.opnav .mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px;}
.opnav .nav-item:hover .mega,.opnav .nav-item:focus-within .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.opnav .mega-inner{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:30px 56px 34px;display:grid;gap:2px 26px;align-items:start;}
.opnav .mega-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.opnav .mega-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.opnav .mega-feat{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid rgba(21,19,9,0.08);}
.opnav .mega-feat a{font-family:'Fraunces','Inter',serif;font-size:17px;font-weight:500;color:#151309;text-decoration:none;}
.opnav .mega-feat a:hover{color:#E9553C;}
.opnav .mega-feat span{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8C8676;}
.opnav .mega-col-h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#E9553C;margin-bottom:4px;padding-bottom:12px;border-bottom:1px solid rgba(21,19,9,0.08);}
/* legacy single-line links (kept for any non-rebuilt nav) */
.opnav .mega-col a:not(.mi){display:block;font-family:'Inter',system-ui,sans-serif;font-size:13.5px;color:#8C8676;text-decoration:none;padding:6.5px 0;line-height:1.25;transition:color .15s,transform .15s;}
.opnav .mega-col a:not(.mi):hover{color:#151309;transform:translateX(4px);}
/* Cloudflare-style rich item: boxed icon + bold title + muted descriptor */
.opnav .mega-col a.mi{display:flex;align-items:flex-start;gap:11px;padding:8px 9px;margin:1px 0;border-radius:10px;text-decoration:none;transition:background .14s;}
.opnav .mega-col a.mi:hover{background:rgba(233,85,60,0.07);}
.opnav .mi-ic{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(21,19,9,0.10);border-radius:8px;background:rgba(233,85,60,0.06);color:#E9553C;transition:border-color .14s,background .14s,box-shadow .14s;}
.opnav .mega-col a.mi:hover .mi-ic{border-color:rgba(233,85,60,0.45);background:rgba(233,85,60,0.15);box-shadow:0 4px 14px -4px rgba(233,85,60,0.6);}
.opnav .mi-ic svg{width:15px;height:15px;}
.opnav .mi-tx{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:1px;}
.opnav .mi-t{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;color:#151309;line-height:1.25;letter-spacing:-0.005em;}
.opnav .mi-d{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:400;color:#828B99;line-height:1.3;}
.opnav .mega-col a.mi:hover .mi-t{color:#E9553C;}
.opnav .opnav-cta{padding:9px 20px;font-size:13px;font-weight:600;color:#fff;background:#E9553C;border:none;border-radius:9px;cursor:pointer;text-decoration:none;font-family:'Inter',system-ui,sans-serif;white-space:nowrap;transition:filter .2s,box-shadow .2s;box-shadow:0 0 0 1px rgba(233,85,60,0.4),0 10px 26px -10px rgba(233,85,60,0.55);}
.opnav .opnav-cta:hover{filter:brightness(1.1);box-shadow:0 0 0 1px rgba(233,85,60,0.6),0 12px 30px -8px rgba(233,85,60,0.7);}
@media(max-width:1120px){.opnav .mega-inner{padding:30px 28px 34px;gap:4px 26px;}}
/* ── mobile hamburger menu ── */
.opnav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;padding:0 9px;background:none;border:1px solid rgba(21,19,9,0.12);border-radius:10px;cursor:pointer;flex:0 0 auto;}
.opnav-burger span{display:block;height:2px;width:100%;background:#443F33;border-radius:2px;transition:transform .22s ease,opacity .2s ease;}
.opnav.nav-open .opnav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.opnav.nav-open .opnav-burger span:nth-child(2){opacity:0;}
.opnav.nav-open .opnav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:980px){
nav.opnav{padding:12px 20px;}
/* backdrop-filter on the nav makes it the CONTAINING BLOCK for the fixed menu panel, collapsing
the panel to the nav's 58px box — neutralize while open (the panel is opaque anyway) */
nav.opnav.nav-open{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;filter:none !important;transform:none !important;background:#F5F1E9;}
.opnav-burger{display:flex;}
.opnav .opnav-cta{margin-left:auto;padding:9px 14px;font-size:12px;}
.opnav-burger{margin-left:12px;}
.opnav .opnav-links{display:none;}
.opnav.nav-open .opnav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;top:58px;bottom:0;background:#F5F1E9;border-top:1px solid rgba(21,19,9,0.09);padding:8px 22px 44px;overflow-y:auto;z-index:1000;}
.opnav.nav-open .nav-item{display:block;width:100%;border-bottom:1px solid rgba(21,19,9,0.07);}
.opnav.nav-open .opnav-link{display:block;padding:16px 2px;border-bottom:1px solid rgba(21,19,9,0.07);}
.opnav.nav-open .nav-trigger{width:100%;justify-content:space-between;padding:16px 2px;font-size:14px;}
.opnav.nav-open .nav-trigger::after{margin-left:auto;}
.opnav.nav-open .nav-item.open .nav-trigger::after{transform:rotate(-135deg) translateY(2px);}
.opnav.nav-open .nav-item .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;background:none;border:none;box-shadow:none;max-height:0;overflow:hidden;transition:max-height .28s ease;}
.opnav.nav-open .nav-item.open .mega{max-height:2600px;}
.opnav.nav-open .nav-item .mega::after,.opnav.nav-open .nav-item .mega::before{display:none;}
.opnav.nav-open .mega-inner{display:block;max-width:none;margin:0;padding:0 0 14px 6px;}
.opnav.nav-open .mega-col{margin-bottom:10px;}
.opnav.nav-open .mega-feat{display:block;padding:0 0 10px 6px;}
}
/* ── Accessibility (site-wide, loaded on every page via mega-nav.css) ── */
/* Visible keyboard-focus ring on all interactive elements — :focus-visible so MOUSE focus is
unaffected. Pages with a bespoke focus style (.lw, mega-nav) keep it (higher specificity wins). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [contenteditable]:focus-visible {
outline: 2px solid #E9553C !important;
outline-offset: 2px !important;
border-radius: 3px;
}