/* =====================================================================
 * Mobile Responsive Overrides
 * Added as part of the Mobile Responsive Plan (docs/MOBILE_RESPONSIVE_PLAN.md)
 * Purpose: catch-all responsive fixes that complement Tailwind utilities
 * without requiring per-page markup changes.
 * ===================================================================== */

/* Prevent horizontal page scroll on any device */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Auto-wrap any <table> in admin/content areas with horizontal scroll on small screens. */
@media (max-width: 767.98px) {
    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Headings: cap oversized typography on phones across the site. */
    main h1 { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; }
    main h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
    main h3 { font-size: clamp(1.25rem, 5vw, 1.625rem) !important; line-height: 1.25 !important; }

    /* Decorative emoji wrappers that use text-4xl / text-5xl should also shrink. */
    main h1 .text-5xl, main h1 .text-6xl, main h2 .text-4xl, main h2 .text-5xl, main h2 .text-6xl,
    main h3 .text-4xl, main h3 .text-5xl {
        font-size: inherit !important;
    }

    /* Section paddings that are too generous for phones. */
    main .p-10, main .p-12, main .p-14 {
        padding: 1.25rem !important;
    }
    main .py-12, main .py-14, main .py-16 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    main .mb-16, main .mb-20 {
        margin-bottom: 2rem !important;
    }

    /* Buttons inside flex rows wrap and get full width by default. */
    main .flex.justify-between > a.inline-flex,
    main .flex.justify-between > button.inline-flex {
        flex-shrink: 0;
    }
}

/* Tap targets: ensure interactive icon-only buttons are at least 44x44px on touch. */
@media (hover: none) and (pointer: coarse) {
    button, a.btn, .icon-button {
        min-height: 44px;
    }
}

/* Notification bell dropdown safety: never wider than viewport. */
[x-data="notificationBell()"] > div[x-show="isOpen"] {
    max-width: calc(100vw - 1rem) !important;
}

/* Recipe and content cards: ensure images don't overflow rounded card. */
main img {
    max-width: 100%;
    height: auto;
}

/* Floating refresh button on home: move above the mobile bottom nav. */
@media (max-width: 767.98px) {
    #refresh-homepage {
        bottom: 5rem !important;
        right: 1rem !important;
    }
    #back-to-top {
        bottom: 5rem !important;
        right: 1rem !important;
    }
}