/* =========================================================
 * TVS Capital — Accessibility fixes (child theme)
 * Enqueued from Capital23/functions.php with filemtime() versioning.
 * Companion file: a11y-fixes.js
 * ========================================================= */


/* =========================================================
 * A11y — TVS-7425/7426: team card trigger — focus ring + hover/focus parity
 * The trigger is an inline <span>, so the ring is drawn on its child <figure>;
 * the overlay caption is revealed on keyboard focus as well as hover.
 * ========================================================= */
.awsm-modal-trigger:focus figure,
.awsm-modal-trigger:focus-visible figure {
  outline: 3px solid #0a2540 !important;
  outline-offset: 3px !important;
}
.awsm-modal-trigger:focus figcaption,
.awsm-modal-trigger:focus-within figcaption {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


/* =========================================================
 * A11y — TVS-7307/6983: team modal controls (Close / Prev / Next) focus ring
 * White ring because the modal chrome sits on a dark overlay.
 * ========================================================= */
.awsm-modal .awsm-modal-close:focus-visible,
.awsm-modal .awsm-nav-item:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}


/* =========================================================
 * A11y — TVS-7682: reveal dropdown submenu on keyboard focus
 * ========================================================= */
.pp-advanced-menu li:focus-within > .sub-menu { display: block !important; }


/* =========================================================
 * A11y — TVS-6988: Updates filter buttons focus ring
 * ========================================================= */
.pp-post-filters .pp-post-filter:focus-visible { outline: 3px solid #0a2540; outline-offset: 2px; }


/* =========================================================
 * A11y — TVS-7476: keyboard-reveal for flipbox cards (all slide directions)
 * :focus-within slides the back panel in; a11y-fixes.js handles Esc-dismiss
 * by overriding these inline (slide is position-based, not transform).
 * ========================================================= */
.pp-animate-slide.pp-direction-up.pp-flipbox-container:focus-within   .pp-flipbox-back,
.pp-animate-push.pp-direction-up.pp-flipbox-container:focus-within    .pp-flipbox-back { top: 0; }
.pp-animate-slide.pp-direction-down.pp-flipbox-container:focus-within  .pp-flipbox-back,
.pp-animate-push.pp-direction-down.pp-flipbox-container:focus-within   .pp-flipbox-back { top: auto; bottom: 0; }
.pp-animate-slide.pp-direction-left.pp-flipbox-container:focus-within  .pp-flipbox-back,
.pp-animate-push.pp-direction-left.pp-flipbox-container:focus-within   .pp-flipbox-back { left: 0; }
.pp-animate-slide.pp-direction-right.pp-flipbox-container:focus-within .pp-flipbox-back,
.pp-animate-push.pp-direction-right.pp-flipbox-container:focus-within  .pp-flipbox-back { left: auto; right: 0; }


/* =========================================================
 * A11y — TVS-6241/6946: single visible focus ring (WCAG 1.4.11)
 * One navy outline (~15:1 on light UI); white variant on dark surfaces.
 * outline is used (not box-shadow) so it is never overridden and — for the
 * flipbox — is placed on the CONTAINER, whose ring isn't clipped by its own
 * overflow:hidden (an inner-link ring would be).
 * ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
.pp-posts-button:focus-visible,
.pp-menu-item:focus-visible,
.pp-advanced-menu a:focus-visible,
nav a:focus-visible,
.jet-listing-grid__item a:focus-visible,
.pp-post-title a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #0a2540 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Dark surfaces — flip to a light ring so it stays visible */
footer a:focus-visible,
.elementor-location-footer a:focus-visible { outline-color: #ffffff !important; }

/* Portfolio flipbox — ring the container; suppress the (clipped) inner-link ring */
.pp-flipbox-container:focus-within {
  outline: 3px solid #0a2540 !important;
  outline-offset: 2px !important;
}
.pp-flipbox-container .pp-flipbox-back a:focus-visible { outline: none !important; }

/* The team trigger is an inline <span role="button"> caught by the ring above;
   its ring is drawn on the child <figure> (see 7425 block), so cancel it here
   to avoid a second outline on the zero-height inline box. */
.awsm-modal-trigger:focus-visible { outline: none !important; }


/* =========================================================
 * A11y — TVS-7395 (visual cue): "View profile" hint on team cards
 * Optional affordance; the accessible name lives on the trigger aria-label.
 * ========================================================= */
.awsm-team-single-inner,
.awsm-modal-trigger figure { position: relative; }
.awsm-modal-trigger figure::after {
  content: "View profile \2192";           /* → */
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10,37,64,.9); color: #fff; font-size: 13px; white-space: nowrap;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.awsm-modal-trigger:hover figure::after,
.awsm-modal-trigger:focus figure::after,
.awsm-modal-trigger:focus-within figure::after { opacity: 1; }


/* =========================================================
 * A11y — submenu keyboard/hover parity (Client Login flyout)
 * SmartMenus adds .highlighted on keyboard focus, which PowerPack paints
 * grey (rgb(85,89,92)); mouse hover uses the brand teal. Force the keyboard
 * state to match hover: teal background + white text.
 * ========================================================= */
.pp-advanced-menu .sub-menu .pp-menu-item.highlighted,
.pp-advanced-menu .sub-menu .pp-menu-item:focus,
.pp-advanced-menu .sub-menu .pp-menu-item:focus-visible,
.pp-advanced-menu--dropdown .pp-menu-item.highlighted,
.pp-advanced-menu--dropdown .pp-menu-item:focus,
.pp-advanced-menu--dropdown .pp-menu-item:focus-visible {
  background-color: #4E9B95 !important;   /* brand teal (--e-global-color-secondary) */
  color: #ffffff !important;
}


/* =========================================================
 * A11y — company Post-Navigation focus ring shape (optional)
 * PREV/NEXT are full-width flex <a> links (Elementor Post Navigation), so a
 * plain ring wraps the whole row ("elongated"). Hug the label instead so all
 * three nav buttons read consistently. Verify layout after enabling.
 * ========================================================= */
.elementor-post-navigation__prev a,
.elementor-post-navigation__next a { display: inline-flex; width: auto; }


/* =========================================================
 * Utility — visually-hidden text for screen readers
 * ========================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}