/**
 * Farajatna — base: design tokens, colour schemes, reset, typography, forms.
 *
 * Direction: all spacing/positioning uses CSS logical properties
 * (margin-inline-start, inset-inline-end, text-align: start …) so the same
 * rules serve LTR and RTL. rtl.css only holds the few exceptions.
 */

/* --------------------------------------------------------------------------
 * 1. Tokens
 * ----------------------------------------------------------------------- */

:root {
	/* News Mag palette (single source: theme.json presets). */
	--news-mag-grey: var(--wp--preset--color--grey, #333333);
	--news-mag-white: var(--wp--preset--color--white, #ffffff);
	--news-mag-black: var(--wp--preset--color--black, #000000);
	--news-mag-claret: var(--wp--preset--color--claret, #990f3d);
	--news-mag-teal: var(--wp--preset--color--teal, #0d7680);
	--news-mag-oxford: var(--wp--preset--color--oxford, #0f5499);
	--news-mag-slate: var(--wp--preset--color--slate, #262a33);
	--news-mag-paper: var(--wp--preset--color--paper, #fff1e5);
	--news-mag-mandarin: var(--wp--preset--color--mandarin, #ff8833);
	--news-mag-light-blue: var(--wp--preset--color--light-blue, #00a0dd);
	--news-mag-crimson: var(--wp--preset--color--crimson, #cc0000);
	--news-mag-graphics-dark-blue: var(--wp--preset--color--graphics-dark-blue, #006f9b);
	--news-mag-wheat: var(--wp--preset--color--wheat, #f2dfce);
	--news-mag-candy: var(--wp--preset--color--candy, #f7f7aa);
	--news-mag-wasabi: var(--wp--preset--color--wasabi, #96cc28);
	--news-mag-jade: var(--wp--preset--color--jade, #00994d);
	--news-mag-velvet: var(--wp--preset--color--velvet, #593380);
	--news-mag-lemon: var(--wp--preset--color--lemon, #ffec1a);
	/* --news-mag-pink is only defined when a valid value is configured
	   (Customizer → News Mag → Colours). See inc/color-system.php. */

	/* Semantic colours. Overridden by the Customizer inline styles. */
	--fj-primary: var(--news-mag-claret);
	--fj-on-primary: #ffffff;
	--fj-secondary: var(--news-mag-oxford);
	--fj-on-secondary: #ffffff;
	--fj-accent: var(--news-mag-teal);
	--fj-on-accent: #ffffff;
	--fj-bg: var(--news-mag-paper);
	--fj-surface: #ffffff;
	--fj-text: var(--news-mag-grey);
	--fj-heading: var(--news-mag-slate);
	--fj-link: var(--news-mag-oxford);
	--fj-border: #d9c8b8;
	--fj-header-bg: var(--news-mag-paper);
	--fj-header-text: #000000;
	--fj-footer-bg: var(--news-mag-slate);
	--fj-footer-text: #ffffff;
	--fj-breaking: var(--news-mag-crimson);
	--fj-on-breaking: #ffffff;

	/* Derived colours. */
	--fj-muted: color-mix(in srgb, var(--fj-text) 82%, var(--fj-bg));
	--fj-subtle: color-mix(in srgb, var(--fj-border) 45%, var(--fj-bg));
	--fj-focus: var(--news-mag-graphics-dark-blue);
	--fj-overlay: rgb(0 0 0 / 0.72);

	/* Typography (overridden by the Customizer). */
	--fj-font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	--fj-font-heading: "Noto Naskh Arabic", "Noto Serif", Georgia, serif;
	--fj-base-size: 1.0625rem;
	--fj-line-height: 1.7;
	--fj-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--fj-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
	--fj-h3: clamp(1.35rem, 1.2rem + 0.8vw, 2.05rem);
	--fj-h4: clamp(1.2rem, 1.1rem + 0.5vw, 1.66rem);
	--fj-h5: 1.33rem;
	--fj-h6: 1.0625rem;
	--fj-small: 0.875rem;
	--fj-tiny: 0.8125rem;

	/* Layout. */
	--fj-container: 1280px;
	--fj-gutter: clamp(1rem, 3vw, 2rem);
	--fj-gap: clamp(1rem, 2.5vw, 1.75rem);
	--fj-section: clamp(2rem, 5vw, 3.5rem);
	--fj-sidebar: clamp(17rem, 26vw, 21rem);
	--fj-radius: 2px;
	--fj-radius-lg: 6px;
	--fj-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px rgb(0 0 0 / 0.08);
	--fj-sticky-top: 0px;
	--fj-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Direction multiplier for transforms: 1 in LTR, -1 in RTL. */
	--fj-dir: 1;

	color-scheme: light;
}

[dir="rtl"] {
	--fj-dir: -1;
}

/* Dark colour scheme: only tokens change, never the components. */
:root[data-scheme="dark"] {
	color-scheme: dark;
	--fj-bg: #14161b;
	--fj-surface: #1d2028;
	--fj-text: #e4e6eb;
	--fj-heading: #ffffff;
	--fj-link: #66c6ef;
	--fj-border: #363b47;
	--fj-header-bg: #1d2028;
	--fj-header-text: #ffffff;
	--fj-footer-bg: #0d0f13;
	--fj-footer-text: #ffffff;
	--fj-focus: #66c6ef;
	--fj-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
	:root[data-scheme="system"] {
		color-scheme: dark;
		--fj-bg: #14161b;
		--fj-surface: #1d2028;
		--fj-text: #e4e6eb;
		--fj-heading: #ffffff;
		--fj-link: #66c6ef;
		--fj-border: #363b47;
		--fj-header-bg: #1d2028;
		--fj-header-text: #ffffff;
		--fj-footer-bg: #0d0f13;
		--fj-footer-text: #ffffff;
		--fj-focus: #66c6ef;
		--fj-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
	}
}

/* --------------------------------------------------------------------------
 * 2. Reset
 * ----------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--fj-sticky-top) + 4.5rem);
}

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

body {
	margin: 0;
	background-color: var(--fj-bg);
	color: var(--fj-text);
	font-family: var(--fj-font-body);
	font-size: var(--fj-base-size);
	line-height: var(--fj-line-height);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

img {
	display: block;
}

svg {
	flex-shrink: 0;
}

figure {
	margin: 0;
}

p,
ul,
ol,
dl,
blockquote,
pre,
table,
address {
	margin-block: 0 1.25em;
}

ul,
ol {
	padding-inline-start: 1.5em;
}

/* --------------------------------------------------------------------------
 * 3. Typography
 * ----------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.6em;
	color: var(--fj-heading);
	font-family: var(--fj-font-heading);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

h1 { font-size: var(--fj-h1); line-height: 1.2; }
h2 { font-size: var(--fj-h2); line-height: 1.25; }
h3 { font-size: var(--fj-h3); }
h4 { font-size: var(--fj-h4); }
h5 { font-size: var(--fj-h5); }
h6 { font-size: var(--fj-h6); }

p {
	text-wrap: pretty;
}

a {
	color: var(--fj-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

small {
	font-size: var(--fj-small);
}

blockquote {
	border-inline-start: 4px solid var(--fj-primary);
	margin-inline: 0;
	padding-inline-start: 1.25rem;
	font-family: var(--fj-font-heading);
	font-size: 1.2em;
}

blockquote cite {
	display: block;
	color: var(--fj-muted);
	font-family: var(--fj-font-body);
	font-size: var(--fj-small);
	font-style: normal;
	margin-block-start: 0.5rem;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--fj-border);
	margin-block: 2rem;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--fj-surface);
	border: 1px solid var(--fj-border);
	border-radius: var(--fj-radius);
	direction: ltr; /* Code is always left-to-right. */
	overflow-x: auto;
	padding: 1rem;
	text-align: left;
}

table {
	border-collapse: collapse;
	inline-size: 100%;
}

th,
td {
	border-block-end: 1px solid var(--fj-border);
	padding: 0.6rem 0.75rem;
	text-align: start;
}

th {
	color: var(--fj-heading);
	font-weight: 700;
}

mark {
	background: var(--news-mag-candy);
	color: #000;
}

::selection {
	background: var(--fj-primary);
	color: var(--fj-on-primary);
}

/* --------------------------------------------------------------------------
 * 4. Focus — always visible for keyboard users (WCAG 2.4.7 / 2.4.11)
 * ----------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--fj-focus);
	outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
 * 5. Forms
 * ----------------------------------------------------------------------- */

input,
button,
select,
textarea {
	font: inherit;
	color: inherit;
}

label {
	display: inline-block;
	font-weight: 600;
	margin-block-end: 0.35rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	background: var(--fj-surface);
	border: 1px solid color-mix(in srgb, var(--fj-text) 62%, var(--fj-bg)); /* ≥ 3:1 (WCAG 1.4.11) */
	border-radius: var(--fj-radius);
	color: var(--fj-text);
	inline-size: 100%;
	line-height: 1.5;
	min-block-size: 2.75rem;
	padding: 0.55rem 0.75rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--fj-muted);
	opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--fj-focus);
	outline-offset: 0;
}

textarea {
	min-block-size: 8rem;
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--fj-primary);
	block-size: 1.15rem;
	inline-size: 1.15rem;
	margin-inline-end: 0.4rem;
	vertical-align: middle;
}

button,
.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button {
	align-items: center;
	background: var(--fj-primary);
	border: 2px solid transparent;
	border-radius: var(--fj-radius);
	color: var(--fj-on-primary);
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1.3;
	min-block-size: 2.75rem;
	padding: 0.55rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background: var(--fj-heading);
	color: var(--fj-bg);
}

button[disabled],
.button[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

fieldset {
	border: 1px solid var(--fj-border);
	margin: 0 0 1.5rem;
	padding: 1rem;
}

/* --------------------------------------------------------------------------
 * 6. Script-specific typography
 *
 * Arabic-script and Hebrew text must never be letter-spaced or uppercased:
 * letter-spacing breaks cursive joining, and case does not exist.
 * ----------------------------------------------------------------------- */

:lang(ar),
:lang(fa),
:lang(ur),
:lang(ps),
:lang(ckb),
:lang(he) {
	letter-spacing: normal;
}

:lang(ur) h1,
:lang(ur) h2,
:lang(ur) h3 {
	/* Nastaliq needs extra vertical room. */
	line-height: 1.8;
}

/* --------------------------------------------------------------------------
 * 7. Utilities
 * ----------------------------------------------------------------------- */

[hidden] {
	display: none !important;
}

.icon {
	display: inline-block;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * 8. Reduced motion
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}