/* ═══════════════════════════════════════════════════════════════
   MOBILE SAFETY-NET — Android-phone-first responsive rules
   ───────────────────────────────────────────────────────────────
   Loaded globally AFTER the design system + components so it can
   correct mobile breakage site-wide without editing 60 tool CSS
   files. Targets the Play-Store web-app use case: touch-first,
   360–430px phones, no horizontal scroll, ≥44px tap targets.

   Per-tool overrides (loaded after this) still win where a tool
   needs bespoke mobile layout.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Never allow horizontal page scroll ─────────────────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media, canvases and tables must fit their container, not overflow it. */
img, canvas, video, svg, iframe {
    max-width: 100%;
    height: auto;
}
canvas { height: auto; }

/* Any wide block (tables, code, pre) scrolls inside itself, not the page. */
table, pre {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ── 2. Two-column tool layout (tool-wrapper.php) ──────────────────
   Desktop: main + sidebar side by side. Mobile: single column,
   sidebar (ads/related) drops below the tool. These classes had NO
   CSS before, so define a sane responsive default here. */
.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6, 24px);
    align-items: start;
}
.tool-layout__main { min-width: 0; } /* min-width:0 lets grid children shrink */

@media (max-width: 1024px) {
    .tool-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    /* The desktop-only sidebar is hidden below 1024px so the tool gets full width. */
    .sidebar-desktop-only { display: none; }
}

/* ── Shared tool shell (.tool-page__content + right column) ─────────
   Several tools (resize, increase-size, universal-converter, pdf-compress…)
   use a `1fr 380px` two-column shell whose right column keeps a fixed inner
   width on phones and forces horizontal scroll. Force the whole shell and its
   children to stay within the viewport at phone widths. */
@media (max-width: 768px) {
    .tool-page__content { grid-template-columns: 1fr !important; }
    .tool-right-col,
    .tool-page__content > *,
    .tool-right-col > * {
        max-width: 100%;
        min-width: 0;
    }
    /* The right column is sticky on desktop; once stacked it must flow
       normally, or it can overlap the main column (e.g. pdf-ocr's left side
       "hidden under" the sidebar strip). */
    .tool-right-col { position: static !important; top: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PHONES  (≤640px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Tighter gutters so tools use the full phone width. */
    .container,
    .container--narrow,
    .container--wide {
        padding-left: var(--space-4, 16px);
        padding-right: var(--space-4, 16px);
    }

    /* Guard against fixed pixel widths inside tools overflowing the screen.
       Tool UIs are built from these wrappers; cap them to the viewport.
       (Specific tools can still opt out with their own mobile rules.) */
    .tool-page,
    .tool-container,
    #tool-container,
    .tool-layout__main > * {
        max-width: 100%;
    }

    /* Toolbars / button rows: wrap instead of overflowing.
       (No blanket grid override here — that's left to per-tool CSS so we don't
       clobber grids that are already correctly responsive.) */
    .toolbar,
    [class*="toolbar"],
    [class*="btn-row"],
    [class*="actions"] {
        flex-wrap: wrap;
    }

    /* Touch targets: buttons and links used as controls get a comfortable
       minimum so they're tappable on a phone. */
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    [role="button"] {
        min-height: 44px;
    }

    /* Form fields: full width and ≥16px font so iOS/Android don't zoom on focus. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        box-sizing: border-box;
    }

    /* Modals/dialogs: fit the phone with a small margin instead of a fixed width. */
    [class*="modal"] > div,
    [class*="dialog"] > div,
    .modal-content {
        max-width: calc(100vw - 24px);
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL PHONES  (≤400px)  — the tightest common Android widths
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .container,
    .container--narrow,
    .container--wide {
        padding-left: 12px;
        padding-right: 12px;
    }
}