/* ==========================================================================
   أنماط الطباعة — دار المسنين بتفرسيت
   ==========================================================================
   ⚠️ لم يكن في القالب أي `@media print` إطلاقًا (مُتحقَّق: صفر نتيجة).
      فكان المتصفح يطبع التخطيط كاملًا كما هو، والنتيجة:

        1) **انحياز الصفحة لليسار** — سببه أن القالب يستخدم
           `body,html{overflow-x:hidden}` و`.`سلايدر بعرض `100vw` و`100%`.
           وفي الطباعة لا يوجد منفذ عرض، فيُحسب `100vw` على عرض الورقة
           مضروبًا في معامل التحويل، و`overflow-x:hidden` تقصّ الفائض —
           والمحتوى **لا يتوسّط** بل يلتصق بحدّ الورقة.
           ⇒ الحلّ: تصفير كل عرض/هامش/إزاحة، وتوسيط العمود صراحةً.

        2) **طباعة كل الصور** — بلا تمييز بين الصورة البارزة وصور المحتوى.

        3) **عناصر الواجهة تُطبع** — الهيدر والقوائم والفوتر وأزرار المشاركة
           ومشغّل الصوت وأشرطة التنقّل ⇒ ورق مهدور وحبر.

   ✅ ما تفعله هذه الأنماط:
      • عمود واحد بعرض محدّد (17cm) **متوسّط** على الورقة
      • الصورة البارزة تُطبع (وهي أوّل صورة في المقال)
      • **باقي صور المحتوى تُخفى** (مطلوب صراحةً: «المحتوى النصي بدون صور»)
      • عنوان المقال + المحتوى النصي فقط
      • عناصر الواجهة كلها مخفيّة
      • ضبط فاصل الصفحات وتفادي قطع العناوين والصور
      • تباين عالٍ للطباعة (أبيض/أسود) — الحبر لا يُظهر خلفيات داكنة

   ⚠️ ويُحمَّل بـ`wp_enqueue_style(..., 'print')` ⇒ لا يُنزَّل في العرض
      العادي إطلاقًا ولا يؤثّر على سرعة الصفحة.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) تصفير التخطيط — إصلاح الانحياز والتوسيط
   -------------------------------------------------------------------------- */
@page {
    margin: 1.6cm 1.4cm;
}

@media print {

    /* ⚠️ إصلاح الانحياز: تصفير كل ما يوسّع الصفحة أو يزيحها.
       `overflow-x:hidden` على body/html هي **سبب الانحياز** في الطباعة،
       و`100vw` في السلايدر يجعل العنصر أعرض من الورقة فيُقصّ الفائض
       من جهة واحدة ⇒ يبدو المحتوى منحازًا. */
    html,
    body {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;       /* يُلغي overflow-x:hidden */
        background: #fff !important;
        color: #000 !important;
        font-size: 11.5pt !important;
        line-height: 1.7 !important;
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
    }

    /* ⚠️ لا `direction` هنا: المقال العربي RTL ويجب أن يبقى كذلك.
       الانحياز لليسار كان من العرض لا من الاتجاه. نُبقي الاتجاه ونُوسّط
       **العمود** نفسه على الورقة. */

    /* ✅ العمود المتوسّط — إصلاح «انحياز الصفحة إلى اليسار» */
    #container,
    #content,
    #wrapper,
    .site,
    .container,
    main,
    article {
        width: 100% !important;
        max-width: 17cm !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        float: none !important;
        position: static !important;        /* يُلغي أي sticky/absolute */
        box-shadow: none !important;
        background: none !important;
    }

    /* ⚠️ تصفير الهوامش السالبة — كانت تُخرج المحتوى عن حدود الورقة.
       (سلايدر المقال يستخدم `left/right:-20px` و`width:calc(100% + 31px)`) */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    *[style*="margin-left: -"],
    *[style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ----------------------------------------------------------------------
       2) إخفاء عناصر الواجهة — لا تُطبع
       ---------------------------------------------------------------------- */
    header#header,
    #header,
    .topbar,
    .navbar,
    .menu-toggle,
    .language-switcher,
    .back-to-top,
    .btt,
    .scrollProgress,
    .Dmode,
    #toggleDarkMode,
    .skip-link,
    .screen-reader-text,
    .overlay,
    .modal,
    .lightbox,
    #lightbox,
    .share-buttons,
    .share-menu,
    .entry-news,                /* شريط «أخبار» مع أيقونة البيت */
    .post-nav, 
    .entry-meta,                /* التاريخ والمشاركة */
    .related-post,
    .related,
    .comments-area,
    #comments,
    .comment-form,
    .newsletter,
    form,
    button,
    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination,
    .autoplay-progress,
    /**
     * ⚠️ لا تُخفِ `.container-voice`! — عطل مُصلَح.
     *
     * بنية `template-parts/responsiveVoice.php`:
     *
     *     <div class="container-voice">
     *         <div id="voice-player-container"> …المشغّل… </div>
     *         <div class="article-content"> …نصّ المقال… </div>
     *     </div>
     *
     * ⇒ المحتوى **داخل** `.container-voice`. وإخفاؤها كان يُخفي المقال
     *   كاملًا. والدليل من القياس: `.entry-content` كان `display:block`
     *   لكن **ارتفاعه 0** لأن أبناءه مخفيّون.
     *
     * ✅ الصحيح: إخفاء عناصر المشغّل **وحدها**، وإبقاء الحاوية ظاهرة.
     *   (وهي حاوية بلا مظهر — `.article-content` داخلها هو المعنيّ.)
     */
    #voice-player-container,
    .audio-player,
    .vp-controls,
    .vp-header,
    .vp-waves,
    .vp-hint,
    #vpStatus,
    footer.site-footer,
    .site-footer,
    .footer-container,
    .footer-bottom,
    .contact-box,
    /**
     * ⚠️ أصناف **فعلية** لصندوق التواصل في هذا القالب.
     *
     * كان محدّدي `.contact-box` وحده — وهو **غير موجود في القالب إطلاقًا**.
     * والأصناف الحقيقية (من `template-parts/contact-box.php`) هي:
     *     .contact-margin > .contact-banner > .contact-inner > .contact-row
     * وكشف ذلك قياس العناصر المرئية في وضع الطباعة:
     *     "لديك أي استفسار او اقتراح؟ ↩ تواصل معنا"   (ارتفاع 137px)
     */
    .contact-margin,
    .contact-banner,
    .contact-inner,
    .contact-row,
    .contact-text,
    .contact-button,
    .contact-button-icon,
    .contact-bg,
    .wpcf7,
    iframe,
    .sidebar,
    .widget-area,
    nav {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       3) المحتوى المطلوب: العنوان + النص
       ---------------------------------------------------------------------- */
    .entry-header {
        display: block !important;
    }
    .entry-title {
        font-size: 20pt !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #000 !important;
        margin: 0 0 .35cm !important;
        padding: 0 !important;
        text-align: start;
        /* لا قطع للعنوان بين صفحتين */
        break-after: avoid-page;
        page-break-after: avoid;
    }

    .entry-content,
    .article-content,
    .post-content {
        display: block !important;
        font-size: 11.5pt !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* النصوص العادية: أسود على أبيض — تباين طباعة عالٍ */
    .entry-content p,
    .article-content p,
    .entry-content li,
    .article-content li,
    .entry-content blockquote,
    .article-content blockquote,
    .entry-content h1, .entry-content h2, .entry-content h3,
    .entry-content h4, .entry-content h5, .entry-content h6 {
        color: #000 !important;
        background: none !important;
        text-shadow: none !important;
    }
    .entry-content h2, .article-content h2 { font-size: 15pt !important; margin: .5cm 0 .2cm !important; }
    .entry-content h3, .article-content h3 { font-size: 13pt !important; margin: .4cm 0 .2cm !important; }

    /* العناوين لا تُقطع عن نصّها */
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid-page;
        page-break-after: avoid;
    }

    /* الروابط: أظهر الوجهة بجانب النصّ (مفيد على الورق) */
    .entry-content a,
    .article-content a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    .entry-content a[href^="http"]::after,
    .article-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        font-weight: 400;
        word-break: break-all;
    }
    /* ⚠️ لا تُظهر وجهة الروابط الداخلية ولا روابط المراسلة — ضجيج */
    .entry-content a[href^="/"]::after,
    .entry-content a[href^="#"]::after,
    .entry-content a[href^="mailto:"]::after,
    .article-content a[href^="/"]::after,
    .article-content a[href^="#"]::after,
    .article-content a[href^="mailto:"]::after {
        content: none !important;
    }

    /* ----------------------------------------------------------------------
       4) الصورة البارزة تُطبع · وصور المحتوى تُخفى
       ---------------------------------------------------------------------- */

    /* ✅ الصورة البارزة: `.post-thumbnail` داخل `.entry-header`
          ⚠️ القالب يضعها بـ`padding-top:56.25%` و`position:absolute` على
          الصورة — وهي تقنية «نسبة عرض ثابتة» للشاشة. وفي الطباعة تُنتج
          صندوقًا فارغًا لأن الارتفاع محسوب من العرض المئوي.
          ⇒ نُلغي النسبة ونجعل الصورة في التدفّق الطبيعي. */
    .post-thumbnail {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 0 .5cm !important;
        overflow: visible !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .post-thumbnail img,
    .post-thumbnail .featured-image,
    img.wp-post-image {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 8cm !important;         /* لا تستهلك الصفحة كلها */
        margin: 0 auto !important;          /* توسيطها */
        object-fit: contain !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ⛔ باقي صور المحتوى — مخفيّة (مطلوب صراحةً: نصّ بلا صور) */
    .entry-content img,
    .article-content img,
    .entry-content figure,
    .article-content figure,
    .entry-content picture,
    .article-content picture,
    .entry-content .wp-block-image,
    .article-content .wp-block-image,
    .entry-content .wp-block-gallery,
    .article-content .wp-block-gallery,
    .entry-content video,
    .article-content video,
    .entry-content svg,
    .article-content svg,
    .entry-content .wp-block-embed,
    .article-content .wp-block-embed {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       5) فاصل الصفحات وجودة الطباعة
       ---------------------------------------------------------------------- */
    /* لا تقطع فقرة بين صفحتين */
    p, li, blockquote, tr, pre {
        orphans: 3;
        widows: 3;
    }
    figure, table, pre, blockquote {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* الطباعة بالأبيض والأسود: ألغِ الخلفيات والظلال والانتقالات */
    * {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
    }

    /* ⚠️ ولا تفرض خلفية بيضاء على العناصر التي قد تحمل نصًّا أبيض:
       كان `.dark-mode` يجعل النصّ أبيض على خلفية داكنة، وفي الطباعة
       تُلغى الخلفية فيصير **نصًّا أبيض على ورق أبيض = غير مرئي**.
       ⇒ نجبر اللون الأسود على كل النصوص في وضع الطباعة. */
    body, body * {
        color: #000 !important;
        background-color: transparent !important;
    }
    /* استثناء: الصورة البارزة وحاوياتها */
    .post-thumbnail,
    .post-thumbnail * {
        background-color: transparent !important;
    }

    /* ----------------------------------------------------------------------
       ⚠️ تصفير Swiper — **بعد** قواعد الإخفاء أعلاه عمدًا، ومُقيَّد.

       كان `display:block` يُطبَّق على كل `.swiper` بلا قيد، وهو بنفس
       النوعية (specificity) لقاعدة `.post-swiper{display:none}` أعلاه —
       وكونه لاحقًا يجعله **يفوز** ⇒ سلايدر صور المقال كان يُطبع كصندوق
       فارغ رغم إخفائه. (مُقاس: `sliderHidden: visible` قبل الإصلاح.)

       ✅ والحلّ: نُبقي التصفير لِما قد يظهر فعلًا (سلايدر الرئيسية في
          صفحات أخرى مثلًا)، ونستثني سلايدر المقال صراحةً بفئة أعلى.
       ---------------------------------------------------------------------- */
    .swiper,
    .swiper-wrapper,
    .swiper-slide {
        display: block !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }
    /* ✅ لا يُطبع سلايدر المقال — الصور مخفيّة أصلًا فمكانه فارغ.
       ⚠️ حصرًا بـ`.post-swiper` وحدها — بلا `.entry-content .swiper`.
          كان `.entry-content .swiper` فئة أعلى تُطابق **حاوية المحتوى
          نفسها** (لأنها تحمل صنف `swiper` في بعض الحالات) ⇒ أخفت
          المقال كاملًا. (مُقاس: `contentVisible: hidden` قبل التصحيح.) */
    .post-swiper,
    .post-swiper .swiper-wrapper,
    .post-swiper .swiper-slide {
        display: none !important;
    }
}