/* =========================================================
   RESOURCES PAGE — FINAL STYLES
   Scoped ONLY to .page-resources
========================================================= */

/* ---------------------------------------------------------
   HERO — FULL IMAGE, PREMIUM READABILITY
--------------------------------------------------------- */

.page-resources .hero-resources {
  position: relative;
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.65),
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.25)
    ),
    url("/assets/images/resources.jpg") center center / min(1400px, 100%) auto no-repeat;
  background-color: #0e1a24;
  min-height: 520px;
  padding: 6rem 0;
}

.page-resources .hero-resources .hero-inner {
  position: relative;
  z-index: 2;
}

.page-resources .hero-content {
  max-width: 680px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.15),
    rgba(0,0,0,0)
  );
  padding: 2rem 2rem 2rem 0;
  border-radius: 4px;
}

.page-resources .hero-resources .eyebrow {
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.page-resources .hero-resources h1 {
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.75);
  position: relative;
}

.page-resources .hero-resources h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.75rem;
  background: linear-gradient(90deg, #c9a24d, #e6c878);
  border-radius: 2px;
}

.page-resources .hero-subhead {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 6px rgba(0,0,0,0.65);
  font-size: 1.1rem;
}

.page-resources .hero-trust {
  margin-top: 1.75rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.page-resources .hero-trust li {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------------
   HEADER LOGO — NORMALIZE SIZE (PAGE ONLY)
--------------------------------------------------------- */

.page-resources .site-header .brand-logo {
  height: 44px;
  width: auto;
  max-width: none;
}

/* ---------------------------------------------------------
   SECTION BACKGROUNDS
--------------------------------------------------------- */

.page-resources .section-soft {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0)
  );
}

/* ---------------------------------------------------------
   GOLD BULLET POINTS — SUBTLE
--------------------------------------------------------- */

.page-resources ul li::marker {
  color: var(--gold);
}

/* ---------------------------------------------------------
   CARD ACCENTS — DARK + SUBTLE GOLD (FIXED)
--------------------------------------------------------- */

.page-resources .card {
  position: relative;

  /* Dark surface (matches brand) */
  background: linear-gradient(
    180deg,
    #0f1b28,
    #0b1522
  );

  border-radius: 8px;

  /* Subtle gold edge */
  border: 1px solid rgba(212,175,55,0.22);

  /* Depth */
  box-shadow:
    0 12px 30px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.02);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.page-resources .card:hover {
  transform: translateY(-2px);

  border-color: rgba(212,175,55,0.45);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(212,175,55,0.05);
}

/* Ensure readable text inside dark cards */
.page-resources .card h3 {
  color: #ffffff;
}

.page-resources .card p {
  color: rgba(255,255,255,0.85);
}

.page-resources .card .text-link {
  color: var(--gold);
}

/* ---------------------------------------------------------
   FAQ CTA — FINAL PRE-FOOTER BAND (GOLD)
--------------------------------------------------------- */

.page-resources > .section.section-soft:last-of-type {
  margin-bottom: 0;
  padding: 4.5rem 0;
  background:
    linear-gradient(
      180deg,
      rgba(212,175,55,0.10),
      rgba(0,0,0,0)
    );
  border-top: 1px solid rgba(212,175,55,0.25);
}

/* Force FAQ CTA button to brand gold */
.page-resources
.section.section-soft
a.btn.btn-secondary[href="/faq/"] {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #0b1220 !important;
  font-weight: 700;
}

.page-resources
.section.section-soft
a.btn.btn-secondary[href="/faq/"]:hover,
.page-resources
.section.section-soft
a.btn.btn-secondary[href="/faq/"]:focus {
  background-color: #e6c878 !important;
  border-color: #e6c878 !important;
  color: #0b1220 !important;
}

/* ---------------------------------------------------------
   ACCESSIBLE HERO ANIMATION
--------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .page-resources .hero-content {
    animation: heroFadeUp 0.8s ease-out both;
  }

  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---------------------------------------------------------
   MOBILE REFINEMENTS
--------------------------------------------------------- */

@media (max-width: 768px) {
  .page-resources .hero-resources {
    padding: 4rem 0;
    min-height: 440px;
  }

  .page-resources .hero-content {
    padding: 1.5rem;
    background: rgba(0,0,0,0.45);
  }

  .page-resources > .section.section-soft:last-of-type {
    padding: 3.5rem 1rem;
  }
}