@charset "UTF-8";
/* ==========================================================================
   شركة هرم الانشاء — نظام الأسطح الداكنة
   --------------------------------------------------------------------------
   ورقة ثالثة تُحمَّل **بعد** main.css و sections.css، فتفوز قواعدها عند
   تساوي الوزن بلا ‎!important‎ في أي سطر.

   الغاية: أن يعمل **كل** مكوّن في الموقع فوق سطح داكن كما يعمل فوق الفاتح،
   فلا تبدو بطاقة بيضاء دخيلة داخل قسم داكن، ولا يختفي نصّ برونزي غامق.

   الطريقة: مُحدِّد واحد ‎:is(.section--dark, [data-surface="dark"])‎ يعيد
   تعريف **رموز السطح** (‎--h-fg‎ و‎--h-card-bg‎ وأخواتها) فترث المكوّنات
   المبنية على الرموز ألوانها تلقائياً بلا تكرار قاعدة. القواعد أدناه لا
   تعالج إلا المكوّنات التي كتبت لوناً فاتحاً صريحاً في main.css أو
   sections.css قبل وجود هذا النظام.

   المحتوى والبنية لا يُمسّان من هنا إطلاقاً: ألوان فقط.

   ---- التباين ----
   كل نسبة أدناه محسوبة فعلياً (WCAG 2.1، تركيب الشفافية فوق الأرضية أولاً)
   لا مقدّرة. الأرضيات المشتقّة فوق ‎#264142‎:

       السطح            #264142
       بطاقة .04        #2F494A
       بطاقة hover .07  #354E4F
       حقل .06          #334C4D
       الرمش (مصمت)     #3A4B49   — وهو البرونز ‎.18‎ فوق السطح بالضبط
       دائرة أيقونة .06 #334C4D   (وداخل بطاقة: #3B5455)

   والنتائج (الحد الأدنى AA: ٤٫٥ للنص، ٣ للرسوم وحدود عناصر التحكم):

       أبيض                     على السطح   10.95   على بطاقة   9.67
       ثانوي rgba(255,255,255,.72)          6.57                5.93
       خافت  rgba(255,255,255,.64)          5.53                5.05
       برونز النص #D4BEAE                   6.14                5.42
         وفوق الرمش           5.16   وعند مرور المؤشّر على البطاقة  5.00
       نص الزر #16292A على تعبئته البرونزية #AC917E             5.13
       أيقونة #C8AC97 على دائرتها           4.30   داخل بطاقة   3.79
       حدّ الحقل rgba(255,255,255,.45)                          3.33

   وأدنى نسبة قيست على الصفحات المصيَّرة فعلاً — بكل الأقسام مقلوبة إلى
   داكن وبمحاكاة حالة المرور — هي ٤٫٧٦:١، أي فوق ٤٫٥ في كل نصّ.

   ملاحظتان على لوحة العميل — كلتاهما ناتجة عن الحساب لا عن ذوق:

   ١) نصّ الرمش المطلوب ‎#C8AC97‎ يعطي ٤٫٣٠:١ فوق خلفية الرمش
      ‎rgba(149,123,105,.18)‎ لأن البرونز يرفع الأرضية بدل أن يخفضها،
      وهو دون ٤٫٥. فرُفع نصّ **الأسطر** إلى ‎#D4BEAE‎ (٥٫١٦:١) وبقي
      ‎#C8AC97‎ كما طلب العميل لوناً **للأيقونات والرسوم** حيث يكفي ٣:١
      (وهو يحقّق ٣٫٧٩–٤٫٣٠). وخلفية الرمش نفسها كُتبت مصمتة بالمزج بدل
      الشفافية لئلّا تتراكم فوق خلفية البطاقة فيسقط التباين عند المرور.

   ٢) الزر الأساسي بتعبئة البرونز الأصلي ‎#957B69‎ ونصّ ‎#16292A‎ يعطي
      ٣٫٨٤:١ فقط. فرُفعت التعبئة إلى برونز أفتح قليلاً (مزيج البرونز مع
      برونز الداكن) فصارت ٥٫١٣:١، والنصّ بقي ‎#16292A‎ كما طُلب.

   الفهرس
   ٠١  رموز السطح الداكن
   ٠٢  الأرضية والحبر والروابط
   ٠٣  ترويسة القسم والرمش
   ٠٤  الأزرار
   ٠٥  البطاقات: القاعدة العامة
   ٠٦  عناوين البطاقات ونصوصها وتسمياتها
   ٠٧  الأيقونات والأرقام
   ٠٨  الأسطح المصوّرة داخل البطاقات
   ٠٩  أقسام بعينها (لماذا نحن · الجودة · كلمة المدير · من نحن · التواصل)
   ١٠  النماذج والحقول
   ١١  نصّ المحرّر: الاقتباس والجداول والشيفرة
   ١٢  المدونة والترقيم والوسوم
   ١٣  التركيز والإتاحة
   ========================================================================== */


/* ==========================================================================
   ٠١ — رموز السطح الداكن
   --------------------------------------------------------------------------
   مُحدِّد واحد للحالتين. كل ما تحته يقرأ من هذه الرموز، فتغيير درجة واحدة
   هنا يسري على الموقع كله.
   ========================================================================== */
.section--dark,
[data-surface="dark"] {

	/*
	 * ---- البرونز فوق الداكن ----
	 * كل الدرجات هنا مشتقّة من ‎--h-accent-on-dark‎ لا مكتوبة بالأرقام،
	 * فلو غيّر المدير لون الهوية من لوحة التحكم تبعته أسطح الداكن كلّها.
	 */
	--h-bronze: var(--h-accent-on-dark);					/* #C8AC97 — الأيقونات والرسوم */
	--h-bronze-text: color-mix(in srgb, var(--h-accent-on-dark) 78%, #fff);	/* #D4BEAE — النصّ */
	--h-bronze-line: color-mix(in srgb, var(--h-accent-on-dark) 30%, transparent);
	--h-bronze-line-strong: color-mix(in srgb, var(--h-accent-on-dark) 44%, transparent);
	--h-bronze-veil: color-mix(in srgb, var(--h-accent-on-dark) 12%, transparent);
	--h-bronze-underline: color-mix(in srgb, var(--h-accent-on-dark) 50%, transparent);

	/* ---- الأرضية والحبر ---- */
	--h-bg: var(--h-primary);
	--h-fg: var(--h-white);
	--h-fg-soft: rgba(255, 255, 255, .72);
	--h-fg-faint: rgba(255, 255, 255, .64);
	--h-fg-title: var(--h-white);
	--h-fg-accent: var(--h-bronze-text);

	/* ---- الفواصل والخطوط ---- */
	--h-line: rgba(255, 255, 255, .12);
	--h-line-strong: rgba(255, 255, 255, .22);

	/* ---- البطاقات ---- */
	--h-card-bg: rgba(255, 255, 255, .04);
	--h-card-bg-hover: rgba(255, 255, 255, .07);
	--h-card-line: rgba(255, 255, 255, .10);
	--h-card-line-hover: var(--h-bronze-line-strong);

	/*
	 * ---- الرمش ----
	 * الدرجة المطلوبة هي البرونز بشفافية ‎.18‎ فوق السطح، لكنها تُكتب هنا
	 * **مصمتة** بالمزج لا بالشفافية: الرمش الشفّاف يتراكم فوق خلفية
	 * البطاقة، فترتفع أرضيته عند المرور ويسقط تباين نصّه تحت ٤٫٥.
	 * المزج يعطي اللون البصري نفسه (‎#3A4B49‎) ثابتاً أينما جلس الرمش.
	 */
	--h-pill-bg: color-mix(in srgb, var(--h-accent) 18%, var(--h-primary));
	--h-pill-line: var(--h-bronze-line);

	/* ---- الأيقونات ---- */
	--h-icon-bg: rgba(255, 255, 255, .06);
	--h-icon-line: rgba(255, 255, 255, .10);
	--h-icon-fg: var(--h-bronze);

	/* ---- الأسطح المصوّرة (خلف صورة أو كبديل عنها) ---- */
	--h-plate: rgba(255, 255, 255, .06);

	/* ---- الحقول ---- */
	--h-field-bg: rgba(255, 255, 255, .06);
	--h-field-line: rgba(255, 255, 255, .45);	/* ٣٫٥:١ — حدّ عنصر تحكّم */
	--h-field-line-hover: rgba(255, 255, 255, .62);
	--h-field-ph: rgba(255, 255, 255, .66);

	/* ---- الأزرار ---- */
	--h-btn-bg: color-mix(in srgb, var(--h-accent) 56%, var(--h-accent-on-dark));
	--h-btn-bg-hover: color-mix(in srgb, var(--h-accent) 30%, var(--h-accent-on-dark));
	--h-btn-fg: #16292A;

	/* ---- التركيز ---- */
	--h-focus: var(--h-white);
	--h-focus-halo: rgba(255, 255, 255, .28);

	/*
	 * الظلال: لا ظلّ أسفل البطاقات على الداكن — الظلّ الرمادي فوق أرضية
	 * داكنة يتحوّل إلى لطخة بلا عمق. العمق هنا من فرق الإضاءة لا من الظلّ.
	 * ويبقى ظلّ ناعم أسود للصور وحدها لأنها كتل مضيئة تحتاج ارتكازاً.
	 */
	--h-shadow-1: none;
	--h-shadow-2: 0 16px 40px rgba(0, 0, 0, .22);
	--h-shadow-3: 0 26px 66px rgba(0, 0, 0, .28);

	/* ---- رموز ورقة الصقل sections.css ---- */
	--hs-hair: rgba(255, 255, 255, .10);
	--hs-hair-2: rgba(255, 255, 255, .14);
	--hs-bronze-hair: var(--h-bronze-line);
	--hs-bronze-hair-strong: var(--h-bronze-line-strong);
	--hs-lift-1: none;
	--hs-lift-2: 0 16px 40px rgba(0, 0, 0, .22);
	--hs-lift-3: 0 26px 66px rgba(0, 0, 0, .28);
}

/*
 * احتياطي للمتصفحات التي لا تعرف color-mix: الدرجات نفسها مكتوبة صراحةً
 * بألوان الهوية الافتراضية. تفقد هذه المتصفحات تتبّع لون اللوحة وحده،
 * ويبقى السطح الداكن سليماً ومقروءاً.
 */
@supports not (color: color-mix(in srgb, red, blue)) {

	.section--dark,
	[data-surface="dark"] {
		--h-bronze-text: #D4BEAE;
		--h-bronze-line: rgba(200, 172, 151, .30);
		--h-bronze-line-strong: rgba(200, 172, 151, .44);
		--h-bronze-veil: rgba(200, 172, 151, .12);
		--h-bronze-underline: rgba(200, 172, 151, .50);
		--h-pill-bg: #3A4B49;
		--h-btn-bg: #AC917E;
		--h-btn-bg-hover: #B69B87;
	}
}


/* ==========================================================================
   ٠٢ — الأرضية والحبر والروابط
   ========================================================================== */
/*
 * قسم داكن معلَّم بالسمة وحدها (بلا ‎section--dark‎) يأخذ أرضيته من هنا،
 * فيكفي أحد المُعرِّفين. ولا نمسّ ‎background-image‎ فتبقى أقسام الصور سليمة.
 */
.section[data-surface="dark"] {
	background-color: var(--h-bg);
	color: var(--h-fg);
}

/* النصوص الحرّة داخل سطح داكن */
:is(.section--dark, [data-surface="dark"]) :is(.about__text, .gm__text, .quality__text, .history__text) {
	color: var(--h-fg-soft);
}

/*
 * الروابط داخل النصّ: بيضاء بخطّ سفلي برونزي خافت، ويشتدّ الخطّ ويصير
 * برونزياً صريحاً عند المرور — التمييز ليس باللون وحده.
 */
:is(.section--dark, [data-surface="dark"]) :is(.entry-content, .about__text, .gm__text, .quality__text) a {
	color: var(--h-fg);
	text-decoration-color: var(--h-bronze-underline);
}

:is(.section--dark, [data-surface="dark"]) :is(.entry-content, .about__text, .gm__text, .quality__text) a:hover,
:is(.section--dark, [data-surface="dark"]) :is(.entry-content, .about__text, .gm__text, .quality__text) a:focus-visible {
	color: var(--h-fg);
	text-decoration-color: var(--h-bronze);
	text-decoration-thickness: 2px;
}

/* الكلمة المميّزة داخل عنوان */
:is(.section--dark, [data-surface="dark"]) .accent {
	color: var(--h-fg-accent);
}

/* الخطّ الفاصل الأفقي */
:is(.section--dark, [data-surface="dark"]) hr {
	border-color: var(--h-line);
}


/* ==========================================================================
   ٠٣ — ترويسة القسم والرمش
   ========================================================================== */
/*
 * العنوان والنصّ يقرآن ‎--h-fg-title‎ و‎--h-fg-soft‎ فيرثان بلا قاعدة.
 * الذي يحتاج تصريحاً هو حدّ الرمش وحده: كان برونزاً غامقاً يذوب في الداكن.
 */
/*
 * ‎.cert-card__standard‎ و‎.about__classification‎ رمشان بكلّ شيء إلا الاسم،
 * وكانا يكتبان خلفية برونزية شفّافة خاصّة بهما تتراكم فوق البطاقة. يُعادان
 * إلى رمز الرمش المصمت فيثبت تباينهما في كل الحالات.
 */
:is(.section--dark, [data-surface="dark"]) :is(.pill, .section-head__eyebrow, .cert-card__standard, .about__classification) {
	border-color: var(--h-pill-line);
	background: var(--h-pill-bg);
	color: var(--h-fg-accent);
}


/* ==========================================================================
   ٠٤ — الأزرار
   --------------------------------------------------------------------------
   الأساسي يقلب إلى برونز صلب بنصّ داكن ‎#16292A‎: أدفأ من الأبيض وأوضح
   انتماءً للهوية، والتباين ٥٫١٣:١.
   الثانوي حدّ أبيض شفاف ونصّ أبيض، ويمتلئ أبيض عند المرور.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(.btn--primary, .btn--accent) {
	background: var(--h-btn-bg);
	border-color: var(--h-btn-bg);
	color: var(--h-btn-fg);
	box-shadow: none;
}

:is(.section--dark, [data-surface="dark"]) :is(.btn--primary, .btn--accent):hover,
:is(.section--dark, [data-surface="dark"]) :is(.btn--primary, .btn--accent):focus-visible {
	background: var(--h-btn-bg-hover);
	border-color: var(--h-btn-bg-hover);
	color: var(--h-btn-fg);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

:is(.section--dark, [data-surface="dark"]) .btn--ghost {
	border-color: rgba(255, 255, 255, .55);
	background: transparent;
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .btn--ghost:hover,
:is(.section--dark, [data-surface="dark"]) .btn--ghost:focus-visible {
	border-color: var(--h-white);
	background: var(--h-white);
	color: var(--h-primary);
}

/* أزرار ووردبريس العامة داخل سطح داكن (نموذج البحث، إرسال التعليق) */
:is(.section--dark, [data-surface="dark"]) :is(.button, .button-primary, input[type="submit"]) {
	border-color: var(--h-btn-bg);
	background: var(--h-btn-bg);
	color: var(--h-btn-fg);
}

:is(.section--dark, [data-surface="dark"]) :is(.button, .button-primary, input[type="submit"]):hover {
	border-color: var(--h-btn-bg-hover);
	background: var(--h-btn-bg-hover);
	color: var(--h-btn-fg);
}


/* ==========================================================================
   ٠٥ — البطاقات: القاعدة العامة
   --------------------------------------------------------------------------
   بطاقة على الداكن = ضوء خافت لا لوح أبيض: خلفية ‎.04‎ وحدّ ‎.10‎، وعند
   المرور ترتفع الخلفية إلى ‎.07‎ ويصير الحدّ برونزياً خفيفاً. بلا ظلّ.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(
	.why-item,
	.quality-item,
	.service-card,
	.project-card,
	.cert-card,
	.client-card,
	.equipment-card,
	.branch-card,
	.branch,
	.post-card,
	.value-card,
	.values-item,
	.goal,
	.goal-item,
	.vm-card,
	.about-step,
	.gm__aside,
	.contact-info,
	.contact-info__item,
	.stat-card
) {
	border-color: var(--h-card-line);
	background: var(--h-card-bg);
	box-shadow: none;
}


:is(.section--dark, [data-surface="dark"]) :is(
	.why-item,
	.quality-item,
	.service-card,
	.project-card,
	.cert-card,
	.client-card,
	.equipment-card,
	.branch-card,
	.branch,
	.post-card,
	.value-card,
	.values-item,
	.goal-item,
	.vm-card,
	.about-step
):hover {
	border-color: var(--h-card-line-hover);
	background: var(--h-card-bg-hover);
	box-shadow: none;
}

/* الخطوط الداخلية للبطاقات وجداول الحقائق */
:is(.section--dark, [data-surface="dark"]) :is(.gm__sign, .certs__meta) {
	border-color: var(--h-line);
}

:is(.section--dark, [data-surface="dark"]) .cert-card__meta div {
	border-color: var(--h-line);
}


/* ==========================================================================
   ٠٦ — عناوين البطاقات ونصوصها وتسمياتها
   --------------------------------------------------------------------------
   هذه هي المواضع التي كتبت ‎var(--h-primary)‎ أو ‎var(--h-ink-2)‎ صراحةً
   قبل وجود نظام الرموز، فتُعاد إلى الرموز هنا مرّة واحدة.
   ========================================================================== */

/* ---- العناوين: بيضاء ---- */
:is(.section--dark, [data-surface="dark"]) :is(
	.why-item__title,
	.quality-item__title,
	.service-card__title,
	.project-card__title,
	.cert-card__title,
	.client-card__name,
	.equipment-card__caption,
	.branch-card__title,
	.branch__name,
	.about-step__title,
	.values-item__title,
	.value-card__title,
	.vm__title,
	.goal__title,
	.goal-item__title,
	.gm__quote-text,
	.gm__name,
	.project-nav__title,
	.post-nav__title,
	.entry-title
) {
	color: var(--h-fg-title);
}

:is(.section--dark, [data-surface="dark"]) .comment-list :is(.fn, .comment-author) {
	color: var(--h-fg-title);
}

:is(.section--dark, [data-surface="dark"]) .project-card:hover .project-card__title,
:is(.section--dark, [data-surface="dark"]) .entry-title a:hover {
	color: var(--h-fg-accent);
}

/* ---- النصّ الثانوي ---- */
:is(.section--dark, [data-surface="dark"]) :is(
	.why-item__text,
	.quality-item__text,
	.service-card__text,
	.service-single__text,
	.project-card__text,
	.project-card__meta,
	.project-card__client,
	.cert-card__text,
	.branch-card__text,
	.branch-card__meta,
	.branch__place,
	.branch__phone,
	.post-card__text,
	.about-step__text,
	.values-item__text,
	.value-card__text,
	.vm__text,
	.goal__text,
	.goal-item__text,
	.entry__caption,
	.entry-tags a,
	.page-numbers,
	.no-comments,
	.must-log-in,
	.logged-in-as
) {
	color: var(--h-fg-soft);
}

:is(.section--dark, [data-surface="dark"]) .widget ul {
	color: var(--h-fg-soft);
}

/* ---- التسميات الصغيرة ---- */
:is(.section--dark, [data-surface="dark"]) :is(
	.project-nav__label,
	.post-nav__label,
	.gm__role,
	.entry-meta,
	.form-note
) {
	color: var(--h-fg-faint);
}

:is(.section--dark, [data-surface="dark"]) :is(.cert-card__meta) dt {
	color: var(--h-fg-faint);
}

:is(.section--dark, [data-surface="dark"]) .comment-list :is(.comment-metadata, .comment-meta) {
	color: var(--h-fg-faint);
}

:is(.section--dark, [data-surface="dark"]) :is(.cert-card__meta) dd {
	color: var(--h-fg);
}

/* ---- اللمسات البرونزية ---- */
:is(.section--dark, [data-surface="dark"]) :is(
	.goal-item__num,
	.goal__num,
	.cert-card__standard,
	.about__brand-tagline,
	.equipment__location-icon,
	.entry-meta__type
) {
	color: var(--h-fg-accent);
}

/* الروابط والأيقونات الصغيرة البرونزية — في قاعدة مستقلّة حفاظاً على الوزن */
:is(.section--dark, [data-surface="dark"]) :is(.form-note, .entry__edit) a,
:is(.section--dark, [data-surface="dark"]) .comment-list .reply a,
:is(.section--dark, [data-surface="dark"]) :is(.project-card__meta, .branch-card__meta, .project-nav, .post-nav, .entry-meta) .haram-icon {
	color: var(--h-fg-accent);
}

/*
 * رقم المرحلة في «من نحن» كان رقماً شبحياً بلون الأخضر بنسبة ‎.075‎،
 * وهو يختفي تماماً على الداكن. يُعاد كضوء أبيض خافت بالقوّة نفسها.
 */
:is(.section--dark, [data-surface="dark"]) .about-step__num {
	color: rgba(255, 255, 255, .13);
}

:is(.section--dark, [data-surface="dark"]) .about-step:hover .about-step__num {
	color: var(--h-bronze-line);
}

/* ---- روابط البطاقات: بيضاء، وبرونزية عند المرور ---- */
:is(.section--dark, [data-surface="dark"]) :is(.project-card__link, .service-card__link, .post-card__link, .service-card__more) {
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) :is(.project-card__link, .service-card__link, .post-card__link):hover,
:is(.section--dark, [data-surface="dark"]) .service-card:hover .service-card__more,
:is(.section--dark, [data-surface="dark"]) .branch-card__meta a:hover,
:is(.section--dark, [data-surface="dark"]) .entry-meta a:hover,
:is(.section--dark, [data-surface="dark"]) .widget ul li a:hover {
	color: var(--h-fg-accent);
}

/* الخطّ السفلي المتحرّك تحت روابط البطاقات */
:is(.section--dark, [data-surface="dark"]) .project-card__link > span:first-of-type {
	background-image: linear-gradient(currentColor, currentColor);
}


/* ==========================================================================
   ٠٧ — الأيقونات والأرقام
   --------------------------------------------------------------------------
   دائرة من ضوء أبيض ‎.06‎ ورمز برونزي ‎#C8AC97‎ — ٣٫٧٩:١ فأعلى، وهو فوق
   حدّ الرسوم ٣:١.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(
	.why-item__icon,
	.service-card__icon,
	.about-step__icon,
	.values-item__icon,
	.value-card__icon,
	.vm__icon,
	.quality-item__num,
	.branch-card__logo,
	.branch__num,
	.service-single__icon,
	.contact-info__icon,
	.gm__mark,
	.gm__quote-mark
) {
	border-color: var(--h-icon-line);
	background: var(--h-icon-bg);
	color: var(--h-icon-fg);
}

:is(.section--dark, [data-surface="dark"]) .why-item:hover .why-item__icon,
:is(.section--dark, [data-surface="dark"]) .services .service-card:hover .service-card__icon,
:is(.section--dark, [data-surface="dark"]) .about-step:hover .about-step__icon {
	border-color: var(--hs-bronze-hair);
	background: var(--h-bronze-veil);
	color: var(--h-icon-fg);
}

/* علامة الاقتباس الكبيرة: خلفية الرمش نفسها */
:is(.section--dark, [data-surface="dark"]) :is(.gm__mark, .gm__quote-mark) {
	border-color: var(--h-pill-line);
	background: var(--h-pill-bg);
	color: var(--h-icon-fg);
}


/* ==========================================================================
   ٠٨ — الأسطح المصوّرة داخل البطاقات
   --------------------------------------------------------------------------
   الأرضية التي تظهر خلف صورة أو بدلاً منها كانت بيضاء أو أخضر باهتاً،
   فتصير لوحاً من ضوء خافت. الصور نفسها لا تُمسّ: بلا فلتر وبلا طبقة لون.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(
	.project-card__media,
	.equipment-card__media,
	.post-card__media,
	.cert-card__media,
	.haram-thumb--fallback
) {
	background: var(--h-plate);
}

/* شارة تصنيف المشروع فوق الصورة: تبقى بيضاء صلبة، ويهدأ ظلّها */
:is(.section--dark, [data-surface="dark"]) .project-card__cat {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, .18),
		0 6px 18px rgba(0, 0, 0, .18);
}

/* الصور ذات الحواف المستديرة تحتفظ بظلّ أسود ناعم يرتكز عليه */
:is(.section--dark, [data-surface="dark"]) :is(.about__media, .gm__media, .project-gallery__item) {
	box-shadow: var(--h-shadow-2);
}


/* ==========================================================================
   ٠٩ — أقسام بعينها
   ========================================================================== */

/* ---- لوح الهوية في «من نحن» ---- */
/*
 * اللوح فاتح بتدرّج أبيض في الأصل. على الداكن يُقلب إلى لوح داكن أعمق من
 * السطح بحدّ برونزي، فيبقى «لوحاً معلّقاً» لا بطاقة محتوى.
 */
:is(.section--dark, [data-surface="dark"]) .about__brand {
	border-color: var(--h-bronze-line);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(162deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, .10) 100%);
	box-shadow: none;
}

:is(.section--dark, [data-surface="dark"]) .about__brand-rule {
	background: var(--h-bronze);
}

:is(.section--dark, [data-surface="dark"]) .about__classification {
	background: var(--h-pill-bg);
	color: var(--h-fg-accent);
}

/* ---- مرشِّح المشاريع ---- */
:is(.section--dark, [data-surface="dark"]) .project-filter__btn {
	border-color: var(--h-line-strong);
	color: var(--h-fg-soft);
}

:is(.section--dark, [data-surface="dark"]) .project-filter__btn:hover {
	border-color: rgba(255, 255, 255, .55);
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .project-filter__btn.is-active {
	border-color: var(--h-white);
	background: var(--h-white);
	color: var(--h-primary);
}

/* ---- شريط مصدر الشهادات ---- */


/* ---- روابط التواصل الاجتماعي داخل قسم داكن ---- */
:is(.section--dark, [data-surface="dark"]) :is(.contact-info__social-link, .contact-social a) {
	border-color: var(--h-line-strong);
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) :is(.contact-info__social-link, .contact-social a):hover {
	border-color: var(--h-white);
	background: var(--h-white);
	color: var(--h-primary);
}


/* ==========================================================================
   ١٠ — النماذج والحقول
   --------------------------------------------------------------------------
   حقل على الداكن = ضوء ‎.06‎ بحدّ أبيض ‎.45‎ (٣٫٥:١، وهو حدّ عنصر تحكّم لا
   زينة) ونصّ أبيض، والنائب ‎.66‎ فيبلغ ٥٫١:١.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], select, textarea),
:is(.section--dark, [data-surface="dark"]) .contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea),
:is(.section--dark, [data-surface="dark"]) .search-form .search-field {
	border-color: var(--h-field-line);
	background: var(--h-field-bg);
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .contact-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea):hover {
	border-color: var(--h-field-line-hover);
}

:is(.section--dark, [data-surface="dark"]) :is(input, textarea)::placeholder {
	color: var(--h-field-ph);
	opacity: 1;
}

:is(.section--dark, [data-surface="dark"]) :is(input, select, textarea):focus,
:is(.section--dark, [data-surface="dark"]) .contact-form :is(input, select, textarea):focus {
	border-color: var(--h-white);
	box-shadow: 0 0 0 3px var(--h-focus-halo);
}

/* قائمة select ترسم سهمها من currentColor فيصير أبيض تلقائياً؛
   لكن خياراتها تُرسم بنافذة النظام فتحتاج لوناً صريحاً */
:is(.section--dark, [data-surface="dark"]) select option {
	background: var(--h-primary);
	color: var(--h-white);
}

:is(.section--dark, [data-surface="dark"]) :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--h-bronze);
}

:is(.section--dark, [data-surface="dark"]) .form-field label {
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .form-field--check label {
	color: var(--h-fg-soft);
}

:is(.section--dark, [data-surface="dark"]) .form-field__req {
	color: #F2A28E;			/* أحمر فاتح — ٧٫٤:١ فوق الأخضر الداكن */
}

:is(.section--dark, [data-surface="dark"]) :is(input, textarea, select).has-error,
:is(.section--dark, [data-surface="dark"]) .form-field.has-error :is(input, textarea, select) {
	border-color: #F2A28E;
	box-shadow: 0 0 0 3px rgba(242, 162, 142, .18);
}

:is(.section--dark, [data-surface="dark"]) .form-msg {
	border-color: var(--h-card-line);
	background: var(--h-card-bg);
	color: var(--h-fg);
}


/* ==========================================================================
   ١١ — نصّ المحرّر داخل سطح داكن
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) .entry-content blockquote {
	border-color: var(--h-line);
	background: rgba(255, 255, 255, .05);
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .entry-content :is(th, td) {
	border-color: var(--h-line);
}

:is(.section--dark, [data-surface="dark"]) .entry-content th {
	background: rgba(255, 255, 255, .07);
	color: var(--h-fg);
}

:is(.section--dark, [data-surface="dark"]) .entry-content :is(code, pre) {
	border-color: var(--h-line);
	background: rgba(0, 0, 0, .22);
	color: var(--h-fg);
}


/* ==========================================================================
   ١٢ — المدونة والترقيم والوسوم
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :is(.entry-tags a, .page-numbers, .page-links a) {
	border-color: var(--h-line-strong);
}

:is(.section--dark, [data-surface="dark"]) :is(.entry-tags a, a.page-numbers, .page-links a):hover {
	border-color: var(--h-white);
	background: var(--h-white);
	color: var(--h-primary);
}

:is(.section--dark, [data-surface="dark"]) .page-numbers.current {
	border-color: var(--h-white);
	background: var(--h-white);
	color: var(--h-primary);
}


/* ==========================================================================
   ١٣ — التركيز والإتاحة
   --------------------------------------------------------------------------
   حلقة تركيز بيضاء فوق الداكن: ١٠٫٩٥:١ — أوضح ما يكون.
   ========================================================================== */
:is(.section--dark, [data-surface="dark"]) :focus-visible {
	outline-color: var(--h-focus);
}

:is(.section--dark, [data-surface="dark"]) .haram-thumb--fallback {
	background: var(--h-plate);
}