/* ===========================================================================
 * SurgeU — WCAG 2.2 AA remediation, CSS layer
 * ===========================================================================
 *
 * Companion to surgeu-a11y-structure.js. Colour contrast lives in a separate
 * plugin (surgeu-a11y-contrast) so the two concerns stay reviewable apart.
 *
 * Adapted from lifesurge-a11y-structure.css sections 1–4. Selectors are the
 * ones present in SurgeU markup (checked on Our Team, Journey Map, Homepage,
 * Trade Accelerator Registration and Replay); Life Surge selectors with no
 * SurgeU match were dropped.
 *
 * Every rule here is a real correction. Nothing is hidden, nothing is faked,
 * and no scanner-only selector is used.
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. TOUCH TARGET SIZE
 *    WCAG 2.5.8 Target Size (Minimum), Level AA — axe rule: target-size
 *
 *    The success criterion asks for 24x24 CSS pixels, OR enough spacing that
 *    a 24px circle centred on the target hits nothing else.
 *
 *    WHY THE BOX AND NOT A PSEUDO-ELEMENT
 *
 *    A ::after hit area helps a real user but does not change the element's
 *    own bounding box, and the criterion is written about the target. Growing
 *    the box is the honest fix.
 *
 *    The flex centring keeps each glyph optically where it was, so a small
 *    icon in a 24px box does not visually shift. Rows of icons and slider
 *    dots may get slightly wider — the visual change to check on review,
 *    especially at mobile widths.
 *
 *    Royal slider prev / next arrows are NOT listed: they already render as
 *    ~60px circles, and forcing flex layout on them collapsed their SVG
 *    icons.
 *
 *    SurgeU targets present:
 *      .elementor-icon-list-item > a   header / footer link lists
 *      .wpr-grid-pagination a, span    Royal post-grid page numbers
 *      .jkit-hamburger-menu / close    Jeg Kit mobile menu buttons
 *      .slick-dots li                  Royal slider dots
 *      .elementor-swiper-button        Elementor carousel prev / next
 * ------------------------------------------------------------------------- */

.elementor-icon-list-item > a,
.wpr-grid-pagination a,
.wpr-grid-pagination span,
.jkit-hamburger-menu,
.jkit-close-menu,
.slick-dots li,
.elementor-swiper-button {
  min-inline-size: 24px;
  min-block-size: 24px;
}

/* Only the icon-shaped controls get centring — applying it to text controls
 * like .elementor-icon-list-item would break left-aligned list text. */
.wpr-grid-pagination a,
.wpr-grid-pagination span,
.jkit-hamburger-menu,
.jkit-close-menu,
.slick-dots li,
.elementor-swiper-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ---------------------------------------------------------------------------
 * 2. VISIBLE FOCUS INDICATOR
 *    WCAG 2.4.7 Focus Visible, Level AA
 *
 *    Not in the automated findings, because axe cannot test it. Elementor
 *    themes routinely suppress outlines for aesthetics.
 *
 *    :focus-visible rather than :focus, so the ring appears for keyboard and
 *    assistive-tech users without putting a box around every mouse click.
 *
 *    Two-tone (dark ring, light halo) so it stays visible on both light and
 *    dark sections without needing to know the background. One of the two
 *    always clears 3:1 against SurgeU's backgrounds:
 *
 *      #10314d on white   13.39:1     white halo on #1d7bb9   4.58:1
 *      #10314d on #f5f5f5 12.28:1     white halo on #2185c7   4.00:1
 *                                     white halo on #004e84   8.67:1
 *                                     white halo on black    21.00:1
 * ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible {
  outline: 3px solid #10314d;
  outline-offset: 2px;
  /* The halo does the work where the outline sits against a dark background. */
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

/* Slightly rounded ring corners, but only where the control has no shape
 * of its own: :where() gives this rule no specificity, so a pill or round
 * button (e.g. Demio's REGISTER NOW) keeps its shape when focused instead
 * of turning square. */
:where(a, button, input, select, textarea, summary,
  [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"],
  [role="link"]):where(:focus-visible) {
  border-radius: 2px;
}

/* Never let a later stylesheet quietly remove focus entirely. This is the one
 * place !important is justified: `outline: none` with no replacement is always
 * a bug, and it is a common one. */
:focus-visible {
  outline-style: solid !important;
}


/* ---------------------------------------------------------------------------
 * 3. SKIP LINK
 *    WCAG 2.4.1 Bypass Blocks, Level A
 *
 *    hello-elementor already outputs `.skip-link.screen-reader-text` in
 *    header.php, and <main id="content"> exists on SurgeU pages, so the link
 *    works and is NOT re-added here. What themes routinely get wrong is making
 *    it visible once focused — a skip link that stays hidden when focused is a
 *    skip link no sighted keyboard user can confirm they have activated.
 * ------------------------------------------------------------------------- */

.skip-link:focus,
.skip-link:focus-visible {
  position: absolute !important;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 100000;
  inline-size: auto !important;
  block-size: auto !important;
  padding: 12px 20px;
  clip: auto !important;
  clip-path: none !important;
  background: #ffffff;
  color: #10314d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}


/* ---------------------------------------------------------------------------
 * 4. RESPECT REDUCED MOTION
 *    WCAG 2.3.3 Animation from Interactions (AAA), and 2.2.2 for anything
 *    that loops. Advisory at AA, but Elementor and Royal entrance animations
 *    are a genuine vestibular trigger and honouring the OS setting costs
 *    nothing. Content still appears; it just does not move in.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .elementor-invisible,
  .animated {
    animation: none !important;
    visibility: visible !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------------
 * 5. HEADER DROPDOWNS REACHABLE BY KEYBOARD
 *    WCAG 2.1.1 Keyboard (A)
 *
 *    The Jeg Kit header menu opens its desktop dropdowns ("Experiences",
 *    "Education") on mouse hover only. The sub-menu links exist in the DOM
 *    but stay hidden, so Tab skips them and NVDA cannot reach them.
 *
 *    :focus-within opens the dropdown while keyboard focus is anywhere in
 *    that menu item — on the parent link or any link inside — and it closes
 *    again once focus moves on. Every property Jeg Kit may use to hide the
 *    panel is reset, because its stylesheet is third-party and can change.
 *
 *    Desktop only: below the tablet breakpoint Jeg Kit uses its own
 *    tap-to-open mobile menu, which is left alone.
 *
 *    data-sua-submenu is state set by surgeu-a11y-structure.js, not a
 *    styling hook for a colour:
 *      "open"    Shift+Tab is moving backward into this dropdown. The panel
 *                must be visible BEFORE its last link is focused, because a
 *                hidden link cannot take focus.
 *      "closed"  The user pressed Escape (WCAG 1.4.13 — content shown on
 *                focus must be dismissible).
 * ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .jkit-nav-menu li.menu-item-has-children:focus-within > .sub-menu,
  .jkit-nav-menu li.menu-item-has-children[data-sua-submenu="open"] > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
    max-height: none !important;
    /* Jeg Kit animates the panel open. While it animates, its links still
     * count as hidden and cannot take focus, so Shift+Tab skipped them.
     * Keyboard-opened panels appear instantly; mouse hover keeps its
     * animation. */
    transition: none !important;
  }

  .jkit-nav-menu li.menu-item-has-children:focus-within > .sub-menu *,
  .jkit-nav-menu li.menu-item-has-children[data-sua-submenu="open"] > .sub-menu * {
    transition: none !important;
  }

  .jkit-nav-menu li.menu-item-has-children[data-sua-submenu="closed"] > .sub-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ---------------------------------------------------------------------------
 * 6. ROYAL GRID SLIDER ARROW ICONS — PROTECT AGAINST LEAKED SVG STYLES
 *    Visibility of the controls fixed by surgeu-a11y-structure.js
 *
 *    Royal's arrow icon is an Illustrator SVG: <polygon class="st0">.
 *    Any other Illustrator SVG placed inline on the page carries its own
 *    <style> block (.st0, .st1 … .st12), and styles inside an inline SVG
 *    apply to the whole document — even when that SVG is in a container
 *    hidden on every device. The homepage's old Google-reviews badge sets
 *    `.st0 { fill: none; }`, which made both arrow icons invisible.
 *
 *    `fill: inherit` makes the icon shape take the colour Royal sets on the
 *    arrow's <svg>. Selector specificity 0,1,2 beats any leaked `.stN` rule
 *    (0,1,0) without !important.
 *
 *    HOVER / FOCUS / PRESSED — WCAG 1.4.11 Non-text Contrast (AA)
 *    Royal's hover icon colour (~#4a45d2) on the #2185c7 circle is 1.71:1;
 *    an icon that identifies a control needs 3:1. On touch screens a tap
 *    leaves the arrow in :hover, so the icon stayed dark after pressing.
 *    The icon stays white in every state, on the same translucent dark
 *    disc as the other carousel controls (4.68:1 at worst, over white).
 *    !important because Royal writes the hover colour per widget
 *    (.elementor-element-{id} … :hover svg), which out-specifies a class.
 * ------------------------------------------------------------------------- */

.wpr-grid-slider-arrow svg path,
.wpr-grid-slider-arrow svg polygon,
.wpr-grid-slider-arrow svg rect,
.wpr-grid-slider-arrow svg circle {
  fill: inherit;
  stroke: inherit;
  opacity: 1;
  visibility: inherit;
  clip-path: none;
}

.wpr-grid-slider-arrow:hover svg,
.wpr-grid-slider-arrow:focus svg,
.wpr-grid-slider-arrow:active svg {
  fill: #ffffff !important;
}

/* Same look as the pause control (section 7) and the Flip Carousel arrows
   (section 9), so every carousel control on the site matches. !important
   because Royal writes size and colours per widget id. */
.wpr-grid-slider-arrow {
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  background: rgba(17, 24, 39, 0.6) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wpr-grid-slider-arrow:hover,
.wpr-grid-slider-arrow:active {
  background: rgba(17, 24, 39, 0.85) !important;
}

.wpr-grid-slider-arrow svg {
  inline-size: 12px !important;
  block-size: 12px !important;
  fill: #ffffff !important;
}


/* ---------------------------------------------------------------------------
 * 7. PAUSE / PLAY CONTROL FOR AUTOPLAYING CAROUSELS AND VIDEOS
 *    WCAG 2.2.2 Pause, Stop, Hide (A). Button inserted by
 *    surgeu-a11y-structure.js (fixAutoplayingMedia).
 *
 *    Adapted from Life Surge's .lsa-carousel-pause, with two changes:
 *      - a translucent dark disc (rgba(17,24,39,.6)) instead of a bare
 *        55%-opacity icon. Worst case is a white background, where the
 *        disc composites to #70747D: white icon on it and disc on white
 *        are both 4.68:1, so 1.4.11 Non-text Contrast holds on any image;
 *      - !important on the box properties, because Hello Elementor styles
 *        every <button> with a pink border, padding and hover fill.
 *    Focus uses the site-wide ring from section 2.
 * ------------------------------------------------------------------------- */

.sua-pause-toggle {
  position: absolute !important;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  inset-block-start: auto;
  inset-inline-start: auto;
  z-index: 20;
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  background: rgba(17, 24, 39, 0.6) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.sua-pause-toggle:hover {
  background: rgba(17, 24, 39, 0.85) !important;
}

.sua-pause-toggle-icon {
  display: block;
  box-sizing: content-box;
}

.sua-pause-toggle[data-state="playing"] .sua-pause-toggle-icon {
  inline-size: 3px;
  block-size: 10px;
  border-inline-start: 2px solid #ffffff;
  border-inline-end: 2px solid #ffffff;
}

.sua-pause-toggle[data-state="paused"] .sua-pause-toggle-icon {
  inline-size: 0;
  block-size: 0;
  margin-inline-start: 3px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #ffffff;
}


/* ---------------------------------------------------------------------------
 * 8. TRUSTINDEX SLIDER ARROWS VISIBLE ON KEYBOARD FOCUS
 *    WCAG 2.4.7 Focus Visible (AA). TrustIndex shows its prev/next arrows
 *    only on mouse hover, but they are already focusable buttons, so a
 *    keyboard user tabs onto an invisible control. Show them whenever
 *    focus is inside the widget.
 * ------------------------------------------------------------------------- */

.ti-widget:focus-within .ti-controls,
.ti-widget:focus-within .ti-next,
.ti-widget:focus-within .ti-prev {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ---------------------------------------------------------------------------
 * 9. ROYAL FLIP CAROUSEL — PREVIOUS / NEXT BUTTONS WITH NO ICON
 *    WCAG 2.5.8 Target Size (AA), 1.4.11 Non-text Contrast (AA).
 *    When the widget's Navigation icons are left empty, Royal renders a
 *    few-pixel empty button, seen only as a tiny square on focus. Draw a
 *    chevron in the same translucent disc as the pause control (section 7).
 *    Skipped automatically once an icon is set in Elementor.
 *
 *    The widget's Navigation setting is off at the Desktop breakpoint
 *    (display:none !important, per widget id). That leaves keyboard users
 *    no way to move the carousel (2.1.1), so the buttons are shown at every
 *    width. The display rule is written to out-specify Elementor's
 *    per-widget selector (0,4,0) without naming the widget id.
 *    Names come from surgeu-a11y-structure.js (fixFlipCarouselButtonNames).
 * ------------------------------------------------------------------------- */

.elementor-widget-wpr-flip-carousel .flipster__button:not(:has(svg, img, i[class*="fa"], i[class*="icon"])) {
  inline-size: 32px !important;
  block-size: 32px !important;
  min-inline-size: 32px;
  margin-block-start: -16px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50% !important;
  background: rgba(17, 24, 39, 0.6) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button {
  display: inline-flex !important;
}

/* Every width: one compact row of controls centred on the bottom of
   the active slide (Flipster always centres it): Pause, Previous, Next,
   the same order Tab reaches them in. Positioned from the centre, so
   it needs no slide width. The pause button (section 7) is placed by
   the same rule. Design asked for the same lockup on mobile, where the
   arrows at the slide edges and a separate pause in the corner read as
   three unrelated controls. */
@media all {
  .elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button {
    top: auto !important;
    bottom: 16px !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  .elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button--prev {
    left: calc(50% - 16px) !important;
  }

  .elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button--next {
    left: calc(50% + 24px) !important;
  }

  .elementor-element.elementor-widget-wpr-flip-carousel .sua-pause-toggle {
    inset-block-start: auto !important;
    inset-block-end: 16px !important;
    inset-inline-end: auto !important;
    inset-inline-start: calc(50% - 56px) !important;
  }
}

.elementor-widget-wpr-flip-carousel .flipster__button:not(:has(svg, img, i[class*="fa"], i[class*="icon"])):hover {
  background: rgba(17, 24, 39, 0.85) !important;
}

.elementor-widget-wpr-flip-carousel .flipster__button:not(:has(svg, img, i[class*="fa"], i[class*="icon"]))::before {
  content: "";
  display: block;
  inline-size: 8px;
  block-size: 8px;
  border-block-start: 2px solid #ffffff;
  border-inline-end: 2px solid #ffffff;
}

.elementor-widget-wpr-flip-carousel .flipster__button--next:not(:has(svg, img, i[class*="fa"], i[class*="icon"]))::before {
  transform: rotate(45deg);
  margin-inline-end: 3px;
}

.elementor-widget-wpr-flip-carousel .flipster__button--prev:not(:has(svg, img, i[class*="fa"], i[class*="icon"]))::before {
  transform: rotate(-135deg);
  margin-inline-start: 3px;
}


/* ---------------------------------------------------------------------------
 * 10. FOCUS RING ON CAROUSEL CONTROLS
 *     WCAG 2.4.7 Focus Visible (AA)
 *     Flipster sets `outline: none` on its buttons, which leaves the
 *     section 2 ring in the button's own colour (white), and Royal and
 *     Hello Elementor restyle the others per widget. These controls sit
 *     over photos and white page, so they get their own ring:
 *     white gap, navy ring, white outer edge — one layer always clears
 *     3:1 (navy on white 13.39:1, white on dark photo well above 3:1).
 *     The disc also turns solid while focused.
 * ------------------------------------------------------------------------- */

.sua-pause-toggle:focus-visible,
.wpr-grid-slider-arrow:focus-visible,
.elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #ffffff !important;
  background: rgba(17, 24, 39, 0.9) !important;
}


/* ---------------------------------------------------------------------------
 * 11. FOCUS RING INSIDE THE MOBILE MENU PANEL
 *     WCAG 2.4.7 Focus Visible (AA), 2.4.11 Focus Not Obscured (AA)
 *     The panel clips anything outside its edges, so the section 2 ring
 *     (drawn outside the link) was cut off at the top and sides, and its
 *     navy ring disappears on the black panel. Draw it inside the link:
 *     white edge (21:1 on black) with a navy inner band (13.39:1 on white),
 *     so it shows whatever colour the panel is.
 * ------------------------------------------------------------------------- */

/* Submenu links (Student Journey, Life Surge…) in the mobile panel.
   At the Mobile breakpoint the widget's submenu text colour falls back
   to black, the colour meant for the white desktop dropdown, so on the
   black panel the links were invisible (1.4.3; 0 contrast). Match the
   white used at the Tablet breakpoint: 21:1 on the black panel. */
@media (max-width: 1024px) {
  .elementor-widget-jkit_nav_menu .jkit-nav-menu .jkit-menu-wrapper .sub-menu > li > a {
    color: #ffffff !important;
  }
}

@media (max-width: 1024px) {
  .jkit-nav-menu .jkit-menu-wrapper a:focus-visible,
  .jkit-nav-menu .jkit-menu-wrapper button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px #10314d;
    border-radius: 0;
  }
}


/* ---------------------------------------------------------------------------
 * 12. FLIP CAROUSEL CONTROLS — SHOWN ON HOVER OR KEYBOARD FOCUS
 *     WCAG 2.1.1 (A), 2.2.2 (A), 2.4.7 (AA)
 *     Design wants the photo carousel clean. On mouse devices the
 *     previous / next arrows and the pause button are hidden until the
 *     pointer is over the carousel or keyboard focus is inside it, so
 *     they are always there when someone reaches for them.
 *     They stay visible:
 *       - once the carousel is paused (the Play button shows its state);
 *       - on touch screens, which have no hover to reveal them.
 *     Hidden with opacity only: the controls keep their place, their
 *     names and their tab order, and screen readers still find them.
 * ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .elementor-element.elementor-widget-wpr-flip-carousel .wpr-flip-carousel .flipster__button,
  .elementor-element.elementor-widget-wpr-flip-carousel .sua-pause-toggle {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
  }

  .elementor-element.elementor-widget-wpr-flip-carousel:hover .wpr-flip-carousel .flipster__button,
  .elementor-element.elementor-widget-wpr-flip-carousel:focus-within .wpr-flip-carousel .flipster__button,
  .elementor-element.elementor-widget-wpr-flip-carousel:hover .sua-pause-toggle,
  .elementor-element.elementor-widget-wpr-flip-carousel:focus-within .sua-pause-toggle,
  .elementor-element.elementor-widget-wpr-flip-carousel .sua-pause-toggle[data-state="paused"] {
    opacity: 1 !important;
  }
}


/* ---------------------------------------------------------------------------
 * 13. BACKGROUND VIDEO PAUSE — SHOWN ON HOVER OR KEYBOARD FOCUS
 *     WCAG 2.2.2 (A), 2.4.7 (AA)
 *     Same pattern as the Flip Carousel (section 12): on mouse devices the
 *     pause button on a section's background video (e.g. the Our Team
 *     hero) appears when the pointer is over the section or keyboard focus
 *     is inside it. It stays visible once paused, and on touch screens.
 *     In a boxed container the button and video sit in the narrow inner
 *     column, while the video fills the full-width section around it, so
 *     hovering the section (not just the column) shows the button too.
 * ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  :has(> .elementor-background-video-container) > .sua-pause-toggle {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  :has(> .elementor-background-video-container):hover > .sua-pause-toggle,
  :has(> .elementor-background-video-container):focus-within > .sua-pause-toggle,
  :hover > :has(> .elementor-background-video-container) > .sua-pause-toggle,
  :has(> .elementor-background-video-container) > .sua-pause-toggle[data-state="paused"] {
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------------
 * 14. EVERY PAUSE BUTTON — SHOWN ON HOVER OR KEYBOARD FOCUS
 *     WCAG 2.2.2 (A), 2.4.7 (AA)
 *     Extends sections 12 and 13 to all the other autoplaying carousels
 *     (Elementor media / image / nested carousels, Royal sliders). On
 *     mouse devices the pause button appears while the pointer is over
 *     the carousel or keyboard focus is inside it; it stays visible once
 *     paused, and always on touch screens.
 * ------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .sua-pause-toggle {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  :hover > .sua-pause-toggle,
  :focus-within > .sua-pause-toggle,
  .sua-pause-toggle[data-state="paused"] {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 15. BACKGROUND VIDEO PAUSE — ONLY WHERE THE VIDEO IS SHOWN
 *     WCAG 2.4.3 (A)
 *     A background video can be turned off for a device in Elementor
 *     (e.g. the Virtual Impact Class hero has no video on mobile). Its
 *     pause button would then control nothing, and still take a Tab
 *     stop. Hide it at the same breakpoints Elementor hides the video
 *     (!important: the button's own rule is display: inline-flex
 *     !important).
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :has(> .elementor-background-video-container.elementor-hidden-mobile) > .sua-pause-toggle {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :has(> .elementor-background-video-container.elementor-hidden-tablet) > .sua-pause-toggle {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  :has(> .elementor-background-video-container.elementor-hidden-desktop) > .sua-pause-toggle {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 16. DEMIO FORM LINKS — UNDERLINED
 *     WCAG 1.4.1 (A)
 *     The "terms" and "privacy policy" links under Demio registration
 *     forms are told apart from the sentence around them by color alone.
 *     Underline them. (Their orange color is a separate 1.4.3 item.)
 * ------------------------------------------------------------------------- */

.demio-registration-form .demio-embed-noti a {
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
 * 17. DEMIO POPOVER — CLOSE BUTTON
 *     WCAG 2.1.2 (A), 2.5.8 (AA), 2.4.7 (AA)
 *     The registration popover has no close button; the plugin adds one
 *     (see "DEMIO POPOVER" in the JS). 32px target, dark grey on white
 *     (#374151, 10.31:1), navy focus ring like the other controls.
 * ------------------------------------------------------------------------- */

.demio-embed-popover .sua-dialog-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #374151;
  line-height: 1;
  cursor: pointer;
}

.demio-embed-popover .sua-dialog-close:hover {
  background: #f3f4f6;
}

.demio-embed-popover .sua-dialog-close:focus-visible {
  outline: 3px solid #10314d;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 18. DEMIO BUTTONS — FOCUS RING
 *     WCAG 2.4.7 (AA)
 *     Demio's buttons use Ant Design, whose `.ant-btn:focus { outline: 0 }`
 *     outranks section 2, so REGISTER NOW showed no ring when focused.
 *     Same navy ring as everywhere else (#10314d, 13.39:1 on white).
 * ------------------------------------------------------------------------- */

.demio-registration-form .registration-submit-button:focus-visible,
a.demio-embed-button:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
 * 19. ELEMENTOR ACCORDION QUESTIONS — FOCUS RING
 *     WCAG 2.4.7 (AA)
 *     Elementor's nested accordion styles remove the outline on its
 *     question titles, and the rounded FAQ card covers anything drawn
 *     outside the title, so only the ring's corners showed. The ring is
 *     drawn just inside the title's own rounded edge instead, where
 *     nothing can cover it, in two tones like section 2: a navy line
 *     with a white band inside it. On white titles (e.g. the Virtual
 *     Impact Class FAQ) the navy shows, 13.39:1; on blue titles (e.g.
 *     Real Estate Surge "What You'll Master") the white band shows.
 *     The inset band also replaces section 2's outer white halo, which
 *     the card clipped into stray white corners.
 *     The longer selector outranks per-widget Custom CSS that styles the
 *     titles with !important (e.g. the Virtual Impact Class FAQ), without
 *     naming any widget.
 * ------------------------------------------------------------------------- */

.elementor .elementor-widget-n-accordion .e-n-accordion .e-n-accordion-item > summary.e-n-accordion-item-title:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: -3px !important;
  box-shadow: inset 0 0 0 6px #ffffff !important;
}

/* ---------------------------------------------------------------------------
 * 20. OPEN ACCORDION PANELS THAT COVER THEIR TITLE — FOCUS RING
 *     WCAG 2.4.7 (AA)
 *     Some accordions (e.g. Trade Surge / Real Estate Surge "Here's What
 *     You'll Master") hide the title row of the open item and lay its
 *     image panel over it. Keyboard focus stays on that title, so the
 *     section 19 ring was drawn underneath the panel and could not be
 *     seen. While an open item's title has keyboard focus, the same
 *     two-tone ring is drawn on top of its panel instead.
 * ------------------------------------------------------------------------- */

.elementor .elementor-widget-n-accordion .e-n-accordion-item[open]:has(> summary.e-n-accordion-item-title:focus-visible) > [role="region"] {
  position: relative;
}

.elementor .elementor-widget-n-accordion .e-n-accordion-item[open]:has(> summary.e-n-accordion-item-title:focus-visible) > [role="region"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: block !important;
  border: 3px solid #10314d !important;
  border-radius: inherit !important;
  box-shadow: inset 0 0 0 3px #ffffff !important;
  background: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
 * 21. ROYAL GRID CARD LINKS — FOCUS RING
 *     WCAG 2.4.7 (AA)
 *     Royal Elementor's grid styles remove the outline on the links inside
 *     its cards (testimonial author name, category line), which left only
 *     section 2's white halo: invisible on the light grey testimonial
 *     cards. Put the navy line back (#10314d on #f3f3f3, 12.1:1); the
 *     white halo stays outside it for cards on dark backgrounds.
 * ------------------------------------------------------------------------- */

.wpr-grid-item a:focus-visible {
  outline: 3px solid #10314d !important;
  outline-offset: 2px !important;
  /* Royal rounds some card links and not others; match them. */
  border-radius: 6px !important;
}

/* ---------------------------------------------------------------------------
 * 22. TESTIMONIAL SLIDER CONTROLS — ONE ROW, SHOWN ON HOVER OR FOCUS
 *     WCAG 2.2.2 (A), 2.5.8 (AA)
 *     Design asked for the photo carousel lockup (section 9) on the
 *     testimonial sliders too, at every width: Pause, Previous and Next
 *     side by side, centred under the slider, in Tab order. The arrows
 *     had sat on the card edges and the pause button in a corner, three
 *     separate controls. On mouse devices the row appears on hover or
 *     keyboard focus, like the photo carousel (section 12); it stays
 *     visible once paused, and always on touch screens.
 *     Applies to any slider widget holding our pause button plus its own
 *     arrows (widgets only, so a background-video section that happens to
 *     contain a slider keeps its own corner button):
 *     Royal grid sliders (Slick) and Elementor carousels (Swiper).
 *     The host gets a 48px strip at the bottom so the row never covers a
 *     card or the dots. Royal draws the same chevron for both arrows and
 *     turns the Next one round, so that turn moves onto its icon here.
 *     Prod renders that icon as a font glyph, whose box carries descender
 *     space; a square 1em box makes it turn in place.
 * ------------------------------------------------------------------------- */

@media all {
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):has(.wpr-grid-slider-arrow),
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):has(.elementor-swiper-button) {
    padding-block-end: 48px !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-arrow-container {
    position: static !important;
    transform: none !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button {
    position: absolute !important;
    inset-block-start: auto !important;
    inset-block-end: 8px !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-prev-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button-prev {
    inset-inline-start: calc(50% - 16px) !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-next-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button-next {
    inset-inline-start: calc(50% + 24px) !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-next-arrow :is(svg, i) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1em;
    block-size: 1em;
    line-height: 1;
    transform: rotate(180deg);
  }

  /* Elementor's arrows take the same disc as Royal's (section 6). */
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button {
    inline-size: 32px !important;
    block-size: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    background: rgba(17, 24, 39, 0.6) !important;
    color: #ffffff !important;
    font-size: 14px !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button svg {
    inline-size: 14px !important;
    block-size: 14px !important;
    fill: #ffffff !important;
  }

  :is(.elementor-widget, .elementor-widget-container):has(.wpr-grid-slider-arrow) > .sua-pause-toggle,
  :is(.elementor-widget, .elementor-widget-container):has(.elementor-swiper-button) > .sua-pause-toggle {
    inset-block-start: auto !important;
    inset-block-end: 8px !important;
    inset-inline-end: auto !important;
    inset-inline-start: calc(50% - 56px) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .wpr-grid-slider-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle) .elementor-swiper-button {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
  }

  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):hover .wpr-grid-slider-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):focus-within .wpr-grid-slider-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):has(> .sua-pause-toggle[data-state="paused"]) .wpr-grid-slider-arrow,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):hover .elementor-swiper-button,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):focus-within .elementor-swiper-button,
  :is(.elementor-widget, .elementor-widget-container):has(> .sua-pause-toggle):has(> .sua-pause-toggle[data-state="paused"]) .elementor-swiper-button {
    opacity: 1 !important;
  }
}