/* abcm × AUTOOL Brand Header & Footer 1.7.6 — light mode (research/audit-brand-header-footer.md).
 * Palette "tech", drawer look "spacex". Every rule is scoped to html[data-abcm="light"]; dark = untouched.
 * Light palette: surfaces --abcm-l2 (#FFFFFF) · tint --abcm-l1 (#F5F5F2) · ink #15181C · ink-2 #2B3038 · muted #4A4F57 (8.6:1) ·
 * subtle #6B6E75 (5.1:1) · line rgba(21,24,28,.12). On light surfaces --abbhf-brand becomes ink, which turns
 * every yellow hover, focus ring, current-item underline and badge into ink in one place.
 *
 * Header states. Over a photo / video hero (.is-overlay, not scrolled, no mega) it stays exactly as in dark.
 * "Solid" S = scrolled | mega open | .is-blend (front.js measures "dark content" once; after a runtime switch
 * to light the class is stale, so it counts as solid) | not overlay | overlay on a page whose first module is
 * NOT a photo hero (brand-pages band / plain heroes and brand-search pages are forced overlay server-side but
 * turn light here; :has() decides before first paint, no JS needed).
 */


/* 1 · Header tokens in the solid state ----------------------------------- */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) {
	--abbhf-brand: #15181C;
	--abbhf-brand-tint: var(--abcm-l1);
	--abbhf-line: rgba(21, 24, 28, .16);
	--abbhf-muted: #4A4F57;
	--abbhf-text: #15181C;
	color: #15181C;
}

/* 2 · Bar surface: white glass (replaces dark glass front.css:1300-1307 and BMW bars 1052-1060, 1151-1157) */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd):not(.is-mega) .abbhf-header {
	background: rgba(255, 255, 255, .84);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: rgba(21, 24, 28, .1);
	box-shadow: 0 6px 24px rgba(21, 24, 28, .06);
	color: #15181C;
}
html[data-abcm="light"] .abbhf-hd.is-mega .abbhf-header {
	background: var(--abcm-l2);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: rgba(21, 24, 28, .1);
	color: #15181C;
}

/* 3 · Rows inside the solid bar (top row, BMW upper-layer hairline) */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-row--top { border-bottom-color: rgba(21, 24, 28, .1); }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-row--ink { background: var(--abcm-l1); }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-style--bmw .abbhf-row--top .abbhf-row__in::after { border-bottom-color: rgba(21, 24, 28, .16); }
/* A yellow top row stays a yellow fill with dark text (fill, not text/line), independent of the ink token. */
html[data-abcm="light"] .abbhf-row--brand { background: #F0B323; color: #111111; }

/* 4 · Controls in the solid bar ------------------------------------------ */
/* Current-section underline: 1 px (front.css:1191) → 2 px ink, readable without colour. */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-nav__link::after { height: 2px; }
/* Menu / Search hover: brand is ink now, so dim instead of recolour. */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) :is(.abbhf-trigger, .abbhf-search-btn):hover { color: #4A4F57; }
/* Language capsule hairline (pal-tech rgba(242,244,247,.4) is invisible on white). */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-lang__btn { border-color: rgba(21, 24, 28, .3); }
/* CTA "Contact us" (solid pill): pal-tech paints it #F2F4F7 — white on white. Ink fill instead. */
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) :is(.abbhf-btn--solid, .abbhf-btn--light) { background: #15181C; border-color: #15181C; color: #FFFFFF; }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) :is(.abbhf-btn--solid, .abbhf-btn--light):hover { background: #2B3038; border-color: #2B3038; color: #FFFFFF; }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-btn:hover .abbhf-ico { color: inherit; }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-btn--outline { border-color: rgba(21, 24, 28, .3); color: #15181C; }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-btn--outline:hover { border-color: #15181C; background: transparent; color: #15181C; }
html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abbhf-social a { border-color: rgba(21, 24, 28, .3); }

/* Language dropdown (white in both modes): ink current-language dot, softer shadow. */
html[data-abcm="light"] .abbhf-lang__list { box-shadow: 0 0 0 1px rgba(21, 24, 28, .08), 0 18px 40px rgba(21, 24, 28, .16); }
html[data-abcm="light"] .abbhf-lang__list a[aria-current="true"]::after { background: #15181C; }

/* 5 · Mega panel (desktop) ------------------------------------------------ */
html[data-abcm="light"] .abbhf-mega {
	background: var(--abcm-l2);
	color: #15181C;
	border-top-color: rgba(21, 24, 28, .1);
	box-shadow: 0 30px 60px rgba(21, 24, 28, .12);
	color-scheme: light;
}
html[data-abcm="light"] :is(.abbhf-more, .abbhf-mega__card, .abbhf-mega__gh a, .abbhf-mega__flat a, .abbhf-mega__close) { color: #15181C; }
html[data-abcm="light"] :is(.abbhf-mega__gh, .abbhf-mega__flat a) { border-color: rgba(21, 24, 28, .12); }
html[data-abcm="light"] :is(.abbhf-more, .abbhf-mega__gh a, .abbhf-mega__group a, .abbhf-mega__flat a):hover { color: #15181C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
html[data-abcm="light"] .abbhf-mega__card-img { background: var(--abcm-l1); }
html[data-abcm="light"] .abbhf-mega__card-meta { color: #6B6E75; }
html[data-abcm="light"] .abbhf-mega__card-arrow.abbhf-ico { background: #15181C; color: #FFFFFF; }

/* 6 · Drawers (SpaceX look, id-scoped like the source) ------------------- */
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex {
	--abbhf-text: #15181C;
	--abbhf-brand: #15181C;
	--abbhf-brand-tint: var(--abcm-l1);
	--abbhf-muted: #4A4F57;
	--sx-80: rgba(21, 24, 28, .84);
	--sx-60: rgba(21, 24, 28, .64);
	--sx-line: rgba(21, 24, 28, .12);
	background: var(--abcm-l2);
	color: var(--sx-80);
	color-scheme: light;
	scrollbar-color: rgba(21, 24, 28, .3) transparent;
}
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex::backdrop { background: rgba(21, 24, 28, .4); }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-drawer__head, .abbhf-x, .abbhf-dnav__title a, .abbhf-card) { color: #15181C; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-dnav__row:hover, .abbhf-dnav__view[data-abbhf-view="root"] .abbhf-dnav__row:hover, .abbhf-dnav__accbtn[aria-expanded="true"], .abbhf-dnav__row[aria-current="page"], .abbhf-dnav__back:hover, a:hover, .abbhf-dnav__title a:hover, .abbhf-card:hover .abbhf-card__more) { color: #15181C; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-lang__btn, .abbhf-btn--outline, .abbhf-social a) { border-color: rgba(21, 24, 28, .3); color: #15181C; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-lang__btn, .abbhf-btn--outline, .abbhf-social a):hover,
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-lang__btn[aria-expanded="true"] { border-color: #15181C; background: #15181C; color: #FFFFFF; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-btn--solid, .abbhf-sfield button) { background: #15181C; box-shadow: none; color: #FFFFFF; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :is(.abbhf-btn--solid, .abbhf-sfield button):hover { background: #2B3038; box-shadow: none; color: #FFFFFF; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-btn:hover .abbhf-ico { color: inherit; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-drawer__part--search { background: var(--abcm-l2); box-shadow: 0 -12px 24px rgba(255, 255, 255, .9); }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-sfield input { border-color: rgba(21, 24, 28, .3); background: var(--abcm-l1); color: #15181C; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-sfield input::placeholder { color: #6B6E75; }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-sfield input:focus { border-color: #15181C; background: var(--abcm-l2); }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex .abbhf-card__img { background: var(--abcm-l1); }
html[data-abcm="light"] :is(#abbhf-drawer-airbus, #abbhf-drawer-bmw).abbhf-drawer--spacex :focus-visible { outline-color: #15181C; }

/* 7 · Search panel (.abbhf-search--dark) ---------------------------------- */
html[data-abcm="light"] .abbhf-search.abbhf-search--dark {
	--abbhf-text: #15181C;
	--abbhf-brand: #15181C;
	--abbhf-brand-tint: var(--abcm-l1);
	background: var(--abcm-l2);
	color: #15181C;
	color-scheme: light;
}
html[data-abcm="light"] .abbhf-search--dark::backdrop { background: rgba(21, 24, 28, .4); }
html[data-abcm="light"] .abbhf-search--dark :is(.abbhf-x, .abbhf-search__h, .abbhf-search__ph) { color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__form input { border-color: rgba(21, 24, 28, .24); background: var(--abcm-l1); color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__form input::placeholder { color: #6B6E75; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__form input:focus { border-color: #15181C; background: var(--abcm-l2); }
html[data-abcm="light"] .abbhf-search.abbhf-search--dark .abbhf-search__form button { background: #15181C; color: #FFFFFF; }
html[data-abcm="light"] .abbhf-search.abbhf-search--dark .abbhf-search__form button:hover { background: #2B3038; color: #FFFFFF; box-shadow: none; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__results { border-color: #E6E6E3; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__results a { color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__results li + li a { border-top-color: #EFEFEC; }
html[data-abcm="light"] .abbhf-search.abbhf-search--dark .abbhf-search__results a:hover,
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__results a:focus-visible { background: var(--abcm-l1); box-shadow: inset 2px 0 0 #15181C; color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__results small { border-color: rgba(21, 24, 28, .24); color: #4A4F57; }
html[data-abcm="light"] .abbhf-search--dark :is(.abbhf-search__results p, .abbhf-sres__group) { color: #6B6E75; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-sres__thumb { background: var(--abcm-l2); outline: 1px solid rgba(21, 24, 28, .08); outline-offset: -1px; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__popular a { color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark .abbhf-search__popular a:hover { color: #15181C; text-decoration-color: #15181C; }
html[data-abcm="light"] .abbhf-search--dark :focus-visible { outline-color: #15181C; }

/* Footer: light like the page (setting "Footer" = follow, default); html[data-abcm-footer="dark"] keeps it dark. */
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech {
	--abbhf-footer-bg: var(--abcm-l2);
	--abbhf-muted: #4A4F57;
	--abbhf-brand: #15181C;
	color: #4A4F57;
	color-scheme: light;
}
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech.has-dots::before { background-image: radial-gradient(rgba(150, 118, 40, .28) 1px, transparent 1.4px); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-frow--top { border-bottom-color: rgba(21, 24, 28, .1); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-frow--bottom .abbhf-frow__in::before { border-top-color: rgba(21, 24, 28, .12); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer :is(.abbhf-ftitle, .abbhf-text, .abbhf-ctitle, .abbhf-contact__text a, .abbhf-news__title, .abbhf-totop, .abbhf-social a) { color: #15181C; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-social a { border-color: rgba(21, 24, 28, .3); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-social a:hover { border-color: #15181C; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer .abbhf-contact__list .abbhf-ico { color: #6B6E75; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer :is(.abbhf-links a, .abbhf-contact a, .abbhf-copy a, .abbhf-totop):hover { color: #15181C; text-decoration: underline; text-underline-offset: 4px; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer .is-acc.is-acc-on { border-bottom-color: rgba(21, 24, 28, .12); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer :is(.abbhf-btn--solid, .abbhf-btn--light) { background: #15181C; color: #FFFFFF; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer :is(.abbhf-btn--solid, .abbhf-btn--light):hover { background: #2B3038; color: #FFFFFF; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer .abbhf-btn:hover .abbhf-ico { color: inherit; }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-btn--outline { border-color: rgba(21, 24, 28, .3); }
html[data-abcm="light"]:not([data-abcm-footer="dark"]) .abbhf-footer.abbhf-pal-tech .abbhf-lang__btn { border-color: rgba(21, 24, 28, .3); }

/* 9 · The switch (component "color_mode", rendered by abcm) ------------------- */
.abbhf-hd .abcm-toggle { align-self: center; border-radius: 50%; }
.abbhf-hd .abcm-toggle .abcm-ico { width: 22px; height: 22px; }
@media (hover: hover) {
	.abbhf-hd .abcm-toggle:hover { background: transparent; color: var(--abbhf-brand); }
	html[data-abcm="light"] :is(.abbhf-hd:is(.is-scrolled, .is-mega, .is-blend, :not(.is-overlay)), body:not(:has(.abh-hero, .abp-hero--image)) .abbhf-hd) .abcm-toggle:hover { background: rgba(21, 24, 28, .06); color: #15181C; }
}
.abbhf-drawer .abcm-seg, .abbhf-footer .abcm-seg { width: 100%; }
.abbhf-drawer .abcm-seg__label, .abbhf-footer .abcm-seg__label { font-family: inherit; }
/* 320–359 px phones: one more 44 px button would overflow the BMW phone bar; tighten that zone only. */
@media (max-width: 359.98px) {
	.abbhf-bar--m .abbhf-zone--end:has(.abcm-toggle) { gap: 12px; }
}