/*
 * [MOBILE_POLISH] Loaded last from app.css so it can correct cascade issues
 * without editing the large rebuild.css/storefront.css files.
 *
 * Each block below fixes a problem measured on a real 390px viewport:
 *   1. iOS zooms the whole page when a focused input's font-size is under 16px.
 *      Bootstrap's .form-control here is 0.9375rem (15px), so every form on the
 *      site triggered it.
 *   2. 24 interactive elements on the home page rendered ~22px tall. Touch
 *      guidance (WCAG 2.5.5, Apple HIG) wants 44px.
 *   3. The decorative .name-stack extended ~117px past the viewport edge.
 *
 * Selectors carry the body.bg-light prefix to match the specificity used by
 * rebuild.css; being later in the import order settles ties.
 */

/* ── 1. Never let a focused field zoom the viewport on iOS ─────────────────── */
@media (max-width: 767.98px) {

    body.bg-light .form-control,
    body.bg-light input[type="text"],
    body.bg-light input[type="search"],
    body.bg-light input[type="email"],
    body.bg-light input[type="password"],
    body.bg-light input[type="number"],
    body.bg-light input[type="url"],
    body.bg-light select,
    body.bg-light textarea {
        /* 16px is the threshold; max() keeps any larger design size intact. */
        font-size: max(16px, 1rem);
    }

    /* Comfortable default height for stacked form controls on touch. */
    body.bg-light .form-control,
    body.bg-light select {
        min-height: 48px;
    }
}

/* ── 2. Touch-sized tap targets ────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* Text links acting as primary calls to action. Inline-flex keeps the
       underline tight to the text while the box grows to a tappable height. */
    body.bg-light .domain-search-links a,
    body.bg-light .home-product a,
    body.bg-light .home-text-link,
    body.bg-light .shell-footer a,
    body.bg-light .shell-nav .nav-link,
    body.bg-light .shell-nav .nav-sign-in,
    body.bg-light .shell-nav .dropdown-item {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The hero quick-links stack vertically on mobile: full-width rows are
       easier to hit than centred text of varying length. */
    body.bg-light .domain-search-links a {
        justify-content: center;
        width: 100%;
        padding: 0 .75rem;
    }

    /* Icon-only and small controls still need a 44px hit area even when the
       glyph itself is small. */
    body.bg-light .navbar-toggler,
    body.bg-light .btn-icon,
    body.bg-light button.close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Buttons that sit side by side become full width so neither is cramped. */
    body.bg-light .home-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }
}

/*
 * Deliberately NOT enlarged: rows in the dense result lists (dropped domains,
 * daily registrations, trends) measure 32-44px. That already satisfies WCAG
 * 2.5.8 AA (24px), and forcing them to 44px would lengthen a 600-row list by
 * roughly a third for no accessibility gain. Only genuinely small controls
 * (under 24px) are corrected above.
 */

/* ── 3. Decorative overflow ────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* Purely ornamental (aria-hidden) and previously rendered at .35 opacity
       while hanging off-canvas, which reads as a rendering fault on a phone. */
    body.bg-light .name-stack {
        display: none;
    }
}

/* ── 4. General touch and small-screen polish ──────────────────────────────── */
@media (max-width: 767.98px) {

    /* Long domain names and CSV headers should wrap rather than force the
       page to scroll sideways. */
    body.bg-light .domain-name,
    body.bg-light .recent-domain__name,
    body.bg-light table td,
    body.bg-light table th {
        overflow-wrap: anywhere;
    }

    /* Wide data tables scroll inside their own container instead of the body. */
    body.bg-light .table-responsive,
    body.bg-light .table-scroll {
        -webkit-overflow-scrolling: touch;
    }

    /* Respect notched displays in landscape. */
    body.bg-light .shell-nav .container,
    body.bg-light .registrar-home .container,
    body.bg-light .shell-footer .container {
        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
    }
}

/* ── 5. Accessibility ─────────────────────────────────────────────────────── */

/* Keyboard focus must stay visible even where a component resets outlines. */
body.bg-light a:focus-visible,
body.bg-light button:focus-visible,
body.bg-light [role="button"]:focus-visible,
body.bg-light input:focus-visible,
body.bg-light select:focus-visible,
body.bg-light textarea:focus-visible {
    outline: 3px solid var(--store-teal, #09757a);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    body.bg-light *,
    body.bg-light *::before,
    body.bg-light *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}