/* =============================================================
   RESOURCES PAGE UPGRADE — css/resources-upgrade.css
   Additive overrides only. Load after styles.css on resources.html.
   Full rollback: remove the <link> tag from resources.html.
   Mirrors about/board/contact upgrade pattern: red → gold.
   NOTE: Category tag color system is intentionally untouched.
   ============================================================= */

/* -----------------------------------------------------------
   1. GOLD CUSTOM PROPERTIES
   ----------------------------------------------------------- */
:root {
  --res-gold:       #C5A55A;
  --res-gold-light: #E8D5A0;
  --res-gold-glow:  rgba(197, 165, 90, 0.25);
}

/* -----------------------------------------------------------
   2. HERO BAR — radial glow red → gold ambient
   ----------------------------------------------------------- */
.page-hero-bar::before {
  background: radial-gradient(
    circle at 30% 50%,
    rgba(197, 165, 90, 0.08) 0%,
    transparent 55%
  ) !important;
}

/* -----------------------------------------------------------
   3. SEARCH BAR FOCUS RING — red → gold
   ----------------------------------------------------------- */
.resources-search__input:focus {
  border-color: var(--res-gold) !important;
  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.12) !important;
  outline: none !important;
}

/* -----------------------------------------------------------
   4. FILTER PILLS — hover + active states red → gold
   ----------------------------------------------------------- */
.filter-btn:hover {
  border-color: rgba(197, 165, 90, 0.5) !important;
  color: var(--res-gold) !important;
  background: rgba(197, 165, 90, 0.06) !important;
}

.filter-btn.active {
  background: var(--res-gold) !important;
  border-color: var(--res-gold) !important;
  color: #111 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px var(--res-gold-glow) !important;
}

/* -----------------------------------------------------------
   5. RESOURCE CARD BUTTON — hover red → gold
   ----------------------------------------------------------- */
.resource-card__button:hover {
  background: var(--res-gold) !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px var(--res-gold-glow) !important;
}

/* -----------------------------------------------------------
   6. RESOURCES CTA BUTTON (top + bottom) — hover red → gold
   ----------------------------------------------------------- */
.resources-cta__button:hover {
  background: var(--res-gold) !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px var(--res-gold-glow) !important;
}

/* -----------------------------------------------------------
   7. FORM SUBMIT BUTTON — hover red → gold
   ----------------------------------------------------------- */
.form-group__submit:hover {
  background: var(--res-gold) !important;
  color: #111 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px var(--res-gold-glow) !important;
}

/* -----------------------------------------------------------
   8. TOP CTA BUTTON WRAPPER — semantic class
   ----------------------------------------------------------- */
.resources-cta-wrapper {
  text-align: center;
  margin-bottom: 24px;
}

/* -----------------------------------------------------------
   9. RESOURCES CTA SECTION — grey/dashed → premium dark
   ----------------------------------------------------------- */
.resources-cta {
  background: linear-gradient(
    160deg,
    #111111 0%,
    #181818 60%,
    #1c1812 100%
  ) !important;
  border: 1px solid rgba(197, 165, 90, 0.2) !important;
  border-left: 4px solid var(--res-gold) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  text-align: left !important;
}

.resources-cta__title {
  color: #ffffff !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 10px !important;
}

.resources-cta__text {
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 24px !important;
  line-height: 1.7 !important;
}

.resources-cta__button {
  background: var(--res-gold) !important;
  color: #111 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 10px var(--res-gold-glow) !important;
}

/* -----------------------------------------------------------
   10. SECTION TITLE UNDERLINE — red → gold (if visible)
   ----------------------------------------------------------- */
.section__title::after {
  background: var(--res-gold) !important;
  width: 48px !important;
}

/* -----------------------------------------------------------
   HERO IMAGE — background image overlay
   Inline style sets URL. This block: cover/position + overlay.
   hero-resources.jpg = aircraft carrier at bright sunset.
   ----------------------------------------------------------- */
.page-hero-bar {
  background-size: cover !important;
  background-position: center !important;
  min-height: 75vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.page-hero-bar::before {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.58) 45%,
    rgba(0,0,0,0.60) 100%
  ) !important;
}
.page-hero-bar::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #C5A55A 50%,
    transparent 100%
  ) !important;
  z-index: 3 !important;
}
.page-hero-bar__title,
.page-hero-bar__subtitle,
.page-hero-bar__divider {
  position: relative !important;
  z-index: 1 !important;
}

/* -----------------------------------------------------------
   FILTER BANNER — shown when resources.html loaded with ?category=
   ----------------------------------------------------------- */
.rs-filter-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-bottom: 2px solid var(--res-gold, #C5A55A);
  color: #e0e0e0;
  font-size: 0.88rem;
  text-align: center;
}
.rs-filter-banner strong {
  color: var(--res-gold, #C5A55A);
}