/* --------------------------------------------------------------------------
   Shared foundation. Every rule here is a constraint the previous four builds
   proved necessary, not a style choice -- the look of each site comes from its
   own tokens file, loaded after this one.
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
/* a 1px border on a max-width:100% image overflows a 320px viewport by 2px --
   the only thing that overflowed the whole of the previous job */
img { box-sizing: border-box; }
a { color: inherit; }
table { max-width: 100%; }

/* Skip link: visually hidden but keyboard-reachable. The 1x1+clip pattern is
   deliberate -- the mobile audit skips clipped elements rather than counting
   this as a failed tap target, which is what it is not. */
.skip {
    /* left:0, not -1px. The clip below is what hides this link; the negative
       offset was belt-and-braces and it put one pixel outside the viewport,
       which the mobile audit correctly reported as horizontal overflow on a
       page whose layout did not absorb it. The hiding does not need it. */
    position: absolute; left: 0; top: 0; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    background: #fff; color: #000; z-index: 999;
    /* NO padding in the hidden state. With box-sizing:border-box a 1px box
       with 10px/16px padding still lays out at 32x20 -- the link was not
       hidden at all, and the mobile audit reported it as a failed tap target
       on every page. Padding belongs to the focused state, which is the only
       state anyone sees. */
    padding: 0;
}
.skip:focus {
    width: auto; height: auto; clip: auto; clip-path: none;
    padding: 10px 16px; left: 0;
}

/* missing-image fallback, wired in js/site.js */
img.img-missing {
    background: repeating-linear-gradient(135deg,#efece6 0 10px,#e6e2d8 10px 20px);
    min-height: 40px; object-fit: contain;
}

@media (max-width: 900px) {
    /* iOS Safari zooms the whole page when a focused control is under 16px.
       Name the CLASSES the stylesheet uses, not just the element types -- a
       bare `input` selector loses on specificity to any `.field` rule and the
       fix ships inert. That happened on the previous job. */
    input, select, textarea, button,
    .field, .field2, input[type="text"], input[type="email"], input[type="tel"] {
        font-size: 16px;
    }
    input, select, textarea, button { min-height: 44px; }
    /* every tap target reaches 44x44 */
    nav a, .nav a, footer a, .btn { min-height: 44px; display: inline-flex;
        align-items: center; }
    /* a.tap is stamped at build time by mark_tap_targets(): a link that is the
       whole of its <p> or <li>. min-WIDTH too -- an inline-flex box shrinks to
       its text, and "Bonjing" is 60px wide however tall it is. */
    a.tap { min-height: 44px; min-width: 44px; display: inline-flex;
        align-items: center; }
    .also li { margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* The Bootstrap theme ships untouched above this file. Everything here is
   additive: the plan's H2 blocks, and the tap-target sizes the audit measured
   at 320px. */
h1, h2, h3 { overflow-wrap: anywhere; }
.dbb-plan { padding: 18px 15px 8px; }
.dbb-plan h2 { margin-top: 24px; font-size: 1.25rem; }
.dbb-plan ul { list-style: none; padding-left: 0; margin: 0; }
.dbb-plan li { display: inline-block; margin: 0 14px 6px 0; }
.also ul { list-style: none; padding-left: 0; }
.also li { display: inline-block; margin: 0 14px 6px 0; }

@media (max-width: 991px) {
    /* The navbar is position:fixed and 127px tall at 320px; the first content
       container starts at 75px, so the menu prints over the top of the page
       heading on 33 pages. Measured in a browser -- nothing in the markup says
       so, and the theme's own spacer was sized for the desktop navbar. */
    /* 145px, not 132: one page's navbar wraps to a third line because its
       title is longer, and 132 left it overlapping the content by 13px.
       Sized from the tallest navbar on the site, measured, not from the
       common case. */
    body { padding-top: 145px; }
    nav.navbar { max-height: 100vh; overflow-y: auto; }

    .dbb-plan a, .also a, a.tap, .pagination a, .page-link,
    footer a, .footer a, .card a {
        display: inline-flex; align-items: center;
        min-height: 44px; min-width: 44px;
    }
    .navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; }
    /* /directory.php's jump-to-towns link, 123x24. Found only once the mobile
       audit started opening .php pages at all -- it had been globbing *.html,
       so the three .php addresses, all of them in the sitemap, were never
       loaded in a browser on any run. */
    .towns-link { display: inline-flex; align-items: center; min-height: 44px; }
    /* the toggler and the search button come out at 41x44 -- three pixels
       short on the axis nobody checks */
    .navbar-toggler, .btn, button { min-width: 44px; min-height: 44px; }
    /* the listing address line is set at 11.2px, under the 12px a phone needs */
    .card-address, .card-text small, small { font-size: 12px !important; }
    /* the sitemap page is a list of plain links at 17px tall */
    /* the sitemap page is a bare table of links, 17px tall, in #cont --
       no .container, no <main>, so a selector written for the rest of the
       site missed every one of them */
    #cont a, .sitemap a, main a, .container ul li > a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    #cont td, #cont th { padding: 2px 6px; }
}