/* /assets/css/home-bridge.css
   Header + Language Switcher + Footer extracted from main.css,
   scoped to avoid touching your matrix rain and page layout.

   Sources:
   - Integrated header/nav/lang/footer styles adapted from main.css.  (see repo)
   - Preserves existing VPN badge + shell from previous home-bridge.css.

   Notes:
   • Header is sticky with glass effect; z-index kept BELOW the VPN badge.
   • Right-side safe area ensures no visual overlap with the VPN badge.
   • No global element resets; everything is class/ID-scoped.
*/

/* =========================================================
   VPN Badge (kept as-is so it stays above the header)
   ========================================================= */
.vpn-badge{
  position:fixed;
  right:14px;
  top:14px;
  z-index:40; /* stays above header/footer */
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:12px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,18,.55);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  backdrop-filter:blur(8px) saturate(1.05);
  color:#ECF3FF;
  font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
  letter-spacing:.2px;
  cursor:default;
}
.vpn-badge .dot{
  width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 12px rgba(0,255,90,.45);
  background:linear-gradient(135deg,#23ff75,#00e0ff)
}
.vpn-badge.is-vpn .dot{
  background:linear-gradient(135deg,#ff3b3b,#ff9f43);
  box-shadow:0 0 12px rgba(255,60,60,.55)
}
.vpn-badge .label{opacity:.92}

/* Optional shells if main.js mounts by ID (kept from prior file) */
#site-header,#header{position:relative;z-index:30}
#site-footer,#footer{position:relative;z-index:20}

/* =========================================================
   Header (scoped) — copied/adapted from main.css
   ========================================================= */

/* Local theme vars for header/footer only (no :root pollution) */
header.site-header,
#site-header,
.site-footer,
#site-footer {
  --fg: #e8f0e8;
  --muted: #a7b3a7;
  --brand: #00f700;
  --link: #6dfc6d;
  --card: #131417;

  /* NEW: dynamic right-side safe area to avoid VPN badge overlap */
  --vpn-safe-base: clamp(140px, 23vw, 440px); /* tune if your badge is wider/narrower */
  --vpn-safe: calc(var(--vpn-safe-base) + env(safe-area-inset-right));
}

/* NEW: tighten safe area as the viewport shrinks */
@media (max-width:1200px){
  header.site-header, #site-header{ --vpn-safe-base: clamp(120px, 24vw, 380px); }
}
@media (max-width:960px){
  header.site-header, #site-header{ --vpn-safe-base: clamp(100px, 26vw, 320px); }
}
@media (max-width:720px){
  header.site-header, #site-header{ --vpn-safe-base: clamp(88px, 28vw, 280px); }
}
@media (max-width:520px){
  header.site-header, #site-header{ --vpn-safe-base: clamp(80px, 32vw, 240px); }
}

/* Glass header container */
header.site-header,
#site-header{
  position: sticky;
  top: 0;
  z-index: 30; /* lower than .vpn-badge (z:40) to avoid overlap */
  background: linear-gradient(180deg, rgba(6,8,10,.78), rgba(6,8,10,.62));
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid #17191f;
  box-shadow: 0 2px 20px -14px rgba(0,0,0,.6), 0 0 60px -30px rgba(0,247,0,.15);
  transition: transform .24s ease, background .2s ease;
}

/* Optional state hooks if main.js toggles them */
.is-stuck header.site-header,
.is-stuck #site-header{
  background: linear-gradient(180deg, rgba(6,8,10,.88), rgba(6,8,10,.75));
  backdrop-filter: saturate(130%) blur(10px);
}
.header-hidden header.site-header,
.header-hidden #site-header{ transform: translateY(-100%); }

/* Inner layout: brand | nav | lang rail  */
header .header-inner,
#site-header .header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 56px;
  padding-inline: 16px;

  /* UPDATED: reserve safe area so the VPN badge never covers the right rail */
  padding-right: calc(var(--vpn-safe) + 12px);
}

/* Slightly smaller safe area on narrow screens (kept) */
@media (max-width: 900px){
  header .header-inner,
  #site-header .header-inner{
    /* retained but now computed off --vpn-safe */
    padding-right: calc(var(--vpn-safe) + 8px);
  }
}

/* UPDATED: full reflow below 1080px to avoid collisions */
@media (max-width: 1080px){
  header .header-inner,
  #site-header .header-inner{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand nav"
      "lang  lang";
    row-gap: 6px;
  }
  header .brand,      #site-header .brand{      grid-area: brand; }
  header .site-nav,   #site-header .site-nav{   grid-area: nav; }
  header .lang-rail,  #site-header .lang-rail{  grid-area: lang; }
}

@media (max-width: 720px){
  header .header-inner,
  #site-header .header-inner{
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 8px;
    /* keep space for the badge even on mobile */
    padding-right: calc(var(--vpn-safe) + 6px);

    /* NEW: stack rows – brand → nav → language rail */
    grid-template-areas:
      "brand"
      "nav"
      "lang";
  }
}

/* Brand */
header .brand,
#site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: .2px;
}
header .brand-logo,
#site-header .brand-logo{
  position: relative;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.24);
  box-shadow:
    inset 0 0 0 1px rgba(0,247,0,.32),
    0 6px 18px -10px rgba(0,247,0,.35);
}
header .brand-logo img,
#site-header .brand-logo img{
  width: 100%; height: 100%;
  display: block;
  border-radius: 6px;
}
header .brand-logo-lottie,
#site-header .brand-logo-lottie{
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .18s ease; mix-blend-mode: screen;
}
header .brand:hover .brand-logo-lottie,
header .brand:focus .brand-logo-lottie,
#site-header .brand:hover .brand-logo-lottie,
#site-header .brand:focus .brand-logo-lottie{ opacity: .95; }
header .brand-logo::after,
#site-header .brand-logo::after{
  content:""; position:absolute; inset:-9px; border-radius:12px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,247,0,.18), rgba(0,0,0,0) 65%);
  opacity:.35; transition: opacity .2s ease, transform .2s ease;
}
header .brand:hover .brand-logo::after,
header .brand:focus .brand-logo::after,
#site-header .brand:hover .brand-logo::after,
#site-header .brand:focus .brand-logo::after{ opacity:.6; transform: scale(1.02); }
@media (prefers-reduced-motion: no-preference){
  header .brand-logo::after,
  #site-header .brand-logo::after{
    animation: hbBrandPulse 3.8s ease-in-out infinite;
  }
}
@keyframes hbBrandPulse{
  0%,100%{ opacity:.25; transform: scale(0.98); }
  50%{    opacity:.6;  transform: scale(1.03); }
}
header .brand-name,
#site-header .brand-name{ font-weight:700; }
header .brand-tag,
#site-header .brand-tag{
  display:none; color: var(--muted); font-size:12px;
  padding-left:10px; margin-left:8px; border-left:1px solid #2a2b31;
}
@media (min-width:1080px){
  header .brand-tag, #site-header .brand-tag{ display:inline-flex; }
}

/* Primary nav */
header .site-nav,
#site-header .site-nav{ position: relative; justify-self: center; }
header .site-nav .nav-list,
#site-header .site-nav .nav-list,
header .lang-switch,
#site-header .lang-switch{
  display:flex; gap:14px; align-items:center; margin:0; padding:0;
}
header .site-nav .nav-list li,
#site-header .site-nav .nav-list li,
header .lang-switch li,
#site-header .lang-switch li{ list-style:none; }
header .site-nav a,
#site-header .site-nav a{
  color: var(--fg); opacity: .9; text-decoration:none;

  /* NEW: gentle font sizing to fit more labels on mid screens */
  font-size: clamp(13px, 1.1vw, 16px);
}
header .site-nav a:hover,
header .site-nav a:focus,
#site-header .site-nav a:hover,
#site-header .site-nav a:focus{ text-decoration: underline; text-underline-offset:4px; }
header .site-nav a[aria-current="page"],
#site-header .site-nav a[aria-current="page"]{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* NEW: let the nav wrap, and then scroll horizontally on very small widths */
@media (max-width: 980px){
  header .site-nav .nav-list,
  #site-header .site-nav .nav-list{
    flex-wrap: wrap; gap: 10px; justify-content: flex-start;
  }
}
@media (max-width: 620px){
  header .site-nav .nav-list,
  #site-header .site-nav .nav-list{
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 18px;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  header .site-nav .nav-list li,
  #site-header .site-nav .nav-list li{ flex: 0 0 auto; }
}

/* Sliding underline indicator (if main.js positions it) */
header .nav-indicator,
#site-header .nav-indicator{
  position:absolute; bottom:-2px; height:2px; border-radius:2px;
  background: var(--brand);
  box-shadow: 0 0 12px rgba(0,247,0,.35);
  transition: transform .25s ease, width .25s ease, opacity .25s ease;
  opacity:.8; pointer-events:none;
}

/* Contact CTA look */
header .nav-cta a,
#site-header .nav-cta a{
  padding:7px 12px;
  border:1px solid #2a2b31; border-radius:8px;
  color: var(--fg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
header .nav-cta a:hover,
header .nav-cta a:focus,
#site-header .nav-cta a:hover,
#site-header .nav-cta a:focus{
  background: var(--brand); color:#041104; transform: translateY(-1px);
  box-shadow: 0 0 24px -8px rgba(0,247,0,.55); text-decoration:none;
}
header .nav-cta a[aria-current="page"],
#site-header .nav-cta a[aria-current="page"]{
  background: var(--brand); color:#041104; border-color: var(--brand);
}

/* ==========================
   Language Switcher (rail)
   ========================== */
header .lang-rail,
#site-header .lang-rail{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px; position:relative;
}
header .lang-rail .lang-switch,
#site-header .lang-rail .lang-switch{
  display:flex; gap:10px; align-items:center;
  margin:0; padding:0; list-style:none;
  overflow:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
header .lang-rail .lang-switch::-webkit-scrollbar,
#site-header .lang-rail .lang-switch::-webkit-scrollbar{ display:none; }
header .lang-nav,
#site-header .lang-nav{
  display:inline-grid; place-items:center;
  width:28px; height:28px;
  border:1px solid #2a2b31; border-radius:8px;
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  font-size:16px; line-height:1;
  cursor:pointer; user-select:none;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
header .lang-nav:hover, header .lang-nav:focus,
#site-header .lang-nav:hover, #site-header .lang-nav:focus{
  transform: translateY(-1px); color: var(--fg);
}
header .lang-nav[hidden], #site-header .lang-nav[hidden]{ display:none !important; }
header .lang-rail:not(.is-overflowing) .lang-nav,
#site-header .lang-rail:not(.is-overflowing) .lang-nav{ display:none !important; }
header .lang-rail .lang-switch a,
#site-header .lang-rail .lang-switch a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border:1px solid #2a2b31; border-radius:8px;
  text-decoration:none;
  color: var(--muted);
  background:
    linear-gradient(rgba(20,22,26,.92), rgba(20,22,26,.92)) padding-box,
    linear-gradient(135deg, rgba(0,247,0,0.24), rgba(0,247,0,0.06)) border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset, 0 6px 18px -12px rgba(0,0,0,.6);
  scroll-snap-align:center;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
header .lang-rail .lang-switch a:hover,
header .lang-rail .lang-switch a:focus,
#site-header .lang-rail .lang-switch a:hover,
#site-header .lang-rail .lang-switch a:focus{
  color: var(--fg); transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset, 0 10px 26px -12px rgba(0,0,0,.7);
}
header .lang-rail .lang-switch a[aria-current="true"],
#site-header .lang-rail .lang-switch a[aria-current="true"]{
  border-color: var(--brand); color: var(--brand);
  text-shadow: 0 0 8px rgba(0,247,0,.45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 1px rgba(0,247,0,.35),
    0 0 24px -10px rgba(0,247,0,.45);
}
/* Edge fades hinting horizontal scroll */
header .lang-rail::before,
header .lang-rail::after,
#site-header .lang-rail::before,
#site-header .lang-rail::after{
  content:""; position:absolute; top:0; bottom:0; width:32px; pointer-events:none; z-index:0;
  background: linear-gradient(to right, rgba(11,12,16,1), rgba(11,12,16,0));
}
header .lang-rail::before, #site-header .lang-rail::before{ left:0; }
header .lang-rail::after,  #site-header .lang-rail::after{ right:0; transform: scaleX(-1); }
header .lang-rail .lang-nav,
#site-header .lang-rail .lang-nav{ z-index:2; }

/* Small-screen tweaks for the switcher (kept) */
@media (max-width: 720px){
  header .lang-rail, #site-header .lang-rail{ gap:6px; }
  header .lang-rail .lang-switch a,
  #site-header .lang-rail .lang-switch a{ padding:5px 8px; font-size:12px; }
}

/* High-contrast refinements */
@media (prefers-contrast: more){
  header.site-header, #site-header{ border-bottom-color:#2b2e36; }
  header .lang-rail .lang-switch a,
  #site-header .lang-rail .lang-switch a{ border-color:#3a3e46; }
  header .nav-indicator, #site-header .nav-indicator{ opacity:1; }
}

/* =========================================================
   Footer (scoped)
   ========================================================= */
footer.site-footer,
#site-footer{
  border-top: 1px solid #1f2024;
  margin-top: 48px;
  color: var(--muted);
  background: rgba(6,8,10,.4);
  backdrop-filter: saturate(120%) blur(6px);
}
footer .footer-inner,
#site-footer .footer-inner{
  padding-block: 24px;
  padding-inline: 16px;
  display: grid;
  gap: 8px;
}
footer .footer-inner a,
#site-footer .footer-inner a{
  color: var(--link);
  text-decoration: none;
}
footer .footer-inner a:hover,
footer .footer-inner a:focus,
#site-footer .footer-inner a:hover,
#site-footer .footer-inner a:focus{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Utilities used by header/footer (scoped to avoid globals)
   ========================================================= */
header .container,
#site-header .container,
footer .container,
#site-footer .container{
  width:100%;
  max-width:1160px;        /* from main.css */
  margin-inline:auto;
  padding-inline:16px;
}

/* Optional helper for monospace chips if main.js injects it */
header .mono,
#site-header .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* END home-bridge.css */
/* =========================================================
   ADDITIONS — footer VPN + larger footer logo (non-destructive)
   ========================================================= */

/* If an old overlay badge is still injected at <body> level, hide it */
body > .vpn-badge{ display: none !important; }

/* Show and style the VPN badge when it’s inside the footer */
#site-footer .vpn-badge,
footer.site-footer .vpn-badge{
  display: inline-flex !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  z-index: auto !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(10,14,18,.60), rgba(10,14,18,.42));
  color: #ECF3FF;
  font: 700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  white-space: nowrap;
  justify-self: end;          /* aligns to the right in grid layouts */
  margin-left: 16px;          /* breathing room next to footer brand */
}
#site-footer .vpn-badge .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#23ff75,#00e0ff);
  box-shadow: 0 0 12px rgba(0,255,90,.45);
}
#site-footer .vpn-badge.is-vpn .dot{
  background: linear-gradient(135deg,#ff3b3b,#ff9f43);
  box-shadow: 0 0 12px rgba(255,60,60,.55);
}

/* Ensure the footer grid has a right rail for the VPN chip */
#site-footer .footer-inner{ grid-template-columns: 1fr auto; align-items: center; }
/* On small screens stack and center both brand and VPN chip */
@media (max-width:700px){
  #site-footer .footer-inner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  #site-footer .vpn-badge{ margin-left: 0; }
}

/* Bigger & clearer footer brand logo (header logo remains unchanged) */
#site-footer .brand{ display:inline-flex; align-items:center; gap:12px; color:var(--fg); text-decoration:none; font-weight:700; }
#site-footer .brand-logo{
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(0,247,0,.28), 0 10px 28px -16px rgba(0,247,0,.35);
}
#site-footer .brand-logo img{
  width: 100%; height: 100%; display: block; border-radius: 8px;
  image-rendering: -webkit-optimize-contrast; /* crisper on WebKit */
  filter: drop-shadow(0 0 8px rgba(0,247,0,.35)); /* subtle glow */
}
@media (min-width:960px){
  #site-footer .brand-logo{ width: 56px; height: 56px; }
}
/* === Footer VPN + bigger footer logo (append to end of home-bridge.css) === */

/* Hide any stray, body-level instance */
body > .vpn-badge { display: none !important; }

/* Show + style when badge is inside the footer */
#site-footer .vpn-badge {
  display: inline-flex !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  z-index: auto !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(10,14,18,.60), rgba(10,14,18,.42));
  color: #ECF3FF;
  font: 700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  white-space: nowrap;
  justify-self: end;
  margin-left: 16px;
}
#site-footer .vpn-badge .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#23ff75,#00e0ff);
  box-shadow: 0 0 12px rgba(0,255,90,.45);
}
#site-footer .vpn-badge.is-vpn .dot{
  background: linear-gradient(135deg,#ff3b3b,#ff9f43);
  box-shadow: 0 0 12px rgba(255,60,60,.55);
}

/* Ensure the footer has a right rail for the chip; center on small screens */
#site-footer .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
@media (max-width:700px){
  #site-footer .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #site-footer .vpn-badge { margin-left: 0; }
}

/* Bigger footer logo */
#site-footer .brand { display:inline-flex; align-items:center; gap:12px; color:#e8f0e8; text-decoration:none; font-weight:700; }
#site-footer .brand-logo {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(0,247,0,.28), 0 10px 28px -16px rgba(0,247,0,.35);
}
#site-footer .brand-logo img {
  width: 100%; height: 100%; display: block; border-radius: 8px;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 8px rgba(0,247,0,.35));
}
@media (min-width:960px){
  #site-footer .brand-logo { width: 56px; height: 56px; }
}

/* =========================================================
   END additions
   ========================================================= */