/*
 * foundation.css — baseline mobile behaviour for client-facing pages.
 *
 * Loaded last in customer/layouts/header.blade.php, after style.css and the Bootstrap CDN
 * files, so it wins on equal specificity. That layout backs the whole logged-in client
 * experience (~35 views) plus the auth pages.
 *
 * NOT loaded by customer/layouts/main_header.blade.php. Those pages (index, program-pricing,
 * compare-program) pull in Bootstrap 3.4.1 and their own sales/responsive.css *after* the
 * layout's head, so this file would not reliably win there — and program-pricing was rebuilt
 * with its own responsive layout in July 2026. Pre-purchase surfaces are out of scope for the
 * client reskin.
 *
 * Kept deliberately separate from style.css (10,341 lines, desktop-first, ~90 overlapping
 * max-width queries). If any of this regresses, remove the one <link> tag and the entire
 * slice is gone — no unpicking rules out of the big file.
 *
 * Added 2026-08-01. See docs/dev-journal.md.
 */


/* ---------------------------------------------------------------------------
 * 1. Horizontal overflow
 *
 * `clip`, not `hidden`, on purpose. `overflow-x: hidden` makes the element a
 * scroll container, which breaks `position: sticky` on its descendants — and
 * `.header-bg` (style.css:2131), the header on every client page, is sticky.
 * `clip` suppresses the sideways scroll without creating a scrollport.
 *
 * Browsers without `overflow-x: clip` (Safari < 16) behave exactly as they do
 * today, so this cannot regress them.
 * ------------------------------------------------------------------------ */

body {
    overflow-x: clip;
}

/*
 * `.header-bg` carries `min-width: 375px`, so on a 320px viewport the header
 * alone forces the page wider than the screen. Release it below its own
 * threshold — this is the actual overflow source on small phones, rather than
 * something the clip above is merely hiding.
 */
@media (max-width: 374.98px) {
    .header-bg {
        min-width: 0;
    }
}


/* ---------------------------------------------------------------------------
 * 2. iOS focus zoom
 *
 * Safari zooms the viewport in when a focused text field is under 16px, and
 * does not zoom back out afterwards. Bootstrap's `.form-control` is already
 * 1rem; unclassed inputs inherit the UA default (~13px) and trigger it.
 *
 * Text entry only. Buttons, checkboxes and radios are excluded so that existing
 * button sizing is untouched.
 *
 * `!important` is deliberate, and was added 2026-08-03 after this rule silently
 * lost the cascade in production. The bare `select` and `textarea` selectors
 * here are specificity (0,0,1), so *any* class-based rule beats them, and
 * style.css has several at 14px:
 *
 *     .month select, .year select   (0,1,1)  style.css:5308,5320  card expiry
 *     .select-list                  (0,1,0)  style.css:8274       profile title
 *     .m-send                       (0,1,0)  style.css:442        chat compose
 *
 * Loading later in the document does not help against higher specificity. This
 * is a floor that has to win: it is scoped to one property, one breakpoint, and
 * text-entry controls only. Raising each offending rule to 16px individually
 * would work today and silently rot the moment someone adds a fourth.
 *
 * Note this cannot reach the chat compose box — that lives in an <iframe> to
 * /chatify, which loads css/chatify/style.css and not this file. Fixed at
 * source there.
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {

    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ---------------------------------------------------------------------------
 * 3. Tap targets
 *
 * 44px is the Apple HIG minimum. Applied to form-control buttons only: those
 * centre their label vertically by default, so a min-height cannot strand text
 * at the top of the box.
 *
 * Deliberately NOT applied to `a` or `a.btn`. Both are inline-block here, so a
 * min-height would top-align their text, and a bare `a` rule would swallow
 * inline links inside paragraphs. Anchor tap targets are handled per page
 * during the redesign, where the result can actually be seen.
 * ------------------------------------------------------------------------ */

@media (max-width: 767.98px) {

    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 44px;
    }

    /*
     * Modal close controls. `.w3-button` here is a <span>, so it needs the box
     * given to it explicitly rather than relying on min-height alone. Affects
     * the six w3-modals in customer/dashboard.blade.php.
     */
    .w3-modal .w3-button.w3-display-topright {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}