/* Responsive Styles - All Media Queries */

/* Tablet and wider - rotating text */
@media (min-width: 768px) {
    .rotating-text-wrapper {
        min-width: 340px;
    }

    /* Hero headline larger on desktop */
    h1.hero-fade-in.hero-delay-1 {
        font-size: 5.4rem !important;
    }
}

/* Mobile responsive - hero glow */
@media (max-width: 768px) {
    .hero-section {
        background: white;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
        display: flex;
        align-items: center !important;
        justify-content: center;
        position: relative;
    }

    .hero-section > div {
        transform: translateY(-2cm) !important;
        position: relative;
        z-index: 10;
    }

    /* Mobile responsive blobs */
    .blob-1 {
        width: 250px;
        height: 250px;
    }
    .blob-2 {
        width: 300px;
        height: 300px;
    }
    .blob-3 {
        width: 200px;
        height: 200px;
    }

    /* Mobile responsive section glow */
    .section-glow-transition {
        background:
            radial-gradient(
                ellipse 600px 300px at 50% 0%,
                rgba(0, 186, 255, 0.03) 0%,
                rgba(0, 186, 255, 0.015) 30%,
                rgba(255, 255, 255, 0) 55%
            ),
            white;
    }

    /* Hamburger visible on mobile */
    .hamburger {
        display: flex;
    }

    /* Mobile responsive adjustments */
    h1 {
        font-size: 3.5rem !important;
        line-height: 1.1 !important;
        padding: 0 0.5rem;
        margin-bottom: 1.5rem !important;
        margin-top: 1rem !important;
        position: relative;
        z-index: 10;
    }

    /* Hero section subtext - larger and more readable */
    .hero-fade-in p,
    section p {
        font-size: 1.125rem !important;
        line-height: 1.6 !important;
        padding: 0 0.5rem;
        margin-bottom: 1.5rem !important;
    }

    /* Mobile hero subtext - stack and center */
    .hero-section p {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-left: 0 !important;
        text-align: center !important;
        position: relative;
        z-index: 10;
    }

    .hero-section p span {
        display: block !important;
        white-space: normal !important;
    }

    /* Mobile hero subtext - centered, hide rotating text */
    .hero-section .hero-fade-in.hero-delay-2 {
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }

    /* Hide rotating text wrapper and all its contents on mobile */
    .rotating-text-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    .rotating-text {
        display: none !important;
    }

    #rotatingText {
        display: none !important;
    }

    /* Hero section - cleaner without animation */
    .min-h-screen {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        justify-content: flex-start !important;
        min-height: auto !important;
    }

    /* Connection map - HIDDEN on mobile */
    .connection-map {
        display: none !important;
    }

    /* Make SVG text larger on mobile */
    .connection-map text {
        font-size: 15px !important;
    }

    /* Section dividers - less spacing on mobile */
    .section-divider,
    .section-divider-gradient {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-16 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .my-20 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Make SVG circles larger on mobile */
    .connection-map circle[r="3"],
    .connection-map circle[r="3.5"],
    .connection-map circle[r="4"],
    .connection-map circle[r="4.5"] {
        r: 5 !important;
    }

    /* Unicorn background - HIDDEN on mobile */
    .unicorn-bg {
        display: none;
    }

    /* Main content spacing */
    main {
        padding-top: 6.5rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-bottom: 2rem !important;
    }

    /* Fade in elements */
    .fade-in-up {
        padding-left: 0;
        padding-right: 0;
    }

    /* CTA button - larger touch target (min 44px height) */
    .cta-button {
        padding: 18px 40px;
        font-size: 1.0625rem;
        min-height: 56px;
        font-weight: 600;
    }

    .cta-arrow {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Hero delay animations - adjust for mobile */
    .hero-delay-3 {
        margin-top: 0.5rem;
        position: relative;
        z-index: 10;
    }

    /* Feature grid */
    .grid {
        gap: 1.25rem !important;
    }

    /* Feature cards - more generous padding */
    .group {
        padding: 2rem !important;
    }

    /* Feature card text larger */
    .group h3 {
        font-size: 1.125rem !important;
    }

    .group p {
        font-size: 1rem !important;
    }

    /* Footer - much larger text */
    footer {
        padding: 2rem 1.25rem;
        font-size: 13px !important;
    }

    footer .text-xs {
        font-size: 13px !important;
    }

    footer .text-\[10px\] {
        font-size: 12px !important;
    }

    /* Logo text */
    .font-logo {
        font-size: 1.75rem !important;
    }

    /* Navigation links - larger touch targets */
    .mobile-menu-item {
        padding: 16px 24px !important;
        font-size: 17px !important;
    }

    .mobile-dropdown-items .mobile-menu-item {
        padding: 12px 24px 12px 32px !important;
        font-size: 16px !important;
    }

    /* Section headings larger */
    h2 {
        font-size: 1.875rem !important;
    }

    /* Status indicator larger */
    .status-indicator {
        font-size: 12px !important;
    }

    /* Dashboard iframe responsive */
    .border-2.rounded-xl iframe {
        height: 500px !important;
    }

    /* Commerce logos - better spacing */
    .commerce-logo {
        max-width: 110px !important;
    }

    /* Backed by section - smaller logos on mobile */
    .backed-logo-container {
        padding: 8px !important;
    }

    .backed-logo {
        max-height: 28px !important;
        height: auto !important;
        width: auto !important;
    }

    /* Specific logo sizes on mobile */
    .backed-logo-madrona {
        max-height: 55px !important;
        height: 55px !important;
    }

    .backed-logo-visa {
        max-height: 26px !important;
        height: 26px !important;
    }

    /* Backed by section - reduce gap on mobile */
    .flex.gap-12 {
        gap: 1.5rem !important;
    }

    /* Reduce section padding on mobile */
    section.py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section .mb-16 {
        margin-bottom: 1.5rem !important;
    }

    section .gap-12 {
        gap: 1.5rem !important;
    }

    /* Grid background less prominent on mobile */
    .bg-grid-pattern {
        opacity: 0.3 !important;
    }

    /* Noodles even more subtle on mobile */
    .noodle-container {
        opacity: 0.03 !important;
    }

    /* About modal responsive */
    .about-modal-content {
        padding: 2rem;
    }
}

/* Tablet responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    h1 {
        font-size: 3.5rem !important;
    }

    .connection-map {
        max-width: 90%;
    }

    main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Small mobile (max 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 2.75rem !important;
        line-height: 1.15 !important;
    }

    p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* CTA button still needs good touch target */
    .cta-button {
        padding: 14px 24px;
        font-size: 0.9375rem;
        min-height: 48px;
    }

    .font-logo {
        font-size: 1.5rem !important;
    }

    /* Navigation height */
    nav .h-20 {
        height: 4.5rem !important;
    }

    /* Connection map text even larger on small screens */
    .connection-map text {
        font-size: 16px !important;
    }

    /* Section headings */
    h2 {
        font-size: 1.625rem !important;
    }

    /* Feature cards */
    .group {
        padding: 1.75rem !important;
    }

    .group h3 {
        font-size: 1rem !important;
    }

    /* Commerce logos single column */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Dashboard even smaller on tiny screens */
    .border-2.rounded-xl iframe {
        height: 450px !important;
    }
}

/* Mobile responsive for demo modal */
@media (max-width: 640px) {
    .demo-modal-overlay {
        padding: 16px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .demo-modal {
        border-radius: 16px;
        margin: 0;
        max-height: 85vh;
    }

    .demo-modal-header {
        padding: 24px 20px 20px;
    }

    .demo-modal-close {
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
    }

    .demo-modal-title {
        font-size: 24px;
        padding-right: 40px;
        line-height: 1.3;
    }

    .demo-modal-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .demo-modal-body {
        padding: 24px 20px;
    }

    .demo-form-group {
        margin-bottom: 20px;
    }

    .demo-form-label {
        font-size: 14px;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .demo-form-input,
    .demo-form-textarea {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 12px;
        -webkit-appearance: none;
    }

    .demo-form-textarea {
        min-height: 100px;
    }

    .demo-form-submit {
        padding: 16px;
        font-size: 16px;
        min-height: 52px;
        border-radius: 12px;
        font-weight: 600;
    }

    .demo-form-footer {
        padding: 0 20px 24px;
        font-size: 13px;
        line-height: 1.6;
    }
}