/* ---------------------------------------------------------------------------
   Written by the rebuild. Everything else is the site's own stylesheet.
--------------------------------------------------------------------------- */
.skip { position: absolute; left: 0; top: -60px; z-index: 100;
        background: #e2231a; color: #fff; padding: 10px 16px; }
.skip:focus { top: 0; }

/* The skip link is the one element that needs a 44px box at every width: it is
   absolutely positioned off-screen until focused, so growing it moves nothing.
   Every OTHER tap-target rule lives inside the 900px media query below -- see
   the note there for what happened when they did not. */
a.skip { display: inline-flex; align-items: center; min-height: 44px; }
/* A heading that exists for the document outline, not for the eye. */
.skip-h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
          overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ims-plan { padding: 2.5em 0; background: #fff; }
.ims-plan .container { max-width: 1170px; margin: 0 auto; padding: 0 16px; }
.ims-sec { margin: 0 0 2.2em; }
.ims-sec h2 { color: #e2231a; font-weight: 700; margin-bottom: .6em; }
.ims-sec h3 { margin: 1em 0 .3em; font-size: 1.05em; }
.ims-sec ul { padding-left: 1.2em; }
.ims-sec li { margin: .3em 0; }
.ims-stores { list-style: none; padding-left: 0; }
.ims-stores li { margin: .6em 0; }
.ims-hours { border-collapse: collapse; margin: 0 0 .8em; }
.ims-hours th, .ims-hours td { text-align: left; padding: 3px 18px 3px 0;
                               font-weight: 400; }
.also ul { list-style: none; padding-left: 0; }
.also li { display: inline-block; margin: 0 1.2em .4em 0; }
.ims-stores a { overflow-wrap: anywhere; }
/* `a[href^="mailto:"]` was here too, unscoped. It exists so a 37-character
   branch address does not overflow a 320px phone, and it applied at 1280 as
   well: `brandon@innovativemedicalsupplies.com` broke mid-word where the
   archive keeps it whole, and the footer grew a line. A rule written for a
   phone belongs in the phone's media query. `.ims-stores` is this build's own
   list and has no archive counterpart, so it can stay. */

@media (max-width: 900px) {
    body { overflow-x: hidden; }

    /* The sixteen Wix pages carry a horizontal menu that JavaScript used to
       collapse into a hamburger. With the script gone the <ul> lays out at its
       full 1,532px and pushes every one of those pages 1,019px wider than a
       320px phone -- the single largest mobile defect in this build. Let it
       wrap, and give its scroll arrows a real target size. */
    ul[class*="StylableHorizontalMenu"] {
        display: flex !important; flex-wrap: wrap !important;
        width: auto !important; max-width: 100% !important;
        justify-content: center;
    }
    ul[class*="StylableHorizontalMenu"] > li {
        position: static !important; width: auto !important;
    }
    [class*="ScrollButton"], [data-testid*="scroll"] { display: none !important; }
    [class*="StylableHorizontalMenu"] button { min-width: 44px; min-height: 44px; }
    img { max-width: 100%; height: auto; }
    .ims-plan .container { padding: 0 14px; }
    body, p, li, td, th { font-size: 15px; }
    small { font-size: 12px; }

    /* --- tap targets and form fields, measured -------------------------------
       Everything the mobile audit found under 44px at 320 and 390 CSS px, plus
       the contact form's inputs, which were under 16px and therefore zoom the
       page on iOS the moment they are focused.

       These were written ABOVE this media query, so they applied at every
       width. The desktop footer grew from the archive's 971px to 1169px,
       because `204-636-6633` is an inline <a> 17px tall in the archive and
       inline-flex made it 44. Rule 6 is that the rebuilt page renders like the
       archived page; a 198px difference at the bottom of every page is a
       design change, not an accessibility improvement. */
    input, select, textarea, button,
    input[type="text"], input[type="email"], input[type="tel"], input[type="date"] {
        font-size: 16px !important; min-height: 44px;
    }
    a.tap, a.skipNavigationLink, a.searchicon,
    nav a, footer a, .ims-sec a, .ims-stores a, .wixui-rich-text__text a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    a.searchicon, .social a, .socialIcons a {
        min-width: 44px; justify-content: center;
    }
    a, a[href^="mailto:"] { overflow-wrap: anywhere; }
}