/* ============================================================================
   ROEIA ACADEMY — THEME LAYER
   ----------------------------------------------------------------------------
   يغطّي ما تملكه ووردبريس نفسها: الهيدر، التذييل، حلقة التدوينات،
   الأرشيف، البحث، التعليقات، الودجات، ومخرَج محرّر الكتل.

   شاشات المنتج (الكاتالوج، المشغّل، المنتدى، اللوحات) تملك أنماطها
   داخل قوالب الإضافة.

   ❗ قاعدة موروثة من design/tokens.css ومطبَّقة هنا حرفيًا: صفر قيمة
   لونية أو مقاس مكتوب مباشرة. كل شيء var(--rlms-*). هذا ما يجعل
   إعادة العلامة التجارية تعديل ملف واحد لا مطاردة ألوان في الملفات.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. الأساس */

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

body {
	margin: 0;
	background: var( --rlms-bg );
	color: var( --rlms-text );
	font-family: var( --rlms-font-body );
	font-size: var( --rlms-text-base );
	line-height: var( --rlms-leading-body );
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var( --rlms-brand-text );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var( --rlms-dur-fast ) var( --rlms-ease );
}

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

/* حلقة تركيز واحدة في كل الثيم — شرط وصولية ويفحصه Theme Check. */
:where( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --rlms-focus-ring );
	outline-offset: 2px;
	border-radius: var( --rlms-radius-xs );
}

h1,
h2,
h3,
h4 {
	font-family: var( --rlms-font-display );
	line-height: var( --rlms-leading-heading );
	letter-spacing: var( --rlms-tracking-tight );
	color: var( --rlms-text );
	margin: 0 0 var( --rlms-space-4 );
	text-wrap: balance;
}

h1 { font-size: var( --rlms-text-4xl ); font-weight: var( --rlms-weight-bold ); }
h2 { font-size: var( --rlms-text-2xl ); font-weight: var( --rlms-weight-semibold ); }
h3 { font-size: var( --rlms-text-xl );  font-weight: var( --rlms-weight-semibold ); }
h4 { font-size: var( --rlms-text-lg );  font-weight: var( --rlms-weight-medium ); }

p {
	margin: 0 0 var( --rlms-space-4 );
}

/* أقصى عرض قراءة — سطر أطول من ~75 محرفًا يُتعب العين ويرفع نسبة فقد السطر. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: var( --rlms-measure );
}

/* ❗ ثنائية اللغة الحقيقية، لا مجرّد قلب التخطيط: فقرة إنجليزية داخل
   مستند عربي ترث اتجاه RTL فتقفز نقطتها وعلامة تعجّبها إلى بداية
   السطر (".or something like this"). `plaintext` تجعل كل فقرة تأخذ
   اتجاهها من أوّل حرف قويّ فيها — فيصحّ العربي والإنجليزي معًا في
   نفس الصفحة بلا تدخّل من الكاتب. */
.entry-content,
.entry-title,
.entry-content p,
.entry-content li,
.entry-content blockquote,
.comment-content,
.widget li {
	unicode-bidi: plaintext;
}

blockquote {
	margin: var( --rlms-space-6 ) 0;
	padding-inline-start: var( --rlms-space-5 );
	border-inline-start: 3px solid var( --rlms-brand-border );
	color: var( --rlms-text-secondary );
	font-size: var( --rlms-text-lg );
}

code,
pre {
	font-family: var( --rlms-font-mono );
	font-size: var( --rlms-text-sm );
}

pre {
	overflow-x: auto;
	padding: var( --rlms-space-4 );
	background: var( --rlms-surface-sunken );
	border: var( --rlms-border-hair ) solid var( --rlms-border );
	border-radius: var( --rlms-radius-md );
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: var( --rlms-space-6 ) 0;
}

th,
td {
	padding: var( --rlms-space-3 );
	border-bottom: var( --rlms-border-hair ) solid var( --rlms-border );
	text-align: start;
}

/* -------------------------------------------------------------- 2. وصولية */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: var( --rlms-space-3 );
	inset-inline-start: var( --rlms-space-3 );
	z-index: var( --rlms-z-modal );
	width: auto;
	height: auto;
	clip-path: none;
	padding: var( --rlms-space-3 ) var( --rlms-space-5 );
	background: var( --rlms-surface-raised );
	border: var( --rlms-border-hair ) solid var( --rlms-border-strong );
	border-radius: var( --rlms-radius-sm );
	box-shadow: var( --rlms-shadow-lg );
	font-weight: var( --rlms-weight-medium );
}

/* --------------------------------------------------------------- 3. الهيدر */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var( --rlms-z-base );
	background: var( --rlms-bg );
	border-bottom: var( --rlms-border-hair ) solid var( --rlms-border );
}

.site-header__inner,
.site-footer__inner,
.site-main {
	max-width: var( --rlms-container );
	margin-inline: auto;
	padding-inline: var( --rlms-space-5 );
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --rlms-space-6 );
	min-height: var( --rlms-header-h );
}

.site-title {
	font-size: var( --rlms-text-lg );
	font-weight: var( --rlms-weight-semibold );
	letter-spacing: var( --rlms-tracking-snug );
	margin: 0;
}

.site-title a {
	color: var( --rlms-text );
	text-decoration: none;
}

.site-description {
	margin: 0;
	font-size: var( --rlms-text-xs );
	color: var( --rlms-text-muted );
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: var( --rlms-space-5 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var( --rlms-text-secondary );
	font-size: var( --rlms-text-sm );
	font-weight: var( --rlms-weight-medium );
	text-decoration: none;
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var( --rlms-text );
}

.site-nav__toggle {
	display: none;
	padding: var( --rlms-space-2 ) var( --rlms-space-4 );
	background: var( --rlms-surface );
	color: var( --rlms-text );
	border: var( --rlms-border-hair ) solid var( --rlms-border-strong );
	border-radius: var( --rlms-radius-sm );
	font: inherit;
	font-size: var( --rlms-text-sm );
	cursor: pointer;
}

/* ------------------------------------------------------------- 4. التخطيط */

.site-main {
	padding-block: var( --rlms-space-12 );
}

.layout--with-sidebar {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 18rem;
	gap: var( --rlms-space-12 );
	align-items: start;
}

.page-header {
	margin-bottom: var( --rlms-space-10 );
	padding-bottom: var( --rlms-space-5 );
	border-bottom: var( --rlms-border-hair ) solid var( --rlms-border );
}

.page-title {
	margin: 0;
}

/* -------------------------------------------------------------- 5. المقالات */

.entry {
	margin-bottom: var( --rlms-space-12 );
}

.entry-cover {
	display: block;
	overflow: hidden;
	margin-bottom: var( --rlms-space-5 );
	border-radius: var( --rlms-radius-lg );
	background: var( --rlms-surface-sunken );
}

.entry-cover img {
	display: block;
	width: 100%;
	transition: transform var( --rlms-dur-slow ) var( --rlms-ease-out );
}

.entry-cover:hover img {
	transform: scale( 1.03 );
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover {
	color: var( --rlms-brand-text );
}

.entry-meta {
	margin: 0 0 var( --rlms-space-4 );
	font-size: var( --rlms-text-sm );
	color: var( --rlms-text-muted );
}

.entry-tags {
	margin-top: var( --rlms-space-8 );
	font-size: var( --rlms-text-sm );
	color: var( --rlms-text-muted );
}

.post-navigation {
	display: grid;
	gap: var( --rlms-space-4 );
	margin-block: var( --rlms-space-12 );
	padding-block: var( --rlms-space-6 );
	border-block: var( --rlms-border-hair ) solid var( --rlms-border );
}

.nav-label {
	display: block;
	font-size: var( --rlms-text-2xs );
	text-transform: uppercase;
	letter-spacing: var( --rlms-tracking-caps );
	color: var( --rlms-text-faint );
}

/* ------------------------------------------------------------ 6. الترقيم */

.pagination {
	margin-top: var( --rlms-space-12 );
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rlms-space-2 );
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: var( --rlms-space-2 ) var( --rlms-space-3 );
	border: var( --rlms-border-hair ) solid var( --rlms-border );
	border-radius: var( --rlms-radius-sm );
	color: var( --rlms-text-secondary );
	text-decoration: none;
	font-size: var( --rlms-text-sm );
}

.pagination .page-numbers:hover {
	border-color: var( --rlms-border-strong );
	color: var( --rlms-text );
}

.pagination .page-numbers.current {
	background: var( --rlms-brand );
	border-color: var( --rlms-brand );
	color: var( --rlms-text-on-brand );
}

/* ---------------------------------------------------- 7. نماذج وأزرار */

/* ❗ محصورة في مناطق الثيم عمدًا (`.site-main`، الودجات، التعليقات).
   بلا هذا الحصر يسري `width:100%` على عناصر داخل شاشات الإضافة —
   الكاتالوج مثلًا — فتنقلب مربّعات التصفية من صفّ أفقي إلى أعمدة
   مكدّسة بعرض الصفحة. الثيم يملك إطار الصفحة، لا مكوّنات المنتج. */
.site-main :where( input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], textarea ),
.widget-area :where( input[type="text"], input[type="search"], textarea ),
.comments-area :where( input[type="text"], input[type="email"], input[type="url"], textarea ) {
	width: 100%;
}

.site-main :where( input, textarea, select ),
.widget-area :where( input, textarea, select ),
.comments-area :where( input, textarea, select ) {
	padding: var( --rlms-space-3 ) var( --rlms-space-4 );
	background: var( --rlms-surface );
	color: var( --rlms-text );
	border: var( --rlms-border-hair ) solid var( --rlms-border-strong );
	border-radius: var( --rlms-radius-sm );
	font: inherit;
	font-size: var( --rlms-text-sm );
}

.button,
.site-main button,
.widget-area button,
.comments-area button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var( --rlms-space-3 ) var( --rlms-space-6 );
	background: var( --rlms-brand );
	color: var( --rlms-text-on-brand );
	border: 0;
	border-radius: var( --rlms-radius-sm );
	font: inherit;
	font-size: var( --rlms-text-sm );
	font-weight: var( --rlms-weight-medium );
	text-decoration: none;
	cursor: pointer;
	transition: background-color var( --rlms-dur-fast ) var( --rlms-ease );
}

.button:hover,
.site-main button:hover,
.widget-area button:hover,
.comments-area button:hover,
input[type="submit"]:hover {
	background: var( --rlms-brand-hover );
	color: var( --rlms-text-on-brand );
}

.search-form {
	display: flex;
	gap: var( --rlms-space-2 );
}

/* ----------------------------------------------------------- 8. التعليقات */

.comments-area {
	margin-top: var( --rlms-space-16 );
	padding-top: var( --rlms-space-8 );
	border-top: var( --rlms-border-hair ) solid var( --rlms-border );
}

.comment-list {
	margin: 0 0 var( --rlms-space-10 );
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin-inline-start: var( --rlms-space-8 );
	padding-inline-start: var( --rlms-space-5 );
	border-inline-start: var( --rlms-border-hair ) solid var( --rlms-border );
	list-style: none;
}

.comment-body {
	padding-block: var( --rlms-space-5 );
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var( --rlms-space-3 );
	margin-bottom: var( --rlms-space-3 );
	font-size: var( --rlms-text-sm );
	color: var( --rlms-text-muted );
}

.comment-author img {
	border-radius: var( --rlms-radius-full );
}

/* ------------------------------------------------------------ 9. الودجات */

.widget {
	margin-bottom: var( --rlms-space-8 );
}

/* ❗ يشمل عناوين ودجات الكتل أيضًا: ودجات المحرّر تتجاهل وسيطَي
   before_title/after_title في register_sidebar، فتخرج بـ<h2> عارية
   بلا صنف. الاكتفاء بـ.widget-title كان يترك كل ودجة كتلة بعنوان
   بحجم عنوان رئيسي داخل عمود جانبي ضيّق. */
.widget-title,
.widget > h2,
.widget .wp-block-heading {
	margin-bottom: var( --rlms-space-4 );
	font-family: var( --rlms-font-body );
	font-size: var( --rlms-text-xs );
	font-weight: var( --rlms-weight-semibold );
	text-transform: uppercase;
	letter-spacing: var( --rlms-tracking-caps );
	color: var( --rlms-text-muted );
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding-block: var( --rlms-space-2 );
	border-bottom: var( --rlms-border-hair ) solid var( --rlms-border-subtle );
	font-size: var( --rlms-text-sm );
}

/* ----------------------------------------------------------- 10. التذييل */

.site-footer {
	margin-top: var( --rlms-space-24 );
	padding-block: var( --rlms-space-12 );
	background: var( --rlms-surface-sunken );
	border-top: var( --rlms-border-hair ) solid var( --rlms-border );
}

.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: var( --rlms-space-8 );
	margin-bottom: var( --rlms-space-10 );
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var( --rlms-space-5 );
	margin: 0 0 var( --rlms-space-5 );
	padding: 0;
	list-style: none;
	font-size: var( --rlms-text-sm );
}

.site-footer__credit {
	margin: 0;
	font-size: var( --rlms-text-sm );
	color: var( --rlms-text-muted );
	/* سطر يخلط اسم موقع عربيًا بنصّ إنجليزي وسنة — بلا العزل تتناثر
	   أجزاؤه على غير ترتيبها المنطقي. */
	unicode-bidi: plaintext;
}

/* ----------------------------------------- 11. توافق محرّر الكتل */

.alignwide {
	max-width: var( --rlms-container );
}

.alignfull {
	max-width: none;
	margin-inline: calc( 50% - 50vw );
}

.wp-caption,
.wp-caption-text,
.gallery-caption,
.bypostauthor,
.sticky,
.aligncenter {
	/* أصناف تشترطها ووردبريس ويفحص Theme Check وجودها. */
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft  { float: left;  margin-inline-end: var( --rlms-space-5 ); }
.alignright { float: right; margin-inline-start: var( --rlms-space-5 ); }

.wp-caption-text,
.gallery-caption {
	font-size: var( --rlms-text-sm );
	color: var( --rlms-text-muted );
}

.sticky .entry-title::after {
	content: "★";
	margin-inline-start: var( --rlms-space-2 );
	color: var( --rlms-brand-text );
}

/* --------------------------------------------------------- 12. الاستجابة */

@media ( max-width: 60rem ) {

	.layout--with-sidebar {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 48rem ) {

	.site-nav__toggle {
		display: inline-flex;
	}

	.site-nav ul {
		display: none;
		position: absolute;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var( --rlms-space-3 ) var( --rlms-space-5 );
		background: var( --rlms-bg );
		border-bottom: var( --rlms-border-hair ) solid var( --rlms-border );
		box-shadow: var( --rlms-shadow-md );
	}

	.site-nav.is-open ul {
		display: flex;
	}

	.site-nav li {
		padding-block: var( --rlms-space-3 );
		border-bottom: var( --rlms-border-hair ) solid var( --rlms-border-subtle );
	}

	h1 { font-size: var( --rlms-text-3xl ); }
	h2 { font-size: var( --rlms-text-xl ); }

	.site-main {
		padding-block: var( --rlms-space-8 );
	}
}

/* لا حركة لمن طلب تقليلها — شرط وصولية، لا تحسين اختياري. */
@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;
	}
}