/*
 * Keyboard and screen-reader access. Not from WordPress: Tim approved these
 * improvements over live on 2026-10-15, on the condition that the desktop
 * look does not change. Loaded at every width from src/app/layout.tsx, after
 * the theme's stylesheets.
 *
 * Nothing here changes what a mouse or touch user sees: the ring is keyed to
 * :focus-visible (keyboard focus only), and the heading rules only restate
 * for a demoted heading what the theme gave it as an h1.
 */

/* A visible focus ring in the site's orange. The theme and Avada remove
   outlines in places (outline:0 on buttons, sliders, back-to-top); the
   browser's own 1px ring was all that was left elsewhere. The white halo
   keeps the ring visible on the orange buttons and the dark sections. */
:focus-visible {
  outline: 2px solid #ff7236 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #fff !important;
}

/* One H1 per page (src/structured/headings.ts): extra H1s are printed as H2
   with the class mm-h1. They keep the H1's look: */

/* the post title the theme prints above service, case study, e-book and job
   pages, hidden there by the child theme's h1-only rules; */
.single-case-study main article h2.mm-h1.fusion-post-title,
.single-ebook main article h2.mm-h1.fusion-post-title,
article.type-jobs h2.mm-h1.fusion-post-title,
.single-services main article h2.mm-h1.fusion-post-title {
  display: none;
}

/* section titles (Avada title elements) and headings in text. Avada sizes
   h2s through #wrapper/#main rules, so these match their weight. */
#wrapper #main .post-content h2.mm-h1,
#wrapper #main .post-content .fusion-title h2.mm-h1,
#wrapper .fusion-title h2.mm-h1,
.post-content h2.mm-h1 {
  font-size: var(--h1_typography-font-size);
  line-height: var(--h1_typography-line-height);
  letter-spacing: var(--h1_typography-letter-spacing);
  font-family: var(--h1_typography-font-family);
  font-weight: var(--h1_typography-font-weight);
  color: var(--h1_typography-color);
  /* h1 { margin-top } from Avada; the bottom margin comes from rules both share */
  margin-top: var(--h1_typography-margin-top);
}
/* The child theme's own h1 sizes: blog posts, and on phones all content. */
.single-post main h2.mm-h1 {
  font-size: 35px !important;
}
@media (max-width: 767px) {
  #main .post-content h2.mm-h1 {
    font-size: 35px !important;
  }
  .single-post #main h2.mm-h1 {
    font-size: 25px !important;
  }
}
@media (max-width: 580px) {
  .single-services #main h2.mm-h1 {
    font-size: 28px !important;
  }
}