/**
 * a11y-fixes.css
 *
 * Stylesheet companion to fix-accessibility.php / a11y-fixes.js.
 * Spanish site (viabill.com/es/) edition.
 *
 * Deploy this once (e.g. /es/css/a11y-fixes.css) and run the PHP script with
 *   --css=/es/css/a11y-fixes.css (the default in the /es/ edition)
 * so every fixed page references this single file instead of getting
 * inline <style> blocks. Edit here to change the styling site-wide.
 */

/* Screen-reader-only text: visually hidden, still announced by AT.
   Used for labels/legends/link text the fixer generates. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Links inside running text must not rely on color alone (WCAG 1.4.1). */
.a11y-inline-link {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

/* "(PDF)" indicator appended to PDF links. Style freely; keep it visible. */
.a11y-doc-type {
  font-size: 0.85em;
  white-space: nowrap;
}

/* Fieldsets the fixer wraps around checkbox/radio groups are given an
   inline style to stay invisible; this rule is a site-wide alternative if
   you prefer to manage it here (matches the inline values). */
fieldset.a11y-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* ------------------------------------------------------------------------
   axe "target-size" (WCAG 2.5.8): Divi slider pager dots are 7x7 px.
   Grow the hit area to 24x24 with transparent padding; background-clip
   keeps the visible dot at its themed size, so the design is unchanged.
   ------------------------------------------------------------------------ */
.et-pb-controllers a {
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-clip: content-box;
  padding: 8px;
  box-sizing: content-box;
}
.et-pb-controllers {
  line-height: 0;
}

/* ------------------------------------------------------------------------
   axe "color-contrast" (WCAG 1.4.3): overrides for colors set by theme /
   plugin stylesheets. All values verified >= 4.5:1 against the backgrounds
   axe reported. Root-cause fixes belong in the Divi module settings; these
   rules keep the pages compliant until then.
   ------------------------------------------------------------------------ */

/* "Nuevo"/"New" badges (DSM icon-list modules): #a2aab2 on #fff was 2.35:1. */
.c-new_inner_b {
  color: #5f6b76 !important; /* 5.45:1 */
}

/* Docs callout labels: #d97706 on #fffbeb was 3.07:1,
   #059669 on #ecfdf5 was 3.57:1. */
.callout--warning .callout__label {
  color: #92400e !important; /* 6.84:1 */
}
.callout--success .callout__label {
  color: #065f46 !important; /* 7.29:1 */
}

/* Testimonial job title: #a2aab2 on lilac #cec9ff was 1.50:1. */
.tc_job_title {
  color: #3d4450 !important; /* 6.27:1 */
}

/* Fine-print paragraphs in Divi text modules (#a2aab2 / #999999 on #fff).
   NOTE: .et_pb_text_N indexes are per-page and shift when layouts change —
   extend this list from new axe reports, or better, darken the color in
   the Divi modules themselves.
   /es/ WARNING: these indexes come from the axe reports for the Danish
   (/dk/) pages. The Spanish pages use different Divi layouts, so the same
   index can point at a different module there (e.g. white text on a
   purple banner, which this rule would turn grey). Re-run axe on the /es/
   pages and replace the list below with the modules flagged there. Keep
   it in sync with $finePrintSelectors in fix-accessibility.php. */
.et_pb_text_5 .et_pb_text_inner p,
.et_pb_text_5 .et_pb_text_inner p span,
.et_pb_text_6 .et_pb_text_inner p,
.et_pb_text_6 .et_pb_text_inner p span,
.et_pb_text_8 .et_pb_text_inner p,
.et_pb_text_8 .et_pb_text_inner p span,
.et_pb_text_12 .et_pb_text_inner p,
.et_pb_text_12 .et_pb_text_inner p span {
  color: #5f6b76 !important; /* 5.45:1 on #fff */
}

/* ------------------------------------------------------------------------
   axe "scrollable-region-focusable": make the keyboard focus visible on
   the code blocks the fixer gives tabindex="0".
   ------------------------------------------------------------------------ */
pre:focus-visible,
.code-block:focus-visible,
.table-wrapper:focus-visible {
  outline: 2px solid #4b5563;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Keyboard menu navigation (WCAG 2.1.1 / 4.1.2): Divi only reveals
   ul.sub-menu on li:hover (opacity/visibility), so keyboard focus never
   shows the dropdown. Reveal it when a11y-fixes.js marks the item open,
   or via :focus-within as a pure-CSS fallback if the script fails to load.
   The fallback is scoped to :not([data-a11y-fixed-menu]) so that once the
   JS has initialized an item, Escape can genuinely dismiss the submenu
   (WCAG 1.4.13) without :focus-within forcing it back open.
   ------------------------------------------------------------------------ */
ul.nav li.menu-item-has-children.a11y-submenu-open > ul.sub-menu,
ul.nav li.menu-item-has-children:not([data-a11y-fixed-menu]):focus-within > ul.sub-menu,
ul.et-menu li.menu-item-has-children.a11y-submenu-open > ul,
ul.et-menu li.menu-item-has-children:not([data-a11y-fixed-menu]):focus-within > ul,
#top-menu li.menu-item-has-children.a11y-submenu-open > ul.sub-menu,
#top-menu li.menu-item-has-children:not([data-a11y-fixed-menu]):focus-within > ul.sub-menu,
#et-secondary-nav li.menu-item-has-children.a11y-submenu-open > ul.sub-menu,
#et-secondary-nav li.menu-item-has-children:not([data-a11y-fixed-menu]):focus-within > ul.sub-menu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}

/* WCAG 2.4.7: visible keyboard focus on menu links — Divi/theme CSS often
   suppresses outlines. ViaBill purple; adjust to taste. The :focus rule is
   the fallback for browsers without :focus-visible (mouse clicks briefly
   show it there, which is acceptable). */
ul.nav a:focus-visible,
ul.et-menu a:focus-visible,
#top-menu a:focus-visible,
#et-secondary-nav a:focus-visible {
  outline: 2px solid #5c2fc2;
  outline-offset: 2px;
  border-radius: 2px;
}
ul.nav a:focus:not(:focus-visible),
ul.et-menu a:focus:not(:focus-visible),
#top-menu a:focus:not(:focus-visible),
#et-secondary-nav a:focus:not(:focus-visible) {
  outline: none;
}
ul.nav a:focus,
ul.et-menu a:focus,
#top-menu a:focus,
#et-secondary-nav a:focus {
  outline: 2px solid #5c2fc2;
  outline-offset: 2px;
}