/*
Theme Name: iThamer
Theme URI: https://ithamersa.com
Author: Thamer
Description: قالب بلوكات عربي مخصّص لموقع ithamersa.com، بطابع جريء وحيوي. التصميم كله في theme.json والقوالب والأجزاء.
Version: 1.3.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ithamer
*/

/* ==========================================================
   نظام التصميم
   ----------------------------------------------------------
   الخطوط (خطّان فقط):
     - خط العناوين: Readex Pro   ← العناوين h1–h6، اسم الموقع، العبارات الكبيرة، الأرقام الكبيرة
     - خط النصوص:  IBM Plex Sans Arabic ← كل شيء آخر (فقرات، أزرار، قائمة، شارات، أسئلة)

   الألوان (لون أساسي واحد + لون تمييز واحد):
     - الأقسام الفاتحة: أبيض/رمادي فاتح + نص داكن + البنفسجي للتمييز (أزرار، روابط، شارات)
     - الأقسام الداكنة: داكن + نص فاتح + الليموني للتمييز (أزرار، شارات، أرقام)
     - الليموني لا يُستخدم على الخلفيات الفاتحة، والبنفسجي لا يُستخدم كنص على الداكن
   ========================================================== */

:root {
	--ith-font-head: var(--wp--preset--font-family--display);
	--ith-font-body: var(--wp--preset--font-family--body);
	--ith-radius: 20px;
}

/* ========== أساسيات ========== */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: var(--ith-font-body); }
::selection { background: var(--wp--preset--color--primary); color: #fff; }
[id] { scroll-margin-top: 90px; }

/* قفل الخطوط: العناوين بخط العناوين، وكل ما عداها بخط النصوص */
h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.ith-statement,
.ith-num,
.ith-step-num,
.ith-footer-big { font-family: var(--ith-font-head); }

p, li, a, summary, button, input, textarea, select,
.wp-block-button__link,
.wp-element-button,
.wp-block-navigation,
.ith-eyebrow { font-family: var(--ith-font-body); }

/* الحفاظ على خط العناوين داخل الروابط في العناوين */
h1 a, h2 a, h3 a, h4 a, .wp-block-site-title a { font-family: inherit; }

/* ========== الهيدر (داكن) ========== */
.ith-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) !important;
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.admin-bar .ith-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ith-header { top: 46px; } }
.ith-header .wp-block-navigation a { color: var(--wp--preset--color--on-dark); transition: color .2s ease; }
.ith-header .wp-block-navigation a:hover { color: #fff; }
.ith-header .wp-block-navigation__responsive-container-open,
.ith-header .wp-block-navigation__responsive-container-close { color: #fff; }
.ith-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; }
.ith-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.3rem; font-weight: 600; }

/* ========== الشارة الصغيرة ========== */
.ith-eyebrow {
	display: inline-block;
	padding: .35em 1em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
}

/* ========== قواعد الأقسام الداكنة ========== */
.ith-on-dark { color: var(--wp--preset--color--on-dark); }
.ith-on-dark h1, .ith-on-dark h2, .ith-on-dark h3, .ith-on-dark h4 { color: #fff; }
.ith-on-dark p { color: var(--wp--preset--color--on-dark); }
.ith-on-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--on-dark); }
.ith-on-dark a:where(:not(.wp-element-button)):hover { color: #fff; }
.ith-on-dark .ith-eyebrow {
	color: var(--wp--preset--color--accent);
	background: rgba(200, 245, 96, .1);
}
/* الأزرار على الداكن: ليموني */
.ith-on-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}
.ith-on-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.ith-on-dark .is-style-outline .wp-block-button__link {
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .25);
	background: transparent;
}
.ith-on-dark .is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .06);
}

/* ========== الهيرو ========== */
.ith-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: min(86vh, 800px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ith-hero::before,
.ith-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(80px);
	animation: ith-float 16s ease-in-out infinite alternate;
}
.ith-hero::before {
	width: 520px; height: 520px;
	background: var(--wp--preset--color--primary);
	opacity: .45;
	top: -180px; left: -140px;
}
.ith-hero::after {
	width: 380px; height: 380px;
	background: var(--wp--preset--color--primary-dark);
	opacity: .35;
	bottom: -160px; right: 12%;
	animation-delay: -8s;
}
@keyframes ith-float {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(50px, 30px) scale(1.1); }
}
.ith-hero h1 { letter-spacing: -.01em; line-height: 1.45 !important; }
.ith-mark {
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--accent);
	padding: 0 .18em;
	border-radius: .18em;
}

/* ========== الشريط المتحرك (داكن ثانوي) ========== */
.ith-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-top: 1px solid rgba(255, 255, 255, .06);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ith-marquee p {
	display: inline-block;
	margin: 0;
	padding-inline-end: 2rem;
	animation: ith-scroll 36s linear infinite;
	font-family: var(--ith-font-head);
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	color: #fff !important;
}
.ith-marquee .ith-sep { color: var(--wp--preset--color--accent); padding: 0 .4em; }
@keyframes ith-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

/* ========== البطاقات (أقسام فاتحة) ========== */
.ith-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ith-radius);
	background: var(--wp--preset--color--base);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	height: 100%;
	overflow: hidden;
}
.ith-card:hover {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 24px 48px -28px rgba(82, 50, 224, .45);
}
.ith-card .ith-num {
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--primary);
	transition: color .3s ease;
}
.ith-card:hover .ith-num { color: var(--wp--preset--color--primary); }

/* البطاقة المميزة: بنفسجي */
.ith-card--featured {
	background: var(--wp--preset--gradient--violet-glow);
	border-color: transparent;
}
.ith-card--featured h3, .ith-card--featured p { color: #fff !important; }
.ith-card--featured .ith-num { -webkit-text-stroke-color: rgba(255, 255, 255, .8); }
.ith-card--featured:hover .ith-num { color: #fff; }

/* ========== النبذة ========== */
.ith-pillar {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: 1rem;
}
.ith-statement {
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2.5rem);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}
.ith-statement em {
	font-style: normal;
	color: var(--wp--preset--color--primary);
}

/* ========== خطوات العمل (داكن) ========== */
.ith-step {
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: var(--ith-radius);
	background: var(--wp--preset--color--ink-2);
	height: 100%;
	transition: border-color .3s ease, transform .3s ease;
}
.ith-step:hover { border-color: rgba(200, 245, 96, .45); transform: translateY(-4px); }
.ith-step .ith-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem; height: 2.8rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700;
	font-size: 1.2rem;
}

/* ========== الأسئلة الشائعة (فاتح) ========== */
.wp-block-details summary {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem; height: 2rem;
	border-radius: 10px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	transition: background-color .25s ease, color .25s ease;
}
.wp-block-details[open] summary::after { content: "−"; background: var(--wp--preset--color--primary); color: #fff; }
.wp-block-details > *:not(summary) { color: var(--wp--preset--color--muted); }

/* ========== دعوة التواصل (بنفسجي) ========== */
.ith-cta { position: relative; overflow: hidden; isolation: isolate; }
.ith-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: #fff;
	opacity: .08;
	top: -140px; left: -100px;
}
.ith-cta h2 { color: #fff; }
.ith-cta p { color: rgba(255, 255, 255, .85); }
.ith-cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--primary-dark); }
.ith-cta .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* ========== الأزرار ========== */
.wp-element-button, .wp-block-button__link { transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }

/* ========== المقالات ========== */
.wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* ========== الفوتر (داكن) ========== */
.ith-plain-list { list-style: none; padding-inline-start: 0; line-height: 2.1; }
.ith-on-dark .wp-block-site-title a { color: #fff; }
.ith-on-dark p.ith-footer-big {
	font-weight: 700;
	font-size: clamp(3rem, 12vw, 9rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, .16);
	user-select: none;
	margin: 0;
}

/* ========== تقليل الحركة ========== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}