/* Accessibility patches over the captured WordPress theme (WCAG 2.2 AA).
   Injected on every page by tools/build-site.mjs. Each rule is written to be
   invisible to a mouse user who has not asked for reduced motion: the site
   should look exactly as WordPress rendered it unless a visitor needs these. */

/* 2.4.7 / 2.4.11 Focus visible. The theme sets outline:none everywhere. A dark
   ring with a white halo reads on both the cream pages and the photo heroes.
   :focus-visible only, so mouse clicks show nothing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #1a1a1a !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px #fff !important;
}

/* 2.5.8 Target size: the footer Instagram / Facebook / LinkedIn links are 19px
   tall and stacked 21px apart on desktop. Make each a 24px-tall block line:
   the desktop footer grows ~9px; phones (37px lines) are unchanged. Verified
   with axe target-size against the preview: 3 violations -> 0. (Padding with a
   negative margin made the hit areas overlap, which also fails.) */
footer a[href*="instagram.com"],
footer a[href*="facebook.com"],
footer a[href*="linkedin.com"] {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* 1.4.1 Links inside running text must not rely on colour alone (contact-form
   notice, accessibility statement). */
.idriss-notice a,
.idriss-statement a {
  text-decoration: underline;
}

/* 2.2.2 Pause, stop, hide: the press-logo marquees (.mover-1/.mover-2 on the
   home page, PowerPack logo tickers on /team/). a11y.js adds a pause button
   that toggles .idriss-paused on the marquee's container. */
.idriss-paused .mover-1,
.idriss-paused .mover-2,
.idriss-paused.pp-logos-ticker,
.idriss-paused.pp-logos-ticker *,
.idriss-paused .pp-logos-ticker,
.idriss-paused .pp-logos-ticker * {
  animation-play-state: paused !important;
}
/* Placement is !important: once the page scrolls, a theme rule makes buttons
   position:relative, which drops this under the next Beaver Builder row (which
   overlaps the marquee) and leaves it unclickable. */
.idriss-motion-toggle {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 1000 !important;
  padding: 4px 10px;
  min-height: 24px;
  font: 12px/1.4 inherit;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(26, 26, 26, 0.35);
  border-radius: 2px;
  cursor: pointer;
}

/* 2.3.3 Animation from interactions: honour the OS "reduce motion" setting.
   Marquees stop, Beaver Builder entrance fades are shown immediately, and
   a11y.js keeps Lenis smooth-scroll from starting. */
@media (prefers-reduced-motion: reduce) {
  .mover-1,
  .mover-2,
  .pp-logos-ticker,
  .pp-logos-ticker * {
    animation-play-state: paused !important;
  }
  .fl-animation {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* Footer newsletter form: on desktop its Subscribe button overhangs its row, and
   the next footer row (address/phone, later in the DOM) paints over the bottom
   half of the button, so clicks there hit the footer text and do nothing.
   Lift the form above the following row. Found by the 2026-10-10 form QA;
   inherited from the WordPress layout. */
form.mc4wp-form {
  position: relative;
  z-index: 2;
}

/* 2.4.11: hide the fixed slide-in sign-up box while the footer sign-up form is
   on screen (a11y.js sets the class), so it never covers that form's button. */
.idriss-footer-form-visible .pp-subscribe-slidein {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Visually hidden, still read by screen readers. */
.idriss-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}