/* Screen reader only utility */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Skip to main content link */
.skip-to-main-content {
  align-items: center;
  background-color: #fff;
  border-radius: 9999px;
  color: #7F7AEE;
  font-weight: 500;
  left: 1rem;
  opacity: 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  position: absolute;
  text-decoration: none;
  top: 0.75rem;
  transform: translateY(-150%);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  z-index: 9999;
}

.skip-to-main-content:focus,
.skip-to-main-content:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7F7AEE;
  opacity: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  pointer-events: auto;
  transform: translateY(0);
}

/* NordLocker focus styles for header and navigation */
.Header a:focus-visible,
.Header button:focus-visible,
.nord-link:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7F7AEE;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.toc-link:focus-visible,
.toc-toggle:focus-visible,
.sidebar-expand-button:focus-visible,
.article-votes-controls button:focus-visible,
.dropdown1:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7F7AEE;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Article image modal */
.Article_page__imgModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.Article_page__imgModal.modal-open,
.Article_page__imgModal.modal-open.hidden {
  display: flex !important;
}

.Article_page__imgModal-background {
  background-color: rgba(21, 25, 34, 0.75);
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.Article_page__imgModal-img-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  max-height: 90vh;
  max-width: 90vw;
  position: relative;
  z-index: 1;
}

.Article_page__imgModal-img-wrapper img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.Article_page__imgModal-close {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 9999px;
  color: #151922;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 44px;
  z-index: 2;
}

.Article_page__imgModal-close:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #565378;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Copy code button */
.Article_page__article-body-codeBlock {
  position: relative;
}

.Article_page__article-body-codeBlock pre {
  margin: 0;
}

.Article_page__article-body-codeBlock-copy {
  position: absolute;
  right: 12px;
  top: 12px;
}

.Article_page__article-body-codeBlock-copy button {
  align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  width: 36px;
}

.Article_page__article-body-codeBlock-copy button:hover {
  border-color: #7F7AEE;
}

.Article_page__article-body-codeBlock-copy button:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7F7AEE;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Article body images that open modal */
.article-body img:not([role="presentation"]) {
  cursor: zoom-in;
}

/* WCAG AA contrast — #7F7AEE fails 4.5:1 on white (axe: 3.54:1) */
:root {
  --nl-a11y-purple-text: #565378;
  --nl-a11y-purple-bg: #565378;
  --nl-a11y-muted-text: #6b6e78;
}

.breadcrumbs li,
.breadcrumbs li a,
.breadcrumbs li:not(:first-of-type):before {
  color: var(--nl-a11y-muted-text) !important;
}

.breadcrumbs li a:hover {
  color: var(--nl-a11y-purple-text) !important;
}

/* Contact-form status alerts — style.css defines .hidden { display: none }
   earlier in the file than .alert { display: flex }, so on equal
   specificity the later .alert rule always wins and the "hidden" alert
   stays visible. Both the error and success messages therefore rendered
   at once no matter what. The compound selector below outranks the
   single-class .alert rule regardless of source order. */
.alert.hidden {
  display: none !important;
}

.article-body a,
#article-container .article-body a {
  color: var(--nl-a11y-purple-text);
  /* WCAG 1.4.1 — links inside body text must not rely on color alone */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body a:hover,
#article-container .article-body a:hover {
  color: #454360;
}

/* Request form submit button (style.css paints #7f7aee, 3.54:1) */
.form input[type='submit'] {
  background-color: var(--nl-a11y-purple-bg) !important;
  border-color: var(--nl-a11y-purple-bg) !important;
  color: #fff !important;
}

.form input[type='submit']:hover {
  background-color: #454360 !important;
  border-color: #454360 !important;
}

.article-feedback,
.article-feedback .headline4,
.btn-tertriary {
  color: var(--nl-a11y-purple-text) !important;
  border-color: var(--nl-a11y-purple-text) !important;
}

.btn-tertriary:hover {
  background: var(--nl-a11y-purple-bg) !important;
  color: #fff !important;
}

.article-feedback {
  border-color: var(--nl-a11y-purple-text) !important;
}

.nord-button.nord-button--c-purple.bg-purple,
.nord-button--v-contained.nord-button--c-purple {
  background-color: var(--nl-a11y-purple-bg) !important;
  border-color: var(--nl-a11y-purple-bg) !important;
  color: #fff !important;
}

.nord-button.nord-button--c-purple.bg-purple:hover,
.nord-button--v-contained.nord-button--c-purple:hover:not(:focus):not(:active):not([disabled]) {
  background-color: #454360 !important;
  border-color: #454360 !important;
}

#live-chat-button,
#email-us-button,
a[data-variant="accent"][data-appearance="outline"],
button[data-variant="accent"][data-appearance="outline"] {
  color: var(--nl-a11y-purple-text) !important;
  border-color: var(--nl-a11y-purple-text) !important;
}

#live-chat-button:hover,
#email-us-button:hover,
a[data-variant="accent"][data-appearance="outline"]:hover,
button[data-variant="accent"][data-appearance="outline"]:hover {
  background-color: var(--nl-a11y-purple-bg) !important;
  color: #fff !important;
}

.toc-toggle,
.toc-toggle-text {
  color: var(--nl-a11y-purple-text) !important;
}

.toc-link:hover {
  border-left-color: var(--nl-a11y-purple-text);
}

.toc-link--active {
  border-left-color: var(--nl-a11y-purple-text);
}

.category_page a.text-purple,
.section_page a.text-purple,
a.nord-link.text-purple {
  color: var(--nl-a11y-purple-text) !important;
}

.category_page a.text-purple:hover,
.section_page a.text-purple:hover,
a.nord-link.text-purple:hover {
  color: #454360 !important;
}

/* ------------------------------------------------------------------
   WCAG 2.4.3 Focus Order — mobile menu is faded out with opacity only,
   which leaves its links keyboard-focusable while invisible.
   visibility:hidden removes them from tab order and the a11y tree.
   ------------------------------------------------------------------ */
.Header__mobilePopup {
  visibility: hidden;
}

.Header--active .Header__mobilePopup,
.Header__mobilePopup.is-open {
  visibility: visible;
}

/* ------------------------------------------------------------------
   WCAG 2.4.7 Focus Visible — generic fallback focus indicator for any
   interactive element not covered by the component rules above.
   Two-tone ring stays visible on both light and dark backgrounds.
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #565378;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Skip-link target: no visible ring on the page container itself */
main#main-content:focus,
main#main-content:focus-visible {
  box-shadow: none;
  outline: none;
}

/* ------------------------------------------------------------------
   WCAG 2.5.8 Target Size (Minimum) — interactive controls >= 24x24 px
   (44x44 where layout allows).
   ------------------------------------------------------------------ */
.collapsible-sidebar-header button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Category/section expanders + article links in the HC sidebar tree.
   Must apply at all viewports (style.css previously scoped min-height to
   ≥1128px only). No scale/translate hover — those shrink neighbor gaps. */
.sidebar-expand-button,
a.sidebar-tree-link {
  box-sizing: border-box;
  color: #151922 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
  transform: none !important;
}

.sidebar-expand-button:hover,
a.sidebar-tree-link:hover {
  transform: none !important;
}

/* Kill opacity-based show/hide leftovers from older theme CSS — axe reads
   mid-fade text as ~#fdfdfd on white (≈1.01:1). */
.sidebar-tree-dropdown,
.sidebar-tree-dropdown.is-visible,
.sidebar-tree-dropdown:not(.is-visible),
.sidebar-tree-dropdown.is-visible > li {
  opacity: 1 !important;
  animation: none !important;
}

/* Disabled state used while section content is fetching — keep full text
   contrast (opacity < 1 fails 1.4.3) and signal wait via cursor only. */
.sidebar-expand-button:disabled {
  opacity: 1 !important;
  cursor: wait;
  color: #151922 !important;
}

.toc-toggle {
  min-height: 24px;
}

.toc-link {
  min-height: 24px;
  display: flex;
  align-items: center;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

#close-dialog-btn {
  min-width: 24px;
  min-height: 24px;
}

/* Footer text links (12px type renders ~18px tall; legal links wrap into
   touching rows on mobile) */
.Footer a,
.Footer button {
  display: inline-block;
  min-height: 24px;
}

/* Burger button is 24x24; enlarge the hit area to ~44x44 without
   changing the rendered icon */
.Header__burger {
  position: relative;
}

.Header__burger::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

/* ------------------------------------------------------------------
   WCAG 1.4.3 Contrast — article accordion (.dropdown1) renders white
   text on #8580EF (3.3:1). Darken to the approved a11y purple, and
   lighten the expanded panel so body links keep 4.5:1.
   ------------------------------------------------------------------ */
.dropdown1,
.dropdown1:hover {
  background-color: #565378 !important;
}

/* #article-container .article-body p would otherwise force dark text
   onto the dark accordion header */
.dropdown1 p,
#article-container .article-body .dropdown1 p {
  color: #fff !important;
}

.droppanel,
.active + .droppanel {
  background-color: #f0effc !important;
  color: #151922 !important;
}

/* Section page H1 uses brand purple; align with a11y palette */
h1.text-purple {
  color: var(--nl-a11y-purple-text) !important;
}

/* ------------------------------------------------------------------
   WCAG 2.3.3 / 2.2.2 — respect reduced motion preferences
   ------------------------------------------------------------------ */
@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;
  }
}