/* ═══════════════════════════════════════════════════════════
   TELOS — SHARED CHROME (topbar + menu + footer)
   Single source of truth for elements present on every public
   page. Used by includes/topbar.php and includes/footer.php.
   Loaded BEFORE redesign-2026.css so page-specific CSS can win.
   ═══════════════════════════════════════════════════════════ */

/* ─── Topbar baseline (kept tight; pages can override) ─────── */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:9995;
  height:66px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,3,11,.97);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
  border-bottom:1px solid rgba(0,242,255,.35);
  gap:14px;
}
.brand-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Titillium Web',sans-serif;font-weight:900;
  letter-spacing:2px;font-size:16px;white-space:nowrap;color:#fff;
}
.brand-title img{height:26px;width:auto;}
.brand-sub{font-weight:400;opacity:.4;font-size:.75em;margin-left:2px;}
.nav-links{display:flex;gap:20px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.nav-links a{color:#555;transition:color .22s;text-decoration:none;}
.nav-links a:hover{color:#fff;}
.nav-right{display:flex;align-items:center;gap:8px;}
.tb-countdown{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px;}
.tb-countdown .sep{color:#222;}
.cd-num{color:#fff;font-size:11px;font-weight:700;background:rgba(0,242,255,.12);padding:2px 5px;border-radius:4px;min-width:20px;text-align:center;display:inline-block;}
.cd-lbl{color:var(--accent,#00f2ff);font-size:8px;}
.pulse-dot{width:6px;height:6px;border-radius:50%;animation:tbPulse 1.5s infinite;}
@keyframes tbPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Hamburger button */
.hamburger-btn{
  width:34px;height:34px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:8px;
  background:rgba(0,242,255,.06);border:1px solid rgba(0,242,255,.15);transition:all .22s;
}
.hamburger-btn:hover{background:rgba(0,242,255,.12);border-color:rgba(0,242,255,.35);}
.hamburger-btn span{width:16px;height:1.5px;background:var(--accent,#00f2ff);border-radius:2px;transition:all .3s cubic-bezier(.22,1,.36,1);transform-origin:center;display:block;}
.hamburger-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ─── FULLSCREEN MENU (hidden by default — critical) ─────── */
.menu-fullscreen{
  position:fixed;inset:0;z-index:9990;
  opacity:0;visibility:hidden;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s;
}
.menu-fullscreen.active{opacity:1;visibility:visible;}
.menu-backdrop{
  position:absolute;inset:0;
  background:rgba(2,2,6,.96);
  -webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);
}
.menu-backdrop::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,242,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,242,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
}
.menu-wrapper{
  position:relative;width:100%;height:100%;
  max-width:1400px;margin:0 auto;padding:0 80px 60px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.menu-top{height:66px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,242,255,.1);margin-bottom:48px;}
.menu-logo{display:flex;align-items:center;gap:10px;font-family:'Titillium Web',sans-serif;font-size:17px;font-weight:900;color:#fff;letter-spacing:2px;text-decoration:none;}
.menu-logo img{height:24px;}
.menu-logo .acc{color:var(--accent,#00f2ff);}
.menu-close-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;
}
.menu-close-btn:hover{background:rgba(0,242,255,.1);border-color:rgba(0,242,255,.4);transform:rotate(90deg);}
.menu-close-btn i{font-size:20px;color:rgba(255,255,255,.7);}

.menu-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;flex:1;padding-bottom:40px;align-content:start;}
.menu-col{display:flex;flex-direction:column;gap:2px;padding-right:60px;border-right:1px solid rgba(255,255,255,.04);}
.menu-col:last-child{border-right:none;padding-right:0;}
.menu-col:not(:first-child){padding-left:60px;}
.col-title{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;color:rgba(0,242,255,.5);text-transform:uppercase;letter-spacing:4px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.mlink{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;background:transparent;border:1px solid transparent;transition:all .18s cubic-bezier(.22,1,.36,1);text-decoration:none;}
.mlink:hover{background:rgba(0,242,255,.04);border-color:rgba(0,242,255,.12);transform:translateX(6px);}
.mlink-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:all .18s;}
.mlink:hover .mlink-icon{border-color:rgba(0,242,255,.2);}
.mlink-icon i{font-size:18px;color:rgba(255,255,255,.3);transition:color .18s;}
.mlink:hover .mlink-icon i{color:var(--accent,#00f2ff);}
.mlink-name{font-family:'Titillium Web',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:.4px;}
.mlink-desc{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.menu-footer{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.menu-footer-left{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;}
.menu-footer-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;background:rgba(0,242,255,.08);border:1px solid rgba(0,242,255,.3);color:var(--accent,#00f2ff);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .2s;}
.menu-footer-cta:hover{background:rgba(0,242,255,.15);box-shadow:0 0 24px rgba(0,242,255,.3);}

@media(max-width:768px){
  .menu-wrapper{padding:0 24px 40px;}
  .menu-cols{grid-template-columns:1fr;gap:18px;}
  .menu-col{padding:0 0 18px 0!important;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);}
  .menu-col:last-child{border-bottom:none;}
  .menu-top{height:56px;margin-bottom:24px;}
  .top-bar{height:58px;padding:0 16px;}
}

/* ─── Auth button + dropdown (was inline in index) ─────── */
#auth-btn{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 18px;border-radius:8px;
  background:transparent;color:var(--accent,#00f2ff);
  border:1px solid rgba(0,242,255,.45);
  box-shadow:0 0 12px rgba(0,242,255,.18);
  transition:all .22s;display:flex;align-items:center;gap:6px;
  cursor:pointer;position:relative;white-space:nowrap;
}
#auth-btn:hover{background:rgba(0,242,255,.08);box-shadow:0 0 24px rgba(0,242,255,.4);}
#auth-btn.logged{background:rgba(0,242,255,.1);border-color:rgba(0,242,255,.35);}
#user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:230px;
  background:rgba(6,6,14,.98);border:1px solid rgba(0,242,255,.16);border-radius:14px;padding:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px rgba(0,242,255,.05);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  z-index:99999;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,visibility .22s,transform .22s ease;pointer-events:none;
}
#user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all;}
.udrop-header{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:6px;}
#user-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(0,242,255,.12);border:1px solid rgba(0,242,255,.28);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
#user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
#user-name{font-family:'Titillium Web',sans-serif;font-weight:700;font-size:14px;color:#fff;line-height:1.2;}
#user-email{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.35);margin-top:3px;}
#user-dropdown a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-decoration:none;border-radius:8px;transition:all .15s;letter-spacing:.5px;}
#user-dropdown a:hover{background:rgba(0,242,255,.07);color:#fff;}
#user-dropdown a.udrop-logout,#user-dropdown a.udrop-logout:hover{color:#ff5555;}
#user-dropdown a.udrop-logout:hover{background:rgba(255,50,50,.08);}
#user-dropdown a i{font-size:15px;color:var(--accent,#00f2ff);}
#user-dropdown a.udrop-logout i{color:#ff5555;}
.udrop-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 0;}

/* Active nav link — underline rendered absolutely so it never affects
   the inline flex flow of nav-links (avoids layout shift on mobile). */
.nav-links a.is-active{color:#fff;position:relative;}
.nav-links a.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;margin:auto;height:2px;width:14px;background:var(--accent,#00f2ff);border-radius:2px;box-shadow:0 0 8px rgba(0,242,255,.6);}

/* ─── Unified site footer ──────────────────────────────── */
footer.site-footer{padding:70px 40px 40px;border-top:1px solid rgba(255,255,255,.06);background:#010101;position:relative;z-index:10;}
footer.site-footer .footer-inner{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:50px;}
footer.site-footer .footer-brand{display:flex;flex-direction:column;gap:14px;}
footer.site-footer .footer-logo{display:flex;align-items:center;gap:10px;font-family:'Titillium Web',sans-serif;font-size:22px;font-weight:900;color:#fff;}
footer.site-footer .footer-logo img{height:22px;}
footer.site-footer .footer-logo .brand-sub{font-size:.52em;opacity:.3;font-weight:400;margin-left:4px;}
footer.site-footer .footer-desc{font-size:12px;color:#666;max-width:300px;line-height:1.8;font-family:'JetBrains Mono',monospace;}
footer.site-footer .sub-box{display:flex;gap:8px;margin-top:8px;max-width:320px;}
footer.site-footer .sub-input{flex:1;min-width:0;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;outline:none;transition:border-color .2s;}
footer.site-footer .sub-input:focus{border-color:rgba(0,242,255,.5);}
footer.site-footer .sub-btn{padding:10px 14px;border-radius:8px;border:1px solid var(--accent,#00f2ff);background:var(--accent,#00f2ff);color:#000;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:1.5px;cursor:pointer;transition:all .2s;white-space:nowrap;}
footer.site-footer .sub-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,242,255,.35);}
footer.site-footer .footer-socials{display:flex;gap:14px;margin-top:6px;}
footer.site-footer .footer-socials a{color:#555;font-size:20px;line-height:1;text-decoration:none;transition:color .2s;}
footer.site-footer .footer-socials a:hover{color:var(--accent,#00f2ff);}
footer.site-footer .footer-col{display:flex;flex-direction:column;gap:10px;}
footer.site-footer .footer-col-title{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--accent,#00f2ff);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;}
footer.site-footer .footer-col a{font-size:12px;color:#666;text-decoration:none;transition:color .2s;font-family:'JetBrains Mono',monospace;}
footer.site-footer .footer-col a:hover{color:#fff;}
footer.site-footer .footer-bottom{max-width:1300px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:#444;flex-wrap:wrap;gap:8px;}
footer.site-footer .status-dot{width:5px;height:5px;border-radius:50%;background:#00ff88;box-shadow:0 0 6px #00ff88;display:inline-block;}

/* ─── Mobile-first responsive chrome ───────────────────── */
@media(max-width:1024px){
  footer.site-footer .footer-inner{grid-template-columns:1fr 1fr;gap:40px;}
}
@media(max-width:768px){
  #auth-btn{padding:7px 12px;font-size:8px;}
  #auth-btn .auth-label-text{display:none;}
  .tb-countdown .cd-lbl,.tb-countdown .sep{display:none;}
  .tb-countdown{font-size:8px;gap:3px;}
  footer.site-footer{padding:50px 20px 30px;}
  footer.site-footer .footer-inner{grid-template-columns:1fr;gap:32px;}
  footer.site-footer .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  footer.site-footer .sub-box{max-width:100%;}
}
@media(max-width:480px){
  footer.site-footer{padding:40px 16px 24px;}
  footer.site-footer .footer-logo{font-size:18px;}
  .nav-links{display:none;}
}

/* Universal mobile guards — body only (NEVER html: that breaks smooth
   scroll, sticky positioning, and scroll-driven animations like the
   index tablet 3D rotation). overflow-x:clip is the modern, scroll-safe
   alternative to overflow-x:hidden. */
body{overflow-x:clip;}
img,video,iframe{max-width:100%;height:auto;}
