/* ==========================================================================
   BRAND PALETTE OVERRIDE — Public Marketing Site (template/bank-pro)
   --------------------------------------------------------------------------
   Loaded AFTER main0338.css so these rules win the cascade without editing
   or removing any rule inside the compiled vendor stylesheet. No HTML
   structure, JS behavior, or responsive breakpoints are touched — only
   colors, backgrounds, borders and text colors.

   Palette:
     --brand-navy    #0A1E3F  Deep Navy      (structural / primary)
     --brand-red     #C8102E  Crimson Red    (primary CTA / high priority)
     --brand-red-dk  #A00D24  Crimson Red hover shade
     --brand-amber   #D97706  Amber Gold     (rates / numeric highlights)
     --brand-surface #F4F6F8  Cool Neutral   (card / section backgrounds)
     --brand-white   #FFFFFF  Crisp White    (base background)
     --brand-text    #1E293B  Charcoal       (body copy)
     --brand-border  #E2E8F0  Subtle border for surfaces
   ========================================================================== */

:root {
  --brand-navy: #0A1E3F;
  --brand-red: #C8102E;
  --brand-red-dark: #A00D24;
  --brand-amber: #D97706;
  --brand-surface: #F4F6F8;
  --brand-white: #FFFFFF;
  --brand-text: #1E293B;
  --brand-border: #E2E8F0;
}

/* --- Base page background & body copy ------------------------------------ */
body {
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
}

/* ==========================================================================
   A. HEADER — White across all devices
   ========================================================================== */

/* Main header bar + inner container: pure white (vendor has #2548af blue) */
.l-header,
.l-header__bottom,
.l-header__bottom-inner {
  background-color: var(--brand-white) !important;
}

/* Mobile overlay pseudo-element: white, not blue */
@media (max-width: 1050px) {
  .l-header__bottom-inner::after {
    background-color: var(--brand-white) !important;
  }

  /* Mobile bottom action bar: white, not #185a7d */
  .l-header__action {
    background-color: var(--brand-white) !important;
  }

  /* Mobile nav panel: white, not #185a7d */
  .l-header__nav {
    background-color: var(--brand-white) !important;
  }

  /* Mobile menu items: navy text on white background (vendor has white on blue) */
  .l-header__action .l-header__action__l1 > li > a {
    color: var(--brand-navy) !important;
  }
  .l-header__action .l-header__action__l1 > li > a[aria-expanded=true] {
    color: var(--brand-navy) !important;
    background-color: var(--brand-surface) !important;
  }
  .l-header__action .l-header__action__l1 > li > a::after {
    background-color: var(--brand-red) !important;
  }
  .l-header__action .l-header__action__l2-title,
  .l-header__action .l-header__action__l2-title a {
    color: var(--brand-navy) !important;
  }
  .l-header__action .l-header__action__l2-link {
    color: var(--brand-navy) !important;
  }
  .nav-primary__l1-item-link,
  .nav-primary__l1-item-link:focus {
    color: var(--brand-navy) !important;
  }
  .nav-primary__l1-item-link::before {
    background-color: var(--brand-red) !important;
  }
  .header__routing {
    background-color: var(--brand-surface) !important;
    color: var(--brand-navy) !important;
  }
  .l-header__nav .l-header__nav-contacts {
    color: var(--brand-text) !important;
  }
  .l-header__nav .l-header__nav-contacts__item-title {
    color: var(--brand-navy) !important;
  }
  .l-header__nav .l-header__nav-contacts__item-cta a {
    color: var(--brand-red) !important;
  }
  .nav-primary__flyout-nav-title {
    color: var(--brand-navy) !important;
  }
  .nav-primary__l2-item-link,
  .nav-primary__l2-item-link:hover,
  .nav-primary__l2-item-link:focus {
    color: var(--brand-navy) !important;
  }
  .nav-primary__l2-item-link:hover,
  .nav-primary__l2-item-link:focus {
    color: var(--brand-red) !important;
  }
  .section-links__item .link-chevron {
    color: var(--brand-navy) !important;
  }
}

/* Desktop sub-nav bar: solid navy (vendor uses gradient #185a7d) */
@media (min-width: 1051px) {
  .l-header__nav {
    background: var(--brand-navy) !important;
  }
}

/* Hamburger / nav-toggle icon: black on white header */
.l-header__nav-toggle {
  background-color: #1E293B !important;
}

/* Search toggle icon: dark on white header */
.l-header__search__toggle {
  color: var(--brand-navy) !important;
}

.l-header__search__toggle:focus,
.l-header__search__toggle:hover {
  color: var(--brand-red) !important;
}

/* LOGIN text: bold red on white background with login icon */
.l-header__login-toggle {
  color: var(--brand-red) !important;
  font-weight: 700 !important;
}

.l-header__login-toggle::before {
  background-color: var(--brand-red) !important;
}

.l-header__login-toggle:focus,
.l-header__login-toggle:hover {
  color: var(--brand-red-dark) !important;
}

/* Quick-action links (LOGIN / OPEN ACCOUNT): navy text on white */
.l-header__action .l-header__action__l1 > li > a {
  color: var(--brand-navy) !important;
}

/* Teal underline on action links → red */
.l-header__action .l-header__action__l1 > li > a::after {
  background-color: var(--brand-red) !important;
}

.l-header__action .l-header__action__l1 > li > a:focus,
.l-header__action .l-header__action__l1 > li > a:hover {
  color: var(--brand-red) !important;
}

/* Active/expanded state: red text, no blue background */
.l-header__action .l-header__action__l1 > li.is-active > a {
  color: var(--brand-red) !important;
  background-color: transparent !important;
}

.l-header__action .l-header__action__l1 > li > a[aria-expanded="true"] {
  color: var(--brand-red) !important;
  background-color: transparent !important;
}

/* Mobile action bar border: subtle, not black */
.l-header__action .l-header__action__l1 > li:not(:first-child) {
  border-left: 1px solid var(--brand-border) !important;
}

/* Mobile dropdown panel: white background */
.l-header__action .l-header__action__l2 {
  background-color: var(--brand-white) !important;
}

.l-header__action .l-header__action__l2-wrap {
  background-color: var(--brand-white) !important;
}

.l-header__action .l-header__action__l2-title {
  color: var(--brand-navy) !important;
}

.l-header__action .l-header__action__l2-title a {
  color: var(--brand-navy) !important;
}

.l-header__action .section-links {
  background-color: transparent !important;
}

.l-header__action .section-links a {
  color: var(--brand-navy) !important;
}

/* Nav contacts section (mobile): dark text on white */
.l-header__nav .l-header__nav-contacts {
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
}

.l-header__nav .l-header__nav-contacts__item-title {
  color: var(--brand-navy) !important;
}

.l-header__nav .l-header__nav-contacts__item-cta a {
  color: var(--brand-red) !important;
}

/* ==========================================================================
   B. PRIMARY NAVIGATION
   ========================================================================== */

.l-header__nav .header__routing,
.nav-primary__l1-item-link,
.nav-primary__l1-item-link-text {
  color: var(--brand-white) !important;
}

.nav-primary__l1-item-link:hover,
.nav-primary__l1-item-link:focus,
.nav-primary__l1-item.is-active > .nav-primary__l1-item-link {
  color: var(--brand-red) !important;
}

/* Flyout mega-menu panels */
.nav-primary__flyout-nav-title,
.nav-primary__l2-item-link {
  color: var(--brand-navy) !important;
}

.nav-primary__l2-item-link:hover,
.nav-primary__l2-item-link:focus {
  color: var(--brand-red) !important;
}

.nav-primary__flyout-feature-cta {
  color: var(--brand-red) !important;
}

/* Flyout feature box: light surface, not #f3f3f3 */
.nav-primary__flyout-feature {
  background-color: var(--brand-surface) !important;
}

/* Flyout feature CTA button: red, not #f69220 orange */
.nav-primary__flyout-feature .nav-primary__flyout-feature-cta {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}

.nav-primary__flyout-feature .nav-primary__flyout-feature-cta:focus,
.nav-primary__flyout-feature .nav-primary__flyout-feature-cta:hover {
  background-color: var(--brand-white) !important;
  color: var(--brand-red) !important;
}

/* Flyout feature title: navy, not white */
.nav-primary__flyout-feature .nav-primary__flyout-feature-title {
  color: var(--brand-navy) !important;
}

/* Flyout feature description: charcoal, not white */
.nav-primary__flyout-feature-desc .rtf {
  color: var(--brand-text) !important;
}

.nav-primary__flyout-feature-desc .rtf p {
  color: var(--brand-text) !important;
}

/* ==========================================================================
   C. BUTTONS & CALL-TO-ACTIONS
   ========================================================================== */

.button--primary,
.js-header-login-toggle.button--primary,
.btn-primary,
input[type="submit"].btn-primary {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}

.button--primary:hover,
.button--primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-red-dark) !important;
  border-color: var(--brand-red-dark) !important;
}

.button--navy-outline,
.button--secondary,
.btn-outline-secondary {
  background-color: transparent !important;
  border: 2px solid var(--brand-navy) !important;
  color: var(--brand-navy) !important;
}

.button--navy-outline:hover,
.button--navy-outline:focus,
.button--secondary:hover,
.btn-outline-secondary:hover {
  background-color: var(--brand-navy) !important;
  color: var(--brand-white) !important;
}

.btn.btn--teal {
  background-color: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-white) !important;
}

/* Tab/accordion titles — but NOT the rates accordion on mobile
   which has its own navy background and needs white text */
.tabs.primary,
.tabs-title > a[aria-selected="true"] {
  color: var(--brand-navy) !important;
}

.accordion-title {
  color: var(--brand-navy) !important;
}

/* Rates accordion title on mobile: white text on navy background */
.tabbed-feature__content-item-title.accordion-title {
  color: var(--brand-white) !important;
  background-color: var(--brand-navy) !important;
  border: 0 !important;
}

/* Accordion chevron icon inside rates title: white, not dark */
.tabbed-feature__content-item-title.accordion-title .icon__bg {
  background-color: var(--brand-white) !important;
}

/* ==========================================================================
   D. "HOW CAN WE HELP" & SECTION LINKS — No colored background
   ========================================================================== */

/* Remove the blue (#2548af) section background — make it transparent/white */
.section-links {
  background-color: #F6F4ED !important;
  color: var(--brand-text) !important;
}

.section-links__title {
  color: var(--brand-navy) !important;
}

.section-links__item a {
  color: var(--brand-text) !important;
}

.section-links__item a:hover,
.section-links__item a:focus {
  color: var(--brand-red) !important;
}

/* Icons inside section-links: NO colored background box */
.section-links__item .icon,
.section-links__item .icon--solid,
.section-links__item .icon__bg {
  background-color: transparent !important;
}

/* ==========================================================================
   E. ICONS — Remove all colored background boxes
   ========================================================================== */

/* Do NOT add background colors to icon containers.
   Icons are <img> SVGs that should sit directly on the section background. */
.icon,
.icon--solid {
  background-color: transparent !important;
}

.icon__bg {
  background-color: transparent !important;
}

/* Structural color accents (l-bg-blue used in hero/decorative blocks only) */
.l-bg-blue,
.l-bg-dark-blue {
  background-color: var(--brand-navy) !important;
}

/* ==========================================================================
   F. RATES SECTION
   ========================================================================== */

/* Rates nav bar: navy background */
.rates-hero__nav,
.tabs-panel-inner-wrap .rates-hero__nav {
  background: var(--brand-navy) !important;
  background-color: var(--brand-navy) !important;
}

/* Rate tab labels: white text on navy */
.rates-hero__nav-item,
.tabs-panel-inner-wrap .rates-hero__nav-item:not(.is-active) {
  color: var(--brand-white) !important;
}

/* Active rate tab: navy text on white */
.rates-hero__nav-item.is-active {
  color: var(--brand-navy) !important;
  background-color: var(--brand-white) !important;
}

.rates-hero__nav-item-text {
  color: inherit !important;
}

/* Rate cards: cool neutral surface */
.rates-hero__rate-card,
.rates-hero__content-item,
.rates-hero__rate {
  background-color: var(--brand-surface) !important;
  border: 1px solid var(--brand-border) !important;
}

/* Rate amounts: amber gold bold */
.rates-hero__rate-amt,
.rates-hero__rate-pre,
.rate-amount,
.text-rate {
  color: var(--brand-amber) !important;
  font-weight: 700 !important;
}

/* Rate descriptions: charcoal text */
.rates-hero__rate-desc,
.rates-hero__rate-note {
  color: var(--brand-text) !important;
}

.rates-hero__rate-desc:hover,
.rates-hero__rate-desc:focus {
  color: var(--brand-red) !important;
}

/* ==========================================================================
   G. TABBED FEATURE & CONTENT AREAS
   ========================================================================== */

.tabbed-feature {
  background-color: var(--brand-surface) !important;
}

.tabbed-feature__inner {
  background-color: var(--brand-white) !important;
}

/* Tabbed feature tab bar: navy bottom border, navy text */
.tabbed-feature__tabs {
  border-bottom-color: var(--brand-navy) !important;
}

.tabbed-feature__tabs li {
  background: linear-gradient(0deg, var(--brand-red), var(--brand-red)) top/100% 0 no-repeat !important;
}

.tabbed-feature__tabs a {
  color: var(--brand-navy) !important;
}

/* Generic tabs (tabs-title, tabs.primary) */
.tabs-title > a {
  color: var(--brand-navy) !important;
}

.tabs-title > a:hover {
  color: var(--brand-red) !important;
}

.tabs.primary {
  background: var(--brand-navy) !important;
}

.tabs.primary > li > a {
  color: var(--brand-white) !important;
}

.tabs.primary > li > a:focus {
  background: var(--brand-red) !important;
}

/* ==========================================================================
   G2. STATIC STRIP (Routing #, Branch Hours)
   ========================================================================== */

.static-strip__inner > ul > li {
  color: var(--brand-white) !important;
  background-color: var(--brand-navy) !important;
}

.static-strip__inner > ul > li:not(.static-strip__routing-num) {
  background-color: var(--brand-navy) !important;
}

.static-strip__inner > ul > li:not(.static-strip__routing-num) + li {
  border-left-color: var(--brand-white) !important;
}

.static-strip a {
  color: var(--brand-white) !important;
}

/* ==========================================================================
   G3b. FOOTER QUICK BAR (Routing #, Branch Hours, Email, Video Connect)
   ========================================================================== */

.footer-quick-bar__item-header,
.footer-quick-bar__item-header--phone,
.footer-quick-bar__item-header--phone:focus,
.footer-quick-bar__item-header--video,
.footer-quick-bar__item-subtitle {
  color: var(--brand-white) !important;
}

.footer-quick-bar__item-header--phone:hover,
.footer-quick-bar__item-header--video:hover {
  color: var(--brand-red) !important;
}

/* ==========================================================================
   G3. CAMPAIGN FEATURE & RELATED CONTENT
   ========================================================================== */

.related-content__item-title a {
  color: var(--brand-navy) !important;
}

.related-content__item:first-child .related-content__item-title a {
  color: var(--brand-navy) !important;
}

.related-content__item-label {
  color: var(--brand-white) !important;
  background-color: var(--brand-navy) !important;
}

.related-content__item-label:hover {
  color: var(--brand-white) !important;
  background-color: var(--brand-red) !important;
}

/* ==========================================================================
   G4. HERO SECTION
   ========================================================================== */

.main-hero__title {
  color: var(--brand-white) !important;
}

.main-hero__subtitle,
  .main-hero--home .main-hero__subtitle {
  color: var(--brand-white) !important;
}

@media (max-width: 1050px) {
  .main-hero__subtitle,
    .main-hero--home .main-hero__subtitle {
    color: #000000 !important;
  }
}

/* ==========================================================================
   G5. LOGIN MODAL & FORMS
   ========================================================================== */

.login-form h3 {
  color: var(--brand-navy) !important;
}

.login-form__field label {
  color: var(--brand-text) !important;
}

.login-form__field input {
  border-color: var(--brand-border) !important;
  background-color: var(--brand-surface) !important;
}

.login-form__field input:focus {
  border-color: var(--brand-navy) !important;
}

.login-form__help-link,
.login-form__help-link:focus {
  color: var(--brand-red) !important;
}

.login-form--disabled input:disabled {
  border-color: var(--brand-border) !important;
}

/* ==========================================================================
   G6. SUB-HERO (interior page heroes)
   ========================================================================== */

.sub-hero--video .sub-hero-content {
  background: var(--brand-navy) !important;
}

.sub-hero-logout__subtitle {
  color: var(--brand-navy) !important;
}

/* ==========================================================================
   H. TYPOGRAPHY & LINKS
   ========================================================================== */

.rtf p,
.article-author__name,
.frequently-searched__title,
.locations-filter-heading {
  color: var(--brand-text) !important;
}

.rtf a:not(.button):not(.link--image),
.alert__link,
.article-author__name:hover,
.article-author__name:focus,
.article__category-link,
.article__topic-link {
  color: var(--brand-red) !important;
}

/* ==========================================================================
   I2. MOBILE MENU TEXT COLOR FIX
   --------------------------------------------------------------------------
   The global .nav-primary__l1-item-link rule above sets color: white !important.
   On mobile (max-width:1050px) the background is white, so white text is invisible.
   Using extra specificity (3 classes) to override even !important rules in main0338.css.
   ========================================================================== */
@media (max-width: 1050px) {
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link:focus,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link:hover,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link:active,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link:visited {
    color: #000000 !important;
  }
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link-text,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link-text:focus,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link-text:hover,
  .nav-primary .nav-primary__l1 .nav-primary__l1-item-link-text:active {
    color: #000000 !important;
  }
}

/* ==========================================================================
   I. FOOTER
   ========================================================================== */

.l-footer-main,
.l-footer__top {
  background-color: var(--brand-navy) !important;
  color: var(--brand-white) !important;
}

.footer-nav,
.footer-services__header,
.footer-social__header,
.related-links__item {
  color: var(--brand-white) !important;
}

.footer-nav a,
.related-links__item a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-nav a:hover,
.footer-nav a:focus,
.related-links__item a:hover {
  color: var(--brand-red) !important;
}

/* ==========================================================================
   J. REFERLIVE FORM WIDGET OVERRIDES
   ========================================================================== */

form.css_cs_rl_tbl_rgForm input[type="button"] {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
}

form.css_cs_rl_tbl_rgForm input[type="button"]:hover {
  background-color: var(--brand-white) !important;
  color: var(--brand-red) !important;
}

input[type="button"].css_cs_rl_tbl_rgBtnDisable {
  background-color: var(--brand-red-dark) !important;
  color: var(--brand-white) !important;
}

.cs_rl_shr_hdr,
.cs_rl_shr_hdr_mob {
  color: var(--brand-navy) !important;
}

label.cs_rl_lblSucess {
  color: var(--brand-navy) !important;
}