/* Screen reader only utility (reinforce theme 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;
}

/* ------------------------------------------------------------------
   WCAG AA contrast — brand teal fails 4.5:1 on cream/white.
   #028378 on #F5F4F1 ≈ 4.22:1; #00CFB6 with white text on accordion
   also fails. Darken text/controls to approved a11y teal.
   ------------------------------------------------------------------ */
:root {
  --np-a11y-teal-text: #016358;
  --np-a11y-teal-bg: #007066;
  --np-a11y-muted-text: #535352;
  --np-a11y-focus: #016358;
  --np-a11y-panel: #e6f7f4;
}

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

/* Strengthen focus ring (teal-on-cream brand ring is too light) */
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,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.mode-toggle-btn:focus-visible,
.toc-link:focus-visible,
.toc-toggle:focus-visible,
.burger-menu-toggle:focus-visible,
.burger-menu-close:focus-visible,
.search-clear:focus-visible,
.collapse-title:focus-visible,
.dropdown1:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--np-a11y-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   The general focus ring above uses an OUTWARD box-shadow (it bleeds
   ~4px past the element's own box). That's invisible/"cut off" on any
   control that lives inside an `overflow: hidden` ancestor — the
   sidebar's `.sidebar-tree-dropdown` (needed for the collapse height
   animation) and the `.mode-toggle` pill (needed to clip the sliding
   highlight to its rounded corners) both clip it. Give these specific
   controls an INSET ring instead, which never leaves their own box and
   so can never be clipped by an ancestor. Higher specificity than the
   generic rule above, so this wins without needing !important on it. */
.sidebar-tree-link:focus-visible,
.sidebar-expand-button:focus-visible,
.mode-toggle-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--np-a11y-focus) !important;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--np-a11y-focus);
  border-color: var(--np-a11y-focus);
  color: var(--np-a11y-teal-text);
}

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

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

/* Article body links — contrast + underline (WCAG 1.4.1) */
.article-content a,
.content.article-content a,
section.content a,
.card .content a,
#page-container article .content a {
  color: var(--np-a11y-teal-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.article-content a:hover,
.content.article-content a:hover,
section.content a:hover,
.card .content a:hover,
#page-container article .content a:hover {
  color: #014840 !important;
}

/* Cookie disclaimer links on light UI only (axe: link-in-text-block).
   Exclude footer — privacy-policy hrefs there sit on #191a1c. */
.disclaimer-text a,
[class*="disclaimer"] a,
.consent-sdk a,
#consent-sdk a,
.n-consent a {
  color: var(--np-a11y-teal-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

footer a[href*="privacy-policy"],
footer a[href*="cookie-policy"],
.Subfooter__links a,
.Subfooter__links .nord-link.text-grey {
  color: #c5c6c9 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Primary text / active nav that used #028378 */
.text-primary,
.sidebar-tree-link.is-active,
.sidebar-tree-dropdown .sidebar-tree-link.is-active:last-child,
.article-mode.business-article,
.article-mode.general-article,
.article-mode.personal-article {
  color: var(--np-a11y-teal-text) !important;
}

.sidebar-tree-dropdown .sidebar-tree-link.is-active:last-child {
  border-left-color: var(--np-a11y-teal-text) !important;
  background-color: rgba(1, 99, 88, 0.1) !important;
}

.hover\:text-primary:hover {
  color: var(--np-a11y-teal-text) !important;
}

/* Outline primary buttons / vote controls */
.button-outline-primary,
.button.button-outline-primary,
a.button-outline-primary,
button.button-outline-primary {
  color: var(--np-a11y-teal-text) !important;
  border-color: var(--np-a11y-teal-text) !important;
}

.button-outline-primary:hover,
.button.button-outline-primary:hover {
  background-color: var(--np-a11y-teal-bg) !important;
  border-color: var(--np-a11y-teal-bg) !important;
  color: #fff !important;
}

/* Contained primary buttons — ensure white text on darker teal */
.button-primary,
.button.button-primary {
  background-color: var(--np-a11y-teal-bg) !important;
  border-color: var(--np-a11y-teal-bg) !important;
  color: #fff !important;
}

.button-primary:hover,
.button.button-primary:hover {
  background-color: #014840 !important;
  border-color: #014840 !important;
}

/* Form submit */
.form input[type='submit'],
form input[type='submit'] {
  background-color: var(--np-a11y-teal-bg) !important;
  border-color: var(--np-a11y-teal-bg) !important;
  color: #fff !important;
}

/* TOC toggle was grey (#808080) on white — 3.94:1 */
.toc-toggle,
.toc-toggle-text,
.toc-toggle .toc-toggle-text {
  color: var(--np-a11y-muted-text) !important;
}

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

.toc-link--active {
  border-left-color: var(--np-a11y-teal-text) !important;
}

/* ------------------------------------------------------------------
   WCAG 1.4.3 Contrast — inside the article body itself. `.note`/
   `.warning` callout labels use the raw, uncompiled theme-setting
   colors ($color_note / $color_warning) as TEXT, not just as decorative
   borders/tints. Default $color_note (#DBF153, pale yellow-green) is
   ~1.26:1 on the light callout background — nearly invisible — and
   default $color_warning (#FD294B) is only ~3.75:1, short of the 4.5:1
   normal-text minimum. Keep the border/tint on-brand; force the label
   text itself to accessible, still-legible amber/red.
   ------------------------------------------------------------------ */
.note::before {
  color: #92400e !important;
}

.warning::before {
  color: #c81e3a !important;
}

/* Same raw colors are also exposed as inline text-color utilities
   (.text-note / .text-warning) that WYSIWYG authors can apply to any
   run of text inside an article, not just inside a callout box. */
.text-note {
  color: #92400e !important;
}

.text-warning {
  color: #c81e3a !important;
}

/* ------------------------------------------------------------------
   WCAG 1.4.3 Contrast — article accordion (.dropdown1) white on
   #00CFB6 fails. Darken header; lighten panel for body links.
   ------------------------------------------------------------------ */
.dropdown1,
.dropdown1:hover {
  background-color: var(--np-a11y-teal-bg) !important;
}

.dropdown1 p,
.article-content .dropdown1 p,
.content .dropdown1 p {
  color: #fff !important;
}

.droppanel,
.active + .droppanel {
  background-color: var(--np-a11y-panel) !important;
  color: #191a1c !important;
}

/* ------------------------------------------------------------------
   Copy code button (injected by a11y.js)
   ------------------------------------------------------------------ */
.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: var(--np-a11y-teal-text);
}

.Article_page__article-body-codeBlock-copy button:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--np-a11y-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   WCAG 2.5.8 Target Size — sidebar expand chevrons & TOC
   ------------------------------------------------------------------ */
.sidebar-tree-link + button.not-a-button,
button.not-a-button[data-target^="#category"],
button.not-a-button[aria-expanded] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.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;
}

.burger-menu-toggle,
.burger-menu-close {
  min-width: 44px;
  min-height: 44px;
}

footer a,
footer button,
.footer a,
.footer button {
  display: inline-block;
  min-height: 24px;
}

/* ------------------------------------------------------------------
   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;
  }
}