/* ============================================================
   NA WEBSITE — THEME UNIFICATION + READABILITY (2026-08-06 v2)
   Loaded LAST. Uses #wrapwrap #wrap (double-ID) selectors so it
   out-specifies website_content.css / website_hero.css which use
   "#wrapwrap h1 {...} !important" style rules.
   ============================================================ */

/* ── 1. One navy hero theme for every page ─────────────────── */
#wrapwrap #wrap section.s_title,
#wrapwrap #wrap section.sa-hero,
#wrapwrap #wrap section.su-hero,
#wrapwrap #wrap .sa-hero,
#wrapwrap #wrap .su-hero {
  background: linear-gradient(135deg, #0b2545 0%, #0f2b57 45%, #1b4b8f 100%) !important;
  color: #ffffff !important;
}

/* Hero headings — white, always */
#wrapwrap #wrap section.s_title h1,
#wrapwrap #wrap section.s_title h2,
#wrapwrap #wrap section.s_title .h1,
#wrapwrap #wrap .sa-hero h1,
#wrapwrap #wrap .su-hero h1,
#wrapwrap #wrap section.s_cover h1,
#wrapwrap #wrap section.s_cover h2 {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hero sub-text — near-solid white, larger */
#wrapwrap #wrap section.s_title p,
#wrapwrap #wrap section.s_title .lead,
#wrapwrap #wrap .sa-hero p,
#wrapwrap #wrap .sa-hero .sa-hero-sub,
#wrapwrap #wrap .su-hero p,
#wrapwrap #wrap section.s_cover p,
#wrapwrap #wrap section.s_cover .lead {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Links inside heroes */
#wrapwrap #wrap section.s_title a:not(.btn),
#wrapwrap #wrap .sa-hero a:not(.btn),
#wrapwrap #wrap .su-hero a:not(.btn),
#wrapwrap #wrap section.s_cover a:not(.btn) {
  color: #9ed0ff !important;
  text-decoration: underline !important;
}

/* ── 2. Body copy readability (light sections) ─────────────── */
/* website_content.css forces p to gray-500 and labels to gray-400
   — too light. Darken everything on light backgrounds. */
#wrapwrap #wrap p,
#wrapwrap #bottom p {
  color: var(--naw-gray-700, #334155) !important;
  font-size: 1.03rem !important;
  line-height: 1.75 !important;
}
#wrapwrap #wrap li {
  color: var(--naw-gray-700, #334155) !important;
  line-height: 1.7 !important;
}
#wrapwrap #wrap section.s_text_image p {
  color: var(--naw-gray-600, #475569) !important;
}
#wrapwrap #wrap section.s_numbers p.lead {
  color: var(--naw-gray-600, #475569) !important;
}
#wrapwrap #wrap section.s_numbers span.h5-fs {
  color: var(--naw-gray-600, #475569) !important;
}
#wrapwrap #wrap .text-muted,
#wrapwrap #wrap small,
#wrapwrap #wrap .small {
  color: var(--naw-gray-600, #475569) !important;
}

/* ── 3. Dark sections keep white text ──────────────────────── */
#wrapwrap #wrap section.s_title p,
#wrapwrap #wrap section.s_title li,
#wrapwrap #wrap section.s_cover p,
#wrapwrap #wrap section.s_cover li,
#wrapwrap #wrap .sa-hero p,
#wrapwrap #wrap .su-hero p,
#wrapwrap #wrap .su-show p,
#wrapwrap #wrap .su-show li,
#wrapwrap #wrap .su-show div,
#wrapwrap #wrap .su-show span,
#wrapwrap #wrap .o_cc.o_cc5 p,
#wrapwrap #wrap .o_cc.o_cc5 li {
  color: rgba(255, 255, 255, 0.95) !important;
}
#wrapwrap #wrap .su-show .su-show-name { color: #7dd3fc !important; }
#wrapwrap #wrap .su-show .su-stat-num { color: #00d4aa !important; }
#wrapwrap #wrap .su-show .su-stat-lbl { color: rgba(255,255,255,.8) !important; }
#wrapwrap #wrap .su-show h1,
#wrapwrap #wrap .su-show h2,
#wrapwrap #wrap .su-show h3,
#wrapwrap #wrap .su-show .su-price,
#wrapwrap #wrap .o_cc.o_cc5 h1,
#wrapwrap #wrap .o_cc.o_cc5 h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── 4. Footer contrast ────────────────────────────────────── */
footer.o_footer,
footer.o_footer p,
footer.o_footer li {
  color: rgba(255, 255, 255, 0.92) !important;
}
footer.o_footer a {
  color: #bcd7ff !important;
}
footer.o_footer a:hover {
  color: #ffffff !important;
}
footer.o_footer h5,
footer.o_footer h6 {
  color: #ffffff !important;
}