/* Reset, typography and base elements. */

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

/* Components set display:flex/grid; make the hidden attribute always win. */
[hidden] {
	display: none !important;
}

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

body {
	margin: 0;
	background: var(--ea-bg-page);
	color: var(--ea-text-primary);
	font-family: var(--ea-font-ar);
	font-size: var(--ea-fs-body);
	font-weight: 300;
	line-height: var(--ea-lh-body);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--ea-ease), opacity 0.2s var(--ea-ease);
}

a:hover {
	color: var(--ea-text-brand);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--ea-text-primary);
	font-family: var(--ea-font-ar);
	text-wrap: balance;
}

h1 { font-size: var(--ea-fs-h1); font-weight: 400; line-height: var(--ea-lh-heading); }
h2 { font-size: var(--ea-fs-h2); font-weight: 400; line-height: 1.65; }
h3 { font-size: var(--ea-fs-h3); font-weight: 500; line-height: var(--ea-lh-h3); }
h4, h5, h6 { font-size: var(--ea-fs-h4); font-weight: 500; line-height: var(--ea-lh-h4); }

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

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

::selection {
	background: var(--ea-burgundy-500);
	color: var(--ea-beige-50);
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--ea-bg-surface);
	color: var(--ea-text-brand);
}

/* Type utilities (match Figma text styles) */
.ea-display { font-size: var(--ea-fs-display); font-weight: 300; line-height: var(--ea-lh-display); }
.ea-h1 { font-size: var(--ea-fs-h1); font-weight: 400; line-height: var(--ea-lh-heading); }
.ea-h2 { font-size: var(--ea-fs-h2); font-weight: 400; line-height: 1.65; }
.ea-h3 { font-size: var(--ea-fs-h3); font-weight: 500; line-height: var(--ea-lh-h3); }
.ea-h4 { font-size: var(--ea-fs-h4); font-weight: 500; line-height: var(--ea-lh-h4); }
.ea-body-lg { font-size: var(--ea-fs-body-lg); line-height: var(--ea-lh-body); }
.ea-small { font-size: var(--ea-fs-small); font-weight: 400; line-height: 1.7; }
.ea-muted { color: var(--ea-text-secondary); }
.ea-script { font-family: var(--ea-font-script); font-size: var(--ea-fs-script); font-weight: 400; line-height: 1.5; direction: ltr; color: var(--ea-text-brand); }
.ea-latin-caps { font-family: var(--ea-font-latin-caps); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.3em; direction: ltr; display: inline-block; color: var(--ea-text-brand); }

.ea-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ea-text-brand);
	font-size: var(--ea-fs-small);
	font-weight: 500;
	line-height: 1.7;
}

.ea-eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--ea-border-strong);
}

/* Prose (blog posts, default pages) */
.ea-prose {
	font-size: var(--ea-fs-body-lg);
	line-height: var(--ea-lh-body);
}

.ea-prose > * + * {
	margin-top: 1.5em;
}

.ea-prose h2,
.ea-prose h3 {
	margin-top: 2em;
	font-size: var(--ea-fs-h3);
	font-weight: 500;
}

.ea-prose h4 {
	margin-top: 1.6em;
}

.ea-prose p,
.ea-prose li {
	color: var(--ea-text-primary);
}

.ea-prose a {
	color: var(--ea-text-brand);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ea-prose ul,
.ea-prose ol {
	padding-inline-start: 1.4em;
}

.ea-prose ul li::marker {
	color: var(--ea-text-brand);
}

.ea-prose li + li {
	margin-top: 0.5em;
}

.ea-prose blockquote {
	margin-inline: 0;
	padding: 4px 28px 4px 0;
	border-inline-start: 3px solid var(--ea-border-strong);
	color: var(--ea-text-brand);
	font-size: var(--ea-fs-h4);
	font-weight: 500;
	line-height: var(--ea-lh-h4);
}

.ea-prose img,
.ea-prose figure {
	margin-inline: 0;
	width: 100%;
}

.ea-prose figcaption {
	margin-top: 8px;
	color: var(--ea-text-secondary);
	font-size: var(--ea-fs-small);
}

.ea-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ea-fs-body);
}

.ea-prose th,
.ea-prose td {
	padding: 12px;
	border-bottom: 1px solid var(--ea-border-default);
	text-align: right;
}