/**
 * Rajgir Parent Theme
 *
 * Base CSS — Accessibility
 *
 * Canonical path:
 * assets/css/base/accessibility.css
 *
 * Responsibility:
 * - Accessibility-first CSS foundation.
 * - Visible keyboard focus.
 * - Screen-reader utility presentation.
 * - Reduced-motion support.
 * - Accessible hiding without removing semantic content.
 * - Text/content readability safeguards.
 * - Accessible interaction-state foundation.
 *
 * This file does NOT:
 * - replace semantic HTML;
 * - implement keyboard JavaScript;
 * - implement focus management;
 * - implement screen-reader behavior;
 * - perform validation;
 * - define authorization;
 * - define business logic;
 * - define page-specific accessibility rules;
 * - invent a WCAG conformance level.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. ACCESSIBLE FOCUS
   ========================================================================== */

:where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   2. NEVER REMOVE FOCUS WITHOUT AN ACCESSIBLE REPLACEMENT
   ========================================================================== */

/*
 * Do not use:
 *
 * outline: none;
 *
 * or:
 *
 * outline: 0;
 *
 * on interactive controls unless an equally visible and accessible
 * focus indicator is explicitly provided by the consuming component.
 */


/* ==========================================================================
   3. KEYBOARD NAVIGATION FOUNDATION
   ========================================================================== */

/*
 * CSS cannot implement keyboard navigation.
 *
 * Interactive controls must remain natively focusable where applicable.
 *
 * Native:
 *
 * <a>
 * <button>
 * <input>
 * <select>
 * <textarea>
 * <summary>
 *
 * are preferred over fake interactive elements.
 */


/* ==========================================================================
   4. SCREEN READER TEXT
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/*
 * Screen-reader-only content remains in the accessibility tree.
 *
 * It must not be used to hide meaningful content from all users.
 */


/* ==========================================================================
   5. SCREEN READER TEXT — FOCUS RESTORATION
   ========================================================================== */

.screen-reader-text:focus,
.screen-reader-text:active {
	position: absolute !important;

	top: 0;
	left: 0;

	z-index:
		var(--rajgir-layer-sticky);

	width: auto !important;
	height: auto !important;

	padding:
		var(--rajgir-space-component-internal) !important;

	margin: 0 !important;

	overflow: visible !important;

	clip: auto !important;
	clip-path: none !important;

	white-space: normal !important;

	background:
		var(--rajgir-color-background);

	color:
		var(--rajgir-color-text);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-control);
}


/* ==========================================================================
   6. HIDDEN ATTRIBUTE
   ========================================================================== */

[hidden] {
	display: none !important;
}


/* ==========================================================================
   7. ACCESSIBLE CONTENT VISIBILITY
   ========================================================================== */

/*
 * Do not use:
 *
 * display: none;
 * visibility: hidden;
 * opacity: 0;
 *
 * merely to visually remove content that must remain available to
 * assistive technology.
 *
 * Use the screen-reader utility only where the content is intentionally
 * visually hidden but semantically required.
 */


/* ==========================================================================
   8. LINKS
   ========================================================================== */

a {
	text-underline-offset:
		0.15em;
}


/*
 * Links must remain distinguishable through more than color alone
 * where surrounding context would otherwise make their purpose unclear.
 *
 * Exact visual contrast and component-specific styling belong to the
 * Design System / component layer.
 */


/* ==========================================================================
   9. IMAGES
   ========================================================================== */

img {
	max-width: 100%;
	height: auto;
}


/*
 * Meaningful image alternative text is supplied through HTML attributes.
 *
 * CSS cannot provide meaningful alt text.
 */


/* ==========================================================================
   10. CONTENT MUST NOT DEPEND ON COLOR ALONE
   ========================================================================== */

/*
 * CSS must not create a state system in which color is the only
 * communication mechanism.
 *
 * Example:
 *
 * Error
 *     Color + text/icon/state
 *
 * Success
 *     Color + text/icon/state
 *
 * The semantic meaning belongs to HTML/application state.
 */


/* ==========================================================================
   11. FORM ACCESSIBILITY FOUNDATION
   ========================================================================== */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   12. INVALID FORM STATE
   ========================================================================== */

[aria-invalid="true"] {
	border-color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   13. DISABLED STATE
   ========================================================================== */

:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}


/*
 * Disabled state must not rely on opacity alone to communicate meaning.
 *
 * The semantic disabled state remains in HTML/ARIA where applicable.
 */


/* ==========================================================================
   14. LIVE / DYNAMIC STATE FOUNDATION
   ========================================================================== */

/*
 * Dynamic status and error communication must be represented through
 * appropriate semantic markup / ARIA.
 *
 * CSS must not be the only mechanism communicating:
 *
 * - loading;
 * - success;
 * - error;
 * - completion;
 * - important state changes.
 */


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

}


/*
 * Reduced motion does not remove functionality.
 *
 * It reduces or removes non-essential visual movement.
 */


/* ==========================================================================
   16. SCROLL BEHAVIOR
   ========================================================================== */

html {
	scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

}


/* ==========================================================================
   17. TEXT / ZOOM SAFETY
   ========================================================================== */

/*
 * Do not disable browser text resizing.
 *
 * Do not use CSS that intentionally prevents meaningful zoom or large-text
 * presentation.
 */


/* ==========================================================================
   18. TOUCH ACCESSIBILITY FOUNDATION
   ========================================================================== */

/*
 * Touch target dimensions belong to the consuming interactive component.
 *
 * This base layer does not invent a pixel target value.
 *
 * Small icons must not be tightly packed.
 *
 * Component implementation must provide adequate usable interaction area.
 */


/* ==========================================================================
   19. HOVER IS NOT THE ONLY INTERACTION
   ========================================================================== */

/*
 * Critical information or interaction must not be available only through
 * :hover.
 *
 * Keyboard focus and appropriate touch interaction must remain supported.
 */


/* ==========================================================================
   20. FOCUS ORDER
   ========================================================================== */

/*
 * CSS must not be used to create a misleading visual focus order that
 * contradicts the meaningful document/interaction order.
 *
 * Avoid unnecessary positive tabindex values in markup.
 */


/* ==========================================================================
   21. PSEUDO-ELEMENT SAFETY
   ========================================================================== */

/*
 * Important textual content must not exist only inside:
 *
 * ::before
 * ::after
 *
 * pseudo-elements.
 *
 * Pseudo-elements may enhance presentation but must not become the sole
 * source of critical meaning.
 */


/* ==========================================================================
   22. SEMANTIC STRUCTURE
   ========================================================================== */

/*
 * Accessibility begins with semantic HTML:
 *
 * <header>
 * <nav>
 * <main>
 * <section>
 * <article>
 * <aside>
 * <footer>
 *
 * CSS must preserve the usability of this semantic structure.
 */


/* ==========================================================================
   23. NATIVE CONTROL PREFERENCE
   ========================================================================== */

/*
 * Native controls are preferred where applicable.
 *
 * CSS must not encourage replacement of:
 *
 * <button>
 * <input>
 * <select>
 * <textarea>
 *
 * with non-semantic clickable elements.
 */


/* ==========================================================================
   24. CSS FAILURE SAFETY
   ========================================================================== */

/*
 * The semantic HTML document should remain meaningful and readable if
 * CSS fails to load.
 *
 * Therefore:
 *
 * - important content must remain in HTML;
 * - important meaning must not exist only in CSS;
 * - critical interaction must not depend exclusively on CSS decoration.
 */


/* ==========================================================================
   25. JAVASCRIPT FAILURE SAFETY
   ========================================================================== */

/*
 * Where practical, the public baseline experience must remain meaningful
 * if JavaScript enhancement fails.
 *
 * This CSS file does not implement JavaScript fallback logic.
 */


/* ==========================================================================
   26. ACCESSIBILITY BOUNDARY
   ========================================================================== */

/*
 * This file provides CSS-level accessibility support only.
 *
 * Semantic HTML:
 *     templates / template-parts
 *
 * Keyboard behavior:
 *     JavaScript / native browser behavior
 *
 * Focus management:
 *     component / JavaScript layer
 *
 * Screen-reader semantics:
 *     HTML + appropriate ARIA
 *
 * Dynamic states:
 *     application/component contract
 *
 * Accessibility testing:
 *     QA / regression layer
 */


/* ==========================================================================
   27. ACCESSIBILITY ANTI-PATTERNS
   ========================================================================== */

/*
 * Never use this file to justify:
 *
 * - fake buttons;
 * - click-only critical interaction;
 * - hover-only critical UI;
 * - invisible focus;
 * - color-only state communication;
 * - image-only important content;
 * - CSS-only important text;
 * - random ARIA;
 * - CSS as a replacement for semantic HTML;
 * - reduced-motion bypass;
 * - tiny / tightly packed controls.
 */


/* ==========================================================================
   28. RESPONSIVE ACCESSIBILITY
   ========================================================================== */

/*
 * Accessibility must survive:
 *
 * - mobile;
 * - tablet;
 * - desktop;
 * - large screens;
 * - zoom;
 * - large text.
 *
 * Detailed responsive rules belong to:
 *
 * assets/css/responsive/
 */


/* ==========================================================================
   29. BASE ACCESSIBILITY GOVERNANCE
   ========================================================================== */

/*
 * Rajgir accessibility is:
 *
 * Accessible by Default
 *        +
 * Semantic HTML
 *        +
 * Keyboard
 *        +
 * Focus
 *        +
 * Screen Reader
 *        +
 * Contrast
 *        +
 * Touch
 *        +
 * Responsive
 *        +
 * Reduced Motion
 *        +
 * Dynamic States
 *        +
 * Testing
 *
 * This CSS file supports that architecture but does not replace
 * cross-layer accessibility responsibility.
 */