/* ═══════════════════════════════════════════════════════
   Mobile UX Fixes — ItsMyIdeas.com
   Mobile-first: starts at 320px, scales up
   ═══════════════════════════════════════════════════════ */

/* ─── BASE (320px+) ─── */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-width: 0;
}

/* Prevent any element from causing horizontal scroll */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ─── TYPOGRAPHY SCALING ─── */

/* Scale down large inline font sizes from single-idea.php */
.idea-section h2,
.idea-section-title {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.idea-section h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    line-height: 1.35 !important;
}

/* Hero/title area */
.entry-title,
.page-title,
.archive-title {
    font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
    line-height: 1.25 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Body text */
p, li, td, th, dd, dt {
    font-size: clamp(0.95rem, 2.5vw, 1.0625rem) !important;
    line-height: 1.65 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Reduce very small font sizes for readability */
small, .small {
    font-size: clamp(0.8rem, 2vw, 0.875rem) !important;
}

/* ─── HEADER & NAVIGATION ─── */

/* Hide desktop search on mobile — use the search icon instead */
@media (max-width: 768px) {
    .header-search-container {
        display: none !important;
    }

    .site-main-header-inner-wrap {
        min-height: 60px !important;
    }
}

/* Mobile menu: ensure minimum 48px touch targets */
.drawer-navigation .menu-item > a,
.drawer-navigation .drawer-nav-drop-wrap {
    min-height: 48px !important;
    line-height: 48px !important;
    padding: 0 1.25rem !important;
    font-size: 1rem !important;
}

/* Mobile CTA button: large touch target */
.mobile-cta-button {
    min-height: 52px !important;
    line-height: 52px !important;
    padding: 0 1.5rem !important;
    font-size: 1rem !important;
}

/* ─── CARDS ─── */

.idea-card {
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .idea-card-body {
        padding: 1rem !important;
    }

    .idea-card-title {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
    }

    .idea-card-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 3;
    }

    .idea-card-meta {
        gap: 0.35rem !important;
    }

    .idea-card-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* ─── SEARCH RESULTS ─── */

@media (max-width: 640px) {
    .search-header-inner {
        padding: 1.5rem 1rem !important;
    }

    .search-header h1 {
        font-size: 1.5rem !important;
    }

    .search-form-enhanced {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .search-form-enhanced .search-field {
        width: 100% !important;
        font-size: 1rem !important;
    }

    .search-form-enhanced .search-submit {
        width: 100% !important;
        padding: 0.875rem !important;
    }
}

/* ─── FILTERS ─── */

@media (max-width: 640px) {
    .filter-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 0.5rem !important;
        gap: 0.4rem !important;
        scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 36px !important;
        padding: 0.3rem 0.75rem !important;
        font-size: 0.82rem !important;
    }
}

/* ─── BROWSE HERO ─── */

@media (max-width: 640px) {
    .browse-hero {
        padding: 2rem 1rem 1.5rem !important;
    }

    .browse-hero h1 {
        font-size: 1.5rem !important;
    }

    .browse-hero p {
        font-size: 0.95rem !important;
    }

    .browse-search-box input {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* ─── CATEGORY HEADER ─── */

@media (max-width: 640px) {
    .category-header {
        padding: 1.5rem 0 1rem !important;
    }

    .category-header h1 {
        font-size: 1.5rem !important;
    }

    .category-header .category-desc {
        font-size: 0.9rem !important;
    }
}

/* ─── TABLES (mobile) ─── */

@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100% !important;
    }

    th, td {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }

    /* Alternative: stack tables vertically */
    .responsive-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── CODE BLOCKS (mobile) ─── */

pre, code {
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
}

pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem !important;
    white-space: pre;
    max-width: 100% !important;
}

pre code {
    white-space: pre;
    word-wrap: normal;
}

/* ─── IMAGES IN CONTENT ─── */

.entry-content img,
.wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

/* ─── BUTTONS ─── */

.wp-block-button__link,
.button,
button[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 1rem !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
    .wp-block-buttons {
        flex-direction: column !important;
    }

    .wp-block-button {
        width: 100% !important;
    }

    .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
        padding: 0.875rem 1.5rem !important;
    }
}

/* ─── PAGINATION ─── */

@media (max-width: 640px) {
    .search-pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .search-pagination a,
    .search-pagination span {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 0.85rem !important;
    }
}

/* ─── BREADCRUMBS ─── */

@media (max-width: 640px) {
    .seo-breadcrumbs,
    .idea-breadcrumbs {
        font-size: 0.8rem !important;
        padding: 0.75rem 1rem !important;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ─── FOOTER (mobile) ─── */

@media (max-width: 480px) {
    .site-footer-columns {
        padding: 2rem 1rem 1rem !important;
        gap: 1.5rem !important;
    }

    .footer-col h4 {
        font-size: 0.8rem !important;
    }

    .footer-col a {
        font-size: 0.85rem !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* ─── SINGLE IDEA PAGE (mobile) ─── */

@media (max-width: 640px) {
    /* Scale down the large inline font sizes from single-idea.php */
    .idea-section {
        padding: 1rem 0 !important;
    }

    .idea-meta-bar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
    }

    .idea-meta-item {
        font-size: 0.85rem !important;
    }

    /* Table of contents: collapsible on mobile */
    .idea-toc {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

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

    .idea-toc ol {
        padding-left: 1.25rem !important;
    }

    .idea-toc li {
        font-size: 0.9rem !important;
        line-height: 1.8 !important;
    }

    /* Key-value pairs: stack on mobile */
    .idea-key-value {
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .idea-key-value .key {
        font-size: 0.85rem !important;
    }

    .idea-key-value .value {
        font-size: 0.95rem !important;
    }

    /* Share buttons: full width */
    .idea-share-buttons {
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .idea-share-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem 1rem !important;
    }

    /* Related ideas: stack */
    .related-ideas-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ─── FORMS ─── */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 640px) {
    textarea {
        min-height: 120px !important;
    }
}

/* ─── LISTS ─── */

ul, ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

li {
    margin-bottom: 0.4rem !important;
}

/* ─── WHITESPACE & SPACING ─── */

@media (max-width: 640px) {
    .content-area {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .entry-content-wrap {
        padding: 1rem !important;
    }

    /* Reduce excessive vertical spacing */
    .wp-block-columns {
        gap: 1rem !important;
    }

    .wp-block-column {
        margin-bottom: 0.5rem !important;
    }
}

/* ─── ACCESSIBILITY ─── */

/* Ensure all interactive elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Ensure minimum contrast */
@media (prefers-contrast: high) {
    .idea-card {
        border-width: 2px !important;
    }

    .filter-btn {
        border-width: 2px !important;
    }
}

/* ─── DARK MODE SUPPORT (future-proof) ─── */

@media (prefers-color-scheme: dark) {
    /* Placeholder for dark mode — activate when ready */
}

/* ─── LANDSCAPE MOBILE ─── */

@media (max-height: 500px) and (orientation: landscape) {
    .browse-hero {
        padding: 1rem !important;
    }

    .browse-hero h1 {
        font-size: 1.25rem !important;
    }
}

/* ─── VERY SMALL SCREENS (320px) ─── */

@media (max-width: 360px) {
    .site-title {
        font-size: 1.1rem !important;
    }

    .custom-logo {
        max-height: 32px !important;
        width: auto !important;
    }

    .filter-btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.6rem !important;
    }

    .idea-card-title {
        font-size: 1rem !important;
    }

    .idea-card-excerpt {
        font-size: 0.85rem !important;
    }
}