/* ─────────────────────────────────────────────────────────────────────────────
 * AixKit global mobile-friendly layer.
 * Loaded LAST in admin/head.php so it can override any earlier rule.
 * Goal: pass Google/Yandex mobile usability checks without redesigning the site.
 *   - prevents horizontal scrolling on every page
 *   - keeps media (img/video/iframe/canvas) responsive
 *   - keeps inputs/buttons tap-friendly
 *   - stacks common grid/flex layouts under 768px
 *   - wraps tables in horizontal scroll
 *   - safe global typography & header wrap
 * Designed as a non-destructive safety net — does NOT touch tool logic, SEO
 * blocks, schema, analytics, internal-link blocks, or canonical URLs.
 * ──────────────────────────────────────────────────────────────────────────── */

/* ── 1. Universal box-sizing ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── 2. Document-level overflow guards ───────────────────────────────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ── 3. Responsive media defaults ────────────────────────────────────────── */
img, video, canvas, iframe, embed, object, picture, svg {
    max-width: 100%;
}
img, video {
    height: auto;
}
iframe { border: 0; }

/* AdSense / display ad slots: never push the viewport */
ins.adsbygoogle,
.adsbygoogle,
.ad-section,
.ad-slot {
    max-width: 100% !important;
    overflow: hidden;
}

/* ── 4. Form controls ────────────────────────────────────────────────────── */
/* Width safety is global; tap-target & font-size rules are mobile-only
   (see ── 7) so we don't disturb compact desktop UI such as toolbar/icon
   buttons or inline form layouts. */
input, select, textarea, button {
    max-width: 100%;
}
/* Drag-drop / file upload boxes commonly overflow on mobile */
.upload-box, .file-upload, .dropzone, .drop-area, .file-drop, .upload-area {
    max-width: 100%;
    word-wrap: break-word;
}

/* ── 5. Tables — wrap in horizontal scroller if not already wrapped ──────── */
table { max-width: 100%; }
.table-responsive,
.responsive-table,
.aix-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
/* Bare <table> tags that aren't already inside a scroll wrapper get their
   own horizontal scroll on small screens. Scoped to mobile only so desktop
   table layouts remain untouched. */
@media (max-width: 768px) {
    table:not(.no-mobile-scroll) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 6. Long text / code break ───────────────────────────────────────────── */
pre, code, kbd, samp {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── 7. Mobile rules (≤768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {

    body {
        font-size: 16px;
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
    }

    /* Form controls: 16px font-size prevents iOS auto-zoom on focus.
       Scoped to mobile so desktop compact controls keep their original size. */
    input, select, textarea, button {
        font-size: 16px;
    }

    /* Tap targets: 44px is the WCAG/Apple HIG minimum. Excluded:
       - .btn-icon / .icon-btn / .btn-sm / nav links: stay compact for toolbars
       - .seo-tool-link / pagination etc. that already have their own sizing */
    button:not(.btn-sm):not(.btn-icon):not(.icon-btn),
    .btn:not(.btn-sm):not(.btn-icon):not(.icon-btn),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.btn:not(.btn-sm):not(.btn-icon):not(.icon-btn) {
        min-height: 44px;
        line-height: 1.2;
    }

    /* Generic containers and tool wrappers — never wider than viewport */
    .container,
    .container-fluid,
    .page-wrapper,
    .content-wrapper,
    .tool-container,
    .tool-box,
    .tool-wrapper,
    .calculator-container,
    .calc-wrapper,
    .calc-container,
    main,
    section {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Generic grid/flex layouts — stack vertically on small screens.
       Scoped to common semantic class names; intentionally does NOT touch
       Bootstrap's .row class to avoid breaking col-* grid lines. */
    .grid,
    .cards-grid,
    .tool-grid,
    .related-tools-grid,
    .split-layout,
    .two-column,
    .three-column,
    .columns,
    .tool-layout,
    .result-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Card-like children fill the row when stacked */
    .card,
    .tool-card,
    .calculator-card,
    .result-card,
    .upload-box {
        width: 100%;
        max-width: 100%;
    }

    /* Headings: fluid scale prevents oversize titles overflowing on phones */
    h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; }
    h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
    h3 { font-size: clamp(18px, 5vw, 24px); line-height: 1.25; }

    /* Header / nav / menu: wrap rather than overflow */
    .site-header,
    .nav,
    .navbar,
    .menu,
    .top-bar,
    .header-wrapper {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Footer: prevent fixed-width column overflow */
    footer, .footer, .site-footer {
        max-width: 100%;
        word-wrap: break-word;
    }

    /* Tool result panels often have inline-block or fixed widths */
    .result-panel, .tool-output, .preview-pane, .output-panel {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Embedded calculators / iframes shouldn't be wider than the screen */
    .calculator-iframe, .tool-iframe, .embed-frame {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── 8. Smaller phones (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .container,
    .container-fluid,
    main,
    section {
        padding-left: 12px;
        padding-right: 12px;
    }
}