/**
 * Accessibility overrides for Report Builder docs theme.
 * Restores focus indicators, skip link, and reduced-motion support.
 */

/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100000;
  padding: 12px 16px;
  background: #091d70;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #ffc107;
  outline-offset: 2px;
}

/* Restore visible keyboard focus (overrides outline: none !important in app CSS) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.btn:focus-visible,
.tms-store-card-plan-buy-now-button:focus-visible,
.hi-trigger:focus-visible,
.ma-backdrop:focus-visible,
.close-icon:focus-visible,
.hsw-close:focus-visible,
.wdt-widget-minimize:focus-visible {
  outline: 3px solid #1946ca !important;
  outline-offset: 2px !important;
}

/* High-contrast focus for dark header controls */
#header a:focus-visible,
#header button:focus-visible,
#header .hi-trigger:focus-visible {
  outline-color: #ffc107 !important;
}

/* Sidebar toggle: keep existing look, add keyboard affordance */
.hi-trigger {
  outline: none;
}

.hi-trigger:focus-visible {
  outline: 3px solid #ffc107 !important;
  outline-offset: 2px !important;
}

/* Search close control */
.hsw-close {
  cursor: pointer;
}

button.hsw-close,
button.close-icon {
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

button.close-icon {
  /* Padding keeps the 24px glyph while giving a 48x48 hit area */
  display: block;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 12px;
  top: 0;
  right: 2px;
  z-index: 10;
}

/* Backdrop must be reachable by keyboard when present */
.ma-backdrop {
  cursor: pointer;
}

/* Page loader status text contrast */
html:not(.ismobile) .page-loader .preloader p {
  color: #e0e0e0;
}

/* Make billing toggle checkbox available to assistive tech (overrides display:none) */
.tms-store-row .tms-store-switch-checkbox,
.tms-store-switch-checkbox {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  display: block !important;
}

.tms-store-row .tms-store-switch-checkbox:focus-visible + .tms-store-switch-checkbox-slider {
  outline: 3px solid #ffc107 !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   Touch target sizing — WCAG 2.5.8 / Lighthouse tap-target audit.
   Interactive controls need a hit area of at least 48x48px with spacing.
   ========================================================================== */

/* Sidebar navigation: top-level items were ~46px, submenu items ~35px */
.main-menu > li > a,
.sub-menu ul > li > a {
  display: flex;
  align-items: center;
  min-height: 48px;
}

/* Header hamburger: 18x12 glyph in a 36px-tall box */
.hi-trigger .line-wrap {
  margin: 18px 20px;
}

/* Header icon menu items were 36px tall */
.hi-menu > li > a {
  min-height: 48px;
}

.hi-menu > li > a > .him-icon {
  line-height: 48px;
}

/* Search close button was 45x40 */
.h-search-wrap .hsw-close {
  top: 11px;
  width: 48px;
  height: 48px;
  padding-top: 13px;
}

/* Pagination bullets were 40x40 */
.pagination > li > a,
.pagination > li > span {
  width: 48px;
  height: 48px;
  line-height: 46px;
}

.pagination > li > a > .zmdi,
.pagination > li > span > .zmdi {
  line-height: 47px;
}

/* Footer links were inline text with no vertical hit area */
#footer .f-menu > li > a {
  display: inline-block;
  min-height: 48px;
  padding: 14px 6px;
  line-height: 20px;
}

/* Footer grows to fit the taller links; #main reserves matching space */
#footer {
  height: auto;
  min-height: 130px;
  padding-top: 28px;
}

#main {
  padding-bottom: 130px;
}

@media (max-width: 767px) {
  #footer {
    min-height: 180px;
  }

  #main {
    padding-bottom: 180px;
  }
}

/* Footer copyright inherits justified text from the global p rule */
#footer p {
  margin: 0;
  text-align: center;
}

/* Links stacked in a content list sit ~19px apart, which is under the 24x24
   minimum of WCAG 2.2 SC 2.5.8. 2px + 20px line + 2px = 24px, so the centres
   are 24px apart and the required spacing is met with almost no visual change.

   Lighthouse asks for 48x48, which is Google's own recommendation rather than
   the WCAG requirement, so it will still flag these links. Going to 48px here
   was rejected as too airy for prose lists.

   Component lists (pagination, tabs, nav, list-group) keep their own sizing,
   and .btn keeps its own padding. Every other list link is matched, including
   items that hold a nested list or extra markup alongside the link. */
#content :is(ul, ol):not(.pagination, .nav, .tab-nav, .list-group, .actions) > li > a:not(.btn) {
  display: inline-block;
  padding: 2px 0;
  line-height: 20px;
}

/* Card header minimize button — looks like the icon link it replaced, sized
   to 48x48. It is absolutely positioned, so the extra area is pulled back to
   keep the icon visually in place */
button.wdt-widget-minimize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -9px -9px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   Inline links in text blocks — WCAG 1.4.1 / axe link-in-text-block.

   A link may rely on colour alone only if it reaches 3:1 against the text
   around it. No underline is used here (design preference), so that 3:1 is
   met by darkening the surrounding copy instead:

     link  #0a6ebd  vs white card  5.28:1  (needs 4.5:1)
     text  #1a1a1a  vs white card 17.40:1
     link  #0a6ebd  vs text        3.30:1  (needs 3:1)

   The old #5E5E5E body text only reached 2.07:1 against the link, which is
   why this audit failed. Both values move together — lightening the text or
   darkening the link will drop the pair back below 3:1.

   `:where()` keeps these selectors at low specificity on purpose, so
   component styles such as .btn or .text-muted still win over the colour.
   ========================================================================== */

:where(#content) :is(p, li, td, th, dd, blockquote) {
  color: #1a1a1a;
}

:where(#content, #footer) :is(p, li, td, th, dd, small, blockquote) a {
  color: #0a6ebd;
}

:where(#content, #footer) :is(p, li, td, th, dd, small, blockquote) a:is(:hover, :focus) {
  color: #084f8a;
  text-decoration: none;
}

/* Components that happen to sit inside a text block are not inline links */
#content .btn,
#content .nav a,
#content .tab-nav a,
#content .list-group-item,
#content .pagination a {
  text-decoration: none;
}

/* Card header subtitle was #AEAEAE, only 2.07:1 on the #f7f7f7 ch-alt header.
   #6b6b6b gives 4.97:1 there and 5.33:1 on a plain white header. The :not()s
   leave the light-on-dark variants (bgm-* and .card-light) untouched. */
.card:not(.card-light) .card-header:not([class*="bgm-"]) h2 small {
  color: #6b6b6b;
}

/* Footer text was #a2a2a2 on the #f3f3f3 page background (2.3:1) */
#footer {
  color: #6b6b6b;
}

#footer .f-menu > li > a {
  color: #6b6b6b;
}

#footer .f-menu > li > a:hover,
#footer .f-menu > li > a:focus {
  color: #333;
}

/* Footer nav landmark should not alter layout */
#footer > nav {
  display: contents;
}

/* Sidebar nav landmark should not alter layout */
#sidebar > nav {
  display: contents;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tms-store-enter-animation,
  .tms-store-leave-animation {
    animation: none !important;
  }

  .page-loader {
    transition: none !important;
  }
}