/* Alo Solar Energy — header stability fix 2026-09-26 */
@media (min-width: 1451px){
  body[data-layout="home"] header .container.nav{
    width:calc(100% - 48px)!important;
    max-width:1580px!important;
    height:84px!important;
    margin-inline:auto!important;
    display:grid!important;
    grid-template-columns:max-content minmax(0,1fr) max-content!important;
    align-items:center!important;
    column-gap:22px!important;
  }
  body[data-layout="home"] header .brand{
    min-width:0!important;
    gap:10px!important;
    flex:none!important;
  }
  body[data-layout="home"] header .brand img{
    width:54px!important;
    height:54px!important;
    flex:0 0 54px!important;
  }
  body[data-layout="home"] header .brand span{
    font-size:17px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  body[data-layout="home"] header #mainNav{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(7px,.7vw,12px)!important;
    flex-wrap:nowrap!important;
  }
  body[data-layout="home"] header #mainNav a{
    min-width:0!important;
    padding:8px 3px!important;
    gap:5px!important;
    font-size:clamp(11px,.78vw,13px)!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  body[data-layout="home"] header #mainNav a .nav-icon{
    width:16px!important;
    height:16px!important;
    flex:0 0 16px!important;
  }
  body[data-layout="home"] header #mainNav .cta{
    padding:10px 14px!important;
  }
  body[data-layout="home"] header .lang-switcher{
    margin:0!important;
    padding:4px!important;
    gap:2px!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }
  body[data-layout="home"] header .lang-btn{
    min-width:34px!important;
    min-height:34px!important;
    padding:6px!important;
    gap:0!important;
    justify-content:center!important;
  }
  body[data-layout="home"] header .lang-btn > span:not(.lang-flag){display:none!important}
  body[data-layout="home"] header .lang-btn.active{
    padding-inline:9px!important;
    gap:6px!important;
  }
  body[data-layout="home"] header .lang-btn.active > span:not(.lang-flag){display:inline!important}
  body[data-layout="home"] header .lang-flag{width:23px!important;height:15px!important}
  body[data-layout="home"] header .menu-toggle{display:none!important}
}

/* Before the desktop row becomes crowded, switch cleanly to the existing menu. */
@media (min-width:851px) and (max-width:1450px){
  body[data-layout="home"] header .container.nav{
    width:min(100% - 36px,1220px)!important;
    height:78px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }
  body[data-layout="home"] header .brand{margin-inline-end:auto!important}
  body[data-layout="home"] header #mainNav{
    display:none!important;
    position:fixed!important;
    top:78px!important;
    inset-inline:18px!important;
    width:auto!important;
    max-height:calc(100dvh - 96px)!important;
    overflow:auto!important;
    padding:14px!important;
    border:1px solid rgba(231,198,90,.22)!important;
    border-radius:0 0 18px 18px!important;
    background:rgba(5,18,12,.98)!important;
    box-shadow:0 24px 50px rgba(0,0,0,.35)!important;
    backdrop-filter:blur(18px)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
  }
  body[data-layout="home"] header #mainNav.open{display:flex!important}
  body[data-layout="home"] header #mainNav a{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
    justify-content:flex-start!important;
    font-size:14px!important;
  }
  body[data-layout="home"] header #mainNav .cta{justify-content:center!important;margin-top:5px!important}
  body[data-layout="home"] header .menu-toggle{display:flex!important;order:3!important;flex:0 0 44px!important}
  body[data-layout="home"] header .lang-switcher{order:2!important;margin:0!important}
}