/* ============================================================
   دوميرا التقنية — قائمة الجوال وإصلاحات التجاوب

   ملف مستقل لأن الصفحة الرئيسية تحمل أنماطها في جسدها ولا تقرأ
   page.css، وهي تحتاج القائمة نفسها. فصله يمنع نسختين تتباعدان.
   ============================================================ */

/* ============================================================
   قائمة الجوال

   كانت روابط التنقل تختفي كليا تحت 900 بكسل بلا بديل: الزائر على
   الجوال يرى الشعار وزر الاستشارة فقط، ولا سبيل له إلى الخدمات ولا
   المدونة إلا بالرجوع للخلف. هذه القائمة تغلق تلك الفجوة.

   القائمة في DOM دائما ويتحكم CSS في ظهورها، فتعمل الروابط ولو لم
   يحمل السكربت.
   ============================================================ */
.menu-btn { display: inline-grid; }
@media (min-width: 900px) { .menu-btn { display: none; } }

.menu-btn .i-x { display: none; }
[aria-expanded="true"].menu-btn .i-bars { display: none; }
[aria-expanded="true"].menu-btn .i-x { display: block; }

.mnav {
    display: grid; grid-template-rows: 0fr;
    overflow: hidden;
    border-block-start: 1px solid transparent;
    transition: grid-template-rows 320ms var(--ease), border-color 320ms;
}
.mnav[data-open="1"] { grid-template-rows: 1fr; border-block-start-color: var(--line-2); }
@media (min-width: 900px) { .mnav { display: none; } }
@media (prefers-reduced-motion: reduce) { .mnav { transition: none; } }

.mnav-in { min-block-size: 0; display: flex; flex-direction: column; gap: 2px; padding-block: 10px 16px; }
.mnav-in a {
    padding: 13px 14px; border-radius: 12px;
    font-size: var(--t-body); color: var(--ink-2);
    transition: color 180ms, background 180ms;
}
.mnav-in a:hover, .mnav-in a:focus-visible { color: var(--ink); background: var(--panel-2); }
.mnav-cta {
    display: flex !important; align-items: center; gap: 10px;
    margin-block-start: 10px; justify-content: center;
    background: var(--solid); color: var(--on-solid) !important;
    font-weight: 500;
}
.mnav-cta svg { inline-size: 17px; block-size: 17px; flex: none; }

/* التمرير خلف قائمة مفتوحة يربك: نثبت الصفحة ما دامت مفتوحة */
html.nav-open, html.nav-open body { overflow: hidden; }
@media (min-width: 900px) { html.nav-open, html.nav-open body { overflow: visible; } }

/* الترويسة تضيق قليلا على الشاشات الصغيرة حتى يتسع الشعار وزران */
@media (max-width: 560px) {
    .top-in { gap: 8px; }
    .mark i { display: none; }
    .top-cta { display: none; }
    .top-in > .icon-btn:not(.menu-btn) { margin-inline-start: auto; }
}
@media (min-width: 561px) and (max-width: 899px) {
    .top-cta { margin-inline-start: auto; }
}
.top-nav { display: none; gap: 4px; margin-inline-start: auto; }
@media (min-width: 900px) { .top-nav { display: flex; } }
.top-nav a {
    padding: 7px 13px; border-radius: 999px; font-size: var(--t-sm);
    color: var(--ink-3); transition: color 200ms, background 200ms;
}
.top-nav a:hover { color: var(--ink); background: var(--panel-2); }
.top-nav a[aria-current] { color: var(--ink); background: var(--panel-2); }

/* ============================================================
   إصلاحات التجاوب العامة

   ثلاث علل شائعة تكسر الصفحة على الجوال: صورة أو جدول أوسع من
   الشاشة يفتح تمريرا أفقيا، وكلمة لاتينية طويلة (رابط أو مصطلح)
   تدفع الحاوية، وهدف لمس أصغر من 44 بكسل. الثلاثة تعالج هنا.
   ============================================================ */
html, body { max-inline-size: 100%; overflow-x: clip; }
img, svg, video, canvas, iframe { max-inline-size: 100%; block-size: auto; }
.lat, code, .num { overflow-wrap: anywhere; }
h1, h2, h3, p, li, summary { overflow-wrap: break-word; }

/* أهداف اللمس: 44 بكسل حد أدنى على الأجهزة اللمسية وحدها، حتى لا
   تتضخم الأزرار على الفأرة بلا داع */
@media (pointer: coarse) {
    .top nav a, .top-nav a, .foot nav a, .crumb a { min-block-size: 44px; display: inline-flex; align-items: center; }
    .btn { min-block-size: 46px; }
    .icon-btn { inline-size: 44px; block-size: 44px; }
}

/* منطقة الأمان على الأجهزة ذات الحواف المنحنية */
@supports (padding: max(0px)) {
    .wrap {
        padding-inline-start: max(0px, env(safe-area-inset-right));
        padding-inline-end: max(0px, env(safe-area-inset-left));
    }
}

/* الشاشات الضيقة جدا (320 بكسل): الحشوات الكبيرة تأكل النص */
@media (max-width: 360px) {
    :root { --gut: 0.95rem; }
    .btn { padding: 11px 16px; font-size: var(--t-xs); }
    .btn-lg { padding: 13px 20px; font-size: var(--t-sm); }
    .head .acts { flex-direction: column; align-items: stretch; }
    .head .acts .btn { justify-content: center; }
}

/* الشاشات العريضة: النص لا ينبغي أن يمتد بلا حد */
@media (min-width: 1600px) { :root { --maxw: 1280px; } }

/* الوضع الأفقي القصير على الجوال: الأقسام الطويلة تخنق الشاشة */
@media (max-height: 460px) and (orientation: landscape) {
    :root { --sec: 2.5rem; }
    .top { position: static; }
}

/* التذييل: عنوان العمود */
.foot-h { display: block; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; margin-block-end: 4px; }
@media (min-width: 860px) { .foot { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); } }
@media (min-width: 520px) and (max-width: 859px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }