/* ==========================================================================
   Bronx Auto Experts — component styles
   Tokens (colors, fonts, sizes) come from theme.json presets.
   Loaded on the front end and inside the block editor.
   ========================================================================== */

:root {
	--rae-navy: var(--wp--preset--color--navy);
	--rae-navy-2: var(--wp--preset--color--navy-2);
	--rae-cyan: var(--wp--preset--color--cyan);
	--rae-cyan-2: var(--wp--preset--color--cyan-2);
	--rae-cream: var(--wp--preset--color--cream);
	--rae-cream-2: var(--wp--preset--color--cream-2);
	--rae-muted: var(--wp--custom--muted);
	--rae-muted-dark: var(--wp--custom--muted-dark);
	--rae-border: var(--wp--custom--border-dark);
	--rae-border-light: var(--wp--custom--border-light);
	--rae-display: var(--wp--preset--font-family--display);
	--rae-header-h: var(--wp--custom--header-height);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rae-header-h) + 8px); }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
.wp-site-blocks > * { margin-block-start: 0; }
mark.has-inline-color { background-color: transparent; }
/* Full-width sections sit flush against each other (no block gap between them). */
:root .wp-block-post-content > .alignfull { margin-block: 0; }
:root sup { line-height: 0; }
:root sup a { color: var(--rae-cyan); }

/* ── Section style variations (Group → Styles) ───────────────────────── */
.is-style-section-dark { background: var(--rae-navy); color: #fff; }
.is-style-section-dark-2 { background: var(--rae-navy-2); color: #fff; }
.is-style-section-light { background: var(--rae-cream); color: var(--rae-navy); }
.is-style-section-light :where(h1, h2, h3, h4) { color: var(--rae-navy); }
.is-style-section-light .has-cyan-color { color: var(--rae-cyan-2) !important; }

.rae-section { padding-block: var(--wp--preset--spacing--section); }
.rae-section--compact { padding-block: 40px; }
.rae-border-top { border-top: 1px solid var(--rae-border); }
.rae-border-bottom { border-bottom: 1px solid var(--rae-border); }

/* Max-width helpers for headings / ledes (left-aligned inside constrained layouts) */
:root .rae-mw-sm { max-width: 580px; }
:root .rae-mw-md { max-width: 680px; }
:root .rae-mw-lg { max-width: 740px; }
:root .is-layout-constrained > :is(.rae-mw-sm, .rae-mw-md, .rae-mw-lg) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ── Typography helpers ───────────────────────────────────────────────── */
:root .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rae-cyan);
	line-height: 1.4;
}
.is-style-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex-shrink: 0; }
.is-style-section-light .is-style-eyebrow { color: var(--rae-navy); }

:root .is-style-lede + .is-style-lede { margin-block-start: 1rem; }
:root .is-style-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.7; color: var(--rae-muted); }
.is-style-section-light .is-style-lede { color: var(--rae-muted-dark); }
.is-style-lede em, .rae-accent em { font-style: italic; color: var(--rae-cyan); }
.is-style-section-light .is-style-lede em { color: var(--rae-cyan-2); }
.is-style-lede a { color: var(--rae-cyan); font-weight: 700; }

:root .rae-kicker {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rae-muted);
}
:root .rae-note { font-size: .75rem; color: var(--rae-muted); margin-top: 2rem; }
:root .rae-note a { color: var(--rae-cyan); }

/* Space between headings and what follows */
:root :where(.rae-section) .wp-block-heading { margin-block-end: 0; }
:root :where(.rae-section) .is-style-eyebrow + .wp-block-heading { margin-block-start: 1.25rem; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
:root .wp-block-buttons { gap: 12px; }
:root .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--rae-cyan);
	color: var(--rae-cyan);
	background: transparent;
}
.wp-block-button__link { transition: background-color .2s, border-color .2s, color .2s; }

/* ── Header ───────────────────────────────────────────────────────────── */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.rae-nav {
	background: rgba(11, 12, 20, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rae-border);
}
:root .rae-nav__inner { min-height: var(--rae-header-h); gap: 24px; }
:root .rae-wordmark {
	font-family: var(--wp--preset--font-family--wordmark);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	margin: 0;
}
.rae-wordmark a:hover { color: inherit; }
.rae-nav__links { display: none !important; }
@media (min-width: 1080px) { .rae-nav__links { display: flex !important; } }
:root .rae-nav__links .wp-block-navigation__container { gap: 24px; flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 1200px) { :root .rae-nav__links .wp-block-navigation__container { gap: 32px; } }
.rae-nav__links a { color: rgba(255, 255, 255, .7); transition: color .2s; }
.rae-nav__links a:hover { color: var(--rae-cyan); }
:root .rae-nav .wp-block-button__link { font-size: .8rem; padding: 10px 20px; letter-spacing: .04em; white-space: nowrap; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.rae-hero { padding-block: clamp(80px, 12vw, 140px); position: relative; overflow: hidden; border-bottom: 1px solid var(--rae-border); }
.rae-hero::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(104, 191, 111, .07), transparent 65%);
	pointer-events: none;
}
.rae-hero > * { position: relative; z-index: 1; }
:root .rae-hero h1 { margin-block: 20px 28px; }
.rae-hero h1 em { opacity: .75; }
.rae-hero .is-style-lede { max-width: 560px; }
:root .rae-hero .wp-block-buttons { margin-top: 36px; }

/* Numbered line list (hero disciplines) */
:root .is-style-lines {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: rae-line;
	border-top: 1px solid var(--rae-border);
}
.is-style-lines li {
	counter-increment: rae-line;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--rae-border);
	font-family: var(--rae-display);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.is-style-lines li::before {
	content: counter(rae-line, decimal-leading-zero);
	font-size: .7rem;
	color: var(--rae-cyan);
	letter-spacing: .12em;
	min-width: 28px;
}

/* ── Ticker (List → Ticker style; duplicated server-side for a seamless loop) ── */
:root .rae-ticker { background: var(--rae-cyan); overflow: hidden; padding: 14px 0; margin-block: 0; }
.rae-ticker__track { display: flex; width: max-content; animation: rae-ticker 28s linear infinite; }
:root .is-style-ticker { display: flex; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.is-style-ticker li {
	margin: 0;
	padding: 0 14px 0 28px;
	font-family: var(--rae-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rae-navy);
	line-height: 1.6;
}
.is-style-ticker li::after { content: "·"; padding-left: 28px; color: rgba(11, 12, 20, .4); }
@keyframes rae-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rae-ticker__track { animation: none; } }
.editor-styles-wrapper .rae-ticker__track, .editor-styles-wrapper .is-style-ticker { flex-wrap: wrap; animation: none; }

/* ── Hairline tile grids ─────────────────────────────────────────────── */
:root .rae-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--rae-border);
	border: 1px solid var(--rae-border);
	margin-block-start: 3rem;
}
:root .rae-tiles > * { margin: 0; }
.is-style-section-light .rae-tiles { background: var(--rae-border-light); border-color: var(--rae-border-light); }
:root .rae-tiles--2, :root .rae-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { :root .rae-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { :root .rae-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { :root .rae-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:root .rae-tiles--flush { margin-block-start: 0; }
:root .rae-tiles--tight { margin-block-start: 2rem; }

/* Shared tile typography: reset flow spacing inside tiles, then set it explicitly */
.rae-tiles .wp-block-group > * { margin-block: 0; }
.rae-tiles .wp-block-group > h3 { margin-bottom: 10px; }
:root .rae-num {
	display: block;
	font-family: var(--rae-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rae-cyan);
	margin-bottom: 12px;
}

/* Stats */
.rae-stat { background: var(--rae-navy-2); padding: 40px 28px; text-align: center; }
:root .rae-stat__num {
	font-family: var(--rae-display);
	font-weight: 900;
	font-size: 2.75rem;
	color: var(--rae-cyan);
	line-height: 1;
	letter-spacing: -.01em;
}
:root .rae-stat__label {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rae-muted);
	margin-top: 8px;
	line-height: 1.4;
}

/* Service cards */
.rae-card { background: var(--rae-navy); padding: 36px 32px; transition: background-color .2s; }
.rae-card:hover { background: var(--rae-navy-2); }
.rae-card p, .rae-step p, .rae-pillar p, .rae-feature p { font-size: .9rem; color: var(--rae-muted); line-height: 1.6; }

/* coreEdge features */
.rae-feature { background: var(--rae-navy-2); padding: 20px 22px; }
:root .rae-feature h3 { font-size: 1rem; letter-spacing: .06em; margin-bottom: 6px; }
.rae-feature p { font-size: .85rem; }

/* One-stop pillars */
.rae-pillar { background: var(--rae-cream); padding: 32px 24px; border-left: 3px solid var(--rae-cyan-2); }
:root .rae-pillar h3 { font-size: 1.1rem; letter-spacing: .06em; margin-bottom: 8px; }
.rae-pillar p { font-size: .85rem; color: var(--rae-muted-dark); line-height: 1.5; }
:root .rae-callout {
	margin-top: 24px;
	padding: 24px 28px;
	border-left: 3px solid var(--rae-cyan-2);
	background: var(--rae-cream-2);
	font-size: .9rem;
	color: var(--rae-muted-dark);
	line-height: 1.6;
}
.rae-callout strong { color: var(--rae-navy); }

/* Process steps */
.rae-step { background: var(--rae-navy); padding: 36px 28px; border-top: 3px solid var(--rae-cyan); }
:root .rae-step h3 { font-size: 1.25rem; }
.rae-step p { font-size: .85rem; }
:root .rae-step .rae-num { font-size: .7rem; letter-spacing: .16em; margin-bottom: 10px; }

/* Industries (List → Tile list style) */
:root .is-style-tile-list { list-style: none; padding: 0; }
.is-style-tile-list li {
	margin: 0;
	background: var(--rae-navy-2);
	padding: 28px 24px;
	font-family: var(--rae-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	transition: background-color .2s, color .2s;
}
.is-style-tile-list li:hover { background: var(--rae-cyan); color: var(--rae-navy); }

/* ── Statement list (We Believe) ─────────────────────────────────────── */
:root .is-style-statements { list-style: none; padding: 0; margin-block-start: 3rem; border-top: 1px solid var(--rae-border); }
.is-style-statements li {
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--rae-border);
	font-family: var(--rae-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 3vw, 2rem);
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ── Media slots ─────────────────────────────────────────────────────── */
:root .rae-media { margin: 0; border: 1px solid var(--rae-border); background: var(--rae-navy-2); overflow: hidden; }
.rae-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.rae-media figcaption { margin: 0; padding: 10px 16px; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .5); }

/* ── FAQ (Details → FAQ style) ───────────────────────────────────────── */
:root .rae-faq-list { margin-block-start: 3rem; }
:root .is-style-faq { border-bottom: 1px solid var(--rae-border); margin: 0; }
.is-style-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--rae-display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.25;
}
.is-style-faq summary::-webkit-details-marker { display: none; }
.is-style-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1;
	color: var(--rae-cyan);
	transition: transform .25s;
	flex-shrink: 0;
}
.is-style-faq[open] summary::after { transform: rotate(45deg); }
.is-style-faq summary:focus-visible { outline: 2px solid var(--rae-cyan); outline-offset: 4px; }
:root .is-style-faq > :not(summary) { margin: 0; padding: 0 0 24px; font-size: .95rem; color: var(--rae-muted); line-height: 1.7; max-width: 720px; }

/* ── Quote form ──────────────────────────────────────────────────────── */
:root .rae-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 48px;
	background: var(--rae-navy);
	color: #fff;
	padding: clamp(32px, 5vw, 56px);
	border: 1px solid var(--rae-border);
}
@media (min-width: 600px) { :root .rae-form { grid-template-columns: 1fr 1fr; } }
.rae-form__field label {
	display: block;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rae-muted);
	margin-bottom: 8px;
}
.rae-form__field input,
.rae-form__field select,
.rae-form__field textarea {
	width: 100%;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--rae-border);
	color: #fff;
	padding: 13px 16px;
	font: inherit;
	font-size: .9rem;
	border-radius: 3px;
	outline: none;
	transition: border-color .2s;
	-webkit-appearance: none;
	appearance: none;
}
.rae-form__field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--rae-cyan) 50%), linear-gradient(135deg, var(--rae-cyan) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
.rae-form__field input:focus,
.rae-form__field select:focus,
.rae-form__field textarea:focus { border-color: var(--rae-cyan); }
.rae-form__field select option { background: var(--rae-navy); }
.rae-form__field textarea { resize: vertical; min-height: 96px; }
.rae-form__field--full, .rae-form__submit, .rae-form__msg { grid-column: 1 / -1; }
.rae-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rae-form__submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.rae-form__submit button {
	background: var(--rae-cyan);
	color: var(--rae-navy);
	font: inherit;
	font-weight: 700;
	font-size: .9rem;
	padding: 15px 32px;
	border-radius: 3px;
	border: 0;
	cursor: pointer;
	letter-spacing: .04em;
	transition: background-color .2s;
}
.rae-form__submit button:hover, .rae-form__submit button:focus-visible { background: var(--rae-cyan-2); }
.rae-form__submit p { margin: 0; font-size: .8rem; color: var(--rae-muted); }
.rae-form__submit a { color: var(--rae-cyan); font-weight: 700; }
.rae-form__msg { margin: 0; padding: 14px 16px; text-align: center; font-weight: 700; border: 1px solid currentColor; border-radius: 3px; }
.rae-form__msg--ok { color: var(--rae-cyan); }
.rae-form__msg--err { color: #ff8a8a; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.rae-footer { background: var(--rae-navy-2); border-top: 1px solid var(--rae-border); padding-block: clamp(60px, 8vw, 100px) 40px; color: #fff; }
:root .rae-footer__grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
:root .rae-footer__grid > * { margin: 0; }
@media (min-width: 700px) { :root .rae-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } }
:root .rae-footer__heading {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rae-muted);
	margin: 0 0 16px;
}
.rae-footer :where(p, li) { font-size: .9rem; color: var(--rae-muted); }
:root .rae-footer .wp-block-group > p:not(.rae-footer__heading):not(.rae-wordmark) { margin-block: 0 10px; }
:root .rae-footer ul { list-style: none; padding: 0; margin: 0; }
.rae-footer li { margin: 0 0 10px; }
.rae-footer a { transition: color .2s; }
.rae-footer a:hover { color: var(--rae-cyan); }
:root .rae-footer .rae-wordmark { font-size: 1.2rem; color: #fff; margin-bottom: 12px; }
:root .rae-footer__about { max-width: 260px; font-size: .85rem; line-height: 1.6; }
:root .rae-footer__bar {
	margin-top: 60px;
	padding-top: 24px;
	border-top: 1px solid var(--rae-border);
	gap: 12px;
}
:root .rae-footer__bar p { margin: 0; font-size: .75rem; }
.rae-footer__bar a { color: var(--rae-cyan); }

/* ── Generic pages / posts ───────────────────────────────────────────── */
.rae-page { padding-block: clamp(60px, 8vw, 100px); }
.rae-page .wp-block-post-content a { color: var(--rae-cyan); text-decoration: underline; }
.rae-page :where(.wp-block-post-content) :where(p, li) { color: rgba(255, 255, 255, .8); }

/* Editor: keep the page-title field readable (it isn't shown on landing pages) */
.editor-styles-wrapper .editor-post-title.wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); }

/* Accessibility */
:focus-visible { outline: 2px solid var(--rae-cyan); outline-offset: 2px; }
.screen-reader-text:focus { background: var(--rae-cyan); color: var(--rae-navy); }

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
	:root .rae-wordmark { font-size: 1rem; letter-spacing: .04em; }
	:root .rae-nav__inner { gap: 12px; }
	:root .rae-nav .wp-block-button__link { font-size: .72rem; padding: 9px 12px; }
	.rae-stat { padding: 32px 12px; }
	:root .rae-stat__num { font-size: 2.25rem; }
	.rae-card, .rae-step { padding: 28px 22px; }
	.rae-pillar, .rae-feature { padding: 24px 16px; }
	.is-style-tile-list li { padding: 22px 16px; }
}
@media (max-width: 380px) {
	:root .rae-wordmark { font-size: .9rem; }
	:root .rae-nav .wp-block-button__link { padding: 8px 10px; }
}