@charset "UTF-8";
/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
 *
 * This file is part of a Moko Consulting project.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * FILE INFORMATION
 * DEFGROUP: Joomla.Template.Site
 * INGROUP: MokoOnyx.Accessibility
 * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx
 * PATH: ./media/css/a11y-high-contrast.css
 * VERSION: 03.09.14
 * BRIEF: High-contrast stylesheet for accessibility toolbar
 */

/* ===================================================================
 * HIGH CONTRAST MODE
 * Applied when .a11y-high-contrast is on <html>.
 * Overrides theme variables to maximise contrast ratios (WCAG AAA).
 * =================================================================== */

/* ── Light mode high contrast ─────────────────────────────────────── */
:root[data-bs-theme="light"].a11y-high-contrast {
	--body-color: #000;
	--body-color-rgb: 0, 0, 0;
	--body-bg: #fff;
	--body-bg-rgb: 255, 255, 255;
	--heading-color: #000;
	--emphasis-color: #000;
	--secondary-color: #000000bf;
	--tertiary-color: #00000080;
	--muted-color: #333;

	/* Links — strong blue on white */
	--color-link: #0000ee;
	--link-color: #0000ee;
	--link-color-rgb: 0, 0, 238;
	--color-hover: #cc0000;
	--link-hover-color: #cc0000;
	--link-hover-color-rgb: 204, 0, 0;

	/* Borders — visible on all backgrounds */
	--border-color: #000;
	--border-color-soft: #333;

	/* Backgrounds */
	--secondary-bg: #e0e0e0;
	--secondary-bg-rgb: 224, 224, 224;
	--tertiary-bg: #f0f0f0;
	--tertiary-bg-rgb: 240, 240, 240;

	/* Navigation */
	--nav-bg-color: #000;
	--nav-text-color: #fff;
	--mainmenu-nav-link-color: #fff;

	/* Buttons */
	--btn-color: #fff;
	--btn-bg: #000;
	--btn-border-color: #000;
	--btn-hover-color: #000;
	--btn-hover-bg: #ffff00;
	--btn-hover-border-color: #000;
	--btn-active-color: #000;
	--btn-active-bg: #ffff00;
	--btn-active-border-color: #000;

	/* Forms */
	--input-color: #000;
	--input-bg: #fff;
	--input-border-color: #000;
	--input-focus-color: #000;
	--input-focus-bg: #ffffcc;
	--input-focus-border-color: #0000ee;
	--input-placeholder-color: #555;

	/* Cards */
	--card-border-color: #000;
	--card-bg: #fff;
	--card-cap-bg: #e0e0e0;

	/* Tables */
	--table-color: #000;
	--table-bg: #fff;
	--table-border-color: #000;
	--table-striped-bg: #f0f0f0;
	--table-hover-bg: #ffff99;

	/* Alerts */
	--alert-border-width: 2px;

	/* Code */
	--code-color: #000;
	--code-bg-color: #ffffcc;

	/* Selection */
	--selection-bg: #0000ee;
	--selection-ink: #fff;

	/* Focus indicator — always visible */
	--focus-ring-color: #0000ee;
	--focus-ring-width: 3px;
}

/* ── Dark mode high contrast ──────────────────────────────────────── */
:root[data-bs-theme="dark"].a11y-high-contrast {
	--body-color: #fff;
	--body-color-rgb: 255, 255, 255;
	--body-bg: #000;
	--body-bg-rgb: 0, 0, 0;
	--heading-color: #fff;
	--emphasis-color: #fff;
	--secondary-color: #ffffffbf;
	--tertiary-color: #ffffff80;
	--muted-color: #ccc;

	/* Links — bright yellow on black */
	--color-link: #ffff00;
	--link-color: #ffff00;
	--link-color-rgb: 255, 255, 0;
	--color-hover: #00ffff;
	--link-hover-color: #00ffff;
	--link-hover-color-rgb: 0, 255, 255;

	/* Borders */
	--border-color: #fff;
	--border-color-soft: #ccc;

	/* Backgrounds */
	--secondary-bg: #1a1a1a;
	--secondary-bg-rgb: 26, 26, 26;
	--tertiary-bg: #111;
	--tertiary-bg-rgb: 17, 17, 17;

	/* Navigation */
	--nav-bg-color: #000;
	--nav-text-color: #fff;
	--mainmenu-nav-link-color: #ffff00;

	/* Buttons */
	--btn-color: #000;
	--btn-bg: #ffff00;
	--btn-border-color: #ffff00;
	--btn-hover-color: #000;
	--btn-hover-bg: #00ffff;
	--btn-hover-border-color: #00ffff;
	--btn-active-color: #000;
	--btn-active-bg: #00ffff;
	--btn-active-border-color: #00ffff;

	/* Forms */
	--input-color: #fff;
	--input-bg: #000;
	--input-border-color: #fff;
	--input-focus-color: #fff;
	--input-focus-bg: #1a1a1a;
	--input-focus-border-color: #ffff00;
	--input-placeholder-color: #aaa;

	/* Cards */
	--card-border-color: #fff;
	--card-bg: #000;
	--card-cap-bg: #1a1a1a;

	/* Tables */
	--table-color: #fff;
	--table-bg: #000;
	--table-border-color: #fff;
	--table-striped-bg: #111;
	--table-hover-bg: #333;

	/* Alerts */
	--alert-border-width: 2px;

	/* Code */
	--code-color: #00ff00;
	--code-bg-color: #1a1a1a;

	/* Selection */
	--selection-bg: #ffff00;
	--selection-ink: #000;

	/* Focus indicator */
	--focus-ring-color: #ffff00;
	--focus-ring-width: 3px;
}

/* ── Shared high-contrast overrides (both modes) ──────────────────── */
.a11y-high-contrast * {
	border-color: var(--border-color) !important;
}

.a11y-high-contrast *:focus-visible {
	outline: var(--focus-ring-width, 3px) solid var(--focus-ring-color, #0000ee) !important;
	outline-offset: 2px !important;
}

.a11y-high-contrast img {
	outline: 2px solid var(--border-color);
}

.a11y-high-contrast a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
}

.a11y-high-contrast button,
.a11y-high-contrast .btn,
.a11y-high-contrast input,
.a11y-high-contrast select,
.a11y-high-contrast textarea {
	border-width: 2px !important;
	border-style: solid !important;
}

.a11y-high-contrast .badge,
.a11y-high-contrast .alert {
	border: 2px solid var(--border-color) !important;
}

/* Ensure disabled states are still distinguishable */
.a11y-high-contrast [disabled],
.a11y-high-contrast .disabled {
	opacity: .5 !important;
	text-decoration: line-through !important;
}
