/**
 * Carvolite Rentals — the theme's own styles.
 *
 * `theme.json` covers colour, type, spacing and block defaults; core turns
 * those into custom properties and utility classes, and repeating them here
 * would mean two sources of truth for the same value. What is left is what
 * `theme.json` cannot express: the components the bundled patterns are built
 * from, and a small number of layout behaviours.
 *
 * ── The rule that keeps the portal plugin working ─────────────────────────
 *
 * Nothing in this file styles a bare `input`, `select`, `textarea` or
 * `button`.
 *
 * That is not a stylistic preference. The plugin's stylesheet carries a note
 * about Astra doing exactly that, and about the specificity it had to spend to
 * survive it — a `.cvl .cvl-input` selector, an `appearance: none`, a pinned
 * `line-height` for iOS. Every one of those exists because a host theme
 * reached past the plugin's classes and restyled the elements underneath.
 *
 * Since the plugin is shipped to customers on other themes, it keeps those
 * defences. But this theme does not make it use them: form controls are styled
 * only through explicit block or component classes, so a `.cvl-input` inside a
 * booking form inherits the font and nothing else. Where a selector below does
 * touch an element by tag, it is inside a scope (`.comment-form`,
 * `.wp-block-search`) that a `.cvl` component is never rendered within.
 */

/* ── Tokens the bridge reads ───────────────────────────────── */

/**
 * Radii live here rather than in `theme.json`, which has no radius preset.
 * `portal-bridge.css` maps `--cvl-r-field` and `--cvl-r-card` onto these, so
 * changing the two values below reshapes the theme's cards and the plugin's
 * fleet cards in one edit.
 */
:root {
	--cvlr-radius-field: 10px;
	--cvlr-radius-card: 14px;
	--cvlr-radius-pill: 99px;
	--cvlr-header-height: 68px;
}

/* ── Base ──────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/**
 * A visible focus ring on every interactive element, including the plugin's.
 *
 * `:focus-visible` rather than `:focus`, so a mouse click on the booking
 * button does not leave a ring behind it, but a keyboard walk through the
 * search form shows exactly where it is. This is the one place the theme
 * deliberately does reach every element — removing focus visibility is an
 * accessibility failure, and adding it cannot break a component's layout.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 3px;
}

/**
 * The skip link.
 *
 * Styling core's `.skip-link` rather than shipping one of our own: block
 * themes get a skip link injected automatically, pointing at the first
 * `<main>`, and a second one in the header part would mean two "Skip to
 * content" stops at the top of every page for a keyboard user. So this only
 * restyles what is already there — it stays visually hidden until focused,
 * which is core's behaviour too.
 */
.skip-link.screen-reader-text:focus {
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	padding: 10px 16px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--ink);
	border-radius: var(--cvlr-radius-field);
	text-decoration: none;
}

/* ── Header ────────────────────────────────────────────────── */

.cvlr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/**
 * Safari before 18 shipped `backdrop-filter` but composites a sticky, blurred
 * bar over a `position: relative` grid inconsistently, which showed as the
 * header flickering on scroll. An opaque background where the effect is
 * unsupported costs nothing.
 */
@supports not (backdrop-filter: blur(1px)) {
	.cvlr-header {
		background: var(--wp--preset--color--surface);
	}
}

.cvlr-header .wp-block-navigation__responsive-container-open,
.cvlr-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/**
 * The phone number in the header is the second most used control on a rental
 * site after the search form — people ring to ask about a child seat — so it
 * is a button, not a link in a list.
 */
.cvlr-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 15px;
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--wp--preset--color--brand);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, var(--wp--preset--color--surface));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 22%, var(--wp--preset--color--surface));
	border-radius: var(--cvlr-radius-pill);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}

.cvlr-header__phone:hover,
.cvlr-header__phone:focus-visible {
	color: var(--wp--preset--color--brand-deep);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, var(--wp--preset--color--surface));
}

@media (max-width: 600px) {
	.cvlr-header__phone span {
		display: none;
	}
}

/* ── Hero ──────────────────────────────────────────────────── */

.cvlr-hero {
	position: relative;
	background: linear-gradient(
		165deg,
		var(--wp--preset--color--ink) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--brand)) 100%
	);
	color: #fff;
}

/**
 * A hero photograph is optional. Setting one as the section's background image
 * in the editor lands it under this overlay, which keeps the headline legible
 * over whatever the company happens to photograph — a silver car against a
 * bright sky being the case that breaks unoverlaid hero text.
 */
.cvlr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.78) 100%);
	pointer-events: none;
}

.cvlr-hero > * {
	position: relative;
	z-index: 1;
}

/**
 * Scoped to the text group, never the whole hero.
 *
 * `.cvlr-hero :is(h1, h2, p)` also catches the heading *inside* the search
 * card, which sits on a white ground — so `[carvolite_search title="…"]`
 * rendered white on white and the card appeared to open with a blank strip.
 * `.cvlr-hero__text` holds only the banner copy and never a `.cvl` component,
 * so a descendant selector is safe within it.
 */
.cvlr-hero__text :is(h1, h2, h3, p) {
	color: #fff;
}

/**
 * The banner copy sits in a flow-layout group, and that is deliberate.
 *
 * The hero itself is a constrained-layout group, and core gives every direct
 * child of one:
 *
 *     max-width: var(--wp--style--global--content-size);
 *     margin-left: auto !important;
 *     margin-right: auto !important;
 *
 * Those auto margins are what aligns each child to the 1200px measure. They
 * are also what centres any child narrow enough to have room to move — so a
 * lede given a 46ch reading width drifts into the middle of the banner, and
 * zeroing the margin to stop it throws the paragraph out to the viewport edge
 * instead, because the same margin was doing the aligning.
 *
 * Wrapping the copy in a flow-layout group settles both. The group is the
 * constrained child, full measure and correctly aligned; inside it core adds
 * no inline margins at all, so a `max-width` here means what it says. No
 * `!important` anywhere, which matters — the theme asks the portal plugin's
 * stylesheet to stay overridable and owes it the same discipline.
 */
.cvlr-hero__text > * {
	max-width: 46ch;
}

.cvlr-hero__text > h1 {
	max-width: 22ch;
}

.cvlr-hero__text > .cvlr-hero__trust {
	max-width: none;
}

.cvlr-hero__lede {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.82);
}

/**
 * The search card sits at the foot of the hero, not straddling its edge.
 *
 * An overlap looks better in a mockup and is a liability in a browser: the
 * card is as tall as its contents, which go from one row to two to three as
 * the viewport narrows and to four when a site has long location names. Any
 * negative margin that straddles the boundary at 1440px collides with the
 * heading of the next section at 900px, and there is no height to calculate
 * against because the card's is set by data the theme never sees.
 */
.cvlr-hero__panel {
	margin-top: var(--wp--preset--spacing--50);
}

.cvlr-hero__panel .cvl-search {
	box-shadow: 0 18px 44px rgba(10, 12, 16, 0.26);
}

.cvlr-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
}

.cvlr-hero__trust li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cvlr-hero__trust li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	flex-shrink: 0;
}

/* ── Cards used by the marketing patterns ──────────────────── */

.cvlr-card {
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cvlr-radius-card);
	box-shadow: var(--wp--preset--shadow--card);
}

.cvlr-card h3 {
	margin-top: 0;
	margin-bottom: 0.4rem;
	font-size: 1.0625rem;
}

.cvlr-card p:last-child {
	margin-bottom: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.9375rem;
}

/**
 * The step number in "How it works".
 *
 * A counter rather than typed-in numbers, so reordering the columns in the
 * editor renumbers them. Someone will reorder them.
 */
.cvlr-steps {
	counter-reset: cvlr-step;
}

.cvlr-steps .cvlr-card {
	counter-increment: cvlr-step;
}

.cvlr-steps .cvlr-card::before {
	content: counter(cvlr-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 0.9375rem;
	font-weight: 800;
	color: #fff;
	background: var(--wp--preset--color--brand);
	border-radius: 50%;
}

/**
 * A category tile, linking into the fleet page with `?kategoria=SUV` and the
 * like — the values the plugin allowlists in `Carvolite_Shortcodes::kategoria`.
 * Anything else it does not recognise is ignored rather than passed on, so a
 * mistyped tile shows the whole fleet instead of an error.
 */
.cvlr-category {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 190px;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--wp--preset--color--ink);
	border-radius: var(--cvlr-radius-card);
	transition: transform 0.18s, box-shadow 0.18s;
}

.cvlr-category:hover,
.cvlr-category:focus-visible {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--hover);
}

.cvlr-category img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.cvlr-category:hover img {
	transform: scale(1.04);
}

.cvlr-category::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 16, 0) 35%, rgba(10, 12, 16, 0.82) 100%);
}

.cvlr-category > * {
	position: relative;
	z-index: 1;
}

.cvlr-category__name {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cvlr-category__meta {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.76);
}

/* ── FAQ ───────────────────────────────────────────────────── */

.cvlr-faq {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cvlr-radius-card);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.cvlr-faq details + details {
	border-top: 1px solid var(--wp--preset--color--line);
}

.cvlr-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--wp--preset--spacing--40);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.cvlr-faq summary::-webkit-details-marker {
	display: none;
}

.cvlr-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--ink-muted);
	transition: transform 0.2s;
}

.cvlr-faq details[open] summary::after {
	transform: rotate(45deg);
}

.cvlr-faq details > :not(summary) {
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40) 16px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

/* ── Call-to-action band ───────────────────────────────────── */

.cvlr-band {
	color: #fff;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--brand) 0%,
		var(--wp--preset--color--brand-deep) 100%
	);
	border-radius: var(--cvlr-radius-card);
}

.cvlr-band :is(h2, h3, p) {
	color: #fff;
}

.cvlr-band p {
	color: rgba(255, 255, 255, 0.86);
}

/**
 * The button inside the band inverts: a brand-coloured button on a
 * brand-coloured ground is invisible, and `theme.json` cannot express
 * "different in this context".
 */
.cvlr-band .wp-block-button__link {
	color: var(--wp--preset--color--brand);
	background: #fff;
}

.cvlr-band .wp-block-button__link:hover {
	color: var(--wp--preset--color--brand-deep);
	background: rgba(255, 255, 255, 0.9);
}

/* ── Footer ────────────────────────────────────────────────── */

.cvlr-footer {
	color: rgba(255, 255, 255, 0.7);
	background: var(--wp--preset--color--ink);
}

.cvlr-footer :is(h2, h3, h4, strong, .wp-block-site-title a) {
	color: #fff;
}

.cvlr-footer a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.cvlr-footer a:hover,
.cvlr-footer a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.cvlr-footer__legal {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ── Posts ─────────────────────────────────────────────────── */

.cvlr-post-card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cvlr-radius-card);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.18s, transform 0.18s;
}

.cvlr-post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--hover);
}

.cvlr-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.cvlr-post-card .wp-block-post-title a {
	text-decoration: none;
}

.cvlr-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.cvlr-meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted);
}

/* ── Forms outside the portal ──────────────────────────────── */

/**
 * Scoped to WordPress's own form contexts, never to bare elements.
 *
 * A `.cvl-input` is never rendered inside `.wp-block-search` or
 * `.comment-form`, so these cannot reach the plugin's controls. That is the
 * whole reason the selectors are written this way rather than as
 * `input[type="text"]`, which would have been shorter and would have started
 * the specificity war the plugin's stylesheet describes.
 */
.wp-block-search__input,
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 0 12px;
	font: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--sunken);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cvlr-radius-field);
}

.wp-block-search__input,
.comment-form input:not([type="submit"]):not([type="checkbox"]) {
	height: 40px;
}

.comment-form textarea {
	padding: 10px 12px;
	line-height: 1.5;
}

.wp-block-search__button {
	border-radius: var(--cvlr-radius-field);
}

/* ── Plugin-absent placeholder ─────────────────────────────── */

/**
 * Shown by `inc/portal.php` in place of a portal shortcode when the plugin is
 * not active, and only to a user who can install one. Styled to look like an
 * editor notice rather than like site content, so nobody mistakes it for
 * something a visitor is meant to see.
 */
.cvlr-placeholder {
	padding: var(--wp--preset--spacing--40);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-soft);
	background: var(--wp--preset--color--sunken);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--cvlr-radius-card);
}

.cvlr-placeholder p {
	margin: 0;
}

.cvlr-placeholder p + p {
	margin-top: 6px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted);
}

/* ── Motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cvlr-category,
	.cvlr-category img,
	.cvlr-post-card,
	.cvlr-faq summary::after {
		transition-duration: 0.01ms;
	}

	.cvlr-category:hover,
	.cvlr-post-card:hover {
		transform: none;
	}
}