/* HUD Houses cobrand overrides */

/* Nav: white/surface background, taller to match live site */
.site-nav { background: var(--color-surface); color: var(--color-primary); border-bottom: 1px solid var(--color-outline-variant); height: auto; padding: 12px 20px; }
.site-nav .nav-logo img { height: 50px; }
.site-nav .nav-links a { color: var(--color-on-surface); text-transform: uppercase; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; 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-primary); color: var(--color-on-primary); text-transform: uppercase; font-size: 0.82rem; }
.site-nav .nav-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary-hover); }
.site-nav .theme-toggle { border-color: var(--color-outline-variant); color: var(--color-on-surface); }

/* Hero: dark blue with US map background */
.hero {
    background: url('/static/img/cobrands/hudhouses/hero-bg.png') center / cover no-repeat;
    background-color: var(--color-primary);
}

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

/* Content headings & links: use primary blue instead of teal secondary */
.content-main h2 { color: var(--color-primary); }
.content-side h2 { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.city-links a { color: var(--color-primary); }

/* Search row: wider field */
.search-row { max-width: 620px; }

/* Search button: primary blue */
.search-row button, .search-row input[type=submit] { background: var(--color-primary); }
.search-row button:hover, .search-row input[type=submit]:hover { background: color-mix(in srgb, var(--color-primary) 85%, black); color: var(--color-on-primary-hover); }

/* States section: white bg, primary-colored links */
.states-section { background: var(--color-surface); }
.states-grid a { color: var(--color-primary); }

/* Footer: dark bg */
.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); }
.footer-copy { background: color-mix(in srgb, var(--color-primary) 70%, black); color: var(--color-on-primary); }

/* REMARK: Live site has a dedicated footer with logo image + "Sign Up for Alerts" CTA button — would need HTML markup change to replicate. */