/*
 * Base element styles and accessibility foundation.
 *
 * All directional rules use logical properties (inline/block) so the same CSS
 * serves Arabic (RTL) and English (LTR) without overrides.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--gb-bg);
	color: var(--gb-text);
	text-align: start;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
	margin-block: 0;
}

/*
 * Responsive media without changing display type: content images can still sit
 * inline in text (emoji, icons). block-size: auto keeps the aspect ratio when
 * the width shrinks. SVG only gets the width cap, because forcing height: auto
 * would override the height attribute of inline icons.
 */
img,
video {
	max-inline-size: 100%;
	block-size: auto;
}

svg {
	max-inline-size: 100%;
}

a {
	color: var(--gb-link);
	text-decoration-color: var(--gb-link-decoration);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 0.18em;
}

/* ---------- Focus ---------- */

/*
 * :focus-visible shows the ring for keyboard users without flashing it on
 * every mouse click. The fallback :focus rule covers browsers without
 * :focus-visible support; the :not() rule then removes it where supported.
 */
:focus {
	outline: 3px solid var(--gb-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--gb-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--gb-focus-halo);
}

/* <main> receives focus programmatically from the skip link so the next Tab
   continues from the content. It is not an interactive control, so neither the
   ring nor the halo is drawn around the whole region. */
main:focus {
	outline: none;
	box-shadow: none;
}

/* ---------- Skip link ---------- */

.gb-skip-link {
	position: absolute;
	inset-block-start: var(--gb-space-2xs);
	inset-inline-start: var(--gb-space-2xs);
	z-index: var(--gb-z-skip-link);
	padding-block: var(--gb-space-2xs);
	padding-inline: var(--gb-space-s);
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
	border-radius: var(--gb-radius-m);
	font-weight: var(--gb-weight-bold);
	text-decoration: none;
	/* Moved off-screen vertically, not with left/right, so it behaves the same in RTL and LTR. */
	translate: 0 -200%;
	transition: translate var(--gb-duration-fast) var(--gb-ease-out);
}

.gb-skip-link:focus {
	translate: 0 0;
}

/* ---------- Screen-reader text ---------- */

/* WordPress core and plugins output this class name, so it must exist. */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Screen-reader-only links (e.g. core/plugin skip links) become visible when
   focused by keyboard, matching WordPress' standard behaviour. */
.screen-reader-text:focus {
	inset-block-start: var(--gb-space-2xs);
	inset-inline-start: var(--gb-space-2xs);
	z-index: var(--gb-z-skip-link);
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding-block: var(--gb-space-2xs);
	padding-inline: var(--gb-space-s);
	overflow: visible;
	clip-path: none;
	white-space: normal;
	background-color: var(--gb-bg);
	color: var(--gb-text);
	border-radius: var(--gb-radius-m);
	text-decoration: none;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Safety net: even if a future component forgets to use the motion tokens,
 * animations and transitions are effectively removed for users who asked for
 * reduced motion. Content must never depend on animation to be understood.
 */
@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;
	}
}

/*
 * The same safety net for the site's own «إيقاف الحركة» switch in the footer
 * (assets/js/motion-switch.js): a visitor who turns motion off gets exactly
 * what the system "reduce motion" setting gives — the STATIC_ACCESSIBLE level
 * (capability.js) plus this rule. html[data-gb-motion="off"] is set by
 * capability.js from the stored choice, so it holds on every page.
 */
:root[data-gb-motion="off"],
:root[data-gb-motion="off"] *,
:root[data-gb-motion="off"] *::before,
:root[data-gb-motion="off"] *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}