/*
 * Creatives IT Services — Mobile Responsive CSS
 * এই ফাইলে শুধু responsive rules আছে।
 * কোনো existing CSS পরিবর্তন করা হয়নি।
 * ফাইলটি functions.php থেকে style.css-এর পরে load হয়।
 *
 * Breakpoints:
 *   1280px — Large tablet / small desktop
 *   1024px — Tablet landscape
 *   768px  — Tablet portrait / large mobile
 *   600px  — Mobile large
 *   480px  — Mobile medium
 *   360px  — Mobile small
 */

/* =============================================
   BASE MOBILE IMPROVEMENTS
============================================= */

/* Prevent horizontal overflow on all devices */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

* {
    min-width: 0; /* Fix flexbox/grid overflow on mobile */
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Container padding on small screens */
.container {
    padding-left: 16px;
    padding-right: 16px;
}

/* =============================================
   LARGE TABLET — 1280px
============================================= */
@media (max-width: 1280px) {
    .hero-title {
        font-size: clamp(1.9rem, 4vw, 3rem);
    }
    .packages-grid {
        max-width: 100%;
    }
    .smm-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   TABLET LANDSCAPE — 1024px
============================================= */
@media (max-width: 1024px) {

    /* Section padding */
    .section-padding { padding: 70px 0; }

    /* Hero */
    .hero-section { min-height: auto; padding: 60px 0; }
    .hero-grid { gap: 2rem; }
    .hero-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
    .hero-card-stack { max-width: 340px; }

    /* Packages */
    .packages-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
    }

    /* SMM */
    .smm-grid { grid-template-columns: repeat(3, 1fr); }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Header nav spacing */
    .main-nav a { padding: 7px 10px; font-size: 0.85rem; }

    /* Marketing grid */
    .marketing-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
}

/* =============================================
   TABLET PORTRAIT / LARGE MOBILE — 768px
============================================= */
@media (max-width: 768px) {

    /* ---- TYPOGRAPHY ---- */
    .section-title { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .section-subtitle { font-size: 0.95rem; }
    .section-padding { padding: 55px 0; }

    /* ---- TOP BAR ---- */
    .top-bar { display: none; }

    /* ---- HEADER ---- */
    .site-header { position: sticky; top: 0; z-index: 1000; }
    .header-inner {
        position: relative;
        padding: 12px 0;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    /* Hide desktop nav */
    .main-nav {
        display: none !important;
    }

    /* Mobile nav open state */
    .main-nav.open {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary);
        z-index: 9998;
        padding: 80px 24px 40px;
        overflow-y: auto;
        gap: 0;
    }

    .main-nav.open a {
        color: white !important;
        font-size: 1.3rem;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        border-radius: 0;
        display: block;
    }

    .main-nav.open a:hover,
    .main-nav.open a.active {
        background: transparent;
        color: var(--accent) !important;
        padding-left: 8px;
    }

    /* Mobile nav close button */
    .main-nav.open::before {
        content: '✕';
        position: fixed;
        top: 18px;
        right: 20px;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 9999;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
    }

    /* Show hamburger */
    .nav-toggle {
        display: flex !important;
        z-index: 9999;
        position: relative;
    }

    /* Logo adjustment */
    .site-logo { font-size: 1.2rem; }
    .logo-icon { width: 36px; height: 36px; font-size: 1rem; }

    /* Hide tagline on mobile */
    .logo-text span { display: none; }

    /* Header CTA - hide extra buttons, keep toggle */
    .header-cta { gap: 0.5rem; }
    .whatsapp-btn span,
    .whatsapp-btn svg + * { /* hide text on very small header */ }

    /* ---- HERO SECTION ---- */
    .hero-section {
        min-height: auto;
        padding: 50px 0 40px;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .hero-visual { display: none !important; }

    .hero-content { text-align: center; }

    .hero-badge { margin: 0 auto 1rem; display: inline-block; }

    .hero-title {
        font-size: clamp(1.7rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 1.75rem;
        max-width: 100%;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        text-align: center;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.25rem;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }

    .stat-number { font-size: 1.6rem; }

    /* ---- SERVICES ---- */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .service-card { padding: 1.75rem; }

    /* ---- VISA CARDS ---- */
    .visa-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
    }

    /* ---- WEBSITE PACKAGES ---- */
    .packages-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .package-card.featured-plan {
        transform: none !important;
        order: -1; /* Show featured first */
    }

    /* ---- MARKETING PACKAGES ---- */
    .marketing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        max-width: 100%;
    }

    /* ---- SMM GRID ---- */
    .smm-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
    }

    /* ---- LICENSES ---- */
    .licenses-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    /* ---- TESTIMONIALS ---- */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    /* ---- CTA SECTION ---- */
    .cta-inner {
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .cta-actions .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* ---- FOOTER ---- */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 1.25rem 0;
        font-size: 0.8rem;
    }

    .footer-social { justify-content: center; }

    /* ---- ARCHIVE / BLOG ---- */
    #primary > .site-main div[style*="grid-template-columns:1fr 320px"],
    #primary div[style*="grid-template-columns:1fr 300px"],
    #primary div[style*="grid-template-columns:1fr 320px"] {
        grid-template-columns: 1fr !important;
    }

    #primary aside,
    .site-main aside { display: none; }

    /* Blog grid */
    div[style*="grid-template-columns:1fr 1fr"][style*="gap:1.5rem"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- CONTACT PAGE ---- */
    div[style*="grid-template-columns:1fr 1.6fr"],
    div[style*="grid-template-columns:1fr 1.5fr"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- SINGLE POST ---- */
    .entry-content { font-size: 0.97rem; }
    .entry-content h2 { font-size: 1.3rem; }
    .entry-content h3 { font-size: 1.1rem; }
    .entry-content pre { font-size: 0.8rem; }

    /* ---- SEARCH ---- */
    form[role="search"] { flex-direction: column; }
    form[role="search"] input[type="search"],
    form[role="search"] button { border-radius: 8px !important; width: 100%; }

    /* ---- SECTION TITLES ---- */
    .section-title { text-align: center; }
    .tag-label { display: block; text-align: center; }

    /* ---- BUTTONS GENERAL ---- */
    .visa-card .btn,
    .package-body .btn,
    .smm-body .btn {
        font-size: 0.85rem;
        padding: 11px 20px;
    }

    /* ---- GOOGLE RATING ---- */
    .google-rating {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }

    /* Floating WhatsApp */
    .floating-whatsapp {
        bottom: 16px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .floating-whatsapp svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* =============================================
   MOBILE MEDIUM — 600px
============================================= */
@media (max-width: 600px) {

    .container { padding-left: 14px; padding-right: 14px; }

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

    /* Hero */
    .hero-title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .hero-stats { gap: 1rem; }
    .stat-item { min-width: 70px; }
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: 0.72rem; }

    /* Visa cards — stack to 1 column */
    .visa-cards-grid { grid-template-columns: 1fr !important; }

    /* SMM — stack to 1 column */
    .smm-grid { grid-template-columns: 1fr !important; }

    /* Services */
    .service-card { padding: 1.5rem; }
    .service-icon { width: 52px; height: 52px; font-size: 1.4rem; }

    /* License cards */
    .license-card { padding: 1.75rem; }
    .license-icon-wrap { width: 50px; height: 50px; font-size: 1.4rem; }

    /* Testimonials */
    .testimonial-card { padding: 1.5rem; }

    /* Package cards */
    .package-price { font-size: 2.2rem; }
    .package-header { padding: 1.5rem; }
    .package-body { padding: 1.5rem; }

    /* Marketing cards */
    .marketing-price { font-size: 1.8rem; }
    .marketing-header { padding: 1.5rem; }
    .marketing-body { padding: 1.5rem; }

    /* Visa cards */
    .visa-card { padding: 1.5rem; }
    .visa-price { font-size: 1.7rem; }

    /* CTA */
    .cta-inner { padding: 2rem 1rem; }
    .cta-inner .section-title { font-size: 1.5rem; }

    /* Footer */
    .footer-social a { width: 32px; height: 32px; }

    /* Contact page info cards */
    div[style*="display:flex"][style*="gap:1rem"][style*="align-items:center"] {
        flex-direction: column;
        text-align: center;
    }

    /* Header logo on small screens */
    .site-logo { gap: 0.5rem; }
    .logo-text { font-size: 1rem; }
}

/* =============================================
   MOBILE SMALL — 480px
============================================= */
@media (max-width: 480px) {

    .container { padding-left: 12px; padding-right: 12px; }

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

    /* Hero */
    .hero-section { padding: 40px 0 35px; }
    .hero-badge { font-size: 0.78rem; padding: 6px 14px; }
    .hero-title { font-size: 1.5rem; line-height: 1.25; }
    .hero-desc { font-size: 0.9rem; }

    /* Stats row */
    .hero-stats { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .stat-number { font-size: 1.3rem; }

    /* Section headers */
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: 0.875rem; }

    /* All buttons full width in key sections */
    .hero-actions .btn,
    .cta-actions .btn { max-width: 100%; }

    /* Packages */
    .package-features li { font-size: 0.85rem; }
    .check-icon { width: 18px; height: 18px; font-size: 0.65rem; }

    /* Marketing */
    .marketing-features li { font-size: 0.875rem; }

    /* SMM cards */
    .smm-price { font-size: 1.6rem; }
    .smm-tier { font-size: 0.65rem; }
    .smm-features li { font-size: 0.8rem; }
    .smm-body { padding: 1.25rem; }
    .smm-header { padding: 1.25rem; }

    /* Footer bottom */
    .footer-bottom p { font-size: 0.78rem; }

    /* Single post prev/next */
    .prev-next-nav { flex-direction: column; }

    /* Google rating */
    .stars { font-size: 0.95rem; }
    .rating-text { font-size: 1rem; }
    .rating-count { font-size: 0.78rem; }

    /* License items */
    .license-items li { font-size: 0.82rem; }

    /* Visa features */
    .visa-features li { font-size: 0.85rem; }

    /* Contact form */
    .page-contact form input,
    .page-contact form textarea,
    .page-contact form select {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }

    /* Floating WA button */
    .floating-whatsapp {
        bottom: 12px !important;
        right: 12px !important;
    }
}

/* =============================================
   MOBILE EXTRA SMALL — 360px
============================================= */
@media (max-width: 360px) {

    .container { padding-left: 10px; padding-right: 10px; }

    .hero-title { font-size: 1.3rem; }
    .section-title { font-size: 1.3rem; }

    .btn { padding: 11px 18px; font-size: 0.82rem; }

    .logo-icon { display: none; }
    .site-logo { gap: 0.25rem; }

    .visa-price { font-size: 1.5rem; }
    .smm-price { font-size: 1.4rem; }

    .package-price { font-size: 2rem; }

    /* Footer */
    .footer-col h3 { font-size: 0.75rem; }
    .footer-links a { font-size: 0.82rem; }
    .contact-item { font-size: 0.82rem; }
}

/* =============================================
   ADMIN RESPONSIVE — Admin panel pages
============================================= */
@media (max-width: 960px) {
    .cit-wrap { padding: 0; }
    .cit-header { flex-direction: column; gap: 1rem; align-items: flex-start; border-radius: 0 0 14px 14px; margin-top: 0; }
    .cit-dashboard-grid { grid-template-columns: 1fr 1fr; }
    .cit-row { flex-wrap: wrap; }
    .cit-col-2, .cit-col-3, .cit-col-4 { min-width: 100% !important; flex: unset !important; }
}

@media (max-width: 600px) {
    .cit-dashboard-grid { grid-template-columns: 1fr; }
    .cit-section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .cit-item-preview { font-size: 0.82rem; }
    .cit-header { padding: 16px; }
    .cit-card { padding: 1rem; }
    .cit-actions { flex-direction: column; }
    .cit-btn-save { width: 100%; justify-content: center; }
}

/* =============================================
   TOUCH DEVICE IMPROVEMENTS
============================================= */
@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    .main-nav a,
    .footer-links a,
    .btn,
    .service-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .whatsapp-btn { min-height: 44px; }

    /* Remove hover transforms on touch */
    .service-card:hover,
    .visa-card:hover,
    .package-card:hover,
    .license-card:hover,
    .testimonial-card:hover,
    .marketing-card:hover {
        transform: none !important;
    }

    /* Keep box shadow on hover for touch feedback */
    .service-card:active,
    .visa-card:active,
    .package-card:active {
        box-shadow: var(--shadow-md);
    }

    /* Disable floating animations on low-performance devices */
    @media (prefers-reduced-motion: reduce) {
        .floating-badge {
            animation: none !important;
        }
        * {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
        }
    }
}

/* =============================================
   PRINT STYLES
============================================= */
@media print {
    .site-header,
    .top-bar,
    .floating-whatsapp,
    .cta-section,
    .site-footer,
    .nav-toggle,
    .hero-actions,
    .btn { display: none !important; }

    body { font-size: 12pt; color: #000; }
    .container { max-width: 100%; padding: 0; }
    .section-padding { padding: 20pt 0; }
    .section-title { font-size: 18pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    .hero-section { background: #f5f5f5 !important; padding: 20pt 0; min-height: auto; }
    .hero-title { color: #000; font-size: 22pt; }
    .hero-desc { color: #333; }
}