/**
 * Auto Nova — the page around the plugin.
 *
 * Orange on black, from the logo, and hard corners. The page is kept quiet and short at
 * the top, because the fleet's photographs are what a visitor came to see.
 *
 * Colours come from the `theme.json` palette and are not written here, except pure
 * white on the black ground.
 *
 * Nothing in this file names a plugin class. Two tokens below reach its widgets on
 * purpose, the radii the parent's colour bridge reads, so its cards have the same hard
 * corners as everything around them.
 */

:root {
	--nova-orange: var(--wp--preset--color--brand-bright);
	--nova-orange-text: var(--wp--preset--color--brand);
	--nova-night: var(--wp--preset--color--night);
	--nova-on-night: var(--wp--preset--color--on-night);
	--nova-soft: var(--wp--preset--color--ink-soft);
	--nova-paper: var(--wp--preset--color--sunken);

	--cvlr-radius-field: 3px;
	--cvlr-radius-card: 4px;
}

/* A short page, such as Contact, still has its footer at the bottom of the screen. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.nova-main {
	flex: 1 0 auto;
}

/**
 * Core puts a block gap between the header part, `<main>` and the footer part, and
 * between the children of a group, and the parent's bridge a margin around the plugin's
 * widgets. These sections set their own spacing.
 */
.wp-site-blocks > *,
.nova-main > *,
.nova-section > *,
.nova-searchband > *,
.nova-band > *,
.nova-searchband__grid > *,
.nova-searchband .entry-content > *,
.nova-section .entry-content > *,
.nova-section .entry-content {
	margin-block: 0;
}

.nova-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.nova-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.nova-heading--xl {
	font-size: clamp(36px, 3.5vw, 50px);
}

.nova-heading--lg {
	font-size: clamp(30px, 3vw, 40px);
}

.nova-heading--md {
	font-size: 26px;
}

/* The arrow in the logo leans forward; this is the one place the page repeats it. */
.nova-heading--tab::before {
	content: "";
	display: inline-block;
	width: 0.26em;
	height: 0.72em;
	margin-right: 0.36em;
	background: var(--nova-orange);
	transform: skewX(-12deg);
}

.nova-icon {
	flex: 0 0 auto;
}

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

.nova-header {
	color: #fff;
	background: var(--nova-night);
}

.nova-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px clamp(16px, 3vw, 40px);
	padding-block: 6px;
}

.nova-logo {
	display: inline-flex;
	align-items: center;
}

.nova-logo__img {
	display: block;
	width: auto;
	height: 68px;
}

.nova-nav {
	display: flex;
	gap: clamp(16px, 2.6vw, 32px);
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.nova-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #fff;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

.nova-nav a:hover,
.nova-nav a[aria-current] {
	border-color: var(--nova-orange);
}

.nova-header__tools {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.nova-header__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.nova-header__phone:hover {
	color: var(--nova-orange);
}

.nova-lang {
	display: flex;
}

.nova-lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 500;
	color: var(--nova-on-night);
	text-decoration: none;
}

.nova-lang a:hover {
	color: #fff;
}

.nova-lang a[aria-current] {
	font-weight: 700;
	color: var(--nova-orange);
	box-shadow: inset 0 -3px 0 var(--nova-orange);
}

/* The menu takes its own line, and the number becomes a button to ring it. */
@media (max-width: 760px) {
	.nova-logo__img {
		height: 60px;
	}

	.nova-nav {
		order: 3;
		justify-content: space-between;
		width: 100%;
	}

	.nova-header__phone span {
		display: none;
	}
}

/* ── Search band ───────────────────────────────────────────── */

.nova-searchband {
	color: #fff;
	background: var(--nova-night);
	border-top: 1px solid color-mix(in srgb, var(--nova-on-night) 22%, transparent);
	border-bottom: 5px solid var(--nova-orange);
}

/**
 * The second column is as wide as three of the plugin's fields. Its `auto-fit` grid then
 * gives two even rows of three on any screen wide enough, with the button at the end of
 * the second, rather than five fields and a button alone on a row of its own.
 */
.nova-searchband__grid {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 860px);
	align-items: center;
	gap: 24px 48px;
	padding-block: clamp(24px, 3vw, 40px);
}

@media (max-width: 1180px) {
	.nova-searchband__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nova-searchband__grid > :last-child {
		max-width: 860px;
	}
}

.nova-kicker {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nova-orange);
}

.nova-pagetitle .nova-heading {
	color: #fff;
}

.nova-pagetitle__lede {
	max-width: 680px;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--nova-on-night);
}

/* ── Sections ──────────────────────────────────────────────── */

.nova-section {
	padding-block: clamp(28px, 3.5vw, 44px) clamp(40px, 5vw, 64px);
}

.nova-section > * + * {
	margin-top: 20px;
}

.nova-section--narrow {
	max-width: 1040px;
}

/* ── Good to know ──────────────────────────────────────────── */

.nova-questions {
	padding-block: clamp(36px, 5vw, 56px);
	background: var(--nova-paper);
}

.nova-questions__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 24px 48px;
	margin: 24px 0 0;
}

.nova-questions__list dt {
	font-size: 17px;
	font-weight: 700;
}

.nova-questions__list dd {
	margin: 4px 0 0;
	color: var(--nova-soft);
}

/* ── Contact strip ─────────────────────────────────────────── */

.nova-strip {
	color: var(--nova-night);
	background: var(--nova-orange);
}

.nova-strip .nova-heading {
	color: inherit;
}

.nova-strip__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding-block: 28px;
}

.nova-strip__text {
	margin: 4px 0 0;
	font-size: 17px;
	font-weight: 500;
}

.nova-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nova-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--nova-night);
	border-radius: 3px;
}

.nova-button:hover {
	color: #fff;
	background: color-mix(in srgb, var(--nova-night) 78%, #fff);
}

.nova-button:focus-visible {
	outline-color: var(--nova-night);
}

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

.nova-footer {
	color: #fff;
	background: var(--nova-night);
}

.nova-footer a {
	color: inherit;
	text-decoration: none;
}

.nova-footer a:hover {
	color: var(--nova-orange);
}

.nova-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 28px 40px;
	padding-block: 40px 28px;
}

.nova-footer__tagline {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--nova-on-night);
}

.nova-footer__title {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nova-on-night);
}

.nova-footer__list {
	margin: 0;
	padding: 0;
	font-size: 15px;
	list-style: none;
}

.nova-footer__list li {
	padding-block: 3px;
}

/* Tight on a desktop, but on a phone these are the numbers people tap to call. */
@media (max-width: 640px) {
	.nova-footer__list li {
		padding-block: 0;
	}

	.nova-footer__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

.nova-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 24px;
	padding-block: 16px 24px;
	font-size: 14px;
	color: var(--nova-on-night);
}

.nova-footer__legal::before {
	content: "";
	flex: 0 0 100%;
	margin-bottom: 8px;
	border-top: 1px solid color-mix(in srgb, var(--nova-on-night) 28%, transparent);
}

/* ── Inner pages ───────────────────────────────────────────── */

.nova-band {
	padding-block: clamp(24px, 3vw, 36px);
	color: #fff;
	background: var(--nova-night);
	border-top: 1px solid color-mix(in srgb, var(--nova-on-night) 22%, transparent);
	border-bottom: 5px solid var(--nova-orange);
}

.nova-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px 48px;
}

.nova-contact__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.nova-contact__card .nova-heading {
	margin-bottom: 6px;
}

.nova-contact__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--nova-orange-text);
}

.nova-contact__text {
	margin: 0;
	color: var(--nova-soft);
}