/* Levai Energy Systems — shared components
   Header/nav, mobile nav panel, footer, CTA, section container.
   Class names match the existing markup on all 16 pages — no HTML
   restructuring required, this file supersedes the equivalent inline
   rules that used to live in each page's <style> block. */

/* ---------- nav (chrome — permanently dark, independent of light/dark
   content theme, with a solid+blur fix for the transparent-header bug) ---------- */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,15,20,0.96);
  border-bottom:1px solid var(--graphite-line);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)){
  nav{ background:var(--graphite-950); }
}
@media (prefers-reduced-transparency: reduce){
  nav{ background:var(--graphite-950); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; transition:height 200ms var(--ease-out); }
nav.scrolled{ background:rgba(11,15,20,0.99); }
nav.scrolled .wrap{ height:64px; }
nav.scrolled .logo-mark{ height:38px; }

.logo-home-link{ display:flex; align-items:center; line-height:0; }
.logo-mark{ height:48px; width:auto; display:block; transition:height 200ms var(--ease-out); }
.logo-dark-mode{ display:block; }
.logo-light-mode{ display:none; }
@media (max-width:600px){
  nav .wrap{ height:64px; }
  .logo-mark{ height:38px; }
  nav.scrolled .wrap{ height:56px; }
  nav.scrolled .logo-mark{ height:32px; }
}

.navlinks{
  display:flex; gap:32px; font-size:13.5px;
  font-family:var(--body);
  color:var(--graphite-ink-dim);
}
.navlinks a{ position:relative; padding-bottom:2px; }
.navlinks a:hover{ color:var(--graphite-ink); }
.navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--graphite-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 180ms var(--ease-out);
}
.navlinks a:hover::after{ transform:scaleX(1); }
@media (max-width:800px){ .navlinks{ display:none; } }

.nav-actions{ display:flex; align-items:center; gap:14px; }

.nav-cta{
  font-family:var(--body);
  font-size:13px; font-weight:600; color:var(--on-blue-solid);
  background:var(--blue-solid);
  padding:9px 18px; border-radius:var(--radius-sm);
  transition:transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.nav-cta:hover{ filter:brightness(1.08); }
.nav-cta:active{ transform:scale(0.97); }

.nav-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm); color:var(--graphite-ink-dim);
  background:transparent; border:none; cursor:pointer; padding:0;
  transition:color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.nav-icon-btn:hover{ color:var(--graphite-ink); background:rgba(255,255,255,0.06); }
.nav-menu-btn{ display:none; }

/* ---------- mobile nav panel — same opaque + blur chrome as the bar
   above it, so nothing bleeds through when open; animated via max-height
   rather than a display:none/flex jump-cut ---------- */
@media (max-width:800px){
  .nav-menu-btn{ display:flex; }
  .navlinks{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--graphite-950);
    border-bottom:1px solid var(--graphite-line);
    padding:0 28px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height 220ms var(--ease-out), opacity 200ms var(--ease-out), padding 220ms var(--ease-out);
  }
  @media (prefers-reduced-transparency: reduce){
    .navlinks{ background:var(--graphite-950); backdrop-filter:none; -webkit-backdrop-filter:none; }
  }
  .navlinks.open{ max-height:420px; opacity:1; padding:8px 28px 16px; }
  .navlinks a{ padding:10px 0; border-top:1px solid var(--graphite-line); }
  .navlinks a:first-child{ border-top:none; }
}

/* ---------- footer (chrome — permanently dark, same as nav) ---------- */
footer{
  background:var(--graphite-950);
  color:var(--graphite-ink-dim);
  border-top:1px solid var(--graphite-line);
  padding:56px 0 32px;
}
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer .tag{ font-size:13px; color:var(--graphite-ink-dim); }
footer .fine{ font-family:var(--mono); font-size:11px; color:var(--graphite-ink-dim); opacity:0.85; }

.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
  gap:28px; padding-bottom:36px; border-bottom:1px solid var(--graphite-line); margin-bottom:32px;
}
.footer-brand .footer-logo{ height:28px; margin-bottom:14px; }
.footer-brand p{ font-size:13px; color:var(--graphite-ink-dim); max-width:320px; line-height:1.55; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.social-icon{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--graphite-line-strong); color:var(--graphite-ink-dim);
  transition:color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.social-icon:hover{ color:#5B8FEF; border-color:#5B8FEF; }
.social-icon svg{ width:16px; height:16px; fill:currentColor; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
@media (max-width:700px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
.footer-col h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--graphite-ink-dim); margin-bottom:14px;
}
.footer-col a{ display:block; font-size:13.5px; color:var(--graphite-ink); margin-bottom:10px; transition:color 160ms var(--ease-out); }
.footer-col a:hover{ color:#5B8FEF; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- prototype badge (kept, recolored to the signal accent) ---------- */
.proto-badge{
  position:fixed; top:14px; right:14px; z-index:50;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--on-accent); background:var(--blue-solid);
  padding:5px 10px; border-radius:var(--radius-sm); opacity:0.94;
}