/*
 * 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,
    .bismika-pagination .page-numbers {
        min-width: 44px;
        min-height: 44px;
        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;
    }
}

/* ============================================================
   MOBILE PHASE 2 — Core mobile UX fixes
   Applied: v2.7.0
   Covers:
     1. iOS auto-zoom prevention (font-size ≥ 16px on all inputs)
     2. Share bar overflow fix (flex-wrap + 48px touch targets)
     3. Remaining touch targets raised to 48px
     4. Header height reduction at 375px
     5. prefers-reduced-motion coverage
     6. Glossary modal mobile improvements
     7. TOC collapsed by default on mobile
   ============================================================ */


/* ─── 1. iOS AUTO-ZOOM PREVENTION ────────────────────────────
   iOS Safari zooms the viewport when an input receives focus
   if its font-size is below 16px. Must be set on the element
   itself — font-size on a wrapper is not sufficient.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Inline header search (desktop nav — hidden on mobile, but
       guard it anyway in case a media query override reveals it) */
    .bismika-header-search-field {
        font-size: 16px !important;
    }

    /* Burger-menu search bar */
    .bismika-mobile-search-field {
        font-size: 16px !important;
        min-height: 48px;
    }

    /* Standalone search form (.search-field / .search-submit)
       used on the search results page and 404 page */
    .search-field {
        font-size: 16px !important;
        min-height: 48px;
    }

    .search-submit {
        font-size: 16px !important;
        min-height: 48px;
    }

    /* WordPress comment form fields */
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        font-size: 16px !important;
    }

    /* Theme comment form fields (single.css variant) */
    .bismika-comment-form input[type="text"],
    .bismika-comment-form input[type="email"],
    .bismika-comment-form input[type="url"],
    .bismika-comment-form textarea {
        font-size: 16px !important;
    }

    /* Generic form component */
    .bismika-form input[type="text"],
    .bismika-form input[type="email"],
    .bismika-form input[type="url"],
    .bismika-form input[type="password"],
    .bismika-form textarea,
    .bismika-form select {
        font-size: 16px !important;
    }
}


/* ─── 2. SHARE BAR OVERFLOW FIX ──────────────────────────────
   9 buttons × 36px + 8 gaps × 8px = 388px required.
   Available at 375px viewport (with 20px padding each side) = 335px.
   Fix: wrap to two rows and raise each button to 48px touch target.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .bismika-share-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Share label sits alone on its own row */
    .bismika-share-label {
        width: 100%;
        display: block;
        margin-bottom: 4px;
    }

    /* Each share button raised to 48px */
    .bismika-share-btn {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
}


/* ─── 3. REMAINING TOUCH TARGETS ─────────────────────────────
   Back-to-top (36px), modal close (40px), category labels,
   mobile search button — all raised to 48px minimum.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Back-to-top floating button */
    .bismika-back-to-top {
        width: 48px;
        height: 48px;
        bottom: 16px;
        right: 16px;
    }

    /* Glossary modal close button */
    .bismika-modal__close {
        width: 48px;
        height: 48px;
        top: 12px;
        right: 12px;
    }

    /* Mobile search submit button */
    .bismika-mobile-search-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 0 16px;
    }

    /* Category label links */
    .bismika-cat-label a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
    }

    /* Glossary footer trigger link */
    .bismika-glossary-trigger {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}


/* ─── 4. HEADER HEIGHT AT 375px ──────────────────────────────
   Branding row: 12px padding each side + 56px logo = 80px.
   With seasonal icon (64px) this is 88px. Target ≤ 80px total
   for branding row. Reduce padding and hide tagline below 480px
   to achieve this.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 479px) {

    /* Reduce branding row padding from 12px to 8px */
    .bismika-branding-row {
        padding: 8px 0;
    }

    /* Hide the tagline — site name alone identifies the site */
    .bismika-site-tagline {
        display: none;
    }

    /* Tighten the gap between logo and branding text */
    .bismika-branding-inner {
        gap: 12px;
    }
}

@media (max-width: 767px) {

    /* Tighten the seasonal icon so it doesn't dominate the row */
    .bismika-seasonal-icon {
        height: 48px;
        width: auto;
    }

    /* Reduce gap between site name and seasonal icon */
    .bismika-site-name-wrap {
        gap: 10px;
    }
}


/* ─── 5. PREFERS-REDUCED-MOTION ──────────────────────────────
   Three animations were missing guards:
     bismika-float  — seasonal icon gentle float
     bismika-pulse  — infinite scroll loading dots
     bismika-bounce — archive loading bounce
   bismika-heartbeat on the donate button was already guarded.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    /* Seasonal icon float */
    .bismika-seasonal-icon {
        animation: none;
    }

    /* Infinite scroll loading dots */
    .bismika-scroll-loader span {
        animation: none;
        opacity: 0.6;
    }

    /* Archive/card loading bounce (archive.css) */
    .bismika-loading-dot,
    [class*="bismika-bounce"] {
        animation: none;
    }

    /* Belt-and-suspenders: catch any remaining theme animation */
    .bismika-section-title--ready {
        animation: none;
        transition: none;
    }
}


/* ─── 6. GLOSSARY MODAL MOBILE ───────────────────────────────
   At 375px, max-height: 85vh with Android Chrome browser chrome
   (~56px) leaves ~570px content area. The close button at
   position: absolute; top: 16px; right: 16px is accessible.
   But the modal body padding (60px 40px) wastes space on mobile.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .bismika-modal__content {
        width: 96%;
        max-height: 92vh;
        border-radius: 8px;
    }

    .bismika-modal__body {
        padding: 60px 16px 20px;
        /* Room for the absolutely-positioned close button at top: 60px */
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}


/* ─── 7. TOC COLLAPSED ON MOBILE ─────────────────────────────
   On a long article, the TOC can occupy 30-40% of the screen
   before any content. Collapsed by default on mobile; users
   tap the title to expand. The toggle is handled by theme.js.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Hide the list by default — theme.js adds .is-open to expand */
    .bismika-toc.is-collapsible:not(.is-open) .bismika-toc-list {
        display: none;
    }

    /* Title row: make it a tappable toggle */
    .bismika-toc.is-collapsible .bismika-toc-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0 !important;
        user-select: none;
        min-height: 44px;
        padding: 4px 0 !important;
    }

    /* Chevron indicator */
    .bismika-toc.is-collapsible .bismika-toc-title::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid currentColor;
        opacity: 0.6;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    /* Rotate chevron when open */
    .bismika-toc.is-collapsible.is-open .bismika-toc-title::after {
        transform: rotate(180deg);
    }

    /* Restore bottom margin when open */
    .bismika-toc.is-collapsible.is-open .bismika-toc-title {
        margin-bottom: 12px !important;
    }

    /* Adjust overall toc padding to feel less heavy on mobile */
    .bismika-toc {
        padding: 14px 16px;
        margin-bottom: 24px;
    }
}

/* ─── STICKY HEADER MOBILE BURGER ───────────────────────────
   The sticky header has no navigation on mobile — users who
   scroll past the main nav bar lose access to the burger menu.
   This adds a burger toggle inside the sticky header, visible
   only on mobile, wired to the same #primary-menu as the main
   nav burger via JS (theme.js).
   ─────────────────────────────────────────────────────────── */

/* Hidden on desktop — sticky nav handles navigation there */
.bismika-sticky-burger {
    display: none;
}

@media (max-width: 767px) {
    /* Show in sticky header on mobile */
    .bismika-sticky-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 48px;
        height: 48px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: auto;
        flex-shrink: 0;
    }

    .bismika-sticky-burger .bismika-burger-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Push sticky logo to the left, burger to the right */
    .bismika-sticky-inner {
        justify-content: space-between;
    }

    /* Hide the desktop nav in sticky header on mobile
       (already set elsewhere, but belt-and-suspenders) */
    .bismika-sticky-header .bismika-sticky-nav {
        display: none;
    }
}

/* ============================================================
   MOBILE PHASE 3 — Final touch targets, dark mode, Phase 7
   Applied: v2.9.0
   Covers:
     1. Remaining touch targets (read-more, branding-link)
     2. Dark mode contrast fixes at mobile font sizes
     3. Arabic font load optimisation note (handled in assets.php)
   ============================================================ */


/* ─── REMAINING TOUCH TARGETS ────────────────────────────────
   read-more buttons render at ~34px (8px padding + 11px text +
   8px padding + borders). Raised to 44px min-height on mobile.
   Branding link wraps the site name — needs a tap-friendly
   height since it's the primary logo navigation on mobile.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .bismika-read-more {
        min-height: 44px;
        padding: 10px 18px;
        display: inline-flex;
        align-items: center;
    }

    /* Branding link (site name) — make it easier to tap */
    .bismika-branding-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Footer logo link — large enough area for a clear tap */
    .bismika-footer-logo-link {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
    }
}