/* Samla Responsive — Mobile, Tablet, Desktop */
/* Include on all pages: <link rel="stylesheet" href="responsive.css"> */

/* ============================================
   HAMBURGER MENU
   ============================================ */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 1002;
    position: relative;
}
.nav-hamburger span {
    width: 22px; height: 2px;
    background: var(--text-primary, #2C3E32);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================
   MOBILE — up to 768px
   ============================================ */
@media (max-width: 768px) {
    /* NAV: hide links by default, show as fullscreen overlay when .open */
    .nav-hamburger { display: flex; }

    .nav-links {
        display: none !important;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #FAFAF8 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        z-index: 1001;
        padding: 80px 32px 32px;
    }
    .nav-links.open {
        display: flex !important;
    }
    /* Override any other rule that hides individual links */
    .nav-links.open a {
        display: block !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        color: #2C3E32 !important;
        text-decoration: none;
    }
    .nav-links.open .nav-cta {
        margin-top: 8px;
        padding: 14px 32px !important;
        border-radius: 100px;
        font-size: 1.1rem !important;
    }
    .nav-links.open .lang-switch {
        margin-top: 8px;
        display: flex !important;
    }
    .nav-inner {
        padding: 12px 16px !important;
    }

    /* HERO */
    .hero { padding: 60px 16px 40px !important; }
    .hero-split { flex-direction: column !important; text-align: center; }
    .hero-text { align-items: center; max-width: 100% !important; }
    .hero-text h1 { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
    .hero-sub { font-size: 1rem !important; max-width: 100% !important; }
    .hero-actions { flex-direction: column; align-items: center; gap: 12px !important; }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary { width: 100%; max-width: 320px; justify-content: center; }
    .hero-phone { transform: scale(0.85); margin: 0 auto; }

    /* SECTIONS */
    section { padding: 48px 16px !important; }
    .section-inner { padding: 0 !important; }
    .section-inner h2 { font-size: 1.8rem !important; }
    .section-inner > p { font-size: 0.95rem !important; max-width: 100% !important; }

    /* GRIDS */
    .diff-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .diff-card { padding: 24px !important; }
    .modules-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .module-card { padding: 16px !important; }
    .module-card h4 { font-size: 0.85rem !important; }
    .steps { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* PRICING */
    .pricing-card { padding: 32px 20px !important; }
    .pricing-features { text-align: left; }

    /* FAQ */
    .faq-list { padding: 0 !important; }
    .faq-item summary { font-size: 0.95rem !important; padding: 16px 0 !important; }

    /* FOOTER */
    .footer-inner { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }

    /* DEMO PHONE */
    .demo-section { padding: 32px 16px !important; }
    .demo-phone-wrap { transform: scale(0.9); }

    /* LEGAL PAGES */
    .legal-content { padding: 32px 16px !important; }
    .legal-content h1 { font-size: 1.6rem !important; }
    .legal-content h2 { font-size: 1.2rem !important; }

    /* SUPPORT */
    .support-grid { grid-template-columns: 1fr !important; }
    .topics { grid-template-columns: 1fr 1fr !important; }

    /* OM OSS */
    .about-grid { grid-template-columns: 1fr !important; }
    .founder-card { flex-direction: column !important; text-align: center; }

    /* LEGAL PAGES — inline-styled nav override */
    nav > div { flex-wrap: wrap; }
    nav .nav-links[style] {
        display: none !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        background: #FAFAF8 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
        z-index: 1001 !important;
        padding: 80px 32px 32px !important;
    }
    nav .nav-links.open[style] {
        display: flex !important;
    }
    nav .nav-links.open[style] a,
    nav .nav-links[style].open a {
        font-size: 1.3rem !important;
        color: #2C3E32 !important;
        display: block !important;
    }
}

/* ============================================
   SMALL MOBILE — up to 480px
   ============================================ */
@media (max-width: 480px) {
    .hero-text h1 { font-size: 2rem !important; }
    .hero-badge { font-size: 0.8rem !important; }
    .modules-grid { grid-template-columns: 1fr !important; }
    .footer-inner { gap: 16px !important; }
    .pricing-price { font-size: 2.5rem !important; }
    .diff-card h3 { font-size: 1rem !important; }
    .nav-logo-text { font-size: 1.1rem !important; }
    .topics { grid-template-columns: 1fr !important; }
}

/* ============================================
   TABLET — 769px to 1024px
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-split { gap: 32px !important; }
    .hero-phone { transform: scale(0.9); }
    .diff-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .modules-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .steps { grid-template-columns: repeat(3, 1fr) !important; }
    section { padding: 56px 24px !important; }
}

/* ============================================
   SAFE AREA (notch/dynamic island)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
    nav { padding-top: env(safe-area-inset-top); }
    .footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
.nav-links {
    transition: none;
}
.nav-hamburger span {
    transition: transform 0.3s ease, opacity 0.3s ease;
}