/* =========================================================
   responsive.css — التجاوب مع الشاشات
   ========================================================= */

/* —— أجهزة لوحية دعائم كبيرة (<= 1024) */
@media (max-width: 1024px) {
    .layout { grid-template-columns: 1fr; gap: 28px; }
    .side-nav {
        position: static;
        max-height: none;
        box-shadow: none;
    }
    .side-nav a { padding: 8px 12px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* —— بين 768 و 300 —— */
@media (max-width: 768px) {
    .nav-links,
    .nav-cta { display: none; }

    .nav-toggle { display: flex; }

    /* قائمة منسدلة للجوال */
    .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--header-h);
        right: 0;
        left: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 18px 20px 24px;
        gap: 6px;
        box-shadow: var(--shadow-lg);
        animation: slideDown .3s ease;
    }

    .nav-links.mobile-open a { padding: 12px 4px; }

    .nav-links.mobile-open .nav-cta { display: inline-flex; justify-content: center; margin-top: 10px; }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .hero { padding: 60px 0 90px; }
    .content { padding: 28px 20px; }
    .data-grid { grid-template-columns: 1fr; }
    .bottom-links { flex-direction: column; }
    .cta-band { padding: 36px 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

/* —— جوالات صغيرة (<= 480) */
@media (max-width: 480px) {
    .brand-title { font-size: .95rem; }
    .brand-sub { font-size: .72rem; }
    .brand .logo { width: 40px; height: 40px; }

    .policy-table { display: block; overflow-x: auto; white-space: nowrap; font-size: .8rem; }

    .policy-section > h2 { font-size: 1.2rem; }
    .hero-meta { flex-direction: column; align-items: center; }

    .cta-actions a { width: 100%; justify-content: center; }

    .to-top { bottom: 18px; left: 18px; width: 42px; height: 42px; }
}