/*
  Reg Heaven – theme glue.
  Small layer over the ported design system (main.css): link resets, a11y skip-link,
  and the functional mobile-nav panel (the design hides the desktop nav on mobile and
  shows a burger; this powers the burger). Keep this file tiny – design lives in main.css.
*/

/* Links inside the fixed header/footer inherit colour and lose underlines (design is flat). */
.rh-header__nav a,
.rh-footer__grid li a,
.rh-footer__brand a,
.rh-checkout-bar a,
.rh-btn { color: inherit; text-decoration: none; }
.rh-header__logo-link { display: inline-flex; }

/* ── Text links: a soft border-bottom instead of an underline; it takes the link's
   own colour on hover. Lighter by default, with light- and dark-background variants. ── */

/* Light backgrounds (dark text) – inline prose links. */
.rh-text a,
.rh-lead a,
.rh-aside-card a,
.rh-article__body a,
.rh-faq__a a,
.rh-pricing-note a,
.rh-platestory a {
	text-decoration: none;
	border-bottom: 1px solid var(--rh-line);
	transition: border-color .2s ease;
}
.rh-text a:hover,
.rh-lead a:hover,
.rh-aside-card a:hover,
.rh-article__body a:hover,
.rh-faq__a a:hover,
.rh-pricing-note a:hover,
.rh-platestory a:hover { border-bottom-color: currentColor; }

/* Dark backgrounds (light text) – inline links only (buttons are excluded). */
.rh-pagehero__sub a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .32);
	transition: border-color .2s ease;
}
.rh-pagehero__sub a:hover { border-bottom-color: currentColor; }

/* Footer link lists: clean by default, link-coloured border-bottom on hover (not the logo). */
.rh-footer__grid li a,
.rh-footer__disclaimer a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.rh-footer__grid li a:hover,
.rh-footer__disclaimer a:hover { border-bottom-color: currentColor; }

/* Other link-like elements that were browser-underlined: breadcrumbs, the hero caption
   link, the footer email – same soft border-bottom treatment (light + dark contexts). */
/* Breadcrumbs: no underline until hover (works on light and dark via currentColor). */
.rh-breadcrumb a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.rh-breadcrumb a:hover { border-bottom-color: currentColor; }
/* Hero caption + footer email keep the soft persistent border-bottom. */
.rh-hero__caption .hl,
.rh-footer__grid p a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	transition: border-color .2s ease;
}
.rh-hero__caption .hl:hover,
.rh-footer__grid p a:hover { border-bottom-color: currentColor; }

/* Desktop-only size trims (scoped so they don't override the mobile rules). */
/* One consistent section gutter at every width so all content (promo, header, sections,
   footer) aligns to the same edge. The base `body.design .rh-wrap` is high-specificity,
   so we match it here to actually win; .rh-header itself is NOT padded – its inner
   .rh-wrap supplies the gutter, otherwise the header double-pads. */
body.design .rh-wrap,
body.design .rh-promo__inner { padding-left: 24px; padding-right: 24px; } /* mobile */
@media (min-width: 769px) {
	body.design .rh-wrap,
	body.design .rh-promo__inner { padding-left: 32px; padding-right: 32px; } /* tablet */
}
@media (min-width: 1024px) {
	body.design .rh-wrap,
	body.design .rh-promo__inner { padding-left: 48px; padding-right: 48px; } /* desktop */
}

@media (min-width: 769px) {
	/* Shorter header bar (design ships 24px top/bottom). */
	body.design .rh-header__inner { padding-top: 18px; padding-bottom: 18px; }
	/* Full-height hero: fill the viewport below the announcement bar. The hero is pulled
	   up -96px behind the nav, so its top sits ~15px down (= promo ~35 + header ~76 - 96) –
	   subtract that (and the WP admin bar, via the var, so it's right logged in or out) so
	   the bottom meets the viewport edge. Capped at 800px for large screens; copy centred.
	   NB: if the announcement bar / header height changes, re-check this 15px offset. */
	body[data-dir="modern"] .rh-hero {
		display: flex; flex-direction: column; justify-content: center;
		min-height: min(calc(100vh - 15px - var(--wp-admin--admin-bar--height, 0px)), 800px);
		padding-top: 96px; padding-bottom: 96px;
	}
	/* As a flex child the wrap's `margin:0 auto` would shrink-wrap + centre it; force full
	   width so its content edge lines up with the header wrap (logo) like a normal block. */
	body[data-dir="modern"] .rh-hero > .rh-wrap { width: 100%; }
	/* Trim the hero headline a touch so "Your perfect plate." holds one line (design max 60px). */
	.rh-hero .rh-h1 { font-size: clamp(40px, 4.5vw, 56px); }
}

/* Accessibility skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #fff;
	color: #2f3338;
	border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; top: 0; }

/* Mobile navigation panel (burger-controlled). main.css already hides .rh-header__nav
   and shows .rh-header__menu at <=768px; this turns the hidden nav into a dropdown. */
@media (max-width: 768px) {
	/* Trim the big horizontal padding on boxed sections too. */
	.rh-finder { padding: 36px 20px; }

	/* Split sections (homepage sell/about + How-it-works transfer): full-bleed photo that
	   stacks on mobile. Image leads (flush to the top of its section) with the gap BELOW it,
	   before the text — not above. */
	body[data-dir="modern"] .rh-section--sell,
	body[data-dir="modern"] .rh-section--about,
	body[data-dir="modern"] .rh-section--transfer,
	body[data-dir="modern"] .rh-section--split { display: flex; flex-direction: column; }
	body[data-dir="modern"] .rh-section--sell:not(.is-text-first),
	body[data-dir="modern"] .rh-section--about:not(.is-text-first),
	body[data-dir="modern"] .rh-section--transfer:not(.is-text-first),
	body[data-dir="modern"] .rh-section--split:not(.is-text-first) { padding-top: 0; }
	body[data-dir="modern"] .rh-section--sell .rh-media,
	body[data-dir="modern"] .rh-section--about .rh-media,
	body[data-dir="modern"] .rh-section--transfer .rh-media,
	body[data-dir="modern"] .rh-section--split .rh-media {
		position: static; width: 100%; height: 240px; min-height: 0; border-radius: 0; order: -1; margin-bottom: 36px;
	}
	/* Text-first: text leads and the image sits below it, so the gap goes above the image. */
	.rh-section--sell.is-text-first .rh-media,
	.rh-section--about.is-text-first .rh-media,
	.rh-section--transfer.is-text-first .rh-media,
	.rh-section--split.is-text-first .rh-media { order: 1; margin-bottom: 0; margin-top: 36px; }
	/* media-split image-left collapses to a single column on mobile too */
	body[data-dir="modern"] .rh-section--split.is-image-left .rh-split > div { grid-column: auto; padding-left: 0; }
}

/* ── Header → tablet mode: at 1160px and below, collapse the nav into the burger. The CTA
   (Browse plates / Ask a question) stays as a full button on tablet, and becomes a bare
   icon on phones (see the max-width:768px block). ── */
@media (max-width: 1160px) {
	.rh-header__menu { display: inline-flex; order: 3; }

	/* ---- Menu drops down below the header (promo + nav bar stay on top) ---- */
	/* Positioned right under the header via --rh-menu-top (set by nav.js), and
	   revealed with a top-to-bottom clip so it appears to drop out of the header. */
	/* Menu drops below the header (auto height); the rest of the page dims behind it. */
	.rh-header__nav {
		position: fixed;
		top: var(--rh-menu-top, 100px);
		left: 0;
		right: 0;
		max-height: calc(100dvh - var(--rh-menu-top, 100px));
		opacity: 0;
		visibility: hidden;
		transition: opacity .26s ease, visibility .26s ease;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 8px 24px 22px;
		background: #2f3338;
		box-shadow: 0 20px 44px rgba(0, 0, 0, .35);
		z-index: 60;
		overflow-y: auto;
	}
	.rh-header.is-open .rh-header__nav { opacity: 1; visibility: visible; }
	.rh-header__nav li {
		padding: 14px 0;
		text-align: left;
	}
	.rh-header__nav a { color: #fff; font-size: 17px; letter-spacing: 1px; }

	/* Backdrop dims the rest of the page below the header. */
	.rh-nav-backdrop {
		position: fixed;
		top: var(--rh-menu-top, 100px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: rgba(15, 18, 22, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .26s ease, visibility .26s ease;
	}
	.rh-nav-backdrop.is-visible { opacity: 1; visibility: visible; }

	/* Burger morphs to a close (X) when open. */
	.rh-header__menu .rh-icon--close { display: none; }
	.rh-header.is-open .rh-header__menu .rh-icon--menu { display: none; }
	.rh-header.is-open .rh-header__menu .rh-icon--close { display: inline-flex; }

	/* Solid header when open (above the backdrop + menu) so no hero photo shows behind it. */
	body[data-dir="modern"] .wf .rh-header.is-open { background: #2f3338; position: relative; z-index: 70; }

	/* Lock the page behind the open menu. */
	body.rh-nav-open { overflow: hidden; }
}

/* ====================================================================
   Interaction + motion – subtle, CSS-only (no JS, safe under Delay JS).
   All movement is gated on prefers-reduced-motion.
   ==================================================================== */

/* Real-site affordances (the flat design mock used cursor:default everywhere). */
.rh-btn,
.rh-search button,
.rh-header__menu,
.rh-plate-card,
a[href] { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {

	/* Buttons: subtle lift. */
	.rh-btn { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
	.rh-btn:hover { transform: translateY(-1px); }
	.rh-btn:active { transform: translateY(0); }

	/* Hero search: gentle focus glow + the arrow nudging right on hover. */
	.rh-search { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
	.rh-search:focus-within { box-shadow: 0 0 0 4px rgba(255, 204, 0, .20); }
	.rh-search button { transition: filter .2s ease; }
	.rh-search button:hover { filter: brightness(1.04); }
	.rh-search__arrow { display: inline-block; transition: transform .2s ease; }
	.rh-search button:hover .rh-search__arrow { transform: translateX(3px); }

	/* Featured plate cards: barely-there lift. */
	.rh-plate-card { transition: transform .2s ease, box-shadow .2s ease; }
	.rh-plate-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(47, 51, 56, .10); }

	/* Hero copy: staggered fade-up on load. */
	.rh-hero__copy > * { animation: rh-nudge .8s cubic-bezier(.22, 1, .36, 1) backwards; }
	.rh-hero__copy > .rh-eyebrow       { animation-delay: .08s; }
	.rh-hero__copy > .rh-h1            { animation-delay: .18s; }
	.rh-hero__copy > .rh-lead          { animation-delay: .30s; }
	.rh-hero__copy > .rh-search        { animation-delay: .42s; }
	.rh-hero__copy > .rh-hero__caption { animation-delay: .54s; }
	/* The search box pops/zooms in instead of nudging. */
	.rh-hero__copy > .rh-search { animation-name: rh-pop; }

	@keyframes rh-nudge {
		from { opacity: 0; transform: translateX(-16px); }
		to   { opacity: 1; transform: none; }
	}
	@keyframes rh-pop {
		0%   { opacity: 0; transform: scale(.92); }
		60%  { opacity: 1; transform: scale(1.02); }
		100% { opacity: 1; transform: scale(1); }
	}

	/* Section content: soft reveal as it scrolls into view.
	   Native CSS scroll-driven animation – no JS. Degrades to fully-visible
	   where animation-timeline is unsupported (content is never hidden without it). */
	@supports (animation-timeline: view()) {
		/* NB: do NOT add .rh-split / full-bleed sections here – a transform on them
		   becomes the containing block for their absolutely-positioned edge photos. */
		.rh-section__head,
		.rh-steps,
		.rh-plate-grid,
		.rh-platestory,
		.rh-similar,
		.rh-journal-grid,
		.rh-reasons {
			animation: rh-reveal linear both;
			animation-timeline: view();
			/* Finish early – fully visible by ~the middle of the screen, not high up. */
			animation-range: cover 0% cover 33%;
		}
		@keyframes rh-reveal {
			from { opacity: 0; transform: translateY(18px); }
			to   { opacity: 1; transform: none; }
		}
		/* Forms + sidebar: just a gentle rise, barely any fade – they're important, so
		   they're never "faded out" on load. */
		.rh-form,
		.rh-aside-card {
			animation: rh-reveal-soft linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 30%;
		}
		@keyframes rh-reveal-soft {
			from { opacity: .9; transform: translateY(14px); }
			to   { opacity: 1; transform: none; }
		}
	}
}

/* Desktop nudges right (rh-nudge); mobile nudges up. The search box pops on both (rh-pop). */
@keyframes rh-nudge-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
	.rh-hero__copy > *:not(.rh-search) { animation-name: rh-nudge-up; }
}

/* Transfer timeline (How it works) – labelled rows that stack on mobile. */
.rh-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.rh-timeline li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--rh-line); }
.rh-timeline li:first-child { border-top: 0; }
.rh-timeline__label { font-family: var(--rh-display); font-weight: 700; color: var(--rh-coral); font-size: 15px; }
.rh-timeline__desc { color: var(--rh-muted); margin: 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 768px) {
	.rh-timeline li { grid-template-columns: 1fr; gap: 4px; }
}

/* Valuation / lead form */
.rh-form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.rh-aside-card .rh-contact-email { font-size: 17px; margin: 0 0 10px; } /* contact sidebar email: a touch larger, with a gap below */
.rh-form__intro { margin: 0 0 26px; }
.rh-form__intro h2 { margin: 0 0 6px; font-size: 22px; }
.rh-form__intro p { color: var(--rh-muted); font-size: 15px; margin: 0; }
.rh-field select,
.rh-field textarea { font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--rh-line); border-radius: 3px; background-color: #fff; color: var(--rh-ink); width: 100%; }
.rh-field textarea { resize: vertical; min-height: 96px; }
/* Dropdowns: keep the native <select> (accessible, no JS, native mobile picker) but
   strip its default chrome and draw our own chevron so it matches the text inputs. */
.rh-field select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding-right: 40px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b7178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}
.rh-field select::-ms-expand { display: none; }
/* Shared focus state for every field (coral, matching the checkbox + error styling). */
.rh-field input:focus,
.rh-field select:focus,
.rh-field textarea:focus {
	outline: none;
	border-color: var(--rh-coral);
	box-shadow: 0 0 0 3px rgba(255, 140, 66, .18);
}
.rh-field select:hover { border-color: var(--rh-muted); }
.rh-check input[type="checkbox"] { accent-color: var(--rh-coral); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rh-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.rh-form__error { background: rgba(255, 140, 66, .1); border: 1px solid var(--rh-coral); color: var(--rh-ink); padding: 12px 16px; border-radius: 4px; margin: 0 0 20px; font-size: 14px; }
@media (max-width: 768px) { .rh-form-layout { grid-template-columns: 1fr; gap: 28px; } }

/* FAQ accordion: gentle reveal of the answer when a panel opens. */
@media (prefers-reduced-motion: no-preference) {
	.rh-faq__item[open] .rh-faq__a { animation: rh-faq-reveal .26s ease; }
	@keyframes rh-faq-reveal {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: none; }
	}
}

/* In-page anchors (e.g. a "Get a valuation" CTA, or Enquire -> /contact/…#contact).
   The sticky header (hero pages) clears anchored targets via scroll-margin-top in the header block (main.css).
   (For logged-in admins, WordPress's own scroll-padding-top clears the admin bar.) */
/* Deliberately NO `scroll-behavior: smooth` on the root: Chrome silently drops the scroll to a
   URL #fragment on initial load (and on same-document hash changes) when it is set, so anchor
   links never reach their target – that broke Enquire -> the contact form. Smooth scrolls we do
   want (e.g. the search results jump) are requested explicitly in JS via scrollIntoView. */

/* ====================================================================
   Desktop header interactions (hover) – low-JS, CSS only.
   ==================================================================== */
@media (min-width: 769px) {
	/* Nav hover: text brightens + a coral underline grows out from the centre. */
	body[data-dir="modern"] .rh-header__nav a { position: relative; display: inline-block; transition: color .2s ease; }
	body[data-dir="modern"] .rh-header__nav a:hover { color: #fff; }
	body[data-dir="modern"] .rh-header__nav a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 2px;
		background: var(--rh-coral);
		transform: scaleX(0);
		transform-origin: center;
	}
	body[data-dir="modern"] .rh-header__nav a:hover::after { transform: scaleX(1); }

	/* Logo grows very slightly on hover (scaling from its centre). */
	.rh-header__logo-link { transition: transform .25s ease; transform-origin: center; }
}
/* Motion-only flourishes: the underline sweep + the logo scale. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
	body[data-dir="modern"] .rh-header__nav a::after { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
	.rh-header__logo-link:hover { transform: scale(1.06); }
	/* The homepage logo doesn't animate. */
	body.home .rh-header__logo-link:hover { transform: none; }
}

/* ── Checkout: the "deposit confirmed" receipt view (templates/checkout.php). The form
   + order-summary layout itself is styled in main.css; this is just the success state. ── */
.rh-co-done { text-align: center; max-width: 620px; margin: 0 auto; }
.rh-co-done__tick { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(26, 127, 55, .1); color: #1a7f37; margin-bottom: 20px; }
.rh-co-done h1 { margin-bottom: 10px; }
.rh-co-receipt { background: #fff; border: 1.5px solid var(--rh-ink); border-radius: 4px; padding: 22px 26px; margin: 28px auto 0; max-width: 460px; text-align: left; }
.rh-co-receipt .rh-specs { margin: 0; }

/* The design ships radio cards + the checkbox as static mockups; drive the selected look
   from real inputs with :has() (no JS, so it survives LiteSpeed Delay JS). */
.rh-radio-card { cursor: pointer; }
.rh-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rh-radio-card:has(input:checked) { border-color: var(--rh-coral); background: rgba(255, 140, 66, .05); }
.rh-radio-card:has(input:checked) .rh-radio-card__dot { border: 6px solid var(--rh-coral); }
.rh-radio-card:focus-within { border-color: var(--rh-coral); }
.rh-check { cursor: pointer; }
.rh-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rh-check__box svg { opacity: 0; transition: opacity .12s ease; }
.rh-check:has(input:checked) .rh-check__box { background: var(--rh-coral); color: #fff; }
.rh-check:has(input:checked) .rh-check__box svg { opacity: 1; }

/* "What this deposit secures" reassurance panel on the checkout details step. */
.rh-secures { border: 1.5px solid var(--rh-line); border-radius: 4px; padding: 16px 18px; margin-top: 24px; background: rgba(255, 140, 66, .04); }
.rh-secures h4 { margin: 0 0 6px; font-size: 14px; color: var(--rh-ink); }
.rh-secures p { margin: 0; font-size: 15px; color: var(--rh-muted); line-height: 1.6; }

/* Progress: drop the step labels on small screens (numbers + connectors only). */
@media (max-width: 600px) {
	.rh-progress__label { display: none; }
	.rh-progress { gap: 4px; }
}

/* Plate-detail buy card: give the buy + enquire CTAs a touch more presence than the
   site-wide 13px/500 button text (scoped to .rh-buy so other buttons are unaffected). */
body[data-dir="modern"] .rh-buy .rh-btn { font-size: 14px; font-weight: 600; }

/* Billing address: hidden until the "same as postal address" box is unticked (CSS-only,
   so it works under Delay JS). */
.rh-billing-fields { display: none; }
.rh-form:has( input[name="billing_same"]:not(:checked) ) .rh-billing-fields { display: block; }

/* Prominent checkout validation banner – sits above the two-column layout; the error
   redirect jumps to #rh-co-error so it can't be missed (native HTML5 validation handles
   empty fields inline first). */
.rh-checkout__alert { margin: 20px 0; padding: 14px 18px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.5; scroll-margin-top: 16px; }
.rh-checkout__alert--error { background: rgba(255, 140, 66, .12); border: 1.5px solid var(--rh-coral); color: var(--rh-ink); }
.rh-checkout__alert--info { background: #fff; border: 1.5px solid var(--rh-line); color: var(--rh-slate); }

/* Mobile: the form is a full-bleed white band. Break out of the wrap's 24px gutter so the
   white reaches the screen edges, then re-add 24px inside so the fields line up with the
   progress bar + summary above. */
@media (max-width: 768px) {
	.rh-checkout__main .rh-form {
		border: 0; border-radius: 0; box-shadow: none;
		margin-left: -24px; margin-right: -24px;
		padding: 28px 24px;
	}
}

/* "Continue to deposit payment" – a touch bolder, matching the plate-detail CTAs. */
body[data-dir="modern"] .rh-checkout__actions { flex-direction: column; align-items: center; }
body[data-dir="modern"] .rh-checkout__actions .rh-btn--accent { order: -1; justify-content: center; text-align: center; font-size: 14px; font-weight: 600; }
body[data-dir="modern"] .rh-checkout__actions .rh-btn--ghost { align-self: center; border: 0; background: none; min-height: 0; padding: 8px; font-weight: 600; color: var(--rh-muted); text-decoration: underline; text-underline-offset: 3px; }
body[data-dir="modern"] .rh-checkout__actions .rh-btn--ghost:hover { background: none; color: var(--rh-ink); }

/* Dated-plate disclaimer callout on the plate detail story. */
.rh-note { border-left: 3px solid var(--rh-coral); padding-left: 14px; }

/* Desktop: the buy card floats (absolute) over the hero and can run long, so reserve a bit
   more room at the bottom of the plate-top block — keeps the card clear of the story/rear-car
   below it. (On mobile the card is in normal flow, so this only applies on desktop.) */
@media (min-width: 769px) {
	.rh-platetop { padding-bottom: 56px; }
}

/* The first form-section legend shouldn't carry the divider line. The design CSS uses
   :not(:first-child), but hidden inputs/honeypot precede the first legend, so it wrongly
   matched and drew a line above "Contact information". */
.rh-form__legend:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

/* Order-summary accordion: collapses on mobile, expands on tap (CSS-only checkbox toggle,
   so it works under Delay JS). On mobile the collapsed head is a "ticket": a coral rail, the
   plate + deposit on the top stub, then the total + DVLA fee and a worded "View breakdown"
   cue below a perforation. The desktop sidebar keeps its plain centred "Your order" + body. */
.rh-summary__cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rh-summary__balance { text-align: right; }
.rh-summary__ticket { display: none; }
@media (min-width: 769px) {
	/* Desktop sidebar: centre "Your order" and trim it a touch. */
	.rh-summary__head { text-align: center; }
	.rh-summary__title { font-size: 15px; }
}
@media (max-width: 768px) {
	/* Tighten the gaps around the summary card on mobile. */
	.rh-checkout-section { padding-top: 24px; }
	.rh-summary--accordion { margin-bottom: 0; }
	.rh-summary__cb:checked ~ .rh-summary__body { display: block; }
	/* Padding on the inner content once expanded (the head supplies its own). */
	.rh-summary--accordion .rh-summary__body { padding: 0 20px 20px; }
	.rh-summary__head { cursor: pointer; display: block; position: relative; }
	.rh-summary__head .rh-summary__title { display: none; }
	.rh-summary__ticket { display: block; }
	/* Left/right stub: plate (proper UK letterbox proportions) on the left, deposit on the right. */
	.rh-summary__trow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
	.rh-summary__ticket .rh-plate { font-size: 22px; padding: 0.32em 14px 0.15em; min-width: 160px; word-spacing: 3px; }
	.rh-summary__tcell--right { flex: 0 0 auto; text-align: right; }
	.rh-summary__tlabel { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--rh-muted); }
	.rh-summary__tdue { display: block; font-family: var(--rh-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--rh-ink); }
	/* Perforation, then the worded View-breakdown cue centred (total lives in the breakdown). */
	.rh-summary__tfoot { display: block; text-align: center; margin-top: 18px; }
	.rh-summary__view { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--rh-slate); white-space: nowrap; }
	.rh-summary__view-hide { display: none; }
	.rh-summary__chev { color: var(--rh-coral); transition: transform .2s ease; }
	.rh-summary__cb:checked ~ .rh-summary__head .rh-summary__view-show { display: none; }
	.rh-summary__cb:checked ~ .rh-summary__head .rh-summary__view-hide { display: inline; }
	.rh-summary__cb:checked ~ .rh-summary__head .rh-summary__chev { transform: rotate(180deg); }
	/* Back-to-plate reads as a plain underlined text link on mobile (no button outline). */
	body[data-dir="modern"] .rh-checkout__actions .rh-btn--accent { align-self: stretch; }
	/* The reg now sits in the head, so hide the body copy of it on mobile. */
	.rh-summary__body .rh-summary__plate { display: none; }
}

/* Validation toast: slides up from the bottom, red, fixed so it can't be missed. The error
   redirect also jumps to #rh-co-error (the form) so the page lands on the fields. */
#rh-co-error { scroll-margin-top: 20px; }
.rh-toast { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1000; width: calc(100% - 32px); max-width: 620px; margin-bottom: 20px; padding: 14px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); animation: rh-toast-up .45s cubic-bezier(.22, 1, .36, 1) both; }
.rh-toast--error { background: #d63638; color: #fff; }
@keyframes rh-toast-up { from { transform: translate(-50%, 130%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes rh-toast-down { from { transform: translate(-50%, -130%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rh-toast { animation: none; } }
@media (max-width: 768px) {
	/* On phones the keyboard covers the bottom, so the toast drops in from the top instead. */

	/* Header CTA on phones: whichever CTA shows (Browse plates → search, Ask a question →
	   question-circle) becomes a bare white icon beside the burger — no pill, no hover.
	   Hidden on the homepage (the hero already has a search). */
	body.home .rh-header .rh-btn { display: none; }
	body[data-dir="modern"] .rh-header .rh-btn--accent,
	body[data-dir="modern"] .rh-header .rh-btn--ghost {
		background: none; border-color: transparent; box-shadow: none; text-shadow: none;
		padding: 6px; gap: 0; font-size: 0; color: #fff; margin-left: auto;
	}
	body[data-dir="modern"] .rh-header .rh-btn--accent:hover,
	body[data-dir="modern"] .rh-header .rh-btn--ghost:hover {
		background: none; border-color: transparent; box-shadow: none;
	}
	body[data-dir="modern"] .rh-header .rh-btn--accent .rh-btn__icon,
	body[data-dir="modern"] .rh-header .rh-btn--ghost .rh-btn__icon {
		width: 22px; height: 22px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .35));
	}
}