@import url('./footer-final.css');

/* Shared TeslaEdit header + language control. Loaded by home and info pages. */
:root{
  --tesla-blue:#3e6ae1;
  --tesla-blue-soft:rgba(62,106,225,.13);
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  height:78px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(8,11,15,.92);
  color:#fff;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header-inner{
  width:min(1210px,calc(100% - 44px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:0!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:19.5px;
  font-weight:820;
  line-height:1;
  letter-spacing:-.035em!important;
  white-space:nowrap;
}
.brand-mark{display:none!important}
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  min-width:0;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
.site-nav a{
  position:relative;
  color:#aeb3ba;
  text-decoration:none;
  transition:color .16s ease;
}
.site-nav a:hover,.site-nav .active{color:#fff}
.site-nav .active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-11px;
  height:2px;
  border-radius:99px;
  background:var(--tesla-blue);
  box-shadow:0 0 14px rgba(62,106,225,.24);
}
.nav-soon{
  display:inline-flex;
  align-items:center;
  color:#9299a1;
}
.nav-soon small{
  margin-left:5px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#aeb4bb;
  font-size:8px;
  font-weight:760;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.language-picker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.language-picker>span{font-size:13px;line-height:1}
.language-picker select{
  max-width:116px;
  border:0;
  background:transparent;
  outline:none;
  color:#fff;
  font-size:11.5px;
  font-weight:760;
  cursor:pointer;
}
.language-picker select option{color:#111;background:#fff}

@media (min-width:761px) and (max-width:1024px){
  .site-header{height:72px}
  .header-inner{width:min(100% - 40px,1210px)}
  .brand{font-size:18px}
  .header-actions{gap:16px}
  .site-nav{gap:16px;font-size:11.5px}
  .nav-soon small{margin-left:3px;padding:2px 5px;font-size:7.5px}
  .language-picker{min-height:36px;max-width:150px;padding:0 9px}
  .language-picker select{max-width:116px;font-size:10.5px}
}

@media (max-width:760px){
  .header-inner{width:calc(100% - 24px);gap:12px}
  .site-header{height:64px}
  .brand{font-size:17px}
  .header-actions{gap:10px}
  .site-nav{gap:14px;font-size:11px}
  .site-nav .active{display:none}
  .site-nav .active::after{display:none}
  .nav-soon{display:none}
  .language-picker{min-height:36px;max-width:145px;padding:0 8px}
  .language-picker>span{display:none}
  .language-picker select{min-width:0;max-width:112px;font-size:10.5px}
}

@media (max-width:430px){
  .header-inner{gap:9px}
  .brand{font-size:16.5px}
  .header-actions{gap:8px}
  .site-nav{gap:11px;font-size:10.5px}
  .language-picker{max-width:118px;padding-inline:7px}
  .language-picker select{max-width:90px;font-size:10px}
}