/* ===========================================
   RESPONSIVE STYLES
   =========================================== */

/* Header switches to mobile navigation before the desktop menu gets cramped */
@media (max-width: 1100px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .nexpers-header .header-inner {
        height: 64px;
        gap: 12px;
    }

    .nexpers-header .header-nav,
    .nexpers-header .nav-menu,
    .nexpers-header .header-cta {
        display: none !important;
    }

    .nexpers-header .mobile-toggle {
        display: flex !important;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(59,130,246, 0.08);
    }

    .header-actions {
        margin-inline-start: auto;
        flex-shrink: 0;
    }

    .logo-name {
        font-size: 20px;
    }

    .mobile-nav {
        width: min(340px, 100vw);
        max-width: 100vw;
    }

    [dir="rtl"] .mobile-nav,
    body.rtl .mobile-nav {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
    }

    [dir="rtl"] .mobile-nav.active,
    body.rtl .mobile-nav.active {
        transform: translateX(0) !important;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* Tablet: 1024px */
@media (max-width: 1024px) {
    .hero-section .container { grid-template-columns: 1fr; text-align: center; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-visual { display: none; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .pricing-grid { gap: 20px; }
    .pricing-card.featured { transform: scale(1); }
    .pricing-card.featured:hover { transform: translateY(-5px); }

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

    .blog-grid,
    .single-post-grid { grid-template-columns: 1fr; }
    /* On mobile the post content must come first; sidebar (search,
       recent posts, comments) goes below it. */
    .single-post-grid .post-full { order: 0; }
    .blog-sidebar { order: 1; }

    .post-card { grid-template-columns: 240px 1fr; }

    .blog-section .blog-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }

    .newsletter-card { flex-direction: column; text-align: center; }
    .newsletter-input-group { min-width: auto; width: 100%; }
}

/* Mobile Large: 768px */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
    }

    .section-padding { padding: 60px 0; }

    .topbar-left { display: none; }

    .header-nav { display: none; }
    .mobile-toggle { display: flex; }
    .header-cta { display: none; }

    .hero-section { padding: 100px 0 80px; min-height: auto; }
    .hero-title { font-size: 32px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 280px; }
    .hero-stats { flex-wrap: wrap; gap: 20px; }
    .stat-divider { display: none; }

    .features-grid { grid-template-columns: 1fr; }
    .feature-card { padding: 28px 24px; }

    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card { padding: 24px 16px; }

    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

    .testimonials-slider { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    .cta-card { padding: 40px 24px; }
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 280px; }

    .post-card { grid-template-columns: 1fr; }
    .post-image { aspect-ratio: 16/9; }

    .post-header { padding: 24px; }
    .post-content { padding: 0 24px 24px; }
    .post-tags { padding: 0 24px 16px; }
    .post-share { padding: 16px 24px; flex-wrap: wrap; }
    .post-navigation { flex-direction: column; gap: 16px; padding: 16px 24px; }
    .nav-prev, .nav-next { max-width: 100%; }
    .author-box { margin: 20px 24px; }
    .comments-section { padding: 0 24px 24px; }
    .comment-form-row { grid-template-columns: 1fr; }

    .footer-bottom-inner { flex-direction: column; gap: 12px; text-align: center; }
    .footer-bottom-menu { flex-wrap: wrap; justify-content: center; }

    .newsletter-input-group { flex-direction: column; }

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

/* Mobile Small: 480px */
@media (max-width: 480px) {
    .section-padding { padding: 48px 0; }

    .hero-title { font-size: 26px; }
    .hero-desc { font-size: 15px; }
    .hero-badge { font-size: 11px; padding: 6px 14px; }

    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .products-grid { grid-template-columns: 1fr; }
    .premium-products-grid { grid-template-columns: 1fr !important; max-width: 360px; margin: 0 auto; }
    .product-categories-showcase { margin-top: 24px; padding: 20px; border-radius: 22px; }
    .product-categories-header { flex-direction: column; align-items: flex-start; margin-bottom: 16px; }
    .product-categories-title { font-size: 20px; }
    .product-categories-grid { grid-template-columns: 1fr; gap: 14px; }
    .product-category-card { min-height: auto; padding: 20px; border-radius: 20px; }
    .product-category-name { font-size: 20px; }

    .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-title { font-size: 24px; }

    .error-number { font-size: 80px; }
    .error-actions { flex-direction: column; align-items: center; }

    .newsletter-card { padding: 28px 20px; }

    /* PS sections mobile */
    .ps-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ps-section { padding: 44px 0; }
    .ps-title { font-size: 19px; }
    .ps-card-img-wrap { aspect-ratio: 1/1; }
    .ps-card-body { padding: 10px 12px 12px; gap: 4px; }
    .ps-card-name { font-size: 13px; }
    .ps-card-price { font-size: 14px; }
    .ps-card-btn { padding: 6px 10px; font-size: 11px; }
    .ps-card-stock { font-size: 10px; }

    .mobile-nav { width: 100%; right: -100%; }

    .hero-actions { gap: 12px; }
    .hero-actions .btn { padding: 14px 24px; font-size: 14px; }
    .hero-stats { gap: 16px; }
    .stat-number { font-size: 28px; }

    .topbar-right { gap: 10px; }
    .topbar-contact, .topbar-social { display: none; }
}

/* Shop page responsive is in woocommerce.css */

/* Hover disabled on touch devices */
@media (hover: none) {
    .product-overlay { display: none; }
    .feature-card:hover,
    .product-card:hover,
    .category-card:hover,
    .pricing-card:hover { transform: none; }
}

/* High DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img { image-rendering: -webkit-optimize-contrast; }
}

/* =========================================================
   Global responsive safety net — catches any wide media in
   widgets, embeds, user content, etc. so nothing forces a
   horizontal scrollbar on small screens.
   ========================================================= */
@media (max-width: 768px) {
    img, iframe, video, embed, object { max-width: 100%; height: auto; }
    /* break-word (not anywhere): stops long unbreakable strings from causing
       horizontal scroll, WITHOUT collapsing the min-content width — `anywhere`
       shatters Persian words one letter per line in narrow columns. */
    .container { overflow-wrap: break-word; }
    /* Prevent accidental horizontal overflow site-wide */
    .ps-section, .blog-section, .single-post, .page-content {
        max-width: 100%; overflow-x: hidden;
    }
}