/* FHA.com cobrand overrides */

/* Nav: white/surface background */
.site-nav { background: var(--color-surface); color: var(--color-primary); border-bottom: 1px solid var(--color-outline-variant); }
.site-nav .nav-logo img { height: 48px; }
.site-nav .nav-links a { color: var(--color-on-surface); font-weight: 500; opacity: 1; }
.site-nav .nav-links a:hover { color: var(--color-primary); }
.site-nav .nav-actions a { color: var(--color-on-surface); opacity: 1; }
.site-nav .nav-actions a:hover { color: var(--color-primary); }
.site-nav .nav-cta { background: var(--color-tertiary); color: var(--color-on-tertiary); font-weight: 700; }
.site-nav .nav-cta:hover { background: var(--color-tertiary-hover); color: var(--color-on-tertiary-hover); }
.site-nav .theme-toggle { border-color: var(--color-outline-variant); color: var(--color-on-surface); }

/* Hero: US map bg, uppercase heading */
.hero {
    background: url('/static/img/cobrands/fhacom/hero-bg.png') center / cover no-repeat;
    background-color: var(--color-primary);
}
.hero h1 { text-transform: uppercase; }

/* Featured: light gray bg */
.featured-section { background: var(--color-surface-variant); }

/* States: light bg */
.states-section { background: var(--color-surface); }

/* Footer: dark teal */
.site-footer { background: color-mix(in srgb, var(--color-primary) 85%, black); color: var(--color-on-primary); }
.site-footer a { color: var(--color-on-primary); opacity: 0.8; }
.footer-copy { background: color-mix(in srgb, var(--color-primary) 70%, black); color: var(--color-on-primary); }

/* REMARK: Live fha.foreclosure.com has the full FHA.com header chrome (teal nav bar with FHA-specific links, logo area with description text) above the foreclosure content. This would need significant HTML markup changes to replicate. */