/* ===== DARK THEME ===== */

body.dark{
  --accent: #e3a369;
  --accent-soft: rgba(227, 163, 105, 0.28);

  /* GLASS + PANEL SYSTEM */
  --glass-bg: rgba(10, 10, 15, 0.42);               /* more transparent */
  --glass-border: rgba(240, 244, 250, 0.1);
  --glass-border-strong: rgba(240, 244, 250, 0.18);
  --panel-bg: rgba(15, 18, 24, 0.48);
  --panel-hover-bg: rgba(19, 24, 32, 0.70);
  --panel-shadow: 0 30px 76px rgba(5, 6, 12, 0.50);

  /* TEXT */
  --text-primary: #f0f4fa;
  --text-muted: rgba(240, 244, 250, 0.74);

  background-color: #05070c;
  color: var(--text-primary);
}

/* All pages except home */
body.dark:not(.home-page){
  background-image: url('../../assets/images/BAS-bg.webp');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== LINKS ===== */
a{
  color: var(--accent);
}
a:hover,
a:focus-visible{
  color: #f5d4a7; /* warm, no blue */
}

/* ===== TOP BAR & FOOTER ===== */
.top-bar,
.site-footer{
  background-color: var(--glass-bg);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 46px rgba(3, 6, 14, 0.42);
}

.top-bar{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.site-footer{
  border-top: 1px solid rgba(255,255,255,0.05);
  color: var(--text-muted);
}

/* FIX: stop footer text from wrapping badly on small screens */
.site-footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  text-align: center;
}
.site-footer a{
  text-decoration: none;
  color: var(--accent);
}
.site-footer a:hover{
  color: #f5d4a7; /* fixed from cold blue */
}

/* ===== TOP NAV ===== */
.top-nav ul{
  background: transparent;
}

.top-nav a{
  color: var(--text-primary);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.top-nav a .material-symbols-outlined{
  color: var(--accent); /* warm accent */
}

.top-nav a:hover,
.top-nav a:focus-visible{
  background-color: rgba(240, 244, 250, 0.08);
  border-color: var(--accent-soft);
  box-shadow: 0 12px 30px rgba(3, 6, 14, 0.4), 0 0 0 1px var(--accent-soft);
  transform: translateY(-2px);
}

.top-nav a.active{
  background-color: rgba(240, 244, 250, 0.12);
  border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(3, 6, 14, 0.46), 0 0 0 1px var(--accent-soft);
}

/* ===== ICON BUTTONS ===== */
.icon-link,
.icon-btn,
.menu-toggle{
  background-color: rgba(6, 10, 18, 0.45);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.icon-link:hover,
.icon-btn:hover,
.menu-toggle:hover{
  background-color: rgba(10, 16, 26, 0.58);
  border-color: var(--glass-border-strong);
  box-shadow: 0 16px 36px rgba(3, 6, 14, 0.45);
  color: var(--accent);
}

/* ===== PANELS / CARDS / WRAPS ===== */
.dashboard-card,
.card,
.about-wrap,
.docs-wrap,
.faqs-wrap,
.legal-wrap,
.search-wrap,
.contact-wrap,
.gallery-wrap{
  background-color: var(--panel-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--panel-shadow);

  /* FIXED: too blurry → now realistic glass */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* consistent spacing */
.about-wrap,
.docs-wrap,
.info-wrap,
.faqs-wrap,
.legal-wrap,
.search-wrap,
.contact-wrap,
.gallery-wrap{
  padding: clamp(24px, 4vw, 48px);
}

.dashboard-card:hover,
.card:hover{
  background-color: var(--panel-hover-bg);
  border-color: var(--glass-border-strong);
}

/* ===== TEXT MUTED ===== */
.dashboard-header .timestamp,
.card .kicker,
.info-hero .lede,
.about-wrap p,
.legal-wrap p,
.faqs-wrap summary,
.search-wrap p,
.contact-wrap p{
  color: var(--text-muted);
}

/* ===== MODAL ===== */
.modal{
  background: rgba(3, 6, 12, 0.6);
}

.modal-content{
  background-color: var(--panel-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.modal-close{
  color: var(--text-primary);
}
.modal-close:hover{
  color: #ffffff;
}

/* ===== BUTTONS ===== */
button{
  background-color: var(--panel-bg);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

button:hover{
  background-color: var(--panel-hover-bg);
  border-color: var(--glass-border-strong);
  box-shadow: 0 14px 36px rgba(3, 6, 14, 0.42);
  color: var(--accent);
}