/**
 * Ford Lebanon 2027 — global shell (Phase 2)
 * Styles against the tokens in tokens.css. Scope: typography, links, buttons,
 * header (utility bar, nav, CTAs), footer. Page sections come in Phases 3–5.
 */

/* ---------- Typography ---------- */

body {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
}

/* !important matches custom-fonts.css, which forces FordF1TC-Regular on all
   headings; the design wants real bold/semibold cuts. Same specificity,
   later in the cascade — these win. */
h1, h2, .h1, .h2 { font-family: var(--font-bold) !important; color: var(--c-text); }
h3, h4, .h3, .h4, .heading-font { font-family: var(--font-semibold) !important; color: var(--c-text); }
h5, h6, .h5 { font-family: var(--font-medium) !important; color: var(--c-text); }

a { color: var(--c-link); }
a:hover, a:focus { color: var(--c-primary); }

/* ---------- Buttons (global recolor over the Motors skin) ---------- */

.button,
input[type="submit"],
.wpcf7-submit,
.stm-button,
.add-listing-btn {
	font-family: var(--font-semibold);
	background-color: var(--c-cta);
	border-color: var(--c-cta);
	color: var(--ford-white);
	border-radius: 4px;
}

.button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.stm-button:hover,
.add-listing-btn:hover {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--ford-white);
}

/* Ford-shell buttons (header CTAs and reusable) */
.flb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	border-radius: 999px;
	font-family: var(--font-semibold);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.flb-btn--primary { background: var(--c-cta); color: var(--ford-white); }
.flb-btn--primary:hover, .flb-btn--primary:focus { background: var(--c-primary); color: var(--ford-white); }

.flb-btn--dark { background: var(--c-primary); color: var(--ford-white); }
.flb-btn--dark:hover, .flb-btn--dark:focus { background: var(--c-cta); color: var(--ford-white); }

/* ---------- Utility bar (design: Ford Blue band above the nav) ---------- */

.flb-utility-bar {
	background: var(--ford-blue);
	color: var(--ford-white);
}

.flb-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.flb-utility-bar a {
	color: var(--ford-white);
	text-decoration: none;
	white-space: nowrap;
}

.flb-utility-bar a:hover { color: var(--c-cta); }

@media (max-width: 767px) {
	.flb-utility-bar__tagline { display: none; }
	.flb-utility-bar__inner { justify-content: center; }
}

/* ---------- Header / navigation (white bar per design) ---------- */

/* !important: the theme sets a dark glass background on this bar from inside
   media queries (and a skin color on top); the design's nav is always white. */
.header-main-ev_dealer,
.stm-layout-header-ev_dealer .header-main,
.stm-layout-header-ev_dealer .header-main.stm-fixed,
#header.transparent-header .header-main-ev_dealer {
	background: var(--ford-white) !important;
	box-shadow: 0 1px 0 rgba(0, 20, 46, .10);
}

.header-main-ev_dealer .main-menu > .header-menu > li > a {
	font-family: var(--font-semibold) !important;
	font-size: 15px;
	color: var(--c-band-dark);
}

.header-main-ev_dealer .main-menu > .header-menu > li > a:hover,
.header-main-ev_dealer .main-menu > .header-menu > li.current-menu-item > a,
.header-main-ev_dealer .main-menu > .header-menu > li.current-menu-ancestor > a,
/* the theme skin paints the FIRST item white when it is the current page
   (li.current-menu-item:first-child) — outranks the rules above */
.stm-layout-header-ev_dealer .header-main-ev_dealer .main-menu > .header-menu > li.current-menu-item:first-child > a,
.stm-layout-header-ev_dealer .header-main-ev_dealer .main-menu > .header-menu > li.current-menu-ancestor:first-child > a,
/* …and paints ANY current page's item white via an #header-boosted
   li.current_page_item rule (seen on /service/, /showrooms/) — match its
   specificity, win on cascade order */
.stm-layout-header-ev_dealer #header .header-main .stm-header-right .main-menu .header-menu > li.current_page_item > a,
.stm-layout-header-ev_dealer #header .header-main .stm-header-right .main-menu .header-menu > li.current-menu-item > a,
.stm-layout-header-ev_dealer #header .header-main .stm-header-right .main-menu .header-menu > li.current-menu-ancestor > a {
	color: var(--c-cta);
}

/* phone moved into the utility bar */
.header-main-ev_dealer .head-phone-wrap { display: none; }

/* header CTAs */
.flb-header-ctas {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: 18px;
}

@media (max-width: 1024px) {
	.flb-header-ctas { display: none; } /* mobile keeps the burger menu */
}

/* megamenu panel titles — clickable category links (flb-nav.js) */
.header-menu .sub-menu .menu-title {
	font-family: var(--font-semibold);
	color: var(--c-band-dark);
}
.header-menu .sub-menu .menu-title .flb-mm-link {
	color: var(--c-band-dark);
	text-decoration: none;
	cursor: pointer;
}
.header-menu .sub-menu .menu-title .flb-mm-link:hover { color: var(--c-cta); }
.header-menu .sub-menu .menu-title .flb-mm-arrow {
	font-size: .85em;
	color: var(--c-cta);
	opacity: 0;
	transition: opacity .15s ease;
}
.header-menu .sub-menu .menu-title .flb-mm-link:hover .flb-mm-arrow { opacity: 1; }

/* megamenu vehicle cards: same 16/9 grey tile as the category pages */
#header .sub-menu .wpb_single_image .vc_single_image-wrapper {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--c-band, #F0F0F0);
	overflow: hidden;
}
#header .sub-menu .wpb_single_image .vc_single_image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ANB corporate logo in the menu is a white SVG — invisible on the new
   white nav; render it dark to match the links. */
.header-main-ev_dealer .menu-anb-logo img { filter: invert(1) opacity(.8); }

/* ---------- mobile burger menu (Motors' own, restyled for the white header) ---------- */

/* the theme paints the three bars white (old dark header) — invisible on white */
.header-main-ev_dealer .mobile-menu-trigger span { background: var(--c-band-dark) !important; }

/* panel: Ford Blue instead of the Motors skin blue */
.header-main-ev_dealer .mobile-menu-holder { background: var(--c-primary) !important; }
.header-main-ev_dealer .mobile-menu-holder a { color: var(--ford-white); }

/* inside the blue panel the ANB logo should stay white */
.header-main-ev_dealer .mobile-menu-holder .menu-anb-logo img { filter: none; }

/* ---------- Footer (Twilight band) ---------- */

#footer,
#footer #footer-main,     /* theme skin paints its own blue on this wrapper */
#footer #footer-copyright { /* and near-black on the copyright strip */
	background-color: var(--c-band-dark);
	color: rgba(255, 255, 255, .85);
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .heading-font {
	color: var(--ford-white);
}

#footer a { color: rgba(255, 255, 255, .85); }
#footer a:hover { color: var(--c-cta); }

#footer .footer-copyright {
	color: rgba(255, 255, 255, .55);
}


/* ---------- full-width shell: utility bar, nav and footer span the screen ---------- */

.flb-utility-bar .container,
.header-main-ev_dealer .container,
#footer .container {
	width: 100%;
	max-width: 100%;
	padding-left: clamp(18px, 2.78vw, 48px);
	padding-right: clamp(18px, 2.78vw, 48px);
}