/* ============================================================
   MOBILE-FIRST FOUNDATIONS
   ------------------------------------------------------------
   Loaded last on every page. This handles the cross-cutting
   touch/viewport concerns once, so individual pages don't each
   re-solve them (which is how mobile-fixes.css grew to fourteen
   competing media queries).

   Rule of thumb when adding here: only things that are true for
   every page. Page-specific layout stays with its page.
   ============================================================ */


/* ---- Text scaling ----------------------------------------
   Stop mobile browsers inflating body text in landscape. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ---- Form controls --------------------------------------
   iOS Safari zooms the entire page when a focused input has a
   font-size below 16px, which then leaves the layout scrolled
   sideways. 16px on small screens avoids it; larger screens
   keep whatever the page designed. */
@media (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ---- Touch targets --------------------------------------
   Dropdown nav links were rendering ~17px tall, which is well
   under a comfortable thumb target. */
@media (max-width: 768px) {
    .menu a,
    .menu-links a,
    .dropdown-menu a {
        display: inline-block;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }
}


/* ---- Sticky hover ---------------------------------------
   On a touch screen :hover latches after a tap and stays until
   you tap somewhere else, so hover-driven transforms leave
   elements visibly stuck mid-effect. Where the device has no
   hover-capable pointer, neutralise them. */
@media (hover: none) {
    .pane:hover .pane-content,
    .product-item:hover,
    .page-logo:hover,
    .logo-nav:hover,
    .view-all-button:hover {
        transform: none !important;
    }

    .pane:hover {
        background-color: transparent !important;
    }
}


/* ---- Tap feedback ---------------------------------------
   The default grey flash clashes with the black/white palette;
   the pages already style :active states where they want them. */
a,
button,
.pane,
.product-item {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ---- Media safety ---------------------------------------
   A single oversized image is the usual cause of a page that
   scrolls sideways on a phone. */
img,
svg,
video {
    max-width: 100%;
}