/**
 * Ford's Garage accessibility CSS overrides.
 * Each block references audit issue numbers (see a11y/A11Y_LOG.md).
 */

/* #78 (2.2.2) — Pause/Play control for hero background video. */
.fg-a11y-has-video-toggle {
	position: relative;
}
.fg-a11y-video-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	cursor: pointer;
	line-height: 0;
}
.fg-a11y-video-toggle:hover {
	background: #000;
}
.fg-a11y-video-toggle svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* #112, #115 (1.4.1) — Links inside body copy were distinguished by colour only.
   Persistently underline inline text links (not buttons or image links). */
.elementor-widget-text-editor a:not(.elementor-button):not(:has(img, svg)),
.elementor-widget-theme-post-content a:not(.elementor-button):not(:has(img, svg)),
.elementor-widget-html p a:not(:has(img, svg)),
.elementor-widget-html li a:not(:has(img, svg)),
.elementor-field-type-html a,
.elementor-field-type-acceptance a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* #85 (2.4.1) — Skip link: off-screen until it receives keyboard focus. */
.fg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #000;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
}
.fg-skip-link:focus {
	left: 8px;
	top: 8px;
	outline: 3px solid #da9e41;
	outline-offset: 2px;
}

/* #20 — <main> wrapper: programmatic focus target only; keep the sticky header from covering it. */
.fg-main {
	display: block;
	scroll-margin-top: 120px;
}
.fg-main:focus {
	outline: none;
}

/* #84 — "Make My Location": <a role=button> swapped for <button>; neutralise UA button styles
   so the Elementor button styling (applied via .elementor-button) is unchanged. */
:where(button.fg-a11y-btn) {
	/* zero specificity: beats UA button defaults, loses to every Elementor rule */
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* #87 — "Use My Location" is now a <button>; keep its previous inline-link look. */
.fg-a11y-linkbtn {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.fg-a11y-linkbtn:hover,
.fg-a11y-linkbtn:focus {
	background: none;
	color: inherit;
}

/* #56 (1.3.1) — Bulk Gift Card benefits now a real <ul>; keep the centred "• " look. */
.fg-a11y-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fg-a11y-bullets li::before {
	content: "\2022\00a0";
	content: "\2022\00a0" / "";
}

/* #72 (1.3.1) — Franchise guiding principles now a real <ul>; keep paragraph look. */
.fg-a11y-plainlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fg-a11y-plainlist li {
	margin: 0;
	padding: 0;
}

/* #73 (1.3.1) — Retagged quote heading: reset UA blockquote margins. */
blockquote.elementor-heading-title {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
}
/* Neutralise Twenty Twenty-One list/blockquote typography so the converted markup
   keeps the Elementor widget's inherited type styles. */
.fg-a11y-bullets,
.fg-a11y-bullets li,
.fg-a11y-plainlist,
.fg-a11y-plainlist li {
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}
blockquote.elementor-heading-title {
	position: static;
	font-style: inherit;
}
blockquote.elementor-heading-title::before,
blockquote.elementor-heading-title::after {
	content: none;
	display: none;
}
/* The replaced <p> elements took line-height from the theme's p rule; match it. */
.fg-a11y-bullets li,
.fg-a11y-plainlist li {
	line-height: var(--global--line-height-body, 1.7);
}

/* #3 — Rebuilt Weglot switcher (<div><ul><li><a>): keep the original inline "EN / ES" look. */
.country-selector.fg-a11y-lang ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.country-selector.fg-a11y-lang .wgcurrent a {
	text-decoration: none;
}
.country-selector.fg-a11y-lang li.wgcurrent {
	/* match the old <label> box: it absorbed the "/" pseudo-element's negative margin */
	margin: 0 -10px 0 0;
	position: relative;
	top: -1.5px;
}

/* #41, #66 (3.3.2) — "Fields marked with an asterisk (*) are required." note added as the
   first (HTML) field of each form; colour matches that form's labels. */
.fg-a11y-req-note {
	margin: 0 0 4px;
	font-family: "Brandon Grotesque – Medium", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #0e0d0d;
}
.elementor-element-7b44cb5f .fg-a11y-req-note {
	color: #fff; /* Our Story form sits on a dark photo */
}

/* #40 (3.3.1) — Inline field error messages (added by fixFormErrors in fg-a11y.js). */
.fg-a11y-field-error {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	color: #8a0000; /* 7.33:1 on #E5DCB8, 10.09:1 on #FFF */
	font-family: "Brandon Grotesque – Medium", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.fg-a11y-field-error::before {
	content: "\26A0\00a0";
	content: "\26A0\00a0" / "";
}
.elementor-element-7b44cb5f .fg-a11y-field-error {
	color: #ffd6d6; /* Our Story form on dark photo: 15.8:1 on #000, 5.6:1 on #555 */
	text-shadow: 0 0 3px #000, 0 0 1px #000;
}
.elementor-form [aria-invalid="true"],
.new_form [aria-invalid="true"] {
	outline: 2px solid #8a0000;
	outline-offset: 0;
}
.elementor-element-7b44cb5f .elementor-form [aria-invalid="true"] {
	outline-color: #ffd6d6;
}

/* #94 — Buttons injected inside the Menus page view switch (.togl): inherit the tab styling. */
.fg-a11y-menu-toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	cursor: pointer;
	line-height: inherit;
}
.fg-a11y-menu-toggle:hover,
.fg-a11y-menu-toggle:focus {
	background: none;
	color: inherit;
}
/* Twenty Twenty-One styles every button via button:not(:hover):not(:active):not(.has-background)
   (specificity 0,3,1); these injected buttons must look like the text they replaced. */
.fg-a11y-menu-toggle,
.fg-a11y-linkbtn {
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
	border: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	box-shadow: none !important;
}
.fg-a11y-linkbtn {
	color: #fff !important; /* matches the original <a id="usemyloca"> computed colour */
}

/* M1 — #79, #86, #88, #92, #96, #97, #106, #111 (2.4.7 / 1.4.11)
   Global keyboard focus indicator. Two-tone so it reaches >= 3:1 on every background the
   site uses (black/navy headers & popups, tan #E5DCB8 panels, white, photos):
   3px black outline, offset 2px, with the offset gap filled white via box-shadow.
   On dark backgrounds the white ring provides the contrast (21:1 vs #000), on light ones
   the black ring does (14.6:1 vs #E5DCB8). !important overrides plugin/snippet
   "outline: none" rules. :focus-visible = keyboard focus only, so mouse clicks are unchanged. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
iframe:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}
/* Form fields: keep the ring tight to the field edge. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-offset: 0 !important;
	box-shadow: 0 0 0 5px #fff !important;
}
/* Programmatic focus targets (skip-link destination, dialogs) don't need a ring. */
#main:focus-visible,
.fg-main:focus-visible,
[role="dialog"]:focus-visible,
.dialog-widget-content:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
/* Elements inside overflow:hidden carousels/listings: draw the ring inside so it isn't clipped. */
.slick-slide a:focus-visible,
.jet-carousel a:focus-visible,
.jet-listing-grid__item a:focus-visible,
.sp-slide a:focus-visible {
	outline-offset: -5px !important;
	box-shadow: inset 0 0 0 7px #fff !important;
}

/* #102 (1.4.11) — Home "Ford's garage gear" carousel: the Previous arrow is a black icon on a
   transparent box over the navy section (#263141) = 1.5:1. Make its icon white (12.9:1). */
.elementor-element-08711ad .jet-arrow.prev-arrow svg,
.elementor-element-08711ad .jet-arrow.prev-arrow:hover svg {
	fill: #fff;
}

/* M3 — carousel image links are inline <a> around a block image (0-height box), so the
   focus ring had nothing to draw on. Make them block so the ring wraps the image. */
.jet-carousel__item-link {
	display: block;
}

/* ===== M4 — colour contrast (every change logged in A11Y_LOG.md with old/new + ratios) ===== */

/* #113 (1.4.3) Allergen Guide: "—" (no allergen) markers #C3C8D0 on #FFF = 1.68:1 -> #6B7280 = 4.83:1;
   category counts #5C6470 on #E5DCB8 = 4.25:1 -> #4B5563 = 5.49:1. */
.allergen-guide-shell .empty {
	color: #6b7280;
}
.allergen-guide-shell .category-count {
	color: #4b5563;
}
/* #114 (1.4.11) Allergen search field border rgba(38,49,65,.2) (~1.4:1) -> #767676
   (4.54:1 vs the white field, 4.06:1 vs the #F6F2E7 panel). */
.allergen-guide-shell #itemSearch {
	border-color: #767676;
}

/* #101 (1.4.3) External-link disclaimer: "fordsgarageusa.com" link #B8860B on #FFF = 3.25:1
   -> #805819 = 6.31:1 (same gold hue, darker). Dialog markup/behaviour untouched. */
#fg-exit-modal p a {
	color: #805819;
}

/* #116 (1.4.11) Franchise Info Request (Salesforce HTML form): white fields on tan had no
   visible boundary (#FFF vs #E5DCB8 = 1.3:1). Add a #767676 border (4.54:1 vs white, 3.3:1 vs tan). */
.new_form .input_row input:not([type="checkbox"]):not([type="hidden"]),
.new_form .input_row select,
.new_form .input_row textarea {
	border: 1px solid #767676;
}

/* Craft Beer List (TapHunter third-party embed, not in the audit but failing on an in-scope page):
   "FOLLOW US" #83B543 on #716F66 = 1.68:1 -> #FFF = 5.04:1;
   "Updated …" #FFF on #DA9E41 = 2.35:1 -> #0E0D0D = 8.27:1. */
#taphunter a.th-follow-button.th-follow-button {
	color: #fff !important; /* on #414141 = 11.2:1 */
}
#taphunter .updatedate {
	color: #0e0d0d !important;
}

/* ===== L3 — Reflow (1.4.10 at 320x256), zoom (1.4.4), text spacing (1.4.12) ===== */

/* #98/#100: narrow viewports (400% zoom of 1280 = 320 CSS px): no horizontal scrolling. */
@media (max-width: 480px) {
	/* Long URLs / e-mail addresses in body copy (Privacy Policy, T&C pages). */
	.elementor-widget-text-editor,
	.elementor-widget-theme-post-content,
	.elementor-widget-html p,
	.elementor-heading-title {
		overflow-wrap: anywhere;
	}
	.elementor-widget-image img {
		max-width: 100% !important;
		height: auto;
	}
}

/* Google reCAPTCHA is a fixed 304px iframe; scale it down only where it would overflow. */
@media (max-width: 360px) {
	/* Find Restaurant / Orlando LIST|MAP switch: min-width calc(50% - 5px) + padding overflowed. */
	#map-toggle,
	#map-toggle .togl {
		box-sizing: border-box;
		max-width: 100%;
	}
	.elementor-g-recaptcha,
	.new_form .g-recaptcha,
	#html_element {
		transform: scale(0.86);
		transform-origin: 0 0;
		max-width: 100%;
	}
}

/* #98/#100: short viewports (e.g. 1280x1024 at 400% = 320x256). Sticky/fixed bars would
   cover most of the screen, and popups/menus taller than the viewport could not scroll. */
@media (max-height: 500px) {
	.elementor-sticky--active {
		position: relative !important;
		top: auto !important;
	}
	.elementor-sticky__spacer {
		display: none !important;
	}
	.allergen-guide-shell .panel.controls {
		position: static !important;
	}
}
/* Elementor popups and the full-screen mobile menu scroll internally at any height. */
.elementor-popup-modal .dialog-widget-content {
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
}
.fsmenu.show-fsm {
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
}
@media (max-width: 480px) {
	/* Private Event Menu: 100%-wide container + 10px side margins overflowed by 20px. */
	.elementor-element-2add9170 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}
@media (max-height: 500px) {
	/* Collapsed mobile menu bar (.fsmenu: VIEW MENU / ORDER NOW) is fixed to the bottom;
	   on short screens let it flow instead of covering a quarter of the viewport. */
	.fsmenu:not(.show-fsm) {
		position: static !important;
	}
}
@media (max-height: 500px) {
	/* Home: mobile VIEW MENU / ORDER NOW bar (section 3ec9598e) fixed to the bottom. */
	.elementor-element-3ec9598e {
		position: static !important;
	}
}

/* ===== L4 — heading outline (#16, #38, #51, #57, #63, #67, #69, #70, #71) =====
   Text that was promoted to a heading keeps the look of the paragraph it replaced. */
:is(h1, h2, h3, h4, h5, h6).fg-a11y-texthead {
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none;
}
/* Text that was demoted from h4/h5/h6 keeps the theme heading look it had. */
:is(p, h2).fg-a11y-was-h4,
:is(p, h2).fg-a11y-was-h5,
p.fg-a11y-was-h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	text-transform: none !important;
}
p.fg-a11y-was-h4 { font-size: 24px !important; letter-spacing: normal !important; }
:is(p, h2).fg-a11y-was-h5 { font-size: 18px !important; letter-spacing: 0.05em !important; }
p.fg-a11y-was-h6 { font-size: 16px !important; letter-spacing: 0.05em !important; }
/* Headings that replaced a <p> keep the theme's paragraph line-height. */
:is(h2, h3, h4).fg-a11y-texthead--p { line-height: 1.7 !important; }
/* Retagged heading widgets that had no font size of their own and relied on the theme's hN font-size
   (line-height/letter-spacing come from Elementor's .elementor-heading-title, which outranks the theme). */
:is(.elementor-element-73c58cba, .elementor-element-24f13715, .elementor-element-823dc3b) .elementor-heading-title { /* was h3: "Thirsty? Upgrade Your Drink!" */
	font-size: var(--heading--font-size-h3);
}
.elementor-element-6da70ea .elementor-heading-title { /* was h2: Franchise "Expert Support Team" */
	font-size: var(--heading--font-size-h2);
}
/* #67 Salesforce form: SMS headings stay run-in with their paragraph, as before. */
.sms_disclaimer h3.fg-a11y-texthead { display: inline; }
.sms_disclaimer h3.fg-a11y-texthead + p { display: inline; }
.sms_disclaimer h3.fg-a11y-texthead + p::after { content: ""; display: block; margin-bottom: 0.5em; }
/* #64 "MORE HAPPENINGS" is now an h2; the post template's container CSS (20ac9e3 h2 { center } on mobile)
   is meant for article body h2s — keep this title aligned by its own widget setting. */
.elementor-element-e723ddf h2.elementor-heading-title { text-align: inherit !important; }
/* #67 keep the space between the run-in SMS heading and its text. */
.sms_disclaimer h3.fg-a11y-texthead { margin-right: 0.25em !important; }

/* #68 Careers "Team Member Benefits" (template 1164): one 6-item list, still shown as two columns of 3 on desktop. */
@media (min-width: 768px) {
	.elementor-element-409263b0 ul {
		columns: 2;
		column-gap: 80px;
	}
	.elementor-element-409263b0 li { break-inside: avoid; }
}