/*
Theme Name: بطاقة
Description: قالب بسيط جدًا للعامل الحر: بطاقة تعريف بالعربية، ومعها قالب لصفحة المنتج وقالب لصفحة الطلب. عدّل البطاقة من: المظهر ← تخصيص ← بطاقتي، واختر قالب الصفحة من محرر الصفحة.
Version: 1.2.2
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bitaqa
*/

/*
 * التعليق أعلاه ليس زينة: ووردبريس يقرأ منه اسم القالب ووصفه.
 * بدونه لن يظهر القالب في لوحة التحكم أصلًا.
 *
 * ما الجديد في 1.2.0:
 * - كل صفحة تعرض محتواها بدل البطاقة (singular.php).
 * - قالبا «صفحة منتج» و«صفحة الطلب» (مجلد templates)، تختارهما من محرر الصفحة.
 * - أيقونات المشاريع في البطاقة، وسطر «ارسل طلبك» (القسم ٧ في آخر هذا الملف).
 * - وصف خاص لكل صفحة لجوجل وواتساب، وإخفاء اسم الدخول (مجلد inc).
 * - هذا الملف بقي للبطاقة، وتنسيق الصفحات الداخلية في assets/pages.css.
 *
 * ما الجديد في 1.2.1:
 * - خط واحد واضح بلا زخارف لكل النصوص: IBM Plex Sans Arabic.
 * - إعداد تلقائي: تظهر أيقونات المشاريع وسطر الطلب فور رفع القالب، دون أي خطوة منك (inc/projects.php، القسم ٨).
 *
 * ما الجديد في 1.2.2:
 * - اسم المشروع تحت الأيقونة يظهر كاملًا مهما طال، بدل أن يُقص بعد سطرين (القسم ٧).
 */


/* =========================================================
   ١) الألوان والخطوط
   كل الألوان مشتقة من --accent، وهو اللون الذي تختاره من التخصيص.
   color-mix تخلط لونين بنسبة، فنحصل على درجات متناسقة تلقائيًا.
   ========================================================= */
:root {
	--accent: #2b3990;                                            /* اللون الأساسي */
	--page: color-mix(in oklab, var(--accent) 45%, #06070d);     /* خلفية الصفحة: درجة داكنة منه */
	--paper: #fcfbf8;                                             /* لون البطاقة */
	--ink: #1b1d26;                                               /* النص الأساسي */
	--muted: #5f6270;                                             /* النص الثانوي */
	--rule: #e7e5df;                                              /* الخطوط الفاصلة */
	--tint: color-mix(in oklab, var(--accent) 9%, var(--paper));  /* خلفية المهارات */

	/* نص ملوّن (التخصص والمهارات). جديد: --accent-ink-light يحسبه functions.php
	   درجةً من لونك تُقرأ بوضوح فوق الورق، لأن الألوان الفاتحة كالسماوي باهتة كنص */
	--accent-ink: var(--accent-ink-light, var(--accent));

	/* جديد */
	--on-accent: #fff;                                                    /* الكتابة فوق اللون الأساسي (يحسبها functions.php) */
	--on-page: #f2f4f6;                                                   /* الكتابة فوق الخلفية الداكنة */
	--on-page-muted: color-mix(in oklab, var(--on-page) 72%, var(--page)); /* الكتابة الثانوية فوقها */

	/* خط واحد واضح بلا زخارف للعناوين والنص. الأسماء بعده بدائل يستخدمها الجهاز إن تأخر تحميله */
	--font-name: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; /* العناوين */
	--font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; /* النص */
}

/* الوضع الليلي: يتفعّل وحده إذا كان جهاز الزائر على الوضع الداكن */
@media (prefers-color-scheme: dark) {
	:root {
		--page: color-mix(in oklab, var(--accent) 25%, #040509);
		--paper: color-mix(in oklab, var(--accent) 10%, #15161d);
		--ink: #eeede9;
		--muted: #a4a6b3;
		--rule: rgb(255 255 255 / 0.1);
		--accent-ink: color-mix(in oklab, var(--accent) 50%, #fff);
		--tint: color-mix(in oklab, var(--accent) 25%, var(--paper));
	}
}


/* =========================================================
   ٢) الصفحة
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.8; /* الحروف العربية تحتاج مسافة أسطر أوسع من اللاتينية */
	-webkit-font-smoothing: antialiased;
}

/* المتصفحات لا تجعل خانات النماذج والأزرار ترث خط الصفحة، فتظهر بخط Arial. هذا السطر يصلح ذلك */
button,
input,
select,
textarea {
	font: inherit;
}

/* تضع البطاقة في منتصف الشاشة تمامًا، أفقيًا وعموديًا.
   كان اسمها .page، وووردبريس يضيف الكلاس نفسه إلى <body> في الصفحات فيتعارضان، فغيّرناه */
.card-stage {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 32px 16px;
}

/* شريط الإدارة الأسود يظهر لك وحدك عند تسجيل الدخول، فنطرح ارتفاعه */
.admin-bar .card-stage {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	.admin-bar .card-stage {
		min-height: calc(100vh - 46px);
	}
}


/* =========================================================
   ٣) البطاقة
   ========================================================= */
.card {
	width: 100%;
	max-width: 400px;
	padding: 28px;
	background: var(--paper);
	border-radius: 20px;
	box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.6);
}

/* رأس البطاقة: الختم في جهة، وحالة التوفّر في الجهة الأخرى */
.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

/* الختم: صورتك، أو أول حرف من اسمك إن لم تضع صورة */
.seal {
	position: relative;
	flex: none;
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 16px;
	background: var(--seal-bg, var(--accent)); /* لون خلفية الشعار، وإن لم تختره فاللون الأساسي */
	color: var(--seal-ink, #fff);               /* لون الحرف: أبيض، أو داكن إن كانت الخلفية فاتحة */
	font-family: var(--font-name);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	animation: stamp 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

/* الإطار الداخلي الرفيع الذي يعطيه شكل الختم */
.seal::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); /* بلون الحرف نفسه، أخف */
	border-radius: 11px;
	pointer-events: none;
}

/* معظم الحروف العربية تجلس أسفل المنتصف قليلًا، فنرفعها بصريًا */
.seal-letter {
	transform: translateY(-0.1em);
}

.seal img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* الحركة الوحيدة في القالب: الختم يُطبع مرة واحدة عند فتح الصفحة */
@keyframes stamp {
	from {
		opacity: 0;
		transform: scale(1.3) rotate(-8deg);
	}
	60% {
		opacity: 1;
		transform: scale(0.95) rotate(1deg);
	}
	to {
		transform: none;
	}
}

.status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

/* النقطة الخضراء قبل «متاح لمشاريع جديدة» */
.status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22a05a;
	box-shadow: 0 0 0 4px rgb(34 160 90 / 0.15);
}

/* ملاحظة: لا تضف letter-spacing للنص العربي، فهو يفصل الحروف المتصلة */
.name {
	margin: 0;
	font-family: var(--font-name);
	font-size: clamp(30px, 9vw, 40px);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.job {
	margin: 4px 0 0;
	color: var(--accent-ink);
	font-weight: 600;
}

.bio {
	margin: 16px 0 0;
	color: var(--muted);
	text-wrap: pretty;
}

.skills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.skills li {
	padding: 2px 10px;
	border-radius: 6px;
	background: var(--tint);
	color: var(--accent-ink);
	font-size: 14px;
}


/* =========================================================
   ٤) وسائل التواصل: سطور مثل بطاقة العمل المطبوعة
   ========================================================= */
.contacts {
	margin-top: 24px;
}

.contact {
	display: flex;
	align-items: baseline; /* العنوان العربي والقيمة اللاتينية على سطر واحد */
	gap: 12px;
	padding: 13px 0;
	border-top: 1px solid var(--rule);
	color: var(--ink);
	text-decoration: none;
}

.contact:last-child {
	border-bottom: 1px solid var(--rule);
}

.contact svg {
	flex: none;
	align-self: center;
	width: 20px;
	height: 20px;
	color: var(--accent-ink);
}

/* flex-grow يجعل العنوان يأخذ المساحة الفارغة، فتُدفع القيمة إلى الطرف الآخر */
.contact-label {
	flex: 1 0 auto;
	font-weight: 600;
}

.contact:hover .contact-label {
	color: var(--accent-ink);
}

.contact-value {
	min-width: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: ltr; /* البريد والأرقام تُكتب من اليسار إلى اليمين */
	unicode-bidi: isolate;
}

/* تلميح يراه صاحب الموقع فقط، حين لا توجد وسيلة تواصل أو مشاريع بعد */
.setup-hint {
	display: block;
	margin-top: 22px;
	padding: 12px 14px;
	border: 1px dashed var(--accent-ink);
	border-radius: 10px;
	color: var(--accent-ink);
	font-size: 15px;
	text-decoration: none;
}


/* =========================================================
   ٥) روابطك (من قائمة «روابط البطاقة»، أو صفحاتك الأخرى تلقائيًا)
   ========================================================= */
.links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.links a {
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-underline-offset: 6px;
}

.links a:hover {
	color: var(--accent-ink);
	text-decoration-color: currentColor;
}


/* =========================================================
   ٦) سهولة الاستخدام والشاشات الصغيرة
   ========================================================= */

/* إطار واضح حول الرابط عند التنقّل بلوحة المفاتيح.
   جديد: --focus يسمح للأقسام الداكنة أن تجعل الإطار فاتحًا حتى يُرى */
a:focus-visible {
	outline: 2px solid var(--focus, var(--accent-ink));
	outline-offset: 3px;
	border-radius: 4px;
}

/* من يفضّل تقليل الحركة في جهازه لن يرى حركة الختم */
@media (prefers-reduced-motion: reduce) {
	.seal {
		animation: none;
	}

	.app-icon {
		transition: none;
	}
}

@media (max-width: 380px) {
	.card {
		padding: 22px;
	}
}

/* يخفي العنصر عن العين ويبقيه لقارئات الشاشة ومحركات البحث (اسم الكلاس معتمد في ووردبريس) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* إذا أخفيت الاسم، يصبح التخصص أول سطر تحت الشعار فنكبّره قليلًا */
.screen-reader-text + .job {
	margin-top: 0;
	font-size: 20px;
}


/* =========================================================
   ٧) جديد: أيقونات المشاريع وسطر الطلب
   كل صفحة تختار لها قالب «صفحة منتج» تظهر هنا تلقائيًا
   ========================================================= */
.projects {
	margin-top: 24px;
}

.projects-title {
	margin: 0 0 12px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

/* أعمدة لا يقل عرض الواحد منها عن 88px، حتى يتسع الاسم تحت الأيقونة:
   ثلاثة أعمدة في معظم الجوالات، واثنان في الصغيرة جدًا.
   auto-fill تحسب عدد الأعمدة بنفسها حسب المساحة المتاحة */
.projects ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 18px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.project {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	text-align: center;
	text-decoration: none;
}

/* الاسم يظهر كاملًا مهما طال: ينزل إلى سطر ثالث إن احتاج، بدل أن يُقص بثلاث نقاط */
.project-name {
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	text-wrap: balance;      /* يوزّع الكلمات على الأسطر بالتساوي، فلا تبقى كلمة وحيدة في سطر */
	overflow-wrap: anywhere; /* كلمة طويلة بلا مسافات (مثل اسم إنجليزي) تنكسر بدل أن تخرج عن مكانها */
}

.project:hover .project-name {
	color: var(--accent-ink);
}

/* الأيقونة تنضغط قليلًا عند اللمس، فيعرف الزائر أن لمسته وصلت */
.project:active .app-icon {
	transform: scale(0.94);
}

/* الأيقونة: مربع بزوايا مستديرة مثل أيقونات تطبيقات الجوال، وفيه إطار رفيع مثل الختم */
.app-icon {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--accent);
	color: var(--on-accent);
	transition: transform 0.12s ease;
}

.app-icon::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 12px;
	pointer-events: none;
}

.app-icon svg {
	width: 28px;
	height: 28px;
}

/* إن وضعت «صورة بارزة» للمشروع، تملأ الأيقونة كلها بلا إطار */
.app-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.app-icon.has-image::after {
	display: none;
}