/* Accessibility panel – WCAG 2.2 stage 2 (inc/a11y-panel.php, a11y.js). */

/* ---------- Skip links ---------- */
.a11y-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10001;
  padding: 12px 20px;
  border-radius: 9999px;
  background: var(--basic, #25225e);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-200%);
}
.a11y-skip:focus {
  transform: none;
  color: #fff;
  outline: 3px solid var(--blue, #53a7dc);
  outline-offset: 2px;
}
.site-main:focus {
  outline: none;
}
.site-main {
  scroll-margin-top: 90px;
}

/* Without JS (inline init adds html.a11y-js) the panel cannot work – hide its entry points. */
html:not(.a11y-js) .a11y-wrap,
html:not(.a11y-js) [data-a11y-skip-panel] {
  display: none;
}

/* The panel and skip links stay the same in every mode, so controls do not move while being used
   (A+ would otherwise shift under the pointer). Browser zoom still scales them; the focus highlight
   and stopped motion apply here too. */
.a11y-wrap,
.a11y-skip {
  --a11y-fs: 1;
  letter-spacing: normal; /* inherited from the page in "Większe odstępy" */
  word-spacing: normal;
}

/* ---------- Header toggle ---------- */
.wpm-bar .wpm-nav,
.wpm-bar .a11y-wrap {
  margin-left: auto;
}
.wpm-bar .a11y-wrap + .wpm-cta,
.wpm-bar .a11y-wrap + .wpm-burger {
  margin-left: -10px;
}
.a11y-wrap {
  flex: 0 0 auto;
  display: flex;
}
.a11y-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e5ec;
  color: var(--basic, #25225e);
  cursor: pointer;
  transition: border-color 0.15s;
}
.a11y-toggle svg {
  width: 22px;
  height: 22px;
}
.a11y-toggle:hover,
.a11y-toggle[aria-expanded="true"] {
  border-color: var(--basic, #25225e);
}

/* ---------- Panel ---------- */
.a11y-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 24px;
  z-index: 950;
  width: 360px;
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  box-shadow: 0 24px 60px -28px rgba(21, 20, 48, 0.45);
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--basic, #25225e);
  text-align: left;
}
.a11y-panel[hidden] {
  display: none;
}
.a11y-panel button {
  font-family: inherit;
  color: var(--basic, #25225e);
  cursor: pointer;
}
.a11y-panel :focus-visible,
.a11y-toggle:focus-visible {
  outline: 3px solid var(--basic, #25225e);
  outline-offset: 2px;
}
.a11y-panel svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid #eceef2;
}
.a11y-panel__title {
  margin: 0;
  font-size: calc(16px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1.3;
}
.a11y-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
}
.a11y-panel__close:hover {
  background: #f2f4f8;
}
.a11y-panel__section {
  padding: 14px 20px;
  border-bottom: 1px solid #eceef2;
}
.a11y-panel__label {
  margin: 0 0 10px;
  font-size: calc(13px * var(--a11y-fs, 1));
  font-weight: 600;
  line-height: 1.4;
  color: #56556e;
}
.a11y-size {
  display: flex;
  align-items: center;
  gap: 10px;
}
.a11y-size__btn {
  min-width: 52px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #c9cdd8;
  border-radius: 12px;
  background: #fff;
  font-size: calc(16px * var(--a11y-fs, 1));
  font-weight: 700;
  line-height: 1;
}
.a11y-size__btn:hover {
  border-color: var(--basic, #25225e);
}
.a11y-size__btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}
.a11y-size__btn[aria-disabled="true"]:hover {
  border-color: #c9cdd8;
}
.a11y-size__value {
  flex: 1;
  text-align: center;
  font-size: calc(15px * var(--a11y-fs, 1));
  font-weight: 700;
}
.a11y-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}
.a11y-list li {
  margin: 0;
  padding: 0;
}
.a11y-list li::before {
  content: none;
}
.a11y-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: calc(14.5px * var(--a11y-fs, 1));
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.a11y-opt:hover {
  background: #f2f4f8;
}
.a11y-opt__label {
  flex: 1;
}
.a11y-switch {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 24px;
  border: 2px solid #6b7083;
  border-radius: 9999px;
  background: #fff;
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6b7083;
  transition: transform 0.15s;
}
.a11y-opt[aria-pressed="true"] .a11y-switch {
  border-color: var(--basic, #25225e);
  background: var(--basic, #25225e);
}
.a11y-opt[aria-pressed="true"] .a11y-switch::after {
  background: #fff;
  transform: translateX(16px);
}
.a11y-panel__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid #eceef2;
}
.a11y-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--basic, #25225e);
  border-radius: 9999px;
  background: #fff;
  font-size: calc(14px * var(--a11y-fs, 1));
  font-weight: 600;
  line-height: 1.2;
}
.a11y-reset:hover {
  background: #f2f4f8;
}
.a11y-note {
  margin: 0;
  font-size: calc(12.5px * var(--a11y-fs, 1));
  line-height: 1.45;
  color: #56556e;
  text-align: center;
}
.a11y-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .a11y-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ==========================================================================
   Modes (classes on <html>, set by the inline init / a11y.js).
   The cookie banner ("acp-*", plugin cookie-agency-consent) is excluded on purpose.
   ========================================================================== */

/* Podkreślenie linków (1.4.1) – text links only; button-like links and card links stay as they are. */
html.a11y-underline a[href]:not([class*="btn"], [class*="cta"], [class*="button"], .wpm-logo, .wpm-promo, .bw-atag, .bw-badge, .bw-pill, .bw-page, .e404-card, .udi-google-review--inner, .a11y-skip, .blog-grid > a, .lp-wrapper > a, [class*="acp-"] a) {
  text-decoration-line: underline !important;
  text-decoration-thickness: max(1px, 0.07em) !important;
  text-underline-offset: 0.18em !important;
}

/* Zatrzymaj animacje (2.2.2, 2.3.3) – SVG (SMIL) animations are paused in a11y.js. */
html.a11y-no-motion,
html.a11y-no-motion *:not([class*="acp-"], [class*="acp-"] *),
html.a11y-no-motion *:not([class*="acp-"], [class*="acp-"] *)::before,
html.a11y-no-motion *:not([class*="acp-"], [class*="acp-"] *)::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Wysoki kontrast (1.4.3, 1.4.11 – technique G174; text >= 7:1 where possible).
   The theme colours read these variables with the default value as fallback (tools/wcag/color-vars.php). */
html.a11y-contrast {
  --udi-blue: #185378;
  --udi-orange: #853704;
  --udi-muted: #4a4f5b;
  --udi-soft: #4a4e5f;
  --udi-error: #902b17;
  --udi-success: #195939;
  --udi-teal: #125563;
  --udi-on-dark: #b5b6cc;
}

/* Navy sections: blue text, borders and hovers need the light variant (7.2:1 on #25225e). */
html.a11y-contrast :is(.wpf, .audit-banner__card, .cta-banner__card, .bw-cta, .cs-cta) {
  --blue: #82bfe5;
  --udi-blue: #82bfe5;
  --cs-blue: #82bfe5;
}
html.a11y-contrast .audit-banner {
  --ab-eyebrow: #82bfe5;
}

/* Tinted backgrounds are mixed from the (now darker) brand colours – keep them light so text stays >= 7:1. */
html.a11y-contrast .why-choose {
  background: color-mix(in srgb, var(--blue) 7%, #fff);
}
html.a11y-contrast .pricing-card {
  --pc-badge-bg: color-mix(in srgb, var(--orange) 7%, #fff);
}

/* Czytelna czcionka – Atkinson Hyperlegible Next (Braille Institute, SIL OFL 1.1: fonts/OFL.txt).
   The files are downloaded only when the mode is on (the family is not used anywhere else). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/wp-content/themes/udi/assets/a11y/fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/wp-content/themes/udi/assets/a11y/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/wp-content/themes/udi/assets/a11y/fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/wp-content/themes/udi/assets/a11y/fonts/atkinson-hyperlegible-next-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html.a11y-font body *:not([class*="acp-"], [class*="acp-"] *, .a11y-wrap, .a11y-wrap *, .a11y-skip, svg, svg *, pre, pre *, code, kbd, samp) {
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif !important;
}

/* Skala szarości – a filter on the root element does not break position: fixed / sticky. */
html.a11y-grayscale {
  filter: grayscale(1);
}

/* Większe odstępy w tekście – the 1.4.12 parameters. */
html.a11y-spacing body *:not([class*="acp-"], [class*="acp-"] *, .a11y-wrap, .a11y-wrap *, .a11y-skip, svg, svg *) {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html.a11y-spacing body p:not([class*="acp-"], [class*="acp-"] *, .a11y-wrap, .a11y-wrap *, .a11y-skip) {
  margin-bottom: 2em !important;
}
@media (max-width: 480px) {
  /* Wider letters push long words past narrow columns – let them wrap instead of scrolling sideways (1.4.10). */
  html.a11y-spacing body *:not([class*="acp-"], [class*="acp-"] *, .a11y-wrap, .a11y-wrap *, .a11y-skip) {
    overflow-wrap: anywhere;
  }
}

/* Podświetlenie aktywnego elementu – navy ring + white gap + yellow halo, visible on light and dark. */
html.a11y-focus :focus-visible:not(.site-main, [class*="acp-"], [class*="acp-"] *) {
  outline: 3px solid #25225e !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 8px #ffd23f !important;
}

/* ==========================================================================
   Enlarged text (A+): a11y-fs-up (> 100%), a11y-fs-lg (>= 130%).
   ========================================================================== */

/* The header menu stops fitting in one row – switch to the mobile menu (assets/chrome/header.js isMobile()). */
html.a11y-fs-lg .wpm-bar .wpm-nav,
html.a11y-fs-lg .wpm-bar .wpm-cta {
  display: none !important;
}
html.a11y-fs-lg .wpm-burger {
  display: inline-flex;
}
@media (max-width: 1179px) {
  html.a11y-fs-up .wpm-bar .wpm-nav,
  html.a11y-fs-up .wpm-bar .wpm-cta {
    display: none !important;
  }
  html.a11y-fs-up .wpm-burger {
    display: inline-flex;
  }
}

/* Process steps: inline repeat(n, 1fr) columns – let them shrink below the longest word. */
html.a11y-fs-up .process__step {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Long words at large sizes would push narrow columns past the screen (1.4.10). */
@media (max-width: 900px) {
  html.a11y-fs-up body *:not([class*="acp-"], [class*="acp-"] *, .a11y-wrap, .a11y-wrap *, .a11y-skip) {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  html.a11y-fs-up :is(a, button)[class*="btn"],
  html.a11y-fs-up :is(a, button)[class*="cta"],
  html.a11y-fs-up .why-stat__value {
    white-space: normal;
  }
}