/* style.css — Kerberos Cyber‑Deck HUD Terminal Theme */

:root {
  --bg-dark:#0a0a0c;
  --panel-bg:rgba(18,18,20,0.75);
  --accent:#ffb300;
  --text-light:#e5e5e5;
  --text-dim:#8c8c8c;
  --border-neon:0 0 10px rgba(255,179,0,0.8);
  --glow:0 0 20px rgba(255,179,0,0.5);
  --font-mono:'IBM Plex Mono', monospace;
}
body{
  background:radial-gradient(circle at top,#111114 0%,#000 80%);
  color:var(--text-light);
  font-family:var(--font-mono);
  margin:0;padding:0;overflow-x:hidden;
}

/* Header */
.hud-header{display:flex;justify-content:space-between;align-items:center;background:rgba(12,12,14,0.9);padding:12px 24px;border-bottom:1px solid rgba(255,179,0,0.2);box-shadow:0 0 10px rgba(255,179,0,0.15);}
.logo{height:92px;}
.header-right button{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:8px 14px;margin-left:10px;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:all .2s;}
.header-right button:hover{background:var(--accent);color:#000;box-shadow:var(--border-neon);}

/* Sidebar */
.container{display:flex;padding:20px;}
.sidebar{width:270px;flex-shrink:0;transition:all .3s;}
.page-wrapper main{flex-grow:1;padding:0 25px;}
.nav-block{background:var(--panel-bg);border:1px solid rgba(255,179,0,0.1);border-radius:8px;padding:16px;margin-bottom:20px;box-shadow:0 0 5px rgba(255,179,0,0.3);}
.nav-title{color:var(--accent);margin-bottom:10px;}
.nav-link{display:block;color:var(--text-light);margin:6px 0;text-decoration:none;}
.nav-link:hover,.nav-link.active{color:var(--accent);text-shadow:var(--border-neon);}
.status-panel{background:var(--panel-bg);border:1px solid rgba(255,179,0,0.1);border-radius:8px;padding:16px;color:var(--text-dim);}
.status-green{color:#8fff97;} .status-orange{color:var(--accent);}
.divider{border-bottom:1px dashed rgba(255,255,255,0.1);margin:8px 0;}

/* Terminal */
.terminal-box{background:rgba(15,15,17,0.8);border:1px solid rgba(255,179,0,0.2);border-radius:8px;box-shadow:0 0 18px rgba(255,179,0,0.2);margin-top:25px;animation:fadeIn 1s;}
.terminal-header{background:rgba(0,0,0,0.6);padding:6px 10px;border-bottom:1px solid rgba(255,179,0,0.1);display:flex;align-items:center;}
.dot{height:10px;width:10px;border-radius:50%;margin-right:5px;}
.red{background:#ff5555;} .yellow{background:#ffb300;} .green{background:#44ff88;}
.terminal-header .title{color:var(--text-dim);margin-left:auto;}
.terminal-body{background:#000;color:#9fff9f;padding:18px;font-size:.95rem;line-height:1.4;min-height:120px;}
.prompt{color:var(--accent);}
.cursor{display:inline-block;background:var(--accent);width:7px;height:14px;margin-left:2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

.terminal-cta{text-align:right;background:rgba(255,179,0,0.06);padding:10px 15px;border-top:1px solid rgba(255,179,0,0.1);}
.term-btn{background:none;border:1px solid var(--accent);color:var(--accent);padding:6px 12px;margin-left:6px;border-radius:4px;cursor:pointer;transition:all .25s;}
.term-btn:hover{background:var(--accent);color:#000;box-shadow:0 0 12px rgba(255,179,0,0.6);}

/* CTA Panel */
.cta-panel{margin-top:28px;background:linear-gradient(90deg,rgba(255,179,0,0.08),rgba(255,179,0,0.15));border:1px solid rgba(255,179,0,0.2);border-radius:10px;padding:22px;box-shadow:0 0 20px rgba(255,179,0,0.2);}
.lead{font-size:1.04rem;line-height:1.6;color:#c4c4c4;}
.cta-btn{display:inline-block;margin-top:20px;padding:12px 22px;border:none;color:#000;background:var(--accent);font-weight:bold;cursor:pointer;border-radius:5px;text-transform:uppercase;transition:all .25s;}
.cta-btn:hover{box-shadow:0 0 25px rgba(255,179,0,0.7);transform:scale(1.03);}

/* Additional panels */
.panel{background:var(--panel-bg);border:1px solid rgba(255,179,0,0.1);border-radius:8px;padding:20px;margin:25px 0;}
.system p,.security p{color:var(--text-light);line-height:1.6;}
.security-list{list-style:none;padding:0;}
.security-list li{margin:8px 0;color:#d7d7d7;}
.security-list i{color:var(--accent);margin-right:6px;}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;text-align:center;}
.metric{background:rgba(0,0,0,0.4);border:1px solid rgba(255,179,0,0.15);border-radius:6px;padding:14px;}
.metric .value{display:block;font-size:1.2rem;color:var(--accent);}
.metric .label{font-size:.85rem;color:var(--text-dim);}

/* Footer */
.site-footer{background:#070707;padding:40px 20px;color:var(--text-dim);}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.footer-col h3{color:var(--accent);}
.footer-col a{color:var(--text-light);text-decoration:none;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{text-align:center;margin-top:20px;font-size:.85rem;color:#777;}

/* Responsive */
@media(max-width:900px){.container{flex-direction:column;}.sidebar{width:100%;position:absolute;top:65px;left:-100%;background:rgba(0,0,0,0.95);z-index:1000;padding:20px;}
.sidebar.open{left:0;}}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* === Global Links Styling === */
a {
  color: var(--accent);
  text-decoration: none;
  position: relative;
  transition: color .25s ease, text-shadow .25s ease;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,179,0,0.7);
  transition: width .3s ease;
}

a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,179,0,0.8);
}

a:hover::after {
  width: 100%;
}

a:active {
  color: #000;
  background: var(--accent);
  text-shadow: none;
  transition: background .1s ease-out;
}
/* === Responsive Header Fix === */
@media (max-width:900px) {
  .hud-header {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
  }

  .header-right {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .onion-btn {
    flex: 1;
    margin-left: 0;
    margin-right: 10px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  .menu-toggle {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    border-radius: 4px;
    transition: all .25s;
  }

  .menu-toggle:hover {
    background: var(--accent);
    color: #000;
  }
}


/* Copy field & button styling */
.copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,179,0,0.3);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}
.copy-box input {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: #fffbdb;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.copy-box input:focus { outline: none; }
.copy-btn {
  background: rgba(255,179,0,0.15);
  border: none;
  color: var(--accent);
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.25s;
  border-left: 1px solid rgba(255,179,0,0.25);
}
.copy-btn:hover {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 12px rgba(255,179,0,0.7);
}
.copy-btn.copied {
  background: #8fff97;
  color: #000;
  box-shadow: 0 0 12px #8fff97;
}
/* Fix copy-box input text wrapping */
.copy-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,179,0,0.3);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}

.copy-box input {
  flex: 1;
  min-width: 0;  /* ← добавь это */
  width: 100%;   /* ← добавь это */
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #fffbdb;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  white-space: nowrap;  /* ← или убери эту строку если хочешь перенос */
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-box input:focus {
  outline: none;
  box-shadow: 0 0 8px rgba(255,179,0,0.4);
}
/* Fix text wrapping in cards and panels */
.card, .panel, main {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.card p, .panel p, .lead {
  word-break: break-word;
  line-height: 1.6;
  max-width: 100%;
}

/* Ensure containers don't overflow */
main {
  word-break: break-all;
}

/* Fix copy-box specifically for long onion links */
.copy-box input {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  padding: 10px 12px;
}
/* Fix footer text wrapping */
.site-footer, .footer-col, .footer-grid {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.footer-col ul, .footer-col li, .footer-col a {
  word-break: break-word;
  max-width: 100%;
  line-height: 1.5;
  padding: 4px 0;
}

.footer-col p {
  max-width: 250px;
  line-height: 1.4;
  word-break: break-word;
}

/* Mobile footer fix */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .footer-col p {
    max-width: 100%;
  }
}

/* GLOBAL TEXT WRAPPING FIX */
* {
  box-sizing: border-box;
}

.card, .panel, main, .site-footer, .footer-col, .footer-grid, .lead {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card p, .panel p, .lead, .footer-col p {
  line-height: 1.6;
  max-width: 100%;
  word-break: break-word;
}

.copy-box input {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
}
/* Hide hamburger menu on desktop */
@media (min-width: 901px) {
  .menu-toggle {
    display: none !important;
  }
  
  .sidebar {
    position: static !important;
    left: auto !important;
    width: 270px !important;
    transform: none !important;
  }
}

/* Ensure mobile-only behavior */
@media (max-width: 900px) {
  .menu-toggle {
    display: block !important;
  }
  
  .sidebar {
    position: absolute !important;
    left: -100% !important;
    width: 100% !important;
    z-index: 1000;
  }
  
  .sidebar.open {
    left: 0 !important;
  }
}
/* Fix footer text wrapping - SPECIFIC for links.html */
.footer-col ul li a, .footer-col p {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
  hyphens: auto !important;
}

/* Force footer links to wrap properly */
.footer-col a {
  display: inline-block;
  word-break: break-all;
  padding: 2px 0;
}

/* Container fix for footer */
.footer-grid, .footer-col {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile footer - stack properly */
@media (max-width: 900px) {
  .footer-col ul li {
    word-break: break-word;
    padding: 4px 0;
  }
  
  .footer-col p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}
/* MOBILE FOOTER TEXT WRAPPING FIX */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .footer-col {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .footer-col h3 {
    word-break: break-word !important;
    font-size: 1.1rem !important;
  }
  
  .footer-col ul {
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
  }
  
  .footer-col li {
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    padding: 6px 0 !important;
    max-width: 100% !important;
  }
  
  .footer-col li a {
    word-break: break-word !important;
    display: block !important;
    padding: 4px 0 !important;
    hyphens: auto !important;
  }
  
  .footer-col p {
    word-break: break-word !important;
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    hyphens: auto !important;
  }
}
/* Force normal spaces + text wrapping in footer */
.footer-col.footer-brand p,
.footer-col.footer-brand h3 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  line-height: 1.45 !important;
  unicode-bidi: normal !important;
}

/* Replace non-breaking spaces with normal spaces */
.footer-col * {
  white-space: normal !important;
}

/* Mobile footer brand text fix */
@media (max-width: 900px) {
  .footer-col.footer-brand p {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    max-height: none !important;
    padding-right: 10px !important;
  }
  
  .footer-col.footer-brand h3 {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }
}

/* Desktop footer fix */
@media (min-width: 901px) {
  .footer-col.footer-brand p {
    max-width: 220px !important;
  }
}