/*
 * ViaBill accessibility fixes
 * Consolidated accessibility stylesheet for the Denmark website.
 *
 * This file combines the accessibility additions generated for:
 * - ViaBill Free
 * - ViaBill Mastercard
 * - ViaBill Plus
 * - Home page
 * - ViaBill sign-up
 * - Contact / "Kom i gang"
 *
 * Repeated rules have been deduplicated.
 */


/* ==========================================================================
   1. Screen-reader-only utility
   ========================================================================== */

.sr-only {
    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;
}


/* ==========================================================================
   2. Skip link
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 999999;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    text-decoration: none;
}


/* ==========================================================================
   3. Keyboard focus
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/*
 * Divi / HubSpot styling removes the native focus outline from some fields.
 * Restore a strong visible focus indicator.
 */
.hs-form .hs-input:focus,
.hs-form .hs-input:focus-visible {
    outline: 3px solid #5a00ff;
    outline-offset: 2px;
}


/* ==========================================================================
   4. Main-content skip-link destination
   ========================================================================== */

#main-content:focus {
    outline: none;
}

#main-content:focus-visible {
    outline: 3px solid #5a00ff;
    outline-offset: 4px;
}


/* ==========================================================================
   5. Inline text links
   ========================================================================== */

/*
 * Inline links should not rely on color alone to distinguish them from
 * surrounding text.
 */
.entry-content p a:not(.et_pb_button),
.entry-content li a:not(.et_pb_button),
.a11y-inline-link {
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

.entry-content p a:not(.et_pb_button):hover,
.entry-content p a:not(.et_pb_button):focus-visible,
.entry-content li a:not(.et_pb_button):hover,
.entry-content li a:not(.et_pb_button):focus-visible,
.a11y-inline-link:hover,
.a11y-inline-link:focus-visible {
    text-decoration-thickness: 2px !important;
}


/* ==========================================================================
   6. Semantic FAQ and footer menu buttons
   ========================================================================== */

/*
 * Reset native button styling while keeping the elements semantic and
 * keyboard-accessible.
 */
.faq-toggle,
.footer-menu-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* FAQ controls should occupy the full clickable heading area. */
.faq-toggle {
    display: block;
    width: 100%;
}

/* Visual expanded/collapsed indicator. */
.faq-toggle[aria-expanded="true"]::after {
    content: " −";
}

.faq-toggle[aria-expanded="false"]::after {
    content: " +";
}


/* ==========================================================================
   7. Prevent text clipping at zoom / enlarged text
   ========================================================================== */

/*
 * Several original ViaBill styles use fixed heights for text containers.
 * Removing those fixed heights prevents clipping when users zoom the page
 * or increase text size.
 */
div.description-column div.step-description h3.s4,
div.description-column div.step-description p.s7,
#viabill-plus-points ul li,
#viabill-plus-points ul li span.viabill-color-violet2,
h5.et_pb_toggle_title {
    height: auto !important;
    min-height: 0;
}


/* ==========================================================================
   8. Forms
   ========================================================================== */

/*
 * Keep form controls inside their available content width, including on
 * narrow screens and at high zoom levels.
 */
form input,
form select,
form textarea,
form button {
    max-width: 100%;
}

/* Allow multiline fields to be enlarged vertically by the user. */
form textarea {
    resize: vertical;
}

/* ==========================================================================
   9. PDF
   ========================================================================== */

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

/* ==========================================================================
   10. Custom overrides
   ========================================================================== */

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

/* "Nyhed" 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 */
}

.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: #0f0b06 !important; /* 5.45:1 on #fff  or #5f6b76*/
}

.et_pb_text_8_light .et_pb_text_inner p,
.et_pb_text_8_light .et_pb_text_inner p span {
  color: #ffffff !important;
}

pre:focus-visible,
.code-block:focus-visible,
.table-wrapper:focus-visible {
  outline: 2px solid #4b5563;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Third-party Elevio/Dixa help widget (injected at runtime by
   cdn.elev.io). The "Elevio af Dixa" attribution link is #9b9b9b on
   #fafafa = 2.66:1, and its hover state #4a90e2 = 3.15:1 — both fail
   WCAG AA for that 10px text. Overridden here since we cannot edit the
   vendor stylesheet; report upstream to Dixa for a permanent fix.
   ------------------------------------------------------------------------ */
#_elev_io ._sbgx4 a {
  color: #595959 !important; /* 6.71:1 on #fafafa */
}
#_elev_io ._sbgx4 a:hover {
  color: #2a6cb8 !important; /* 5.11:1 on #fafafa */
}

/* Custom fine-tuning */
.et_pb_text.et_pb_text_7_tb_footer.et_pb_text_align_left et_pb_bg_layout_light { color: #000000; background-color: #ffffff; }
.s10.c-new_inner_b { color: #000000 !important; }
.js-newsletter-submit { margin-top:12px; }
span.footer_header4 { font-weight: 700; }
span.et_pb_module_header_checklist_item { font-weight: 700; font-size: 130%; }