/*
 * Bismika Allahuma — mobile-fixes.css
 *
 * Resolves the three Google Search Console Mobile Usability issues:
 *   1. Content wider than screen
 *   2. Text too small to read
 *   3. Clickable elements too close together
 *
 * All rules are scoped to mobile breakpoints or use the minimum
 * specificity needed to override main.css. No desktop styles are
 * altered. Loaded on every page via inc/assets.php after main.css.
 *
 * @package Bismika_Allahuma
 * @since   2.4.9
 */

/* ============================================================
   ISSUE 1 — CONTENT WIDER THAN SCREEN
   Root causes:
   a) .bismika-primary-menu has flex-wrap: nowrap !important and
      white-space: nowrap, causing the nav bar to overflow the
      viewport on tablets (768–1018 px) before the burger menu
      activates at 767 px.
   b) html/body lack overflow-x: hidden, so any element that
      accidentally overflows (animated buttons, nowrap strings)
      creates a horizontal scrollbar.
   c) .bismika-branding-inner has no overflow guard, allowing
      the logo + branding text row to overflow on very narrow
      tablets.
   ============================================================ */

/* (a) Global horizontal-overflow guard */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* (b) Branding row overflow guard at all sizes */
.bismika-branding-inner {
    overflow: hidden;
}

/* (c) Tablet nav: allow the menu to wrap before the burger takes over.
 *     At ≤767 px the menu is already hidden and replaced by the burger,
 *     so this only affects the 768–1018 px range where the full nav
 *     bar is still visible but may overflow if there are many items. */
@media (max-width: 1018px) {
    .bismika-primary-menu {
        flex-wrap: wrap !important;
    }

    .bismika-primary-menu > li > a {
        white-space: normal;
    }
}

/* (d) Mobile: ensure the open burger menu never overflows.
 *     The menu is already display:none / display:flex column at
 *     this breakpoint, but belt-and-suspenders. */
@media (max-width: 767px) {
    .bismika-primary-menu {
        flex-wrap: wrap !important;
    }

    /* Sticky header: its nowrap logo can push content wide on small phones */
    .bismika-sticky-logo {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60vw;
    }
}


/* ============================================================
   ISSUE 2 — TEXT TOO SMALL TO READ
   Google flags rendered font sizes below ~12 px (it accounts for
   zoom and scaling). The following selectors all resolve to 9–11 px
   on mobile in main.css. They are raised to a 12 px floor here.

   Affected selectors and their current sizes in main.css:
     .bismika-cat-label a               →  9 px  (line 976)
     .bismika-read-more                 → 11 px  (line 151)
     .bismika-support-btn               → 11 px  (line 293)
     .bismika-post-meta                 → 11 px  (line 1030)
     .bismika-date                      → 11 px  (line 1039)
     .bismika-topic-item .bismika-post-meta → 11 px (line 1230)
     .bismika-topic-item .bismika-meta-date → 11 px (line 1238)
     .bismika-menu .sub-menu a          → 11 px  (line 668)
     .bismika-related .bismika-post-meta → 11 px  (line 2226)
     .bismika-footer-copyright p        → 11 px  (line 2729)
     .bismika-footer-site-tagline       → clamp(0.6rem …) ≈ 9–10 px
     .post-navigation .nav-subtitle     → 11 px  (line 2120)
     .bismika-comment-date a            → 10 px  (line 2952)
     .bismika-single-cat-pill           → 10 px  (line 1509)
   ============================================================ */

@media (max-width: 767px) {

    /* Category label pills */
    .bismika-cat-label a {
        font-size: 12px !important;
    }

    /* "Read more" CTA button */
    .bismika-read-more {
        font-size: 12px !important;
    }

    /* Topbar support / donate button */
    .bismika-support-btn {
        font-size: 12px !important;
    }

    /* Post meta row (author · date · reading time) */
    .bismika-post-meta {
        font-size: 12px !important;
    }

    /* Standalone date element used across card types */
    .bismika-date {
        font-size: 12px !important;
    }

    /* Topic-column post meta */
    .bismika-topic-item .bismika-post-meta,
    .bismika-topic-item .bismika-meta-date,
    .bismika-topic-item .bismika-meta-reading-time {
        font-size: 12px !important;
    }

    /* Dropdown sub-menu links */
    .bismika-menu .sub-menu a {
        font-size: 12px !important;
    }

    /* Related articles meta */
    .bismika-related .bismika-post-meta {
        font-size: 12px !important;
    }

    /* Footer copyright paragraph */
    .bismika-footer-copyright p {
        font-size: 12px !important;
    }

    /* Footer site tagline — clamp(0.6rem …) renders ~9 px on a 375 px viewport */
    .bismika-footer-site-tagline {
        font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
    }

    /* Post-navigation subtitle */
    .post-navigation .nav-subtitle {
        font-size: 12px !important;
    }

    /* Comment date */
    .bismika-comment-date a {
        font-size: 12px !important;
    }

    /* Single-post category pill */
    .bismika-single-cat-pill {
        font-size: 12px !important;
    }
}


/* ============================================================
   ISSUE 3 — CLICKABLE ELEMENTS TOO CLOSE TOGETHER
   Google requires touch targets of at least 48 × 48 px with
   ≥ 8 px of spacing between adjacent interactive elements.

   Problem areas identified in main.css:
   a) .bismika-menu-toggle (burger button): padding:8px on a
      22 px wide icon → ~38 px total height. Below the 48 px
      WCAG / Google minimum.
   b) .bismika-nav-search-toggle: padding:8px → ~34 px total.
   c) .bismika-theme-toggle: padding:6px → ~30 px total.
      Both (b) and (c) are side-by-side with no gap, so they
      also fail the 8 px spacing requirement.
   d) .bismika-menu .sub-menu a: padding:9px 16px → ~36 px height
      when the burger menu is open on mobile.
   e) .bismika-read-more: padding:8px 16px → ~35 px height.
   ============================================================ */

@media (max-width: 767px) {

    /* (a) Burger / hamburger toggle */
    .bismika-menu-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 11px;          /* 22 px icon + 11+11 px padding = 48 px */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* (b) Desktop search-icon button — hidden at ≤767 px, but ensure
     *     it still meets the target if a breakpoint override shows it */
    .bismika-nav-search-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 13px;
    }

    /* (c) Light/dark mode toggle — adjacent to (b), needs its own 48 px
     *     target AND a gap so together they are not flagged as overcrowded */
    .bismika-theme-toggle {
        min-width: 48px;
        min-height: 48px;
        padding: 13px;
        margin-left: 4px;       /* 4 px gap + 48 px target on each side = safe */
    }

    /* (d) Open burger-menu items */
    .bismika-menu > li > a {
        min-height: 48px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
    }

    /* Sub-menu items rendered statically in the open burger menu */
    .bismika-menu .sub-menu a {
        min-height: 48px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }

    /* (e) "Read more" CTA — also fixes Issue 2 font-size above */
    .bismika-read-more {
        min-height: 48px;
        padding: 10px 18px;
        display: inline-flex;
        align-items: center;
    }

    /* Donate / support buttons in branding row and topbar */
    .bismika-donate-btn,
    .bismika-support-btn {
        min-height: 48px;
        padding: 10px 18px;
        display: inline-flex;
        align-items: center;
    }

    /* Post pagination links */
    .bismika-comments-area .nav-links a,
    .page-numbers,
    .page-numbers a {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Post-navigation prev/next links */
    .post-navigation a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}