/* =========================================================================
   RentDrive Pro — Accessibility Layer (v3.3.0)

   Loaded LAST so it can correct any component that removed a focus ring or
   under-sized a tap target. Everything here is the result of the UI audit:

     1. Visible focus on every interactive element (WCAG 2.4.7)
     2. 44px minimum tap targets (WCAG 2.5.5)
     3. Accessible brass for small text (WCAG 1.4.3)
     4. Skip-to-content link
     5. Global reduced-motion honouring
     6. Forced-colors / high-contrast mode support
     7. Print styles
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FOCUS — the audit found `outline:none` used 5x with no replacement,
   and ZERO focus rules in layouts.css, filters.css and account.css.
   A keyboard user could not see where they were. This restores it globally.
   ---------------------------------------------------------------------- */

/* Baseline: every focusable thing gets a ring. :focus-visible means mouse
   users don't see it, only keyboard/AT users — no visual regression. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
	outline: var(--rdp-focus-outline);
	outline-offset: 2px;
	border-radius: var(--rdp-radius-sm);
}

/* Form controls: ring instead of outline so the field shape is preserved. */
.rdp-field input:focus-visible,
.rdp-field select:focus-visible,
.rdp-field textarea:focus-visible,
.rdp-search-field input:focus-visible,
.rdp-search-field select:focus-visible,
.rdp-filters-sidebar input:focus-visible,
.rdp-filters-sidebar select:focus-visible,
.rdp-account-form input:focus-visible,
.rdp-account-form select:focus-visible,
.rdp-account-form textarea:focus-visible {
	outline: none;
	border-color: var(--rdp-primary-text);
	box-shadow: var(--rdp-focus-ring);
}

/* Buttons and cards keep the ring clear of their own border. */
.rdp-btn:focus-visible,
.rdp-view-btn:focus-visible,
.rdp-social-link:focus-visible,
.rdp-dark-toggle:focus-visible,
.rdp-lang-toggle:focus-visible,
.rdp-vehicle-card a:focus-visible,
.rdp-category-card:focus-visible {
	outline: var(--rdp-focus-outline);
	outline-offset: 3px;
}

/* Never allow a bare removal to win. */
*:focus-visible { outline-color: var(--rdp-primary-text); }

/* -------------------------------------------------------------------------
   2. TAP TARGETS — audit measured 40px; WCAG 2.5.5 and Apple HIG want 44px.
   ---------------------------------------------------------------------- */
.rdp-dark-toggle,
.rdp-lang-toggle,
.rdp-view-btn,
.rdp-btn-sm,
.rdp-social-link,
.rdp-notice-dismiss,
.rdp-mobile-nav-toggle {
	min-height: var(--rdp-tap);
	min-width: var(--rdp-tap);
}

/* Footer social circles were 40px — bring to spec without changing the
   visual circle size, by expanding the hit area only. */
.rdp-social-header .rdp-social-link,
.rdp-social-topbar .rdp-social-link {
	position: relative;
}
.rdp-social-header .rdp-social-link::after,
.rdp-social-topbar .rdp-social-link::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: var(--rdp-tap);
	height: var(--rdp-tap);
}

/* Inline text links in dense lists need vertical breathing room to be
   tappable without hitting a neighbour. */
.rdp-footer-menu a,
.rdp-menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--rdp-tap);
}

/* -------------------------------------------------------------------------
   3. CONTRAST — brass (#B8863B) is 3.07:1 on paper: fine for large text and
   buttons, FAILS for anything under 18px. These are the small-text uses the
   audit flagged; each switches to the accessible brass.
   ---------------------------------------------------------------------- */
.rdp-section-kicker,
.rdp-location-fee,
.rdp-price-row .rdp-discount,
.rdp-booking-due span:last-child,
.rdp-rating-number,
.rdp-feature-list li::before,
.rdp-widget-title,
small.rdp-brass,
.rdp-text-brass-sm {
	color: var(--rdp-primary-text);
}

/* Accent used small (error text, required marks) gets its darker variant. */
.rdp-req,
.rdp-inline-msg-error,
.rdp-form-error {
	color: var(--rdp-accent-text);
}

/* In dark mode the original brass already passes (5.38:1), so restore it —
   the darker variant would be too dim against a dark surface. */
html.rdp-dark .rdp-section-kicker,
html.rdp-dark .rdp-location-fee,
html.rdp-dark .rdp-rating-number,
html.rdp-dark .rdp-feature-list li::before,
html.rdp-dark .rdp-booking-due span:last-child {
	color: var(--rdp-primary-light);
}
html.rdp-dark .rdp-widget-title { color: #FFFFFF; }

/* -------------------------------------------------------------------------
   4. SKIP LINK — lets keyboard users jump past the header nav.
   ---------------------------------------------------------------------- */
.rdp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 12px 20px;
	background: var(--rdp-ink);
	color: #fff;
	font-size: var(--rdp-text-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--rdp-radius-sm) 0;
}
.rdp-skip-link:focus {
	left: 0;
	outline: 3px solid var(--rdp-primary-light);
	outline-offset: -3px;
}

/* -------------------------------------------------------------------------
   5. REDUCED MOTION — global, not per-stylesheet.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.rdp-vehicle-card:hover,
	.rdp-category-card:hover,
	.rdp-social-link:hover,
	.rdp-contact-card:hover {
		transform: none !important;
	}
}

/* -------------------------------------------------------------------------
   6. FORCED COLORS (Windows High Contrast) — borders must survive when the
   OS replaces the palette, or cards and fields become invisible boxes.
   ---------------------------------------------------------------------- */
@media (forced-colors: active) {
	.rdp-vehicle-card,
	.rdp-category-card,
	.rdp-review-item,
	.rdp-contact-card,
	.rdp-booking-card,
	.rdp-field input,
	.rdp-field select,
	.rdp-field textarea {
		border: 1px solid CanvasText;
	}
	.rdp-btn-primary,
	.rdp-btn-accent {
		border: 2px solid ButtonText;
	}
	.rdp-star.is-full,
	.rdp-star.is-half { fill: Highlight; }
	.rdp-rail-step.is-done .rdp-rail-dot { background: Highlight; }
	*:focus-visible { outline: 3px solid Highlight !important; }
}

/* -------------------------------------------------------------------------
   7. PRINT — customers print booking confirmations and invoices.
   ---------------------------------------------------------------------- */
@media print {
	.rdp-site-header,
	.rdp-site-footer,
	.rdp-sticky-book-bar,
	.rdp-fab,
	.rdp-notice-bar,
	.rdp-booking-rail,
	.rdp-filters-sidebar,
	.rdp-dark-toggle,
	.rdp-lang-toggle,
	.rdp-social-icons { display: none !important; }

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
	}
	.rdp-container { max-width: 100%; padding: 0; }
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
	.rdp-vehicle-card,
	.rdp-booking-card { break-inside: avoid; border: 1px solid #999; }
}

/* -------------------------------------------------------------------------
   8. TEXT SIZING — respect user zoom and avoid iOS auto-zoom on focus.
   iOS zooms the viewport if an input's font-size is under 16px.
   ---------------------------------------------------------------------- */
input,
select,
textarea {
	font-size: max(16px, 1rem);
}
@media (min-width: 782px) {
	/* On desktop there is no auto-zoom, so allow the designed size back. */
	input, select, textarea { font-size: var(--rdp-text-base); }
}

/* -------------------------------------------------------------------------
   9. SCREEN-READER UTILITY (shared)
   ---------------------------------------------------------------------- */
.rdp-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.rdp-sr-only-focusable:focus {
	position: static !important;
	width: auto; height: auto;
	clip: auto; white-space: normal;
}