/**
 * iRepair Core — interaction states.
 *
 * The snapshot shipped every element's resting style inline but none of its
 * :hover/:focus rules: the design compiler's scoped classes (.scp6, .scp7 …)
 * never made it into main-combined.css, which contains exactly one :hover rule
 * in 30KB. The intent survived in two places, and this file reconnects both:
 *
 *   1. Elements already declare the transition they were meant to animate
 *      (cards carry `transition: box-shadow .2s, transform .2s`) — the rule that
 *      triggered it was simply missing.
 *   2. The design system already defines --navy-hover, --gold-hover and a
 *      shadow ladder (--shadow-sm -> --shadow-card -> --shadow-overlay) that
 *      nothing referenced.
 *
 * So no values are invented here; the brand's own hover tokens are wired up.
 *
 * On !important: the snapshot sets background/color/border/box-shadow inline,
 * and inline styles outrank any selector. Overriding them on hover is not
 * optional — it is the only way a rule can apply to these elements.
 */

/* --------------------------------------------------------------- foundations */

/*
 * The snapshot ships no focus styling at all, so keyboard users currently fall
 * back to the browser default ring, which is invisible against navy. Gold clears
 * WCAG AA for non-text contrast on navy, cream and surface alike.
 *
 * Scoped to the generated chrome (.rhx-top header, .rhx-sec sections, .rhx-drawer)
 * rather than a plugin wrapper class — the widgets render no wrapper of their own.
 */
.rhx-top a:focus-visible,
.rhx-top button:focus-visible,
.rhx-sec a:focus-visible,
.rhx-sec button:focus-visible,
.rhx-drawer a:focus-visible,
.rhx-drawer button:focus-visible,
.ir-accordion-trigger:focus-visible,
.ir-pill:focus-visible,
.ir-dot:focus-visible,
.ir-slider-arrow:focus-visible {
	outline: 2px solid var(--gold) !important;
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---------------------------------------------------------------- accordion */

.ir-accordion-trigger {
	transition: background 0.2s ease, color 0.2s ease;
}

.ir-accordion-trigger:hover {
	background: var(--navy-04) !important;
}

.ir-accordion-trigger[aria-expanded='true'] {
	background: var(--navy-04) !important;
}

/* Nudge the label toward the reading edge on hover — reads as "pressable". */
.ir-accordion-trigger > span:first-child {
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ir-accordion-trigger:hover > span:first-child {
	transform: translateX(2px);
}

[dir='rtl'] .ir-accordion-trigger:hover > span:first-child {
	transform: translateX(-2px);
}

/*
 * Plus -> minus as a morph: the vertical bar rotates onto the horizontal one and
 * fades, rather than swapping two glyphs. initAccordions() injects the bar into
 * icons that lack it so open and closed items animate identically.
 */
.ir-vbar {
	transform-origin: 12px 12px;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.ir-accordion-trigger[aria-expanded='true'] .ir-vbar {
	transform: rotate(90deg);
	opacity: 0;
}

.ir-accordion-trigger .ir-vbar {
	transform: rotate(0deg);
	opacity: 1;
}

/* -------------------------------------------------------------------- cards */

/*
 * The card already declares `transition: box-shadow .2s, transform .2s` and rests
 * on --shadow-sm; this supplies the hover half the snapshot dropped.
 *
 * The transform needs !important for a second reason beyond inline styles: cards
 * are `class="rhx-anim scp6"` and run the rhxIn reveal with animation-fill-mode:
 * both, so the animation's final `transform: none` keyframe keeps applying after
 * it finishes. CSS ranks animations above normal author declarations, so a plain
 * hover transform is silently ignored; an important one wins.
 */
.scp6 {
	will-change: transform;
}

.scp6:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--shadow-overlay) !important;
	border-color: var(--gold) !important;
}

.scp6:focus-within {
	box-shadow: var(--shadow-card) !important;
	border-color: var(--gold) !important;
}

/* The icon tile picks up the brand gold as the card lifts. */
.scp6 [style*='border-radius: 13px'] {
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.scp6:hover [style*='border-radius: 13px'] {
	background: var(--gold-12) !important;
	color: var(--gold) !important;
	transform: scale(1.06) rotate(-3deg) !important;
}

/* ---------------------------------------------------------------- buttons */

.scp7,
.scp8 {
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
		box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Filled navy CTA -> the design system's own navy hover. */
.scp7:hover {
	background: var(--navy-hover) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-card) !important;
}

.scp7:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm) !important;
}

/* Outline CTA fills toward gold rather than shifting layout. */
.scp8:hover {
	background: var(--gold-12) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
	transform: translateY(-2px);
}

.scp8:active {
	transform: translateY(0);
}

/* Gold buttons anywhere in the widget library. */
[style*='background: var(--gold)']:hover,
[style*='background:var(--gold)']:hover {
	background: var(--gold-hover) !important;
}

/* ------------------------------------------------------------- filter pills */

/*
 * Inactive pill background/color are driven inline by initFilters(); only the
 * inactive state gets a hover tint so it never fights the active pill.
 */
.ir-pill {
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.ir-pill[aria-selected='false']:hover {
	background: var(--navy-08) !important;
	color: var(--navy) !important;
}

.ir-pill:active {
	transform: scale(0.97);
}

/* ------------------------------------------------------------------ slider */

.ir-slider-arrow {
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ir-slider-arrow:hover {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
}

.ir-slider-arrow[aria-label='Previous']:hover {
	transform: translateX(-2px);
}

.ir-slider-arrow[aria-label='Next']:hover {
	transform: translateX(2px);
}

[dir='rtl'] .ir-slider-arrow[aria-label='Previous']:hover {
	transform: translateX(2px);
}

[dir='rtl'] .ir-slider-arrow[aria-label='Next']:hover {
	transform: translateX(-2px);
}

/* Width/background are set inline per state by initSliders(). */
.ir-dot:hover[aria-current='false'] {
	background: rgba(245, 244, 239, 0.7) !important;
}

.ir-dot {
	transition: width 0.25s ease, background 0.25s ease, transform 0.15s ease;
}

.ir-dot:active {
	transform: scale(0.9);
}

/* ------------------------------------------------------------ mobile drawer */

.rhx-drawer a {
	transition: color 0.2s ease, padding-inline-start 0.2s ease, background 0.2s ease;
}

.rhx-drawer a:hover {
	color: var(--gold) !important;
	padding-inline-start: 16px;
	background: rgba(255, 255, 255, 0.04);
}

.rhx-burger,
.rhx-drawer [aria-label='Close'] {
	transition: background 0.2s ease, transform 0.2s ease;
}

.rhx-burger:hover,
.rhx-drawer [aria-label='Close']:hover {
	background: rgba(255, 255, 255, 0.2) !important;
}

.rhx-drawer [aria-label='Close']:hover {
	transform: rotate(90deg);
}

/* --------------------------------------------------------------- nav links */

/* A gold rule sweeps in from the reading edge — logical props keep RTL correct. */
.rhx-nav-links a {
	position: relative;
	transition: color 0.2s ease;
}

.rhx-nav-links a::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--gold);
	transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.rhx-nav-links a:hover::after,
.rhx-nav-links a:focus-visible::after {
	width: 100%;
}

.rhx-nav-links a:hover {
	color: var(--gold) !important;
}

/* -------------------------------------------------------- filter hiding */

/*
 * The filter marks non-matching cards with the `hidden` attribute, but every card
 * carries an inline `display: flex` — and an inline style outranks the UA
 * stylesheet's `[hidden] { display: none }`. Without this the attribute is set
 * correctly and the cards stay fully visible, so filtering silently does nothing.
 * Scoped to the two filtered grids rather than a global [hidden] override.
 */
.rhx-catalog-grid > [hidden],
.rhx-services-grid > [hidden] {
	display: none !important;
}

/* -------------------------------------------------------- filter reveal */

/*
 * Staggered reveal when a filter changes the visible set. --ir-i is the card's
 * index among currently shown cards, so the cascade always starts at zero.
 */
@keyframes ir-card-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ir-card-in {
	animation: ir-card-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--ir-i, 0) * 45ms);
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.scp6,
	.scp6:hover,
	.scp7:hover,
	.scp8:hover,
	.ir-slider-arrow:hover,
	.ir-pill:active,
	.ir-dot:active,
	.scp6:hover [style*='border-radius: 13px'],
	.ir-accordion-trigger:hover > span:first-child,
	.rhx-drawer [aria-label='Close']:hover {
		transform: none !important;
	}

	.ir-card-in {
		animation: none;
	}

	.ir-vbar {
		transition: opacity 0.2s ease;
	}

	/*
	 * Colour and shadow feedback is retained: reduced motion means less movement,
	 * not less affordance.
	 */
}