/* Accessibility: restore a visible keyboard focus indicator.
 *
 * The captured theme suppresses the focus ring in several places with
 * `outline: none` (the header search input and button, the quick-search input,
 * and the language `<select>`). With the ring gone a keyboard user cannot tell
 * which control has focus, which is a WCAG 2.1 AA 2.4.7 (Focus Visible)
 * failure. Measured before this file: tabbing through the product header
 * reported `outlineStyle: none` on the search field.
 *
 * `:focus-visible` is deliberate: the browser only matches it for keyboard
 * (and other non-pointer) interaction, so mouse and touch users see exactly
 * the captured appearance. The colour is the site's own call-to-action pink
 * (#E8004C, already used for `.spec-active`), not a new brand colour, and it
 * clears the 3:1 non-text contrast minimum on both the dark header
 * (#2d2a26, ~3.9:1) and white content areas (~4.9:1).
 *
 * Served as a separate cacheable stylesheet and linked from every page, so the
 * captured theme CSS stays byte-for-byte as mirrored.
 */
:focus-visible {
  outline: 2px solid #E8004C;
  outline-offset: 2px;
}

/* Re-assert the ring where the theme used `outline: none` with higher
 * specificity than the generic rule above. */
#header .searchinput input:focus-visible,
#header .searchinput button:focus-visible,
.quicksearch:focus-visible,
.rightsidemneu .select select:focus-visible,
.select select:focus-visible {
  outline: 2px solid #E8004C;
  outline-offset: 2px;
}

/* In-text links must be distinguishable from surrounding text without relying
 * on colour alone (WCAG 2.1 AA 1.4.1). The theme sets `text-decoration: none`
 * on every `a`, and the link blue (#006499, contrast 2.23:1 against the body
 * text) is below the 3:1 that colour-only distinction would need (axe
 * `link-in-text-block`). Underlining only links inside prose restores the
 * non-colour cue and leaves navigation, buttons and tiles exactly as captured.
 *
 * `.seo-doc-note` / `.seo-link-note` are the serve-time notes the site itself
 * injects beside a product's specification block; they are prose containing a
 * link, so they get the same treatment. */
.category-intro p a,
.category-intro li a,
main p a[href^="/guides/"],
.seo-doc-note a,
.seo-link-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The megamenu's group headings ("By category", "By industry", …) were
   <h5>s, which put twelve headings ahead of every page's <h1>. They are
   <p class="menu-heading"> now, styled exactly as #header .megamenu h5 was. */
#header .megamenu p.menu-heading {
  font: 600 18px/26px 'Barlow Condensed';
  letter-spacing: 0.45px;
  color: #2d2a26;
  margin-bottom: 25px;
}