/* Accessibility utilities.
   The toggle sits on --darkblue at 96% opacity: white on it is 12.4:1, and the
   2px white border keeps the control itself distinguishable from the video
   behind it (1.4.11). 44x44 minimum for 2.5.8. */

.genex-motion-host {
  position: relative;
}

.genex-motion-toggle {
  position: absolute;
  right: 1.25rem;
  /* Clear of the wave divider at the bottom of every hero. */
  bottom: 4.5rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  border: 2px solid #fff;
  border-radius: 22px;
  /* Opaque, so the contrast of the label is a fixed 12.96:1 rather than
     something that depends on the frame of video behind it. */
  background-color: #003740;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.genex-motion-toggle:hover {
  background-color: #003740;
}

.genex-motion-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.genex-motion-toggle__icon {
  font-size: 0.75rem;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .genex-motion-toggle {
    right: 0.75rem;
    bottom: 3.25rem;
    padding: 0.5rem 0.75rem;
  }

  .genex-motion-toggle__text {
    /* Icon plus aria-label still names the control on small screens. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 2.5.8 Target Size (Minimum).
   The header menu links render 27px tall, of which adjacent elements obscure
   about 5px, leaving 22px — just under the 24px floor. Three more pixels top
   and bottom clears it with room to spare.
   GenerateBlocks emits its own per-menu rule at the same specificity, so this
   needs the extra class to win regardless of stylesheet order. */
.gb-navigation .gb-menu .gb-menu-link,
.gb-navigation .gb-menu > li > .gb-menu-link {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Ktunaxa spans are language markup only — they must not restyle the copy. */
span[lang="kut"] {
  font: inherit;
  color: inherit;
}

/* Wide data tables scroll inside their own figure instead of widening the
   page. a11y.js marks the figure focusable when it actually scrolls, so the
   region is reachable by keyboard (2.1.1). */
.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}

.wp-block-table:focus-visible {
  outline: 3px solid var(--contrast);
  outline-offset: 2px;
}

/* 2.4.7 Focus Visible — a baseline ring for anything the theme or a plugin
   forgot. Deliberately a bare :focus-visible (specificity 0,1,0) so the
   purpose-built rings elsewhere in the theme still win. The white halo keeps
   the ring legible on the dark sections as well as the light ones. */
:focus-visible {
  outline: 3px solid var(--contrast, #016778);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85);
}

/* 2.4.11 Focus Not Obscured — the notices bar is fixed to the bottom and the
   navigation sticks to the top, so scrolling a focused control into view can
   park it underneath one of them. Reserve room on both edges. */
:focus-visible,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  scroll-margin-top: 140px;
  scroll-margin-bottom: 110px;
}