/* ==========================================================================
   Page hero — title, accent rule, subtitle. Used at the top of any page that
   isn't the homepage (cars-for-sale, contact, about, ...). Moved here from
   archive.css once a second page needed it.
   ========================================================================== */

.pm-page-hero {
	padding-block: 2.5rem 2rem;
	border-bottom: 1px solid var(--border);
	background-image: radial-gradient(
		60% 120% at 0% 0%,
		var(--accent-glow),
		transparent 70%
	);
}

.pm-page-hero__rule {
	display: block;
	width: 2rem;
	height: 2px;
	background-color: var(--accent);
	margin-bottom: 0.75rem;
}

.pm-page-hero__sub {
	margin-top: 0.75rem;
	max-width: 36rem;
	color: var(--text-secondary);
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.pm-page-hero {
		padding-block: 3.5rem 3rem;
	}
}

/* ==========================================================================
   Vehicle card and the shared grid. Loaded wherever cards appear.
   ========================================================================== */

.pm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--bg-card);
	/* Teal at rest, with a matching faint glow, so the whole grid — cars for
	   sale, hot deals, incoming, all built on this one shared class — reads
	   as a set of cards rather than blending into the page. Both step up on
	   hover, alongside the existing lift. */
	border: 1px solid rgba(0, 212, 255, 0.4);
	border-radius: var(--radius);
	box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
		transform 0.3s var(--ease);
}

.pm-card:hover {
	border-color: rgba(0, 212, 255, 0.65);
	box-shadow: 0 14px 36px rgba(0, 212, 255, 0.18);
	transform: translateY(-4px);
}

.pm-card[hidden] {
	display: none;
}

/* Pagination's own hide, stacked alongside [hidden] rather than sharing it —
   a filter can rule a card out for the whole session, paging only for the
   current page, and the two must never fight over one flag. Same specificity
   as .pm-card[hidden] on purpose, so source order between this file and
   layout.css (where archive-pagination.js's styles live) can never matter. */
.pm-card.is-pm-page-hidden {
	display: none;
}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

.pm-card__media {
	/* Matches the pm-card image size registered in inc/setup.php (640x480). */
	aspect-ratio: 4 / 3;
	width: 100%;
}

.pm-card__media .pm-media__img {
	transition: transform 0.5s var(--ease);
}

.pm-card:hover .pm-media__img {
	transform: scale(1.05);
}

.pm-card__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.4),
		transparent 60%
	);
	pointer-events: none;
}

.pm-card__status {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Sold — a corner ribbon over the photo, and the photo dimmed beneath it.
   Replaces the status pill for sold stock only (see pm_media_status()).

   Red rather than the "sold" grey token: that grey is what made the old pill
   the least visible label on the card. Red is the one colour every buyer
   already reads as "gone", and it keeps well clear of the locked accent
   cyan. White on #C81E1E measures 5.7:1.
   -------------------------------------------------------------------------- */

.pm-media.is-sold .pm-media__img {
	filter: grayscale(0.6) brightness(0.7);
}

.pm-sold {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.pm-sold__ribbon {
	position: absolute;
	top: 1.35rem;
	right: -2.75rem;
	width: 10rem;
	padding-block: 0.375rem;
	transform: rotate(45deg);
	text-align: center;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	/* The letter-spacing trails after the last letter; this re-centres it. */
	text-indent: 0.2em;
	color: #ffffff;
	background-color: #c81e1e;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.pm-sold--lg .pm-sold__ribbon {
	top: 2rem;
	right: -3.5rem;
	width: 14rem;
	padding-block: 0.5rem;
	font-size: 1.375rem;
}

/* Hot deal flame tag — sits opposite the status badge, so a hot deal that is
   also reserved or sold can show both without one covering the other.
   Amber rather than the locked accent cyan: it is a marketing flourish, not
   the brand mark, and reuses the palette's existing in-transit amber rather
   than introducing a new colour. */
.pm-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pm-tag--hot {
	background-color: #f59e0b;
	color: var(--text-on-accent);
}

.pm-tag--hot .pm-icon {
	color: var(--text-on-accent);
}

.pm-card .pm-tag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Body
   -------------------------------------------------------------------------- */

.pm-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.pm-card__title {
	font-family: var(--font-display);
	/* 1.125rem keeps a long name like "Land Rover Discovery Sport HSE Luxury
	   Black Edition" to three lines at 390px instead of pushing the card. */
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-primary);
	margin: 0;
}

/* The visible CTA at the foot of the card is decorative; the title's link is
   stretched across the whole card so any part of it is a tap target. */
.pm-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.pm-card__sub {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.pm-card__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1rem 0 0;
}

.pm-card__spec dt {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
}

.pm-card__spec dd {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-primary);
}

.pm-card__spec dd.is-accent {
	color: var(--accent-text);
}

.pm-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-height: 44px;
	border-top: 1px solid var(--border);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-secondary);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pm-card:hover .pm-card__cta {
	background-color: rgba(0, 212, 255, 0.05);
	color: var(--accent-text);
}

.pm-card:hover .pm-card__cta .pm-icon {
	transform: translateX(4px);
}

.pm-card__cta .pm-icon {
	transition: transform 0.2s var(--ease);
}

/* Keyboard focus lands on the stretched link, so the ring has to be drawn on
   the card instead of on a zero-size anchor. */
.pm-card:focus-within {
	border-color: var(--accent);
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.pm-card__link:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.pm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 560px) {
	.pm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.pm-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.pm-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	background-color: var(--bg-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text-secondary);
}

.pm-empty__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}

.pm-empty p {
	margin-inline: auto;
	max-width: 32rem;
	font-size: 0.9375rem;
}

.pm-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* ==========================================================================
   Enquiry notice — the server-rendered result of a contact or notify-me
   submission, read back off the pm_enquiry query var after the redirect.
   No JavaScript involved: this works exactly the same with JS switched off.
   ========================================================================== */

.pm-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	margin-bottom: 1.5rem;
	border-radius: var(--radius-sm);
	border-left: 3px solid;
	font-size: 0.9375rem;
}

.pm-notice p {
	margin: 0;
}

.pm-notice--success {
	/* Reuses the "available" status green — the same colour already means
	   "good" everywhere else on the site. */
	background-color: rgba(16, 185, 129, 0.1);
	border-color: #10b981;
	color: var(--text-primary);
}

.pm-notice--success .pm-icon {
	color: var(--green-text);
}

.pm-notice--error {
	/* Not one of the locked status colours in CLAUDE.md — those describe a
	   vehicle's state, not a form-validation failure. Red is the
	   unambiguous convention for "this didn't work" and doesn't compete
	   with any status badge meaning. */
	background-color: rgba(239, 68, 68, 0.1);
	border-color: #ef4444;
	color: var(--text-primary);
}

.pm-notice--error .pm-icon {
	color: #ef4444;
}

/* ==========================================================================
   Form field — floating label, CSS-only (no JS needed for the label to
   move: it keys off :placeholder-shown, so the input needs placeholder=" ").
   Shared by the contact form and the notify-me form.
   ========================================================================== */

.pm-form-field {
	position: relative;
}

.pm-form-field__input,
.pm-form-field__textarea {
	width: 100%;
	padding: 1.5rem 1rem 0.625rem;
	background-color: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pm-form-field__textarea {
	min-height: 8rem;
	resize: vertical;
}

.pm-form-field__input:focus,
.pm-form-field__textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.pm-form-field__label {
	position: absolute;
	left: 1rem;
	top: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent-text);
	pointer-events: none;
	transition: top 0.15s var(--ease), font-size 0.15s var(--ease), color 0.15s var(--ease);
}

.pm-form-field__input:placeholder-shown ~ .pm-form-field__label,
.pm-form-field__textarea:placeholder-shown ~ .pm-form-field__label {
	top: 0.9rem;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.pm-form-field__textarea:placeholder-shown ~ .pm-form-field__label {
	top: 1rem;
}

.pm-form-field__input:focus ~ .pm-form-field__label,
.pm-form-field__textarea:focus ~ .pm-form-field__label {
	top: 0.6rem;
	font-size: 0.6875rem;
	color: var(--accent-text);
}

.pm-form-field__required {
	color: var(--text-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* Honeypot — see pm_enquiry_hidden_fields() in the plugin. Off-screen for
   sighted users and aria-hidden for assistive tech; only a bot fills it. */
.pm-enquiry-hp {
	position: absolute !important;
	left: -9999px !important;
}

/* ==========================================================================
   Notify-me form — "tell me when this arrives", on an incoming vehicle. A
   native <details> disclosure, so the collapse/expand needs no JavaScript.
   ========================================================================== */

.pm-notify {
	margin-top: 0.75rem;
}

.pm-notify__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text-secondary);
	font-size: 0.875rem;
	cursor: pointer;
	list-style: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pm-notify__summary::-webkit-details-marker {
	display: none;
}

.pm-notify__summary:hover,
.pm-notify[open] .pm-notify__summary {
	border-color: var(--accent);
	color: var(--accent-text);
}

.pm-notify__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 1rem;
	background-color: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}

/* Plain placeholder inputs, not the floating-label variant — this form is
   small and already labelled by its own summary button, so a floating label
   would repeat what "Get notified when this car arrives" already said. */
.pm-notify__input {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--bg-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pm-notify__input::placeholder {
	color: var(--text-muted);
}

.pm-notify__input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   Search box — Cars for Sale (above the toolbar) and the search page hero.

   Built to be read easily, including by buyers with weaker eyesight on a
   phone in daylight: typed text is bold and full-strength (white in the
   dark theme), the placeholder is the secondary text colour rather than
   the muted one, and the outline is a visible grey rather than the
   near-invisible --border, so the box reads as a box before it is tapped.
   -------------------------------------------------------------------------- */

.pm-search {
	display: flex;
	margin-bottom: 1rem;
	border: 1.5px solid rgba(160, 160, 176, 0.45);
	border-radius: var(--radius-sm);
	background-color: var(--bg-elevated);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

[data-theme='light'] .pm-search {
	border-color: var(--border-strong);
}

.pm-search:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.pm-search__input {
	flex: 1;
	min-width: 0;
	min-height: 54px;
	padding-inline: 1rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--text-primary);
	caret-color: var(--accent);
	/* 17px keeps the "Make, model or year…" placeholder on one line beside
	   the button at 360px wide, and stays above the 16px below which iOS
	   Safari zooms the whole page into a focused field. */
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.pm-search__input::placeholder {
	color: var(--text-secondary);
	font-weight: 500;
	opacity: 1;
}

/* The wrapper draws the focus ring for both halves. */
.pm-search__input:focus,
.pm-search__input:focus-visible {
	outline: none;
}

.pm-search__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	border-radius: 0 calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0;
	background-color: var(--accent);
	color: var(--text-on-accent);
	transition: filter 0.2s var(--ease);
}

.pm-search__submit:hover {
	filter: brightness(1.1);
}

@media (min-width: 640px) {
	.pm-search__input {
		font-size: 1.125rem;
	}
}

.pm-search--hero {
	max-width: 42rem;
	margin: 1.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Search results page (search.php)
   -------------------------------------------------------------------------- */

.pm-search-results__hint,
.pm-search-results__count {
	color: var(--text-secondary);
}

.pm-search-results__count strong {
	color: var(--text-primary);
	font-weight: 600;
}

.pm-search-results__group {
	margin-top: 2.5rem;
}

/* .pm-section-head carries no bottom margin of its own; each page that uses
   it sets the gap to its grid. */
.pm-search-results__group .pm-section-head {
	margin-bottom: 1.5rem;
}

.pm-search-results__tally {
	color: var(--text-muted);
	font-size: 0.7em;
	letter-spacing: 0.02em;
}

.pm-search-results__more {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

/* "Also matching" line on Cars for Sale, pointing to the search page. */
.pm-search-elsewhere {
	margin: -0.25rem 0 1rem;
	font-size: 0.9375rem;
	color: var(--text-secondary);
}

.pm-search-elsewhere a {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pm-search-elsewhere[hidden] {
	display: none;
}

/* "By sending this form you agree to our Privacy Policy." — contact and
   notify forms (pm_privacy_notice()). */
.pm-form-privacy {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--text-secondary);
}

.pm-form-privacy a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}