/* Mobile-specific optimizations */

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    button,
    input[type="email"],
    input[type="submit"],
    .preference-btn {
        min-height: 44px; /* Apple's recommended minimum touch target size */
        min-width: 44px;
    }
    
    /* Improve text readability on small screens */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Prevent zoom on input focus */
    input[type="email"] {
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* Improve button active states for touch */
    button:active,
    .preference-btn:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Match Subscribe and Newsletters button heights in mobile nav */
    nav .md\:hidden a[href="#latest-newsletters"],
    nav .md\:hidden #mobile-subscribe-btn {
        height: auto;
        min-height: auto;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for form elements */
    form {
        padding: 0 4px;
    }
    
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
    }
    
    /* Remove outlines for minimal design */
    button:focus,
    input:focus {
        outline: none;
    }
    
    /* Exception for carousel dots - keep them small */
    .carousel-dot {
        min-height: auto !important;
        min-width: auto !important;
    }

    /* Newsletter sample header: hidden by default, show only on mobile */
    .newsletter-sample-header {
        display: block !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    .newsletter-sample-header h3 {
        margin: 0 0 0.25rem 0;
    }
    .newsletter-sample-header p {
        margin: 0;
        color: rgba(148, 163, 184, 1); /* text-gray-400 */
    }
}

/* Hide the sample header on larger screens (desktop/tablet) */
.newsletter-sample-header {
    display: none;
}

/* Mobile portrait: reorder screenshot after signup form for better CTA flow */
@media (max-width: 768px) and (orientation: portrait) {
    /* Ensure form elements display in correct order and align left: label -> buttons -> input -> submit */
    #hero #waitlist-form > .flex.flex-col {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    /* Label section - first */
    #hero #waitlist-form .mb-3 {
        order: 1;
        text-align: left !important;

/* Landscape-only: grid layout for preference buttons with horizontal scroll fallback
   Applies only to mobile/tablet landscape to avoid changing portrait/desktop behavior */
@media (max-width:1024px) and (orientation:landscape) {
    /* Keep headline on a single line and make it pop slightly larger */
    #hero h2 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
        line-height: 1.05 !important;
    }

    /* Preference buttons container: switch to horizontal grid so columns have
       a sensible minimum width. If viewport is too narrow the row becomes
       horizontally scrollable rather than shrinking buttons below usable size. */
    #hero #waitlist-form .flex.flex-row.gap-2.sm\:gap-3 {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(120px, 1fr) !important;
        gap: 0.75rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.25rem !important;
        align-items: center !important;
    }

    #hero #waitlist-form .preference-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 120px !important;
        padding: 0.6rem 0.9rem !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Ensure email input and subscribe remain full-width in the flow */
    #hero #waitlist-form input[type="email"] {
        order: 2 !important;
        width: 100% !important;
    }
    #hero #waitlist-form button[type="submit"] {
        order: 3 !important;
        width: 100% !important;
    }

    /* Move privacy / small helper text under the email input in landscape */
    #hero #waitlist-form .privacy-text,
    #hero #waitlist-form .small-print {
        order: 4 !important;
        margin-top: 0.25rem !important;
        font-size: 0.8rem !important;
    }
}
        margin-left: 0 !important;
    }

    /* Interest buttons - second, right after label */
    /* Use multiple selectors to reliably match the buttons container and left-align them */
    #hero #waitlist-form .flex.flex-row.w-full,
    #waitlist-form .flex.flex-row.w-full,
    #hero #waitlist-form > .flex > .flex.flex-row,
    #hero #waitlist-form .flex-row {
        order: 2 !important;
        margin-top: 0.5rem !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Make individual preference buttons natural width and left-aligned */
    #hero #waitlist-form .preference-btn {
        width: auto !important;
        min-width: 28% !important;
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    /* Email input - third */
    #hero #waitlist-form .mt-4 {
        order: 3;
    }

    /* Subscribe button - fourth */
    #hero #waitlist-form .mt-3 {
        order: 4;
    }

    /* Privacy text - last */
    #hero #waitlist-form > .flex.flex-col.gap-3 > p.text-gray-400,
    #hero #waitlist-form > p.text-gray-400 {
        order: 5;
        text-align: left !important;
        margin-left: 0 !important;
    }

    /* Reorder screenshot after form */
    #hero .carousel-slide .flex.flex-col > div.text-left.self-start.order-3 {
        order: 3 !important;
    }
    #hero .carousel-slide .flex.flex-col > .w-full {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 2rem;
    }

    /* Ensure the newsletter preview stacks vertically and header sits on top of the image */
    #hero .carousel-slide .w-full.flex.items-center.justify-center.relative {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    .newsletter-sample-header {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    .mobile-screenshot {
        order: 2 !important;
        width: auto !important;
        max-width: min(78vw, 440px) !important;
        display: block !important;
        margin: 0 auto !important;
        align-self: center !important;
        height: auto !important;
    }
}

/* Tablet-specific optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Optimize for tablet portrait and landscape */
    .hero-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Better button sizing for tablets */
    button {
        min-height: 48px;
    }
}

/* Landscape tweaks for mobile/tablet without touching portrait/desktop */
@media (max-width: 1024px) and (orientation: landscape) {
    body {
        overflow-y: auto;
    }

    /* Hide the sample newsletter header and screenshot on mobile/tablet landscape only */
    #hero .carousel-slide .newsletter-sample-header,
    #hero .carousel-slide .w-full.flex.items-center.justify-center.relative,
    #hero .carousel-slide .w-full.order-2,
    #hero .carousel-slide .mobile-screenshot,
    #hero .carousel-slide .mobile-screenshot + .absolute {
        display: none !important;
    }

    /* Let the left column expand to full width when the right column is hidden */
    #hero .carousel-slide .flex.flex-col > .contents {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        padding-right: 0.5rem !important;
    }

    /* Use the wide viewport instead of stacking everything vertically */
    #hero .carousel-slide .flex.flex-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }
    #hero .carousel-slide .flex.flex-col > .contents,
    #hero .carousel-slide .flex.flex-col > .w-full {
        align-self: flex-start;
    }
    /* Override Tailwind's display: contents so the column can size/align */
    #hero .carousel-slide .flex.flex-col > .contents {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.3rem;
        flex: 1 1 auto;
        width: auto;
        max-width: 100%;
        padding-right: 0.5rem;
    }
    #hero .carousel-slide .flex.flex-col > .w-full {
        flex: 0 1 auto;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        margin: 0;
        gap: 0.5rem;
        padding-top: 0;
    }

    /* Dial back headline size for short heights */
    #hero h2 {
        white-space: nowrap;
        font-size: clamp(1.4rem, 2.2vw, 2.2rem);
        line-height: 1.1;
        margin-bottom: 0.15rem;
        font-weight: 700;
    }
    /* Add minimal breathing room above the headline */
    #hero .text-left.self-start {
        margin-top: 0.2rem;
    }
    /* Keep entire headline on ONE line in landscape - hide ALL breaks */
    #hero h2 br {
        display: none;
    }

    /* Keep the form compact and avoid overflow */
    #hero #waitlist-form {
        max-width: 100%;
        width: 100%;
    }
    /* Ensure form children stack vertically and email input sits on its own line in landscape */
    #hero #waitlist-form .flex.flex-col.gap-3 {
        align-items: flex-start !important;
        width: 100% !important;
    }
    #hero #waitlist-form .mb-3 {
        display: block !important;
        width: 100% !important;
    }
    /* Label section - add margin below to create space for buttons to appear underneath */
    #hero #waitlist-form .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    #hero #waitlist-form .mb-3 label {
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
    /* Interest buttons (AI, Crypto, Finance) - force horizontal row with
       sensible min-width to keep touch targets comfortable. Allow horizontal
       scrolling instead of shrinking on narrow landscape viewports. */
    #hero #waitlist-form .flex.flex-row.gap-2.sm\:gap-3 {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        order: 2 !important;
        margin-bottom: 0.5rem !important;
    }
    #hero #waitlist-form .preference-btn {
        /* keep natural sizing but with a comfortable minimum */
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 120px !important;
        padding: 0.6rem 0.9rem !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    /* Buttons group: let it size naturally and sit on its own row */
    #hero #waitlist-form .flex.flex-row.gap-2.sm\:gap-3 {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        width: auto !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 0.5rem !important;
    }

    /* Email input: full-width block under the buttons (but constrained for readability) */
    #hero #waitlist-form input[type="email"] {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Submit and privacy ordering */
    #hero #waitlist-form button[type="submit"] { order: 4 !important; }
    #hero #waitlist-form > .flex.flex-col.gap-3 > p.text-gray-400,
    #hero #waitlist-form p.text-gray-400.text-sm { order: 5 !important; margin-top: 0.25rem !important; }
    /* If viewport is very narrow, allow wrapping to avoid overflow */
    @media (max-width: 560px) and (orientation: landscape) {
        #hero #waitlist-form .flex.flex-row.gap-2.sm\\:gap-3 {
            flex-wrap: wrap !important;
            gap: 0.5rem !important;
        }
        #hero #waitlist-form .preference-btn {
            flex: 0 0 48% !important;
            width: 48% !important;
            max-width: 48% !important;
        }
    }
    /* Email input - ensure it's visible and properly sized */
    #hero #waitlist-form input[type="email"] {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        flex: 1 1 auto;
        padding: 0.5rem 0.75rem !important;
        font-size: 14px;
        min-height: 38px;
    }
    /* Subscribe button */
    #hero #waitlist-form button[type="submit"] {
        width: 100%;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem;
        min-height: 38px;
    }
    
    /* Tighten internal gaps in the form stack for landscape */
    #hero #waitlist-form .flex.flex-col.gap-3 {
        gap: 0.25rem !important;
    }
    #hero #waitlist-form .flex.flex-col.gap-3.mt-4 {
        margin-top: 0.1rem !important;
    }
    #hero #waitlist-form .mt-4 {
        margin-top: 0.15rem !important;
    }
    #hero #waitlist-form .mt-3 {
        margin-top: 0.1rem !important;
    }

    /* Keep hero content centered without crowding */
    #hero {
        padding-top: 3rem;
        padding-bottom: 0.5rem;
    }
    .mobile-screenshot {
        max-width: 45vw !important;
        max-height: 65vh !important;
        min-height: 50vh !important;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    }
    /* Lower overlay CTA buttons on screenshot */
    .mobile-screenshot + .absolute {
        top: 60% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.3rem;
        justify-content: center;
        align-items: center;
        width: auto;
        max-width: auto;
        padding: 0 0.5rem;
    }
    .mobile-screenshot + .absolute button {
        justify-content: center;
        text-align: center;
        gap: 0.3rem;
        min-width: auto;
        padding: 0.4rem 0.7rem !important;
        font-size: 0.75rem !important;
    }

    /* Hide helper copy and pull controls upward for landscape */
    #hero #waitlist-form .mb-3 p.text-gray-400 {
        display: none !important;
    }
    #hero #waitlist-form .mb-3 {
        margin-bottom: 0.05rem;
    }
    #hero #waitlist-form .mb-3 label {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    /* Add a bit of offset before the join/privacy line */
    #hero #waitlist-form .flex.flex-col.gap-2 > p.text-gray-400 {
        margin-top: 0.5rem;
        margin-left: 0;
        font-size: 0.75rem;
        order: 6;
        width: 100%;
        text-align: left;
    }
    /* Modals fit within shorter viewports */
    #newsletter-modal .relative {
        max-height: 80vh;
    }
    #link-modal .w-full.h-\\[80vh\\] {
        height: 70vh;
    }
}

/* Desktop: align overlay buttons with form submit height */
@media (min-width: 1025px) {
    #hero h2 {
        font-size: clamp(1.8rem, 2.6vw, 2.9rem);
        line-height: 1.08;
    }
    /* Desktop: keep first line together, break before "Every Friday" */
    #hero h2 br:first-of-type {
        display: none;
    }
    #hero h2 br:nth-of-type(2) {
        display: inline;
    }

    .mobile-screenshot + .absolute {
        top: 70% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.75rem;
        align-items: center;
        width: auto;
        max-width: none;
    }

    /* Left-align heading and form on desktop for better visual hierarchy */
    #hero .carousel-slide .flex.flex-col > .contents {
        align-items: flex-start !important;
    }
    #hero .text-left.self-start {
        text-align: left !important;
        margin-top: 0 !important;
    }
    /* Remove padding from h2 so it aligns flush-left with the form label */
    #hero h2 {
        padding: 0 !important;
        margin: 0 0 1rem 0 !important;
    }
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp text rendering on high DPI screens */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dark mode specific mobile optimizations */
@media (prefers-color-scheme: dark) {
    /* Ensure good contrast in dark mode */
    input[type="email"] {
        background-color: rgba(31, 41, 55, 0.8);
        border-color: rgba(75, 85, 99, 0.8);
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Final override: strictly enforce the desired vertical stack in mobile/tablet landscape
   Goal (landscape only):
   Line 1: headline (h2)
   Line 2: label "Choose interests & enter your email"
   Line 3: helper text paragraph (you will receive...)
   Line 4: AI / Crypto / Finance buttons (horizontal)
   Line 5: email textbox (full-width block)
   Line 6: Subscribe button
   Line 7: Join 1,000+ members - privacy policy
*/
@media (max-width:1024px) and (orientation:landscape) {
    /* Ensure the left-column contents align as a vertical flow */
    #hero .carousel-slide .flex.flex-col > .contents {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    /* Waitlist form: enforce strict vertical stacking */
    #hero #waitlist-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Line 2: label */
    #hero #waitlist-form .mb-3 { order: 1 !important; display: block !important; width: 100% !important; }
    #hero #waitlist-form .mb-3 label { display: block !important; margin-bottom: 0.25rem !important; }

    /* Line 3: helper paragraph (ensure visible) */
    #hero #waitlist-form .mb-3 p.text-gray-400 { display: block !important; order: 2 !important; margin: 0 0 0.5rem 0 !important; }

    /* Line 4: buttons - horizontal row, left-aligned, allow horizontal scrolling if needed */
    #hero #waitlist-form .flex.flex-row.gap-2.sm\:gap-3 {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 0.25rem !important;
        padding-left: 0 !important;
    }
    #hero #waitlist-form .preference-btn { min-width: 120px !important; flex: 0 0 auto !important; }

    /* Line 5: email textbox - full-width block beneath buttons */
    #hero #waitlist-form .mt-4 { order: 4 !important; width: 100% !important; }
    #hero #waitlist-form .mt-4 input[type="email"],
    #hero #waitlist-form input[type="email"] {
        display: block !important;
        width: 100% !important;
        max-width: 480px !important;
        box-sizing: border-box !important;
        margin: 0 0 0.5rem 0 !important;
    }

    /* Line 6: subscribe button */
    #hero #waitlist-form .mt-3 { order: 5 !important; width: 100% !important; }
    #hero #waitlist-form button[type="submit"] { order: 5 !important; width: auto !important; min-width: 120px !important; }

    /* Line 7: join/privacy - ensure underneath the button */
    #hero #waitlist-form > .flex.flex-col.gap-3 > p.text-gray-400,
    #hero #waitlist-form p.text-gray-400.text-sm {
        order: 6 !important;
        display: block !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
        max-width: 480px !important;
    }

    /* Remove any earlier rules that hid helper copy */
    #hero #waitlist-form .mb-3 p.text-gray-400 { display: block !important; }
}