/* ============================================================================
 * navbar-dropdown.css
 * ----------------------------------------------------------------------------
 * Styles Bootstrap dropdown menus inside the STV navbar to match the
 * site's red/dark aesthetic. Loaded after style.css and Bootstrap's CSS
 * via _header.php so it wins the cascade.
 *
 * Place at: public_html/assets/css/navbar-dropdown.css
 * ============================================================================ */

/* Dropdown panel: dark background with gold accent on hover, matching the
   stv-card.dark / footer treatment elsewhere on the site. */
.stv-navbar .dropdown-menu {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 0;
  margin-top: 0;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.stv-navbar .dropdown-item {
  color: #f0f0f0;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}

.stv-navbar .dropdown-item:hover,
.stv-navbar .dropdown-item:focus {
  background-color: var(--stv-red, #b32121);
  color: #fff;
}

.stv-navbar .dropdown-item.active,
.stv-navbar .dropdown-item:active {
  background-color: var(--stv-red, #b32121);
  color: #fff;
}

/* Subtle gold accent line below each item (except the last) so the menu
   feels structured but not loud. */
.stv-navbar .dropdown-item + .dropdown-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Section header inside dropdowns (used in Take Action) */
.stv-navbar .dropdown-header {
  color: var(--stv-gold, #d7a43b);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px 4px;
}

.stv-navbar .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 6px 0;
}

/* Top-level toggle: when the parent has an active child, mark the parent
   itself as visually active. Bootstrap doesn't do this automatically. */
.stv-navbar .nav-item.dropdown.active > .nav-link,
.stv-navbar .nav-item.dropdown > .nav-link.active {
  color: var(--stv-gold, #d7a43b) !important;
}

/* Caret indicator: keep Bootstrap's default but make it slightly lighter
   so it doesn't dominate. */
.stv-navbar .dropdown-toggle::after {
  opacity: 0.7;
  margin-left: 0.4em;
}

/* On mobile (collapsed navbar), expand the dropdown inline rather than
   floating it. Bootstrap does this by default with .navbar-expand-lg, but
   we tighten the spacing. */
@media (max-width: 991.98px) {
  .stv-navbar .dropdown-menu {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 1.25rem;
    margin-top: 0;
    min-width: 0;
  }
  .stv-navbar .dropdown-item {
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.85);
  }
  .stv-navbar .dropdown-item + .dropdown-item {
    border-top: 0;
  }
  .stv-navbar .dropdown-item:hover,
  .stv-navbar .dropdown-item:focus {
    background-color: rgba(179, 33, 33, 0.5);
  }
}