/* ============================================
   MOBILE APP LAYER
   Loaded after style.css; everything here only applies at phone width
   (<=768px), so desktop is untouched. Makes phones feel like a native
   app: compact sticky top bar, fixed bottom tab bar, thinner borders and
   shadows, tighter type, list-style tool rows and a swipeable category
   strip. Selectors are prefixed with `body` where needed so they win over
   the page-level <style> blocks in home/index.php and tools/single.php,
   which load later in the document.
   ============================================ */

/* The bottom tab bar is mobile-only. */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
    :root {
        --border-width: 1.5px;
        --shadow-sm: 2px 2px 0 var(--ink);
        --shadow-md: 2px 2px 0 var(--ink);
        --shadow-lg: 3px 3px 0 var(--ink);
        --shadow-xl: 3px 3px 0 var(--ink);
        --shadow-2xl: 3px 3px 0 var(--ink);
        --shadow-glow: 3px 3px 0 var(--ink);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 14px;
        --radius-xl: 16px;
        --radius-2xl: 18px;
        --tabbar-height: 62px;
    }

    html { -webkit-text-size-adjust: 100%; }

    body {
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        /* Room for the fixed tab bar plus the iPhone home indicator. */
        padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    }

    body .container {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    body .main-content {
        padding: 10px 0 20px;
        min-height: 0;
    }

    /* ---------- Top app bar ---------- */
    body .site-header {
        padding: 8px 0;
        padding-top: calc(8px + env(safe-area-inset-top));
        border-bottom-width: 1px;
        background: rgba(247, 241, 230, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
    }

    body .site-header .container {
        grid-template-rows: 40px auto;
        gap: 8px;
    }

    body .logo { font-size: 19px; gap: 7px; letter-spacing: -0.5px; }
    body .logo .logo-mark { width: 32px; height: 32px; }

    /* Navigation now lives in the tab bar ("More" opens this menu). */
    body .menu-toggle { display: none; }

    body .language-switcher { grid-column: 3; margin: 0; }

    body .language-trigger {
        height: 36px;
        min-width: 0;
        padding-inline: 8px;
        gap: 5px;
        border-width: 1px;
        border-radius: var(--radius-full);
        box-shadow: none;
        font-size: 12px;
    }

    body .language-flag,
    body .language-flag img { width: 20px; height: 20px; }

    body .site-header.nav-open .nav-menu {
        padding-top: 8px;
        margin-top: 2px;
        border-top: 1px solid var(--gray-200);
    }

    body .nav-menu a { padding: 11px 6px; font-size: 15px; }

    body .header-search {
        height: 42px;
        min-width: 0;
        border-width: 1px;
        box-shadow: none;
        padding: 0 14px;
    }

    /* 16px keeps iOS Safari from zooming the page when a field is focused. */
    body .header-search input { font-size: 16px; }

    body .site-header.search-open .header-search {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
    }

    body .language-suggestion { margin: 8px 14px 0; font-size: 12px; }

    /* ---------- Bottom tab bar ---------- */
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
        padding: 0 6px env(safe-area-inset-bottom);
        /* Same cream as the header/theme-color, so it blends into Android's
           system navigation bar below it instead of showing a white band. */
        background: rgba(247, 241, 230, 0.96);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid rgba(20, 20, 20, 0.1);
    }

    .mobile-tabbar-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: none;
        font-family: var(--font-body);
        font-size: 10.5px;
        font-weight: 600;
        color: var(--gray-500);
        text-decoration: none;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    .mobile-tabbar-item i {
        font-size: 22px;
        line-height: 1;
        width: 48px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-full);
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .mobile-tabbar-item.is-active { color: var(--ink); font-weight: 800; }
    .mobile-tabbar-item.is-active i { background: var(--blue-tint); color: var(--blue); }
    .mobile-tabbar-item:active i { background: var(--gray-100); }

    /* ---------- Buttons & form controls ---------- */
    body .btn {
        padding: 11px 16px;
        font-size: 14px;
        border-radius: var(--radius-md);
    }

    body .btn:hover { transform: none; }

    body .tool-input,
    body .tool-select,
    body .tool-textarea {
        padding: 11px 12px;
        font-size: 16px;
    }

    body .tool-textarea { font-size: 15px; }

    body .tool-label { font-size: 13px; margin-bottom: 6px; }
    body .tool-field { margin-bottom: 14px; }
    body .tool-grid-2 { gap: 12px; }
    body .tool-actions { gap: 8px; }
    body .tool-actions .btn { flex: 1 1 auto; }
    body .tool-subpanel { padding: 14px; }
    body .tool-result { padding: 14px; }

    /* ---------- Home ---------- */
    body .home-hero { padding: 14px 0 6px; gap: 0; }
    body .eyebrow { margin-bottom: 10px; font-size: 10.5px; letter-spacing: 0.1em; }
    body .home-hero h1 { font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; }
    body.is-rtl .home-hero h1 { line-height: 1.45; letter-spacing: 0; }
    body .hero-text { font-size: 14px; line-height: 1.7; margin-top: 10px; }
    body .hero-actions { flex-direction: row; align-items: center; gap: 14px; margin-top: 16px; }

    body .primary-button {
        min-height: 46px;
        padding-inline: 16px 8px;
        gap: 12px;
        font-size: 14px;
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
    }

    body .primary-button span { width: 28px; height: 28px; }
    body .privacy-note { font-size: 11px; }
    body .privacy-note b { font-size: 16px; }

    body .section-heading {
        margin: 26px 0 10px;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    body .section-kicker { display: none; }
    body .section-heading h2 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
    body .category-section-heading { margin-top: 26px; }
    body .category-section-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; }

    body .section-link {
        padding: 6px 10px;
        font-size: 12px;
        border-width: 0;
        box-shadow: none;
        background: transparent;
        color: var(--blue);
    }

    body .section-link:hover { background: transparent; color: var(--blue); transform: none; }

    /* Categories: one swipeable row of chips instead of a tall grid. */
    body .category-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin: 0 -14px;
        padding: 2px 14px 6px;
        scrollbar-width: none;
    }

    body .category-grid::-webkit-scrollbar { display: none; }

    body .category-card,
    body .category-grid a:last-child:nth-child(odd) {
        grid-column: auto;
        flex: 0 0 auto;
        width: 156px;
        flex-direction: row;
        align-items: center;
        gap: 9px;
        min-height: 0;
        padding: 10px;
        border-radius: var(--radius-md);
        scroll-snap-align: start;
    }

    body .category-card:hover { transform: none; }
    body .category-card-icon { width: 32px; height: 32px; font-size: 15px; border-width: 1px; }
    /* One line per name: a long wrapped name would stretch every card in the strip. */
    body .category-card-text h3 {
        font-size: 12.5px;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body .category-card-text span { font-size: 10.5px; }
    body .category-card-bg-icon { display: none; }

    /* ---------- Tool cards -> app list rows ---------- */
    body .tool-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
        background: var(--white);
        border: 1px solid rgba(20, 20, 20, 0.14);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    body .tool-card,
    body .tool-card:hover {
        display: grid;
        grid-template-columns: 42px 1fr 20px;
        align-items: center;
        column-gap: 12px;
        padding: 11px 12px;
        border: 0;
        border-bottom: 1px solid var(--gray-100);
        border-radius: 0;
        box-shadow: none;
        transform: none;
        background: transparent;
    }

    body .tool-card:last-child { border-bottom: 0; }
    body .tool-card:active { background: var(--gray-50); }

    body .tool-card .card-top,
    body .tool-card p,
    body .tool-card .categories { display: none; }

    body .tool-card .icon-wrap {
        grid-column: 1;
        grid-row: 1;
        width: 42px;
        height: 42px;
        margin: 0;
    }

    body .tool-card .icon-wrap::before { width: 42px; height: 42px; border-radius: 12px; }
    body .tool-card .icon-wrap svg { width: 24px; height: 24px; }
    body .tool-card:hover .icon-wrap svg { transform: none; }

    body .tool-card h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.45;
        letter-spacing: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body .tool-card .card-link {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
        padding: 0;
        justify-content: center;
    }

    body .tool-card .card-link span { display: none; }

    body .tool-card .card-link b {
        width: 20px;
        height: 20px;
        background: none;
        color: var(--gray-400);
        font-size: 15px;
    }

    /* ---------- Blog cards ---------- */
    body .blog-grid { grid-template-columns: 1fr; gap: 12px; }
    body .blog-card:hover { transform: none; }
    body .blog-card-image,
    body .blog-card-image-placeholder { height: 160px; }
    body .blog-card-body { padding: 14px; }
    body .blog-card-body h3 { font-size: 16px; }

    /* ---------- Archive / category pages ---------- */
    body .archive-hero { padding: 16px; }
    body .archive-hero h1 { font-size: 21px; }

    body .category-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -14px;
        margin-right: -14px;
        padding: 2px 14px 6px;
        scrollbar-width: none;
    }

    body .category-filter::-webkit-scrollbar { display: none; }
    body .category-filter a { flex: 0 0 auto; white-space: nowrap; }

    /* ---------- Single tool page ---------- */
    body .tool-breadcrumbs { display: none; }

    body .tool-hero-centered { padding: 12px 4px 14px; }

    body .tool-hero-icon-mini {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        border-radius: 13px;
    }

    body .tool-hero-icon-mini svg { width: 22px; height: 22px; }
    body .tool-hero-centered h1 { font-size: 20px; line-height: 1.4; margin-bottom: 6px; }
    body .tool-hero-tagline { font-size: 13px; line-height: 1.65; margin-bottom: 10px; }

    body .tool-content-inner {
        padding: 14px;
        border-radius: var(--radius-lg);
        box-shadow: none;
        border-width: 1px;
    }

    body .related-tools-section { margin-top: 24px; padding: 18px 0; border-width: 1px; }
    body .related-tools-section h2,
    body .tool-about-section h2 { font-size: 17px; margin-bottom: 12px; }
    body .related-tools-grid { gap: 8px; }

    body .related-tool-card,
    body .related-tool-card:hover {
        padding: 10px 12px;
        gap: 12px;
        border-width: 1px;
        border-radius: var(--radius-md);
        box-shadow: none;
        transform: none;
    }

    body .related-tool-icon { width: 38px; height: 38px; min-width: 38px; border-width: 1px; }
    body .related-tool-icon svg { width: 20px; height: 20px; }
    body .related-tool-info h3 { font-size: 13.5px; }

    body .tool-about-section {
        margin-top: 18px;
        padding: 18px 16px;
        border-width: 1px;
        border-radius: var(--radius-lg);
        box-shadow: none;
    }

    body .tool-about-content { font-size: 14px; line-height: 1.85; }

    /* ---------- Footer ---------- */
    body .site-footer { margin-top: 28px; border-top-width: 1px; }

    body .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 22px 16px;
        padding: 24px 0 18px;
        border-bottom-width: 1px;
    }

    body .footer-brand { grid-column: 1 / -1; }
    body .footer-brand p { font-size: 13px; margin-top: 8px; }
    body .footer-col h4 { font-size: 12px; margin-bottom: 10px; }
    body .footer-col a { font-size: 13px; }
    body .footer-col ul li + li { margin-top: 7px; }
    body .footer-bottom { padding: 14px 0; justify-content: center; text-align: center; }
    body .footer-bottom span { font-size: 12px; }
    body .footer-links { display: none; }

    /* Keep the feedback toast/modal clear of the tab bar. */
    body .tool-feedback-modal { padding-bottom: calc(18px + var(--tabbar-height) + env(safe-area-inset-bottom)); }
}

@media (max-width: 768px) {
    /* Tools show toasts via inline `position: fixed; bottom: 20px` — lift
       them above the tab bar instead of hiding them behind it. */
    body > div[style*="position: fixed"][style*="bottom: 20px"] {
        bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom)) !important;
    }
}