/* ---------------------------------------------------------------------------
   Accessibility / SEO fixes, 2026-09-08.

   Everything here exists to keep the rendering byte-identical while the markup
   underneath it gets more correct. Nothing in this file is a design change: if
   a rule alters what the page looks like, it is a bug in this file.
   --------------------------------------------------------------------------- */

/* --- headings demoted, appearance kept -------------------------------------
   The page carried nine <h1> elements (five slider captions, four holding
   nothing but a Font Awesome glyph). Eight of them are now <h2>/<div>; this
   restores the h1 metrics exactly, so nothing moves.

   h1 computes to: margin 10px 0 / line-height 40px / font-size 38.5px /
   Lato 500, from skeuobootstrap.css then skeuo.css. The <h2> cases already
   inherit all of that bar the font-size; the <div> cases inherit none of it. */
.as-h1 {
    margin: 10px 0;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 38.5px;
    line-height: 40px;
    color: inherit;
    text-rendering: optimizeLegibility;
}

/* --- skip link -------------------------------------------------------------
   76 images sit between the top of the document and the first paragraph of
   copy, so keyboard and screen-reader users had no way past the masthead.
   Off-screen until focused, so it is invisible to everyone else. */
.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    left: 10px;
    top: 10px;
        z-index: 99999999;
    width: auto;
    height: auto;
    padding: 10px 16px;
    background: #fff;
    color: #111;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* --- anchor landings clear the sticky header -------------------------------
   `header` is min-height 70px and becomes position:fixed once you scroll down,
   so a hash landing (/#parts) used to put the section heading underneath it.
   The nav's own smooth-scroll handler is JS and measures the header directly
   (see init.js); this covers the cases the browser scrolls itself. Below 768px
   the header is position:relative, so no offset is wanted there. */
@media (min-width: 768px) {
    section[id] {
        scroll-margin-top: 70px;
    }
}

/* --- fax numbers are not dialable -----------------------------------------
   The factory fax was a tel: link. It is a <span> now and this keeps the
   colour the footer gave it, so the block looks exactly as it did. */
#jm-footer-mod .static-tel,
#jm-footer .static-tel,
.jm-footer .static-tel {
    color: #fff;
}

/* --- A-6: visible keyboard focus ------------------------------------------
   The theme kills `outline` in several rules and puts nothing back, so
   keyboard users have no idea where they are. `:focus-visible` only paints for
   keyboard focus, so mouse users see exactly what they saw before. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #137FC8;
    outline-offset: 2px;
}

/* Belt and braces for the rules that force `outline: none` with a class. */
header nav a:focus-visible,
.humbler-grid a:focus-visible,
.flexslider nav a:focus-visible {
    outline: 2px solid #137FC8 !important;
    outline-offset: 2px;
}

/* --- FlexSlider's injected arrows reference a background that does not exist -
   The masthead slider does not pass `directionNav`, so FlexSlider defaults it
   to true and injects `<ul class="flex-direction-nav">`. flexslider.css points
   those anchors at images/bg_direction_nav.png, which is in neither repo and
   404s on production too — so the request has always failed and the arrows have
   always been invisible (the visible prev/next are the theme's own
   `nav.clearfix .box a`, drawn with Font Awesome). Blanking the image drops one
   failed request per page load and cannot change what renders. */
.flex-direction-nav a {
    background-image: none !important;
}