/**
 * Car rental hero and the hero search panel.
 *
 * Ported byte-for-byte from header-footer/index.html lines 195-646. The six
 * nav rules that open that block are skipped on purpose: header-content.php
 * already prints them, so copying them here would fork the header styling.
 *
 * Shared by the car rental landing page and the vehicle search results page.
 *
 * @package Vehicle_Rent
 */

	:root { --hero-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

	.rental-hero {
		position: relative;
		isolation: isolate;
		min-height: clamp(40rem, calc(100svh - 6.25rem), 52rem);
		overflow: hidden;
		background: #080a09;
		color: white;
	}

	.rental-hero__media {
		position: absolute;
		inset: 0;
	}

	.rental-hero__media {
		z-index: -3;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		animation: hero-media-enter 1200ms var(--hero-ease-out) both;
	}

	.rental-hero__inner {
		width: min(calc(100% - 2rem), 72rem);
		min-height: inherit;
		margin-inline: auto;
		padding-block: clamp(4rem, 9vh, 6.5rem) 2.5rem;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 3rem;
	}

	.rental-hero__copy { max-width: 42rem; }

	.rental-hero__title {
		max-width: 42rem;
		font-size: clamp(3.5rem, 6.5vw, 6.25rem);
		font-weight: 800;
		line-height: 0.98;
		letter-spacing: -0.055em;
		text-wrap: balance;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.24);
	}

	.rental-hero__title span { display: block; }

	.rental-hero__title--long {
		max-width: 52rem;
		font-style: normal;
		font-weight: 700;
		font-size: 72px;
		line-height: 79px;
		color: rgb(255, 255, 255);
	}

	.rental-hero__title--long span { white-space: nowrap; }

	.rental-hero__description {
		max-width: 28rem;
		margin-top: 2rem;
		font-size: clamp(1.05rem, 1.65vw, 1.5rem);
		line-height: 1.55;
		color: rgba(255, 255, 255, 0.9);
		text-wrap: pretty;
	}

	.rental-hero__description--long {
		max-width: 39rem;
		font-size: clamp(1rem, 1.3vw, 1.2rem);
	}

	.rental-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.875rem;
		margin-top: 2rem;
	}

	.rental-hero__button {
		display: inline-flex;
		min-height: 3rem;
		align-items: center;
		justify-content: center;
		padding: 0.6875rem 1.375rem;
		border: 1px solid transparent;
		border-radius: 9999px;
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1;
		transition:
			background-color 180ms ease,
			border-color 180ms ease,
			color 180ms ease,
			transform 160ms var(--hero-ease-out);
	}

	.rental-hero__button--primary { background: white; color: var(--foreground); }

	.rental-hero__button--secondary {
		border-color: rgba(255, 255, 255, 0.72);
		background: rgba(5, 8, 6, 0.3);
		color: white;
		backdrop-filter: blur(8px);
	}

	.rental-hero__button:focus-visible,
	.rental-hero__fleet-link:focus-visible {
		outline: 2px solid white;
		outline-offset: 4px;
	}

	.rental-hero__button:active { transform: scale(0.97); }

	.rental-hero__fleet {
		width: fit-content;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rental-hero__fleet::-webkit-scrollbar { display: none; }

	.rental-hero__fleet-list {
		display: flex;
		align-items: center;
		width: max-content;
	}

	.rental-hero__fleet-item { display: flex; align-items: center; }

	.rental-hero__fleet-item + .rental-hero__fleet-item::before {
		width: 1px;
		height: 2.5rem;
		margin-inline: clamp(1rem, 2.4vw, 2rem);
		background: rgba(255, 255, 255, 0.72);
		content: "";
	}

	.rental-hero__fleet-link {
		padding-block: 0.5rem;
		font-size: clamp(0.95rem, 1.35vw, 1.125rem);
		font-weight: 700;
		color: rgba(255, 255, 255, 0.92);
		transition: color 180ms ease, transform 180ms var(--hero-ease-out);
	}

	.rental-hero__stage {
		opacity: 0;
		transform: translateY(0.75rem);
		animation: hero-stage-enter 700ms var(--hero-ease-out) forwards;
	}

	.rental-hero__stage--copy { animation-delay: 80ms; }
	.rental-hero__stage--actions { animation-delay: 150ms; }
	.rental-hero__stage--fleet { animation-delay: 230ms; }

	@keyframes hero-media-enter {
		from { opacity: 0.72; transform: scale(1.035); }
		to { opacity: 1; transform: scale(1); }
	}

	@keyframes hero-stage-enter {
		to { opacity: 1; transform: translateY(0); }
	}

	@media (hover: hover) and (pointer: fine) {
		.rental-hero__button:hover { transform: translateY(-2px); }
		.rental-hero__button--primary:hover { background: var(--primary); color: var(--primary-foreground); }
		.rental-hero__button--secondary:hover { border-color: white; background: rgba(255, 255, 255, 0.14); }
		.rental-hero__fleet-link:hover { color: var(--primary); transform: translateY(-2px); }
	}

	@media (max-width: 47.999rem) {
		.rental-hero { min-height: clamp(44rem, calc(100svh - 6.75rem), 52rem); }
		.rental-hero__media { object-position: 67% center; }

		.rental-hero__inner { padding-block: 4rem 1.5rem; gap: 2rem; }
		.rental-hero__title { max-width: 34rem; font-size: clamp(2.65rem, 11vw, 4.25rem); }
		.rental-hero__description { max-width: 24rem; margin-top: 1.5rem; font-size: 1.05rem; }
		.rental-hero__title--long { font-size: clamp(1.9rem, 9vw, 3.5rem); line-height: 1.08; }
		.rental-hero__description--long { max-width: 31rem; font-size: 0.98rem; }
	}

	@media (max-width: 31.25rem) {
		.rental-hero__actions { align-items: stretch; flex-direction: column; max-width: 22rem; }
	}

	@media (prefers-reduced-motion: reduce) {
		.rental-hero__media,
		.rental-hero__stage {
			transform: none;
			animation: hero-fade-in 200ms ease both;
		}

		.rental-hero__button,
		.rental-hero__fleet-link { transition-property: background-color, border-color, color; }

		@keyframes hero-fade-in {
			from { opacity: 0; }
			to { opacity: 1; }
		}
	}

	/* ---------------------------------------------------------------
	   Hero search: the cabin panel.
	   A white utility surface resting on the windshield view — the one
	   place on the hero where the visitor stops looking and starts
	   booking. Hairline gaps between cells are the panel background
	   showing through, so the rules stay correct at every breakpoint.
	   --------------------------------------------------------------- */

	.hero-search {
		display: grid;
		grid-template-columns: 1.15fr 0.62fr 0.92fr 0.92fr 0.92fr auto;
		gap: 1px;
		background: var(--border);
		border-radius: 1.5rem;
		overflow: hidden;
		accent-color: var(--primary);
		box-shadow:
			0 1px 3px 0 rgba(0, 0, 0, 0.25),
			0 24px 48px -28px rgba(0, 0, 0, 0.7);
	}

	.hero-search__field,
	.hero-search__go {
		background: var(--background);
		transition: background-color 180ms ease;
	}

	.hero-search__field {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		min-width: 0;
		padding: 0.95rem 1.15rem 1rem;
	}

	.hero-search__label {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--foreground);
		transition: color 180ms ease;
	}

	.hero-search__label svg {
		flex: none;
		width: 1rem;
		height: 1rem;
		color: var(--muted-foreground);
		transition: color 180ms ease;
	}

	.hero-search__control {
		width: 100%;
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		font: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.35;
		color: var(--foreground);
		text-overflow: ellipsis;
	}

	.hero-search__control::placeholder { color: var(--muted-foreground); font-weight: 500; }
	.hero-search__control:focus { outline: none; }

	.hero-search__control--select {
		appearance: none;
		padding-right: 1.25rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 1rem 1rem;
		cursor: pointer;
	}

	.hero-search__control--number {
		appearance: textfield;
		font-variant-numeric: tabular-nums;
	}

	.hero-search__control--number::-webkit-outer-spin-button,
	.hero-search__control--number::-webkit-inner-spin-button { appearance: none; margin: 0; }

	.hero-search__control--date { font-variant-numeric: tabular-nums; cursor: pointer; }

	.hero-search__control--date::-webkit-calendar-picker-indicator {
		opacity: 0.45;
		cursor: pointer;
		transition: opacity 180ms ease;
	}

	.hero-search__control--date:hover::-webkit-calendar-picker-indicator { opacity: 1; }

	.hero-search__field:focus-within { background: var(--muted); }
	.hero-search__field:focus-within .hero-search__label,
	.hero-search__field:focus-within .hero-search__label svg { color: var(--primary-strong, oklch(0.43 0.14 131.684)); }

	.hero-search__field:has(:focus-visible) { box-shadow: inset 0 0 0 2px var(--primary); }

	.hero-search__go {
		display: grid;
		place-items: center;
		padding: 0.6875rem 0.75rem;
	}

	.hero-search__submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 3.375rem;
		height: 3.375rem;
		border: 0;
		border-radius: 9999px;
		background: var(--primary);
		color: var(--primary-foreground);
		font: inherit;
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
		transition:
			background-color 200ms ease,
			transform 200ms var(--hero-ease-out),
			box-shadow 200ms ease;
	}

	.hero-search__submit svg { width: 1.25rem; height: 1.25rem; flex: none; }
	.hero-search__submit-text { display: none; }
	.hero-search__submit:active { transform: scale(0.94); }

	.hero-search__submit:focus-visible {
		outline: none;
		box-shadow:
			0 0 0 2px var(--background),
			0 0 0 4px color-mix(in oklab, var(--primary) 50%, transparent);
	}

	/* Fleet rail: the vehicle-type index moves to a vertical rail on the
	   right so the cabin panel owns the bottom edge. */
	.rental-hero__fleet-label {
		display: none;
		font-size: 0.75rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.62);
	}

	@media (min-width: 64rem) {
		.rental-hero__inner {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			grid-template-rows: 1fr auto;
			column-gap: 2.5rem;
			row-gap: 3rem;
		}

		.rental-hero__copy { grid-column: 1; grid-row: 1; }
		.hero-search { grid-column: 1 / -1; grid-row: 2; }

		.rental-hero__fleet {
			grid-column: 2;
			grid-row: 1;
			align-self: center;
			justify-self: end;
			width: auto;
			padding: 1.25rem 1.5rem 1.4rem;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 1.5rem;
			background: rgba(5, 8, 6, 0.34);
			backdrop-filter: blur(10px);
			overflow: visible;
		}

		.rental-hero__fleet-label {
			display: block;
			margin-bottom: 0.9rem;
			padding-bottom: 0.9rem;
			border-bottom: 1px solid rgba(255, 255, 255, 0.18);
			text-align: center;
		}

		.rental-hero__fleet-list { flex-direction: column; align-items: stretch; width: auto; }
		.rental-hero__fleet-item { flex-direction: column; align-items: stretch; }

		.rental-hero__fleet-item + .rental-hero__fleet-item::before {
			width: 100%;
			height: 1px;
			margin-block: 0.55rem;
			margin-inline: 0;
			background: rgba(255, 255, 255, 0.16);
		}

		.rental-hero__fleet-link { font-size: 0.9375rem; text-align: center; }
	}

	@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
		.rental-hero__fleet-link:hover { transform: none; }
	}

	@media (hover: hover) and (pointer: fine) {
		.hero-search__field:hover { background: var(--muted); }
		.hero-search__submit:hover {
			background: color-mix(in oklab, var(--primary) 88%, black);
			transform: scale(1.06);
		}
	}

	@media (max-width: 63.999rem) {
		.hero-search { grid-template-columns: 1fr 1fr; border-radius: 1rem; }
		.hero-search__field:nth-of-type(5) { grid-column: 1 / -1; }
		.hero-search__go { grid-column: 1 / -1; padding: 0.75rem; }

		.hero-search__submit {
			width: 100%;
			height: 3.25rem;
			padding-inline: 1.5rem;
		}

		.hero-search__submit-text { display: inline; }
	}

	@media (max-width: 29.999rem) {
		.hero-search { grid-template-columns: 1fr; }
	}

	.rental-hero__stage--search { animation-delay: 300ms; }

	@media (prefers-reduced-motion: reduce) {
		.hero-search__submit { transition-property: background-color, box-shadow; }
		.hero-search__submit:hover,
		.hero-search__submit:active { transform: none; }
		.rental-hero__fleet-link:hover { transform: none; }
	}