/**
 * Shared High-Contrast Accessibility Overrides
 * Loaded by all Pflanzenschützer child themes (ernesto-pf, ernesto-pfs, ernesto-pfsr).
 *
 * The parent theme's accessibility.css handles generic elements and sets
 * body.high-contrast token overrides (--color-primary: #0000ff, --bg-surface:
 * #fef8e3, etc.). This file fills the gaps that are common across all child
 * themes: missing token overrides, hero slider treatment, and system-level
 * forced-colors / prefers-contrast hooks.
 *
 * Theme-specific classes (hp-*, pfsr-*, etc.) are handled in each
 * child theme's own child.css.
 */


/* ── 1. Missing token overrides ──────────────────────────────────────────── */
/*
 * The parent accessibility.css does not override --color-secondary.
 * All child themes use it for pill/badge backgrounds. Set it to the
 * high-contrast navy so any var(--color-secondary) usage becomes legible.
 * --ps-accent aliases --color-primary (already #0000ff in HC), so it
 * cascades correctly for ernesto-pf; the declaration here is a safety net.
 */
body.high-contrast {
	--color-secondary: #000066;
	--ps-accent:       #0000ff;   /* already resolves via --color-primary; belt-and-braces */
}


/* ── 2. Hero slider — high contrast layout ───────────────────────────────── */
/*
 * The animated/fading slider is replaced with a plain vertical list of
 * horizontal cards (text left, image right). All slides are visible at once —
 * no interaction needed, works with keyboard/screen-reader in reading order.
 * Slider chrome (arrows, dots) is hidden.
 */

/* Constrain to page container width (matches all other sections) */
body.high-contrast .ernesto-hero-slider {
	max-width:    var(--container-width, 1200px) !important;
	margin-left:  auto    !important;
	margin-right: auto    !important;
	overflow:     visible !important;
}

/* Remove auto-centering margins from description — it must left-align with title */
body.high-contrast .ernesto-hero-slider .slide-description {
	max-width:    none !important;
	margin-left:  0    !important;
	margin-right: 0    !important;
}

/* Step 1: turn the slider container into a simple flex column */
body.high-contrast .ernesto-hero-slider .slider-container {
	display:          flex          !important;
	flex-direction:   column        !important;
	overflow:         visible       !important;
	scroll-snap-type: none          !important;
	gap:              1rem          !important;
}

/* Step 2: each slide → horizontal card (text left, image right) */
body.high-contrast .ernesto-hero-slider .slider-slide {
	display:        flex            !important;
	flex-direction: row             !important;
	opacity:        1               !important;
	pointer-events: auto            !important;
	grid-area:      auto            !important;
	width:          100%            !important;
	min-height:     200px;
	background:     #fef8e3         !important;
	border:         2px solid #000066 !important;
	transition:     none            !important;
}

/* Step 3: image → right column, fixed width, fills card height */
body.high-contrast .ernesto-hero-slider .slide-image {
	flex:         0 0 42%  !important;
	order:        2        !important;
	position:     relative !important;
	top:          auto     !important;
	left:         auto     !important;
	width:        auto     !important;
	height:       auto     !important;
	min-height:   200px    !important;
	max-height:   none     !important;
	overflow:     hidden;
}

body.high-contrast .ernesto-hero-slider .slide-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Remove overlay gradient */
body.high-contrast .ernesto-hero-slider .slide-image::after,
body.high-contrast .ernesto-hero-slider .slide-text-light .slide-image::after,
body.high-contrast .ernesto-hero-slider .slide-text-dark  .slide-image::after {
	display: none !important;
}

/* Step 4: content panel → left column, centred vertically */
body.high-contrast .ernesto-hero-slider .slide-content {
	flex:       1          !important;
	order:      1          !important;
	position:   relative   !important;
	width:      auto       !important;
	max-width:  none       !important;
	margin:     0          !important;
	padding:    1.5rem     !important;
	background: #fef8e3    !important;
	color:      #000066    !important;
	text-align: left       !important;
	border:     none       !important;
	display:    flex       !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* Text colours */
body.high-contrast .ernesto-hero-slider .slide-title,
body.high-contrast .ernesto-hero-slider .slide-text-light .slide-title,
body.high-contrast .ernesto-hero-slider .slide-text-dark  .slide-title {
	color:       #000066 !important;
	text-shadow: none    !important;
}

body.high-contrast .ernesto-hero-slider .slide-description,
body.high-contrast .ernesto-hero-slider .slide-text-light .slide-description,
body.high-contrast .ernesto-hero-slider .slide-text-dark  .slide-description {
	color:       #000066 !important;
	text-shadow: none    !important;
}

/* CTA button */
body.high-contrast .ernesto-hero-slider .slide-button,
body.high-contrast .ernesto-hero-slider .slide-button.button {
	align-self:       flex-start !important;
	background-color: #0000ff    !important;
	color:            #ffffff    !important;
	border:           2px solid #0000ff !important;
	border-radius:    0          !important;
	text-shadow:      none       !important;
}

body.high-contrast .ernesto-hero-slider .slide-button:hover,
body.high-contrast .ernesto-hero-slider .slide-button.button:hover {
	background-color: #0000cc !important;
	border-color:     #0000cc !important;
}

/* Hide slider chrome — not needed in linear layout */
body.high-contrast .ernesto-hero-slider .slider-arrow,
body.high-contrast .ernesto-hero-slider .slider-dots,
body.high-contrast .ernesto-hero-slider .slider-dot {
	display: none !important;
}

/* No transitions in HC layout */
body.high-contrast .ernesto-hero-slider .slider-slide,
body.high-contrast .ernesto-hero-slider .slide-image img {
	transition: none !important;
}


/* ── 3. System-level overrides ───────────────────────────────────────────── */
/*
 * @media (prefers-contrast: high) fires for users who have set "Increase
 * Contrast" at the OS level without using our toolbar toggle. Apply the same
 * core overrides so the experience is consistent.
 */
@media (prefers-contrast: high) {
	:root {
		--color-secondary: #000066;
		--ps-accent:       #0000ff;
	}

	/* Constrain to page container width */
	.ernesto-hero-slider {
		max-width:    var(--container-width, 1200px) !important;
		margin-left:  auto    !important;
		margin-right: auto    !important;
		overflow:     visible !important;
	}

	/* Remove auto-centering margins from description */
	.ernesto-hero-slider .slide-description {
		max-width:    none !important;
		margin-left:  0    !important;
		margin-right: 0    !important;
	}

	/* Same horizontal card layout as body.high-contrast */
	.ernesto-hero-slider .slider-container {
		display: flex !important;
		flex-direction: column !important;
		overflow: visible !important;
		gap: 1rem !important;
	}

	.ernesto-hero-slider .slider-slide {
		display: flex !important;
		flex-direction: row !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		grid-area: auto !important;
		width: 100% !important;
		min-height: 200px;
		background: #fef8e3 !important;
		border: 2px solid #000066 !important;
		transition: none !important;
	}

	.ernesto-hero-slider .slide-image {
		flex: 0 0 42% !important;
		order: 2 !important;
		position: relative !important;
		top: auto !important; left: auto !important;
		width: auto !important; height: auto !important;
		min-height: 200px !important; max-height: none !important;
	}

	.ernesto-hero-slider .slide-image::after { display: none !important; }

	.ernesto-hero-slider .slide-content {
		flex: 1 !important; order: 1 !important;
		position: relative !important;
		width: auto !important; max-width: none !important;
		margin: 0 !important; padding: 1.5rem !important;
		background: #fef8e3 !important;
		border: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
	}

	.ernesto-hero-slider .slide-title,
	.ernesto-hero-slider .slide-description {
		color: #000066 !important;
		text-shadow: none !important;
	}

	.ernesto-hero-slider .slide-button,
	.ernesto-hero-slider .slide-button.button {
		background-color: #0000ff !important;
		color:            #ffffff !important;
		border:           2px solid #0000ff !important;
		border-radius:    0 !important;
	}

	.ernesto-hero-slider .slider-arrow,
	.ernesto-hero-slider .slider-dots,
	.ernesto-hero-slider .slider-dot { display: none !important; }
}


/* ── 4. Forced-colors (Windows High Contrast Mode) ───────────────────────── */
/*
 * Windows WHCM replaces all colours with system keywords.
 * Ensure interactive elements use the correct system colours so they remain
 * distinguishable; the browser handles most things automatically.
 */
@media (forced-colors: active) {
	.ernesto-hero-slider .slide-button,
	.ernesto-hero-slider .slide-button.button {
		forced-color-adjust: none;
		background-color:    ButtonFace;
		color:               ButtonText;
		border:              2px solid ButtonText;
	}

	.ernesto-hero-slider .slider-arrow {
		forced-color-adjust: none;
		background:          ButtonFace;
		color:               ButtonText;
		border:              1px solid ButtonText;
	}
}