/* ==========================================================================
   SiteOnAI Theme — responsive.css
   Mobile-first responsive overrides for tablet and mobile breakpoints.
   ========================================================================== */

/* Large desktop down (≤1280px) */
@media (max-width: 1280px) {
    .container { max-width: 1100px; }
    .hero-card { width: 230px; }
}

/* Tablet landscape (≤1024px) */
@media (max-width: 1024px) {
    .container { max-width: 100%; padding: 0 24px; }

    /* Header: hide primary menu, show hamburger */
    .main-navigation { display: none; }
    .menu-toggle { display: flex; }

    .hero-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .hero-content { max-width: 100%; margin: 0 auto; }
    .hero-eyebrow, .hero-title, .hero-subtitle { text-align: center; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-visual { min-height: 320px; max-width: 480px; margin: 0 auto; }
    .hero-card { width: 220px; }
    .hero-card-1 { right: 5%; }
    .hero-card-3 { right: 10%; }

    .plugin-grid, .blog-grid, .related-posts-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }

    .about-inner { grid-template-columns: 1fr; gap: 30px; }
    .about-content .section-eyebrow, .about-content .section-title { text-align: center; }

    .newsletter-cta { flex-direction: column; text-align: center; padding: 36px; }

    .content-sidebar-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; }

    .footer-main { grid-template-columns: 1fr; gap: 30px; }
    .footer-widgets { grid-template-columns: repeat(2, 1fr); }

    .nav-links { grid-template-columns: 1fr; }
    .post-navigation .nav-next { text-align: left; }

    .entry-content .alignwide { width: 100%; margin-left: 0; margin-right: 0; }
}

/* Mobile landscape (≤768px) */
@media (max-width: 768px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .section { padding: 48px 0; }
    .section-header { margin-bottom: 30px; }

    .hero-section { padding: 50px 0 60px; }
    .hero-stats { gap: 22px; }
    .hero-stat strong { font-size: 1.4rem; }
    .hero-visual { min-height: 260px; }
    .hero-card { width: 200px; padding: 12px 14px; }
    .hero-card-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 16px; }
    .hero-card strong { font-size: 0.85rem; }
    .hero-card small { font-size: 0.72rem; }
    .hero-card-1 { right: 0; }
    .hero-card-2 { top: 100px; left: 0; }
    .hero-card-3 { top: 200px; right: 5%; }

    .plugin-grid, .blog-grid, .related-posts-grid, .category-grid { grid-template-columns: 1fr; }

    .newsletter-cta { padding: 28px 22px; }

    .single-article, .page-article, .full-width-article { padding: 26px 22px; }
    .entry-title { font-size: 1.5rem; }

    .author-box { flex-direction: column; text-align: center; padding: 20px 16px; }
    .author-avatar img { width: 64px; height: 64px; }

    .social-share-area { justify-content: center; flex-wrap: wrap; }

    .footer-widgets { grid-template-columns: 1fr; padding: 36px 0 20px; }
    .footer-bottom .container { justify-content: center; text-align: center; }

    .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }

    .pagination .nav-links { gap: 4px; }
    .page-numbers, .navigation a { min-width: 36px; height: 36px; padding: 0 10px; font-size: 0.85rem; }

    .error-emoji { display: none; }
    .error-actions { flex-direction: column; }
    .error-actions .btn { width: 100%; }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .container { padding: 0 16px; }
    .header-inner { padding: 8px 16px; gap: 10px; min-height: 60px; }
    :root { --siteonai-header-h: 60px; }
    .site-title { font-size: 1.15rem; }
    .header-cta-btn { padding: 8px 14px; font-size: 0.82rem; }
    .header-search-toggle { width: 34px; height: 34px; }
    .menu-toggle { width: 36px; height: 36px; }

    .hero-section { padding: 40px 0 50px; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.98rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { gap: 18px; }
    .hero-stat strong { font-size: 1.2rem; }

    .section-title { font-size: 1.4rem; }

    .newsletter-cta { padding: 22px 18px; }
    .newsletter-title { font-size: 1.25rem; }
    .newsletter-actions .btn { width: 100%; }

    .single-article, .page-article, .full-width-article { padding: 20px 16px; }
    .entry-title { font-size: 1.35rem; }
    .entry-content { font-size: 0.98rem; }

    .related-posts-title { font-size: 1.1rem; }

    .plugin-card-body, .post-card-body { padding: 14px 16px 18px; }
    .plugin-card-title, .post-card-title { font-size: 1.05rem; }

    .footer-bottom .container { flex-direction: column; }

    .search-form { flex-direction: row; }
    .search-field { min-width: 0; }
}

/* Very small (≤360px) */
@media (max-width: 360px) {
    .hero-card { width: 180px; }
    .hero-card-3 { display: none; }
    .header-cta-btn { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-card { animation: none !important; }
}

/* Print */
@media print {
    .site-header, .site-footer, .back-to-top, .mobile-menu, .mobile-menu-overlay, .siteonai-breadcrumbs, .social-share-area, .related-posts, #comments { display: none !important; }
    .single-article, .page-article { padding: 0; border: 0; box-shadow: none; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

/* Dark mode (CSS only — optional) */
@media (prefers-color-scheme: dark) {
    /* We keep the design light by default for brand consistency.
       This hook is provided in case users want to extend dark mode. */
}