/**
 * Global helper classes shared across patterns/templates. Anything a block
 * can already do through Global Styles/theme.json is left out of here on
 * purpose — this file only covers the handful of things block supports
 * can't express (the eyebrow label treatment, the fleet card component,
 * the radial value diagram, and the fleet filter bar).
 *
 * Apply these via a block's "Additional CSS Class(es)" field in the
 * Advanced panel — no template editing required.
 */

/* Root horizontal gutter (theme.json settings > styles.spacing.padding).
   WordPress's useRootPaddingAwareAlignments only ever auto-applies the
   TOP/BOTTOM half of this to .wp-site-blocks; the LEFT/RIGHT half is meant
   to be consumed via a ".has-global-padding" class WordPress adds to
   specific wrappers — which never happens for front-page.html's patterns
   (inserted directly with no <main> wrapper at all) and isn't reliable on
   other templates either, which is why sections were touching the screen
   edges on mobile. Apply it directly here instead, reusing WP's own CSS
   variables so it stays in sync with theme.json. Full-bleed (alignfull)
   sections get a matching negative margin so their background still
   reaches the edges — only their content stays inset (via their own,
   separate padding, e.g. a Cover block's inner container). */
.wp-site-blocks > :not(header):not(footer):not(.alignfull) {
	padding-left: var(--wp--style--root--padding-left, 0px);
	padding-right: var(--wp--style--root--padding-right, 0px);
	box-sizing: border-box;
}
/* .alignfull is deliberately excluded and left untouched: Cover banners
   (and anything else using layout:"constrained" internally) already
   consume these same padding variables themselves to inset their own
   content while their background bleeds full-width. Padding this element
   AND giving it a matching negative margin nets to zero shift — but it
   also cancels that already-correct internal inset, which is exactly what
   happened here: it pushed every Cover's heading/eyebrow/etc. flush to the
   edge on desktop. Full-width elements are simply left alone. */

/* Eyebrow label — add class "etc-eyebrow" to any Paragraph above a heading.
   A short accent rule renders before the label automatically. Add the
   modifier "etc-eyebrow--on-dark" when it sits on a dark/photo background. */
.etc-eyebrow {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	color: var(--wp--preset--color--primary-accessible);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.5rem;
}
.etc-eyebrow.has-text-align-center { justify-content: center; }
.etc-eyebrow.has-text-align-right { justify-content: flex-end; }
.etc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	background: currentColor;
	flex: none;
}
.etc-eyebrow--on-dark {
	color: var(--wp--preset--color--primary) !important;
}

/* Fleet card — used by both the server-rendered Query Loop card template
   (templates/archive-vehicle.html) and the AJAX filter response
   (inc/fleet-filters.php etc_render_vehicle_card), so markup must match. */
.etc-vehicle-card {
	display: block;
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.etc-vehicle-card:hover {
	box-shadow: 0 16px 40px rgba(31, 42, 54, 0.12);
	transform: translateY(-2px);
}
.etc-vehicle-card__media {
	position: relative;
}
.etc-vehicle-card__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
.etc-vehicle-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--base);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.3em 0.8em;
	border-radius: 999px;
}
.etc-vehicle-card__body { padding: 1.25rem; }
.etc-vehicle-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: var(--wp--preset--color--heading);
}
.etc-vehicle-card__stats { display: flex; gap: 1rem; }
.etc-vehicle-card__stat {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--body);
}
.etc-vehicle-card__stat .dashicons {
	color: var(--wp--preset--color--primary-accessible);
	font-size: 16px;
	width: 16px;
	height: 16px;
}
.etc-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var(--wp--preset--color--body);
}

/* Active service link in the single-service sidebar (frontend.js adds .is-current). */
[data-etc-service-nav] a.is-current {
	color: var(--wp--preset--color--primary-accessible);
	font-weight: 700;
}

/* Fleet filter bar (templates/archive-vehicle.html). */
.etc-fleet-filter {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	background: var(--wp--preset--color--base-gray);
	padding: 1.25rem;
	border-radius: 12px;
	margin-bottom: 2.5rem;
}
.etc-fleet-filter select {
	padding: 0.65em 1em;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	font-family: inherit;
}
[data-etc-fleet-grid][aria-busy="true"] { opacity: 0.5; }

/* Radial "7 Core Values" diagram (homepage "Why Choose Us" pattern).
   Apply "etc-value-circle" to the Columns/Group wrapper and
   "etc-value-circle__item" to each of its up-to-8 direct children. */
.etc-value-circle {
	position: relative;
	max-width: 640px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	border-radius: 50%;
	border: 2px dashed var(--wp--preset--color--border);
	display: block !important;
}
.etc-value-circle__item {
	position: absolute;
	width: 42%;
	text-align: center;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
}
.etc-value-circle__item::before {
	content: "\2713";
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--base);
	margin: 0 auto 0.5rem;
}
.etc-value-circle__item:nth-child(1) { top: -6%; left: 29%; }
.etc-value-circle__item:nth-child(2) { top: 16%; left: 62%; }
.etc-value-circle__item:nth-child(3) { top: 16%; left: -4%; }
.etc-value-circle__item:nth-child(4) { top: 44%; left: 79%; }
.etc-value-circle__item:nth-child(5) { top: 44%; left: -21%; }
.etc-value-circle__item:nth-child(6) { top: 72%; left: 62%; }
.etc-value-circle__item:nth-child(7) { top: 72%; left: -4%; }
@media (max-width: 768px) {
	.etc-value-circle { border: none; aspect-ratio: auto; max-width: 100%; }
	.etc-value-circle__item { position: static; width: 100%; margin-bottom: 1.5rem; }
}

/* Sticky mobile Call/Book bar (inc/frontend-extras.php). Desktop hides it —
   the header's own "Get a Quote" button covers that case there. */
.etc-mobile-cta {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -4px 16px rgba(31, 42, 54, 0.08);
}
@media (max-width: 782px) {
	.etc-mobile-cta { display: flex; }
	body { padding-bottom: 56px; }
}
.etc-mobile-cta__link {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.9rem 0;
	text-decoration: none;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--heading);
}
.etc-mobile-cta__link--primary {
	background: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--base);
}

/* Cookie consent notice (inc/frontend-extras.php + frontend.js). */
.etc-cookie-notice {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 300;
	max-width: 480px;
	margin: 0 auto;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.etc-cookie-notice[hidden] { display: none; }
.etc-cookie-notice p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.etc-cookie-notice a { color: var(--wp--preset--color--base); text-decoration: underline; }
.etc-cookie-notice__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}
.etc-cookie-notice__secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.9em 1.6em;
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
@media (max-width: 782px) {
	.etc-cookie-notice { bottom: calc(56px + 1rem); }
}

/* Section-attribute cards ("Book a Limo / Fleet Details / Contact Us") on
   single-service.html. */
.etc-cta-card {
	background: var(--wp--preset--color--base-gray);
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.etc-cta-card .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--primary-accessible);
	margin-bottom: 0.75rem;
}

/* ============================================================
   Global micro-interactions & polish
   Hover/focus feedback, nav dropdowns, and a couple of homepage
   decorative treatments the block editor can't express on its own.
   ============================================================ */

/* The whole header (utility bar + nav) is made sticky HERE, on the real
   <header> WordPress renders for the template part's "header" area —
   not via a position:sticky block style on the inner group. A
   position:sticky style on that inner group has no effect: its own
   direct parent is this exact <header>, sized to fit its content with
   no extra room, so the "containing block" runs out almost immediately
   and the element never visibly sticks (confirmed by testing — scrolling
   any distance just scrolled the inner header away with the page). This
   outer <header> is a direct child of the page body instead, so it has
   the full page height to stick within. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 20px rgba(31, 42, 54, 0.07);
}

/* Tighten the logo/hamburger/CTA row itself on small screens (the utility
   bar above it is hidden entirely below 600px — see blocks/utility-bar). */
@media (max-width: 600px) {
	header.wp-block-template-part > header.wp-block-group {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.wp-block-site-logo img {
		max-height: 36px;
		width: auto;
	}
	header .wp-block-button .wp-block-button__link {
		padding: 0.6em 1.4em;
		font-size: 11px;
	}
}

/* The mobile nav overlay (core/navigation's responsive container). Core's
   own styles for this are a deeply-nested, highly-specific stylesheet
   (several chained classes plus a couple of literal repeated classes for
   extra weight) built from the block's OWN layout attributes — including
   the desktop "justifyContent: right" from parts/header.html, which is why
   an earlier, gentler pass at this left the links squeezed to one side in
   small default type. This is a full, deliberate redesign instead: a
   full-screen dark panel with large centered links, matching the rest of
   the site's brand rather than inheriting the desktop layout. !important
   is used deliberately throughout to win cleanly against that stylesheet. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background: var(--wp--preset--color--contrast) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 96px 32px 40px !important;
}
/* core adds an "items-justified-right" utility class here (inherited from
   the desktop nav's own justifyContent setting) which otherwise survives
   even a !important flex-direction/align-items override on this exact
   element — repeating the properties on the more specific compound
   selector wins outright instead of relying on cascade order. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100%;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	padding: 16px 0 !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.01em !important;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--heading);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Buttons get a tactile lift on hover/focus instead of a flat color swap. */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(196, 84, 0, 0.28);
}

/* One consistent focus ring everywhere, instead of each browser's default. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-accessible);
	outline-offset: 2px;
}

/* Primary nav dropdown submenus (core/navigation in parts/header.html) —
   otherwise these render with bare browser-default styling. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(31, 42, 54, 0.16);
	padding: 0.5rem;
	min-width: 220px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6em 0.9em;
	border-radius: 6px;
	color: var(--wp--preset--color--heading);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base-gray);
	color: var(--wp--preset--color--primary-accessible);
}

/* Footer keeps the reversed (dark) palette, but links still need hover feedback. */
footer.wp-block-group a:not(.wp-element-button):hover {
	opacity: 0.75;
	text-decoration: underline;
}
.etc-footer-line {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.etc-footer-line .dashicons {
	flex: none;
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Shared hover lift for card-style components (services, blog, driver, CTA cards). */
.etc-services-bento__tile,
.etc-post-card,
.etc-driver-card {
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.etc-services-bento__tile:hover,
.etc-post-card:hover,
.etc-driver-card:hover,
.etc-cta-card:hover {
	box-shadow: 0 16px 40px rgba(31, 42, 54, 0.12);
	transform: translateY(-3px);
}

/* Small controls that were missing hover feedback. */
.etc-fleet-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--primary-accessible);
}
.etc-testimonial-slider__dot:hover {
	background: var(--wp--preset--color--primary-accessible);
	opacity: 0.6;
}
.etc-service-areas__chip {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.etc-service-areas__chip:hover {
	background: var(--wp--preset--color--primary-accessible);
	border-color: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--base);
}
.etc-service-areas__chip:hover .dashicons {
	color: var(--wp--preset--color--base);
}

/* "Why Choose Us" radial diagram (patterns/why-choose-us.php): a center hub
   so the dashed circle reads as a designed diagram, not a bare outline. */
.etc-value-circle::before {
	content: "\2713";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-accessible);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 900;
	box-shadow: 0 12px 32px rgba(196, 84, 0, 0.35);
}
@media (max-width: 768px) {
	.etc-value-circle::before { display: none; }
}

/* Two-tile overlapping "photo" collage (spec calls for this on the homepage
   intro and fleet-teaser sections, and the About page). Each tile is a real
   Image block carrying "etc-photo-tile" ("etc-photo-collage__accent" too on
   the smaller, offset one), inside an "etc-photo-collage" Group. A WordPress
   Image block renders nothing on the front end until a photo is chosen, so
   the branded gradient placeholder (below) lives on the tile itself — never
   empty — and the uploaded <img> covers it via ".etc-photo-tile > img". */
.etc-photo-collage {
	position: relative;
	margin-bottom: 25%;
}
.etc-photo-collage > .etc-photo-tile {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}
/* Image-block tiles: kill the default figure margin, keep the gradient
   clipped to the rounded corners, and make the chosen photo cover the whole
   aspect-ratio box (front end AND editor, where the <img> sits inside a
   resize wrapper). The empty <img> is dropped out of flow until a src lands. */
.etc-photo-collage > .wp-block-image.etc-photo-tile {
	display: block;
	margin: 0;
	overflow: hidden;
}
.etc-photo-collage > .wp-block-image.etc-photo-tile > :where(a, div, span) {
	display: block;
	width: 100%;
	height: 100%;
}
.etc-photo-collage > .wp-block-image.etc-photo-tile img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.etc-photo-collage > .wp-block-image.etc-photo-tile img:not([src]) {
	display: none;
}
/* Camera glyph while a tile has no photo yet; hidden once an <img src> lands. */
.etc-photo-collage > .wp-block-image.etc-photo-tile::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	z-index: 1;
	opacity: 0.34;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M23%2019a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h4l2-3h6l2%203h4a2%202%200%200%201%202%202z'/%3E%3Ccircle%20cx='12'%20cy='13'%20r='4'/%3E%3C/svg%3E");
}
.etc-photo-collage > .wp-block-image.etc-photo-tile:has(img[src])::before {
	display: none;
}
.etc-photo-collage__accent {
	position: absolute;
	top: 66%;
	left: -6%;
	width: 45%;
	aspect-ratio: 4 / 3;
	border: 6px solid var(--wp--preset--color--base);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(31, 42, 54, 0.18);
}
@media (max-width: 600px) {
	.etc-photo-collage { margin-bottom: 0; }
	.etc-photo-collage__accent { display: none; }
}

/* Universal "no photo yet" placeholder: a branded gradient tile with a
   centered icon, standing in anywhere a real photo hasn't been supplied.
   Once a real image is added inside it, that image simply covers this. */
.etc-photo-tile {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--contrast) 94%, black) 0%, color-mix(in srgb, var(--wp--preset--color--primary-accessible) 42%, var(--wp--preset--color--contrast)) 100%);
}
.etc-photo-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 18px);
}
.etc-photo-tile .dashicons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	color: rgba(255, 255, 255, 0.34);
	font-size: 34px;
	width: 34px;
	height: 34px;
}
/* If a real photo IS present (a post-featured-image or plain <img> placed
   inside the tile), it fills the tile completely and covers the gradient
   and icon underneath. */
.etc-photo-tile > img,
.etc-photo-tile .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	width: 100%;
	height: 100%;
}
.etc-photo-tile > img,
.etc-photo-tile .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.etc-photo-tile--round {
	border-radius: 9999px;
}

/* Card-mounted placeholder tiles: fixed aspect so cards with and without a
   real photo line up identically in a grid. */
.etc-post-card .etc-photo-tile {
	aspect-ratio: 16 / 10;
}
.etc-driver-card .etc-photo-tile {
	width: 120px;
	height: 120px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 18px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--base), 0 0 0 5px var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------------------
   Driver directory card (templates/archive-driver.html, .etc-driver-card)
   The page background is white, so the card needs its own surface — a light
   border, soft shadow and hover lift — to read as a distinct object instead
   of dissolving into the page.
   ------------------------------------------------------------------------- */
.etc-driver-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(31, 42, 54, 0.04), 0 10px 30px rgba(31, 42, 54, 0.06);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}
.etc-driver-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary-accessible) 35%, var(--wp--preset--color--border));
}
/* Name */
.etc-driver-card .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}
.etc-driver-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--heading);
}
.etc-driver-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-accessible);
}
/* Role — treated as an eyebrow under the name */
.etc-driver-card .has-primary-accessible-color {
	margin: 6px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	font-size: 0.75rem;
}
/* Quote — separated from the identity block by a hairline */
.etc-driver-card p:last-child {
	margin: 18px 0 0;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border);
	width: 100%;
	color: var(--wp--preset--color--body);
	font-style: italic;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Driver detail page (templates/single-driver.html)
   ------------------------------------------------------------------------- */
.etc-driver-single__media.etc-photo-tile {
	box-shadow: 0 18px 44px rgba(31, 42, 54, 0.16);
}
.etc-driver-single__about {
	padding-left: var(--wp--preset--spacing--30);
}
/* Pull-quote drawn from the driver's "quote" meta — carries the right-hand
   column visually even when the bio copy is short. */
.etc-driver-single__pullquote {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base-gray);
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: var(--wp--preset--color--heading);
}
.etc-driver-single__pullquote p { margin: 0; }
.etc-driver-single__about h2 {
	margin-top: 0;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--wp--preset--color--border);
}
.etc-driver-single__about h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: -2px;
	background: var(--wp--preset--color--primary);
}
@media (max-width: 781px) {
	.etc-driver-single__about { padding-left: 0; }
}

/* Fleet card media (blocks/fleet-grid/render.php): the wrapper div always
   renders even with no vehicle photo, so it gets the same treatment. */
.etc-vehicle-card__media {
	position: relative;
	min-height: 200px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--contrast) 94%, black) 0%, color-mix(in srgb, var(--wp--preset--color--primary-accessible) 42%, var(--wp--preset--color--contrast)) 100%);
}
.etc-vehicle-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 18px);
}
.etc-vehicle-card__media img {
	position: relative;
	z-index: 1;
}

/* Contact/lead forms rendered as raw HTML (Contact page, About page CTA)
   until swapped for a form-plugin shortcode per spec §9 — otherwise these
   render with bare browser-default inputs, clashing with everything else. */
.etc-contact-form p { margin: 0 0 1.1rem; }
.etc-contact-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--heading);
}
.etc-contact-form input,
.etc-contact-form textarea {
	font-family: inherit;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
	padding: 0.75em 1em;
	margin-top: 0.4rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	box-sizing: border-box;
}
.etc-contact-form button {
	cursor: pointer;
}

/* ============================================================
   Motion: entrance animation on every Cover banner (the hero and
   every inner-page header), plus a scroll-triggered reveal for
   sections further down the page (driven by frontend.js).
   Fully inert for anyone with prefers-reduced-motion: reduce.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	@keyframes etc-fade-up {
		from { opacity: 0; transform: translateY(24px); }
		to { opacity: 1; transform: none; }
	}

	/* Every direct child of a Cover's content area (eyebrow, heading,
	   subhead, trust strip) fades up in a short stagger on page load. */
	.wp-block-cover__inner-container > * {
		animation: etc-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0s; }
	.wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.12s; }
	.wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.24s; }
	.wp-block-cover__inner-container > *:nth-child(4) { animation-delay: 0.36s; }

	/* The booking widget card floats in just after the hero text. */
	.etc-booking-wizard {
		animation: etc-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
	}

	/* Scroll reveal: frontend.js adds "etc-reveal" only to elements that
	   are genuinely below the fold on load (so nothing above the fold
	   ever flashes hidden-then-visible), then adds "etc-reveal-visible"
	   the moment each one scrolls into view. */
	.etc-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.etc-reveal-visible {
		opacity: 1;
		transform: none;
	}
}

/* Hero trust strip (patterns/hero-booking.php) — three quick-credibility
   chips shown above the eyebrow, before the visitor reads a word of copy. */
.etc-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.etc-trust-strip__chip {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.5em 1.1em;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.etc-trust-strip__chip {
		font-size: 10.5px;
		padding: 0.5em 0.9em;
		letter-spacing: 0.02em;
	}
}
/* The booking widget overlaps up into the hero on desktop by a fixed
   amount (patterns/hero-booking.php), which assumed a fixed hero-text
   height. On narrow screens the eyebrow/heading/subhead wrap onto many
   more lines and grow taller than that assumption, so the widget ended up
   overlapping the subhead text itself instead of just the empty space
   below it. Below 600px it just sits after the text with normal spacing. */
@media (max-width: 600px) {
	.etc-hero-widget-wrap {
		margin-top: 24px !important;
	}
}
.etc-hero-subhead {
	max-width: 46ch;
	margin-top: 20px !important;
	font-size: 18px;
	line-height: 1.7;
	opacity: 0.88;
}

/* Nav links get a growing underline on hover instead of a flat color swap. */
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
}
.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 2px;
	background: var(--wp--preset--color--primary-accessible);
	transition: right 0.2s ease;
}
.wp-block-navigation .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content:hover::after {
	right: 0;
}

/* Footer gets a thin brand-gradient bar along its top edge. */
footer.wp-block-group {
	position: relative;
}
footer.wp-block-group::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-accessible), var(--wp--preset--color--primary));
}

/* "What We Offer" services bento grid (patterns/services-grid.php): 5 fixed
   tiles — a tall hero tile, 3 small tiles across the top, and a wide banner
   tile along the bottom — rather than an even 3-up grid, so 5 items don't
   leave an awkward half-empty last row. */
.etc-services-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 20px;
	margin-top: var(--wp--preset--spacing--50);
}
.etc-services-bento__tile:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.etc-services-bento__tile:nth-child(5) {
	grid-column: 2 / span 3;
	grid-row: 2;
}
.etc-services-bento__tile {
	position: relative;
	display: block;
	min-height: 160px;
	border-radius: 12px;
	text-decoration: none;
}
.etc-services-bento__tile .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
}
.etc-services-bento__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	background: linear-gradient(0deg, rgba(20, 26, 33, 0.82) 0%, rgba(20, 26, 33, 0) 100%);
}
.etc-services-bento__index {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}
.etc-services-bento__name {
	flex: 1;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}
.etc-services-bento__arrow {
	color: var(--wp--preset--color--base);
	transition: transform 0.2s ease;
}
.etc-services-bento__tile:hover .etc-services-bento__arrow {
	transform: translateX(4px);
}

/* "+N More" tile (patterns/services-grid.php): only appears on the Services
   listing page once there are more than 5 published services, filling the
   wide-banner slot and pointing at the #more-services list below instead of
   a real photo tile. */
.etc-services-bento__tile--more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-accessible) 100%);
}
.etc-services-bento__more-count {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	color: var(--wp--preset--color--base);
}
.etc-services-bento__more-label {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--small);
}

/* Plain overflow list the "+N More" tile links to (#more-services). */
.etc-services-more {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}
.etc-services-more__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.etc-services-more__list a {
	font-weight: 700;
}
@media (max-width: 992px) {
	.etc-services-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.etc-services-bento__tile:nth-child(1),
	.etc-services-bento__tile:nth-child(5) {
		grid-column: 1 / span 2;
		grid-row: auto;
	}
	.etc-services-bento__tile {
		min-height: 220px;
	}
}
@media (max-width: 600px) {
	.etc-services-bento {
		grid-template-columns: 1fr;
	}
	.etc-services-bento__tile:nth-child(1),
	.etc-services-bento__tile:nth-child(5) {
		grid-column: 1;
	}
}