/* ============================================================
   Surface System v2 — Phase 6
   Accessibility, contrast, touch targets and dark-band material.

   This layer loads last on the public site (and inside the operator
   shells via backoffice.css) so it is the final word on focus rings,
   hit areas and legibility. It only ever *raises* contrast and target
   size — it never repaints brand colour.
   ============================================================ */

/* ---------- 1. Contrast floors ------------------------------------- */

:root {
	/* Muted ink used to drift as low as 3.1:1 on tinted surfaces.
	   Mixing against the text colour instead of a flat grey keeps the
	   brand feel while landing at ~4.7:1 on --s-raised and --s-tint. */
	--s-ink-muted: color-mix(in srgb, var(--seraj-text, #141413) 68%, var(--seraj-surface, #fff));
	--seraj-muted: var(--s-ink-muted);

	/* Status inks are AA against both raised and sunken material. */
	--s-ok-ink: #14603c;
	--s-warn-ink: #7a5209;
	--s-danger-ink: #93201a;
	--s-info-ink: #204a70;

	/* Hit areas. 44px is the WCAG 2.2 AA target; 48 on coarse pointers. */
	--s-target: 44px;
	--s-target-lg: 48px;
}

@media (pointer: coarse) {
	:root { --s-target: var(--s-target-lg); }
}

/* Never let a body copy colour fall under the floor. */
.s-muted,
.seraj-muted,
.seraj-card__meta,
.seraj-kit-section-header__text p,
figcaption,
small { color: var(--s-ink-muted); }

/* Placeholder text is decoration, but it still has to be readable. */
input::placeholder,
textarea::placeholder { color: var(--s-ink-muted); opacity: 1; }

/* ---------- 2. One focus ring, everywhere -------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
	[role="tab"], [role="link"], [role="menuitem"], [role="option"]):focus-visible {
	outline: 2px solid var(--seraj-primary, #2f5d3a);
	outline-offset: 2px;
	border-radius: calc(var(--s-radius-xs) * var(--s-radius-scale));
}

/* Cards use the stretched-link pattern: the link is invisible, so the
   ring has to be drawn by the card it covers. */
.seraj-card:has(a:focus-visible),
.seraj-event-card:has(a:focus-visible),
.seraj-offer-card:has(a:focus-visible),
.seraj-pkg-card:has(a:focus-visible),
.seraj-photo-card:has(a:focus-visible),
.seraj-dest-card:has(a:focus-visible),
.seraj-exp-card:has(a:focus-visible),
.s-surface--interactive:has(a:focus-visible) {
	outline: 2px solid var(--seraj-primary, #2f5d3a);
	outline-offset: 3px;
}
.seraj-card__link:focus-visible,
.s-stretch:focus-visible { outline: none; }

/* On a dark band the brand green disappears — flip to a light ring. */
.seraj-on-dark :where(a, button, input, select, textarea, summary,
	[tabindex], [role="button"]):focus-visible,
.seraj-on-dark .seraj-card:has(a:focus-visible) {
	outline-color: #fff;
}

/* Skip links must be reachable, not just present. */
.seraj-skip-link:focus,
.sp-skip:focus,
.skip-link:focus {
	position: fixed;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	z-index: 10000;
	background: var(--s-raised);
	color: var(--seraj-text);
	padding: .7rem 1.1rem;
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	box-shadow: var(--s-shadow-floating);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* ---------- 3. Touch targets --------------------------------------- */

/* Anything that behaves like a control in navigation, toolbars, chips,
   pagination, bottom bars and card actions gets a real hit area. */
:where(
	.seraj-nav, .seraj-bottom-bar, .seraj-header, .seraj-footer,
	.s-toolbar, .s-chips, .s-pagination, .s-tabs,
	.seraj-kit-filter-bar, .seraj-card__actions
) :where(a, button, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"]) {
	min-height: var(--s-target);
	min-width: var(--s-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Icon-only buttons: pad out without changing the visual glyph size. */
.s-btn--icon,
.seraj-icon-btn,
button:has(> svg:only-child):not(.s-btn--bare) {
	min-height: var(--s-target);
	min-width: var(--s-target);
}

/* Text links inside prose keep their natural box — a 44px line height
   there would wreck the rhythm — but they get a generous underline. */
.s-prose a,
.entry-content a {
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}

/* Adjacent small controls need space so a thumb can't hit both. */
.s-chips > * + *,
.s-pagination > * + * { margin-inline-start: max(.35rem, 4px); }

/* ---------- 4. Dark-band card variants ----------------------------- */

/* tokens.css already flips the material variables inside .seraj-on-dark.
   Cards additionally carry their own palette, so map those too and fix
   the things that only misbehave on dark: scrims, media wells, hairline
   dividers, badges and hover borders. */
.seraj-on-dark {
	--seraj-card-bg: var(--s-raised);
	--seraj-card-border: rgba(255, 255, 255, .16);
	--seraj-card-ink: #f3f1ea;
	--seraj-card-muted: rgba(243, 241, 234, .72);
	--seraj-card-shadow: 0 1px 2px rgba(0, 0, 0, calc(.28 * var(--s-depth))),
		0 10px 28px -18px rgba(0, 0, 0, calc(.7 * var(--s-depth)));
	--seraj-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, calc(.34 * var(--s-depth))),
		0 26px 56px -22px rgba(0, 0, 0, calc(.8 * var(--s-depth)));
	--s-ink-muted: rgba(243, 241, 234, .72);
}

.seraj-on-dark :where(.seraj-card, .seraj-event-card, .seraj-offer-card,
	.seraj-pkg-card, .seraj-photo-card, .seraj-review-card, .seraj-dest-card,
	.seraj-exp-card, .s-surface) {
	color: var(--seraj-card-ink);
}

.seraj-on-dark :where(.seraj-card, .seraj-event-card, .seraj-offer-card,
	.seraj-pkg-card):hover {
	border-color: rgba(255, 255, 255, .32);
}

/* Media wells: the light-mode gradient reads as a grey patch on dark. */
.seraj-on-dark :where(.seraj-card__media, .seraj-event-card__media,
	.seraj-offer-card__media, .seraj-pkg-card__media) {
	background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
}

/* Dividers, wells and quiet chips inside dark cards. */
.seraj-on-dark :where(.seraj-card__foot, .seraj-card__divider, .s-panel__head,
	.s-panel__foot, .s-table th, .s-table td) { border-color: rgba(255, 255, 255, .14); }
.seraj-on-dark :where(.s-panel__head, .s-panel__foot, .s-surface--sunken) {
	background: rgba(0, 0, 0, .22);
}

/* Badges keep their meaning but need light ink on dark. */
.seraj-on-dark :where(.s-badge, .seraj-card__badge) {
	background: rgba(255, 255, 255, .14);
	color: #f3f1ea;
	border-color: rgba(255, 255, 255, .2);
}
.seraj-on-dark :where(.s-badge--ok) { color: #8fe0b4; }
.seraj-on-dark :where(.s-badge--warn) { color: #f3cf8a; }
.seraj-on-dark :where(.s-badge--danger) { color: #f6b2ac; }
.seraj-on-dark :where(.s-badge--info) { color: #a8cdf0; }

/* Price / accent text on dark bands. */
.seraj-on-dark :where(.seraj-card__price, .seraj-card__accent, .s-stat__value) {
	color: #f3f1ea;
}

/* ---------- 5. State that isn't colour alone ------------------------ */

/* Error and success states pair colour with an icon glyph so the meaning
   survives colour blindness and greyscale printing. */
.s-field--error .s-field__msg::before,
.seraj-form-error::before { content: "⚠ "; }
.s-field--ok .s-field__msg::before,
.seraj-form-ok::before { content: "✓ "; }

.s-field--error :where(input, select, textarea) {
	border-color: var(--s-danger-ink);
	box-shadow: 0 0 0 1px var(--s-danger-ink);
}
.s-field__msg { color: var(--s-danger-ink); font-size: .85rem; }

/* Current page markers get weight and a rule, not just a tint. */
[aria-current="page"],
[aria-current="true"] { font-weight: 650; }

/* Disabled controls stay above the contrast floor while reading inert. */
:where(button, a, input, select, textarea)[disabled],
[aria-disabled="true"] {
	opacity: var(--s-disabled-opacity);
	cursor: not-allowed;
}

/* ---------- 6. Screen-reader and motion hygiene --------------------- */

.s-sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-s-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 7. Forced colours / high contrast ----------------------- */

@media (forced-colors: active) {
	.seraj-card,
	.s-surface,
	.s-panel { border: 1px solid CanvasText; box-shadow: none; }
	.s-btn { border: 1px solid ButtonText; }
	:where(a, button):focus-visible { outline: 2px solid Highlight; }
	.seraj-card__media::after { display: none; }
}