/**
 * Coincu SEO Fixes - Mobile Optimization CSS
 * Fixes: touch targets (48px min), font sizes (12px min), DOM/layout cleanup
 */

/* ==========================================================================
   #8: Mobile Touch Targets - Minimum 48x48px
   Google requires interactive elements to be at least 48x48px with 8px spacing.
   ========================================================================== */

@media (max-width: 849px) {

    /* Navigation links and buttons */
    nav a,
    .nav a,
    .menu-item a,
    .header-nav a,
    .mobile-nav a,
    .footer a,
    .widget a,
    .sidebar a {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Buttons and form elements */
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .btn,
    a.button,
    .wp-block-button__link {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 16px;
    }

    /* Tag links and category links */
    .tag-cloud-link,
    .tagcloud a,
    .post-tags a,
    .entry-tags a,
    .cat-item a {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        margin: 4px;
    }

    /* Pagination */
    .page-numbers,
    .nav-links a,
    .pagination a,
    .woocommerce-pagination a {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    /* Social share buttons */
    .social-icons a,
    .share-button,
    .sassy-social-share a,
    .heateor_sss_sharing_container a {
        min-height: 48px;
        min-width: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Search form */
    .search-form input[type="search"],
    .search-form input[type="text"],
    .search-form .search-submit,
    .searchform input {
        min-height: 48px;
    }

    /* Breadcrumbs */
    .rank-math-breadcrumb a,
    .breadcrumbs a,
    .breadcrumb a {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        padding: 4px;
    }

    /* Select dropdowns */
    select {
        min-height: 48px;
    }

    /* Star ratings */
    .kk-star-ratings a,
    .kk-star-ratings .kksr-star {
        min-height: 48px;
        min-width: 48px;
    }

    /* Flatsome-specific: mobile menu, off-canvas */
    .off-canvas-left a,
    .off-canvas-right a,
    .mobile-sidebar a,
    .mfp-close,
    .nav-sidebar li a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Touch target spacing - prevent overlapping targets */
    .post-item a,
    .article-inner a,
    .entry-content a {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}


/* ==========================================================================
   #9: Minimum Font Sizes - 12px on mobile
   Ensures all text is legible without zooming on mobile devices.
   ========================================================================== */

@media (max-width: 849px) {

    /* Global minimum */
    body {
        font-size: max(14px, 1em);
    }

    /* Common small text elements */
    small,
    .small,
    .meta,
    .post-meta,
    .entry-meta,
    .comment-meta,
    .post-date,
    .byline,
    .author-name,
    time,
    .breadcrumbs,
    .breadcrumb,
    .rank-math-breadcrumb,
    .copyright,
    figcaption,
    caption,
    .wp-caption-text,
    label,
    legend,
    .form-label {
        font-size: max(12px, 0.75rem) !important;
    }

    /* Widget text */
    .widget,
    .sidebar,
    .footer-widgets {
        font-size: max(13px, 0.8125rem);
    }

    /* Table cells */
    td,
    th {
        font-size: max(12px, 0.75rem);
    }

    /* Flatsome-specific small text */
    .from_the_blog_excerpt .post-date,
    .from_the_blog_excerpt .post-category,
    .badge-container .badge,
    .star-rating,
    .price,
    .header-bottom-nav a,
    .nav-dropdown a,
    .ubermenu-target-text {
        font-size: max(12px, 0.75rem) !important;
    }

    /* Input fields */
    input,
    textarea,
    select {
        font-size: max(16px, 1rem); /* 16px prevents iOS zoom on focus */
    }
}


/* ==========================================================================
   #10: DOM Size Reduction - Hide non-essential elements on mobile
   Reduces visual/rendering complexity. True DOM reduction requires theme changes,
   but hiding unused elements improves perceived performance and CLS.
   ========================================================================== */

@media (max-width: 849px) {

    /* Hide desktop-only decorative elements */
    .show-for-medium,
    .hide-for-small,
    .large-only {
        display: none !important;
    }

    /* Simplify sidebar - collapse to single column */
    .sidebar-widgets .widget:nth-child(n+4) {
        display: none;
    }

    /* Hide excessive related posts on mobile (keep first 3) */
    .related-posts .post-item:nth-child(n+4),
    .rpbt_shortcode li:nth-child(n+4) {
        display: none;
    }

    /* Reduce popular posts on mobile */
    .wpp-list li:nth-child(n+4) {
        display: none;
    }

    /* Hide ad containers that take up space on mobile */
    .desktop-only-ad {
        display: none !important;
    }

    /* Simplify footer on mobile */
    .footer-widgets .col:nth-child(n+3) {
        display: none;
    }

    /* Collapse nested comment replies beyond level 2 */
    .comment .children .children {
        display: none;
    }
}


/* ==========================================================================
   General performance / CLS prevention
   ========================================================================== */

/* Reserve space for images to prevent CLS */
img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* Reserve space for ads to prevent CLS */
.coinzilla-ad,
[id*="coinzilla"],
.ad-container,
.ad-slot {
    min-height: 90px;
    contain: layout;
}

/* Contain layout for heavy sections */
.sidebar,
.footer,
.related-posts,
.comments-area {
    contain: layout style;
}