/* Shared responsive layout for SolarNodes */

.site-nav{
  position:sticky;
  top:0;
  z-index:100;
}

.chat-header{
  position:sticky;
  top:0;
  z-index:40;
  background:#212121;
}

.site-nav-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}
.site-nav-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid #e6e8ec;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  flex-shrink:0;
}
.site-nav-btn svg{
  width:20px;
  height:20px;
  stroke:#1f1f1f;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);}

.chat-menu-btn{display:none;}

@media (max-width:900px){
  .grid-3{grid-template-columns:1fr !important;}
}

.footer-logo-mobile{display:none;}

@media (max-width:768px){
  .footer-logo-desktop{display:none !important;}
  .footer-logo-mobile{display:flex !important;}
  .footer-logo-mobile span{font-size:17px !important;}
  .site-nav-inner{
    padding:12px 16px !important;
    flex-wrap:wrap;
    gap:12px;
  }
  .site-nav-btn{display:flex;margin-left:auto;}
  .site-nav-menu{
    display:none !important;
    width:100%;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    order:3;
    padding-top:4px;
  }
  .site-nav-toggle:checked ~ .site-nav-menu{display:flex !important;}
  .site-nav-toggle:checked + .site-nav-btn{background:#f1f3f6;}
  .site-nav-menu a{
    margin-left:0 !important;
    text-align:center;
    padding:12px 16px !important;
    font-size:15px !important;
  }
  .site-nav-cta{
    background:#1f1f1f !important;
    color:#fff !important;
  }

  .grid-2{grid-template-columns:1fr !important;}
  .grid-3{grid-template-columns:1fr !important;}

  .section-hero{padding:56px 20px 36px !important;}
  .section-hero-tight{padding:56px 20px 24px !important;}
  .section-block{padding-left:20px !important;padding-right:20px !important;}
  .section-block-lg{padding:48px 20px 0 !important;}
  .section-block-md{padding:64px 20px !important;}
  .section-block-bottom{padding:0 20px 72px !important;}

  .dark-panel{border-radius:24px !important;padding:32px 22px !important;}
  .dark-panel-grid{gap:24px !important;}

  .card{padding:24px 20px !important;}
  .card-icon{margin-bottom:24px !important;}

  .build-row{margin-bottom:32px !important;gap:24px !important;}

  .footer-bar{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .footer-bar .footer-copy{font-size:13px !important;line-height:1.5;}
  footer.reveal,footer{padding:28px 20px !important;}

  .hero-badge{
    font-size:13px !important;
    padding:8px 14px !important;
    line-height:1.45;
    max-width:100%;
  }
  .hero-actions{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .hero-actions a{
    justify-content:center !important;
    width:100%;
  }

  .cta-form{
    flex-direction:column !important;
    align-items:stretch !important;
    width:100%;
  }
  .cta-form input{min-width:0 !important;width:100%;}
  .cta-form button{width:100%;}

  .contact-form button{align-self:stretch !important;width:100%;}
  .api-key-form button{width:100%;}

  .code-block{
    font-size:12px !important;
    padding:14px 16px !important;
    border-radius:12px !important;
    -webkit-overflow-scrolling:touch;
  }

  .chat-layout{position:relative;}
  .chat-sidebar-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:0;
    height:0;
  }
  .chat-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
    flex-shrink:0;
    margin-right:auto;
    position:absolute;
    left:12px;
  }
  .chat-menu-btn svg{
    width:20px;
    height:20px;
    stroke:#ececec;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
  }
  .chat-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:100;
    width:min(280px,85vw) !important;
    min-width:0 !important;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:8px 0 32px rgba(0,0,0,.35);
  }
  .chat-sidebar-toggle:checked ~ .chat-sidebar{transform:translateX(0);}
  .chat-sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:99;
    background:rgba(0,0,0,.45);
  }
  .chat-sidebar-toggle:checked ~ .chat-sidebar-backdrop{display:block;}
  .chat-header{padding:0 48px !important;}
  .chat-messages{padding:16px 16px 32px !important;}
  .chat-input-wrap{padding:12px 16px 20px !important;}
  .chat-empty{padding:24px 20px !important;}
  .chat-empty h1{font-size:24px !important;}
}

@media (max-width:480px){
  .site-nav-logo span{font-size:17px !important;}
}