/* ============================================================================
   SVU Events Guide: Bootstrap Bridge Layer
   Maps Bootstrap 5.3 CSS variables onto the design-system tokens and skins
   the Bootstrap components (navbar, forms, modal, alerts, buttons…) so the
   site keeps one coherent dark + gold identity while still using Bootstrap
   Grid and components (required by BWP401 grading).
   Load order: bootstrap.css → global.css → bridge.css → main.css
   ========================================================================== */

:root {
  /* ---- map Bootstrap semantic variables to design tokens ---- */
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-elevated);
  --bs-tertiary-bg: var(--bg-elevated-hover);
  --bs-border-color: var(--border-hairline);
  --bs-border-radius: 6px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-sm: 4px;
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-heading-color: var(--text-primary);
  --bs-link-color: var(--accent-gold-bright);
  --bs-link-color-rgb: 224, 165, 86;
  --bs-link-hover-color: var(--accent-gold-bright);
  --bs-link-hover-color-rgb: 224, 165, 86;
  --bs-emphasis-color: var(--text-primary);
  --bs-danger-rgb: 220, 76, 76;
  --bs-success-rgb: 16, 185, 129;
}

/* ---- typography inside Bootstrap components ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
}

/* ---- buttons: custom gold variants on top of Bootstrap .btn base ---- */

.btn-gold {
  --bs-btn-font-weight: 500;
  background: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  color: #141414;
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--accent-gold-bright);
  border-color: var(--accent-gold-bright);
  color: #141414;
}

.btn-gold:active {
  background: var(--accent-gold-dim);
  border-color: var(--accent-gold-dim);
  color: #141414;
}

.btn-gold:disabled {
  background: var(--accent-gold-dim);
  border-color: var(--accent-gold-dim);
  color: rgba(20, 20, 20, 0.65);
}

.btn-outline-gold {
  --bs-btn-font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-hairline-gold);
  color: var(--accent-gold-bright);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
  background: var(--accent-gold-wash);
  border-color: var(--accent-gold);
  color: var(--accent-gold-bright);
}

.btn-outline-ghost {
  --bs-btn-font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
}

.btn-outline-ghost:hover,
.btn-outline-ghost:focus-visible {
  background: var(--bg-elevated-hover);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

/* ---- navbar ---- */

.navbar-evg {
  background: rgba(12, 12, 13, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hairline);
}

.navbar-evg .nav-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding-inline: 0.85rem;
  transition: color var(--dur-fast) ease;
}

.navbar-evg .nav-link:hover,
.navbar-evg .nav-link:focus {
  color: var(--text-primary);
}

.navbar-evg .nav-link.active {
  color: var(--accent-gold-bright);
}

.navbar-toggler {
  border-color: var(--border-hairline);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--accent-gold-wash);
  border-color: var(--border-hairline-gold);
}

/* mobile collapsed panel keeps the dark identity */
@media (max-width: 991.98px) {
  .navbar-evg .navbar-collapse {
    background: var(--bg-elevated);
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.75rem;
  }
}

/* ---- cards ---- */

.card-evg {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  overflow: hidden;
}

.card-evg .card-title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
}

.card-evg .card-text {
  color: var(--text-secondary);
}

/* ---- forms ---- */

.form-control,
.form-select {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-elevated);
  border-color: var(--accent-gold);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-gold-wash);
}

.form-control:disabled {
  background-color: var(--bg-primary);
  color: var(--text-muted);
}

.form-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237d7d83' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
  background-color: var(--bg-elevated);
  border-color: var(--border-hairline);
}

.form-check-input:checked {
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.form-check-input:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px var(--accent-gold-wash);
}

.input-group-text {
  background-color: var(--bg-elevated-hover);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
}

/* ---- alerts (dark tinted variants) ---- */

.alert {
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.92rem;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.alert-danger {
  background: rgba(220, 76, 76, 0.08);
  border-color: rgba(220, 76, 76, 0.35);
  color: #fca5a5;
}

.alert-gold {
  background: var(--accent-gold-wash);
  border-color: var(--border-hairline-gold);
  color: var(--accent-gold-bright);
}

/* ---- modal ---- */

.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  color: var(--text-primary);
}

.modal-header,
.modal-footer {
  border-color: var(--border-hairline);
}

.modal-title {
  font-family: var(--font-display);
  font-weight: 700;
}

.modal-backdrop.show {
  opacity: 0.7;
}

/* ---- badges (base skin; per-category colors live in main.css) ---- */

.badge-evg {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32em 0.7em;
  border-radius: 4px;
  border: 1px solid;
  line-height: 1.4;
}

/* ---- dropdowns (filter toolbar) ---- */

.dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-elevated-hover);
  color: var(--text-primary);
}

/* ---- accordion (about page policies, if used) ---- */

.accordion-item {
  background: var(--bg-elevated);
  border-color: var(--border-hairline);
}

.accordion-button {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.accordion-button:not(.collapsed) {
  background: var(--bg-elevated-hover);
  color: var(--accent-gold-bright);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px var(--accent-gold-wash);
  border-color: var(--border-hairline-gold);
}

.accordion-body {
  color: var(--text-secondary);
}