/**
 * responsive.css - تصميم متجاوب مع جميع الشاشات
 */

/* 1. الجوال (حتى 768px) */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .site-logo h1 {
        font-size: 1.8rem;
        text-align: center;
    }

    .posts-grid, .search-results-grid {
        grid-template-columns: 1fr;
    }

    .post-card, .hero-card {
        padding: 15px;
    }

    .post-thumbnail img {
        height: 180px;
        object-fit: cover;
    }

    .archive-title, .page-title {
        font-size: 1.8rem;
    }

    #search-results h1 {
        font-size: 1.8rem;
    }

    .widget-area {
        max-width: 100%;
        margin: 20px 10px;
    }
}

/* 2. التابلت (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-container {
        gap: 10px;
    }

    .nav-menu {
        gap: 15px;
    }

    .site-logo h1 {
        font-size: 2rem;
    }
}

/* 3. الشاشات الكبيرة جدًا */
@media (min-width: 1400px) {
    .container, #site-content, #single-post {
        max-width: 1300px;
    }
}

/* 4. وضع الوضع الليلي (إن كان مفعّلًا) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #080820;
    }
}