/* Site-wide UI standards (2026-09-28). Loaded on every page, last.

   Arrows: every "go" arrow, in an icon button or inside a text link or
   button, points right at rest and turns 45 degrees to point up-right when
   its link or button is hovered or focused. Arrows drawn pointing up-right
   (.ts-arrow--ne) start a quarter turn back so they rest pointing right too.
   The class is added where each arrow is drawn: thespecd_header_icon('arrow'),
   thespecd_icon('arrow') and the inline arrows in template-parts/sections.
   Back and next arrows on sliders are chevrons without this class, and do not
   turn. The rules use !important on purpose: older one-off hover nudges on
   the same icons must not win over the standard. */

.ts-arrow {
	flex: 0 0 auto;
	transform: none !important;
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.ts-arrow--ne {
	transform: rotate(45deg) !important;
}

a:hover .ts-arrow,
a:focus-visible .ts-arrow,
button:hover .ts-arrow,
button:focus-visible .ts-arrow {
	transform: rotate(-45deg) !important;
}

a:hover .ts-arrow--ne,
a:focus-visible .ts-arrow--ne,
button:hover .ts-arrow--ne,
button:focus-visible .ts-arrow--ne {
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ts-arrow {
		transition: none !important;
	}
}

/* Read more (2026-09-30), the site's one pattern for extra text on a page:
   inc/read-more.php. A short visible line (.rm-lead, clamped to two lines
   while closed) inside a .rm-scope, then a barely visible toggle that opens
   the rest. On wide screens the toggle sits at the far right, level with the
   end of that line. --rm-gap is the space the page gave the line below it;
   the line gives it up and the Read more takes it instead. */

.rm-scope:has(.rm) .rm-lead { margin-bottom: 0; }
.rm-scope:has(.rm:not([open])) .rm-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rm { margin: 2px 0 var(--rm-gap, 0px); }
.rm-toggle { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--fs-label); color: rgba(10, 10, 15, 0.58); cursor: pointer; list-style: none; user-select: none; text-decoration: underline; text-decoration-color: rgba(10, 10, 15, 0.2); text-underline-offset: 3px; }
.rm-toggle::-webkit-details-marker { display: none; }
.rm-toggle::marker { content: ""; }
.rm-toggle:hover { color: var(--night-2); text-decoration-color: currentColor; }
.rm-toggle:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; border-radius: 3px; }
.rm-close { display: none; }
.rm[open] .rm-open { display: none; }
.rm[open] .rm-close { display: inline; }
.rm-body { max-width: 72ch; padding: 4px 0 6px; }
.rm-desc { margin: 0 0 12px; font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(10, 10, 15, 0.6); }
.rm-faq-title { margin: 4px 0 0; font-family: var(--body, "Google Sans", sans-serif); font-size: var(--fs-body-sm); font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--night-2); }
.rm-q { margin: 14px 0 4px; font-family: var(--body, "Google Sans", sans-serif); font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--night-2); }
.rm-a { margin: 0; font-size: var(--fs-body-sm); line-height: 1.65; color: rgba(10, 10, 15, 0.65); }
.rm-desc a, .rm-a a, .rm-links a { color: inherit; text-decoration: underline; text-decoration-color: rgba(10, 10, 15, 0.25); text-underline-offset: 2px; }
.rm-desc a:hover, .rm-a a:hover, .rm-links a:hover { color: var(--night-2); text-decoration-color: currentColor; }
.rm-links-label { margin: 16px 0 6px; font-weight: 600; color: var(--night-2); }
.rm-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(10, 10, 15, 0.65); }

.rm-section-title { margin: 0 0 8px; font-family: var(--body, "Google Sans", sans-serif); font-size: var(--fs-body); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--night-2); }
.rm-section-lead { max-width: 62ch; margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(10, 10, 15, 0.6); text-wrap: pretty; }

.vdp-page-header.rm-scope { --rm-gap: 20px; }
.sp-archive-header.rm-scope { --rm-gap: 16px; }

@media (min-width: 1024px) {
	.rm-scope .rm { position: relative; margin-top: 0; }
	.rm-scope .rm-toggle { position: absolute; right: 0; bottom: 100%; min-height: 0; padding: 10px 0 0 24px; line-height: 1.25; }
	.rm-scope .rm-body { padding-top: 10px; }
}

/* Vehicle main photos (2026-10-01). Every studio main photo is now trimmed and
   placed on a 16:9 canvas with the same margin (normalize.php, entry 92), so the
   image areas no longer add their own inset, and white studio backgrounds blend
   into each area's light colour. Transparent cut-outs are unaffected. */
.vs-card-img,
.th-card-media > img,
.th-pair-imgs img:not(.th-pair-logo),
.cx-img,
.cx-slot-img img,
.cx-pair-imgs img,
.cx-stk-img,
.cx-sb-car img,
.ts-typeahead-thumb img,
.vdp-config-media-inner .vdp-gallery-img[data-fit="contain"] { mix-blend-mode: multiply; }
/* Photos with their own background fill the stage; cut-outs and white studio
   shots show whole (thespecd_image_fit()). */
.vdp-config-media-inner .vdp-gallery-img[data-fit="cover"] { object-fit: cover !important; }
.vdp-config-media-inner .vdp-gallery-img[data-fit="contain"] { object-fit: contain !important; }
.cx-duel-img .cx-img,
.cx-slot-img img,
.cx-pair-imgs img,
.th-pair-imgs img:not(.th-pair-logo) { left: 0; top: 0; width: 100%; height: 100%; }
.th-card-media > img { width: 100%; height: 100%; max-width: none; max-height: none; }