/* usl-theme.css — shared dark "tactical" theme for all USL Web pages.
   Matches the faceted homepage (index.html): deep-navy palette, hot-coral
   accent, Rajdhani headings + Inter body. Link this AFTER Bootstrap and remove
   the page's own light inline palette; page-specific structural styles can stay. */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --usl-bg:        #1a1a2e;
  --usl-surface:   #16213e;
  --usl-surface-2: #0f3460;
  --usl-accent:    #e94560;
  --usl-accent-2:  #ff6b81;
  --usl-text:      #e0e0e0;
  --usl-muted:     #8899aa;
  --usl-border:    rgba(255, 255, 255, 0.08);
}

body {
  background: var(--usl-bg) !important;
  color: var(--usl-text) !important;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #fff; }
a { color: var(--usl-accent); }
a:hover { color: var(--usl-accent-2); text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--usl-surface); }
::-webkit-scrollbar-thumb { background: var(--usl-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--usl-accent-2); }

/* page header / footer bands */
header, footer {
  background: var(--usl-surface) !important;
  color: #fff;
}
header h1 span { color: var(--usl-accent); }

/* cards / accordions */
.card { background: var(--usl-surface); border: 1px solid var(--usl-border); color: var(--usl-text); }
.card-header { background: var(--usl-surface-2) !important; color: #fff !important; border-bottom: 1px solid var(--usl-border); }
.card-body { background: var(--usl-surface) !important; color: var(--usl-text) !important; }
.card-header .btn-link { color: #fff !important; text-decoration: none; }
.card-header .btn-link:hover { color: var(--usl-accent) !important; }

/* buttons — coral primary */
.btn-dark, .btn-primary {
  background: var(--usl-accent) !important;
  border: none !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-primary:hover { background: var(--usl-accent-2) !important; color: #fff !important; }
.btn-outline-light, .btn-outline-dark { border-color: var(--usl-accent) !important; color: var(--usl-accent) !important; }
.btn-outline-light:hover, .btn-outline-dark:hover { background: var(--usl-accent) !important; color: #fff !important; }

/* forms */
.form-control {
  background: var(--usl-surface-2);
  border: 1px solid var(--usl-border);
  color: #fff;
}
.form-control:focus {
  background: var(--usl-surface-2);
  border-color: var(--usl-accent);
  color: #fff;
  box-shadow: 0 0 0 0.15rem rgba(233, 69, 96, 0.25);
}
.form-control::placeholder { color: var(--usl-muted); }
label { color: var(--usl-text); }

/* list groups */
.list-group-item { background: var(--usl-surface); color: var(--usl-text); border: 1px solid var(--usl-border); }
.list-group-item a { color: var(--usl-text); }
.list-group-item a:hover { color: var(--usl-accent); }

/* generic light surfaces some pages use */
.description, .content-box { background: var(--usl-surface); color: var(--usl-text); border: 1px solid var(--usl-border); }
.bg-white, .bg-light { background: var(--usl-surface) !important; color: var(--usl-text); }
.text-muted { color: var(--usl-muted) !important; }
.table { color: var(--usl-text); }

/* footer social icons */
.social-icon { color: #fff; margin: 0 8px; font-size: 1.1rem; }
.social-icon:hover { color: var(--usl-accent); }

/* ---- shared navbar (navbar.html loaded into #navbar-placeholder) ---- */
#navbar-placeholder .navbar {
  background: var(--usl-surface);
  padding: 6px 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
#navbar-placeholder .navbar-brand { color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
#navbar-placeholder .navbar-brand img { height: 40px; width: auto; margin-right: 8px; }
#navbar-placeholder .nav-link { color: #ccdddd !important; white-space: nowrap; }
#navbar-placeholder .nav-link:hover { color: var(--usl-accent) !important; }
#navbar-placeholder .dropdown-menu { background: var(--usl-surface-2); }
#navbar-placeholder .dropdown-item { color: #ccdddd; }
#navbar-placeholder .dropdown-item:hover { background: var(--usl-surface); color: #fff; }

/* Shared dark theme applied across all navbar-linked pages (rollout 2026-07-05). */