/* Front page header: BRP logo | dealer name on the left, address + phone stacked on the right (reference layout) */
header.fp-header { background-color: #231f20 !important; color: #fff !important; }
/* same content box as the footer: 1280px centred, left edge = footer menus, right edge = footer BRP logo */
header.fp-header > .container { max-width: 1280px; margin: 0 auto; padding: 0 32px 0 34px; }

/* Left: BRP logo, divider, dealer name */
header.fp-header .main-logo { align-items: center !important; flex: 0 0 auto; }
header.fp-header .fp-brp-logo { display: block; line-height: 0; }
header.fp-header .fp-brp-logo img { width: 48px; height: 48px; }
header.fp-header .fp-header-divider { display: block; width: 1px; height: 44px; margin: 0 24px; background-color: #fff; }
header.fp-header .fp-dealer-name { color: #fff !important; font-size: 20px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }

/* Right: address and phone on two rows, white text and icons */
header.fp-header .contact-info { width: auto !important; flex-direction: column; align-items: flex-start !important; justify-content: center !important; gap: 10px; }
header.fp-header .contact-info a,
header.fp-header .contact-info a * { color: #fff !important; text-decoration: none; }
header.fp-header .contact-info .separator { display: none; }
header.fp-header .contact-info .location { width: auto !important; margin: 0 !important; }
header.fp-header .contact-info .location > * { padding: 0 !important; }
header.fp-header .contact-info .location > a > div,
header.fp-header .contact-info .location > div { display: flex !important; align-items: center; justify-content: flex-start !important; width: auto; padding: 0; }
header.fp-header .contact-info .phone { padding: 0 !important; margin: 0 !important; align-items: center; }
header.fp-header .contact-info .phone > div { width: auto; flex: 0 0 auto; padding: 0; justify-content: flex-start !important; }
header.fp-header .contact-info img,
header.fp-header > .container > .logo img { filter: invert(1); }
header.fp-header .contact-info img { float: none !important; width: 22px; height: auto; margin-right: 12px !important; }

/* Mobile location/contact panels: white text on the dark header colour, white buttons with black text */
header.fp-header ~ * .location-accordion, header.fp-header ~ .location-accordion,
header.fp-header ~ * .contact-accordion, header.fp-header ~ .contact-accordion { background-color: #231f20; }
header.fp-header ~ * .location-accordion .info, header.fp-header ~ .location-accordion .info,
header.fp-header ~ * .contact-accordion .info, header.fp-header ~ .contact-accordion .info,
header.fp-header ~ * .contact-accordion .info h2, header.fp-header ~ .contact-accordion .info h2 { color: #fff; }
header.fp-header ~ * .location-accordion .btn.button, header.fp-header ~ .location-accordion .btn.button,
header.fp-header ~ * .contact-accordion .btn.button, header.fp-header ~ .contact-accordion .btn.button { background-color: #fff; color: #000; }
header.fp-header ~ * .location-accordion .btn.button a, header.fp-header ~ .location-accordion .btn.button a,
header.fp-header ~ * .contact-accordion .btn.button a, header.fp-header ~ .contact-accordion .btn.button a { color: #000; }

/* Brand pages, mobile white top bar: black BRP logo | dealer name */
.home-header-top { display: flex; align-items: center; }
.home-header-top .fp-brp-logo { line-height: 0; flex: 0 0 auto; }
.home-header-top .fp-brp-logo img { width: 40px; height: 40px; }
.home-header-top .fp-header-divider { flex: 0 0 auto; width: 1px; height: 32px; margin: 0 14px; background-color: #000; }

/* Mobile: smaller logo + name, white icons on the right */
@media (max-width: 1023px) {
    header.fp-header > .container { padding: 0 16px; }
    header.fp-header .fp-brp-logo img { width: 40px; height: 40px; }
    header.fp-header .fp-header-divider { height: 32px; margin: 0 14px; }
    header.fp-header .main-logo { flex: 1 1 auto; min-width: 0; }
    header.fp-header .fp-brp-logo, header.fp-header .fp-header-divider { flex: 0 0 auto; }
    header.fp-header .fp-dealer-name { font-size: 16px; white-space: normal; }
    header.fp-header > .container > .logo { flex: 0 0 auto; align-items: center !important; margin-left: 16px; }
    header.fp-header > .container > .logo img { width: 22px; }
}