/* ==========================================================================
   Soda Dual Heading Widget
   ========================================================================== */

.soda-dual-heading-wrapper {
    width: 100%;
    display: block;
}

.soda-dual-heading {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    margin: 0;
    line-height: 1;
    word-break: break-word;
}

.soda-dual-heading__first,
.soda-dual-heading__second {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: inherit;
    word-break: inherit;
}

/* Make sure line-height does not break visual alignment between parts */
.soda-dual-heading__first *,
.soda-dual-heading__second *,
.soda-dual-heading__first br,
.soda-dual-heading__second br {
    line-height: inherit;
}

/* ================================================================
   Stroke / Outline helpers
   El control "Stroke Behind Fill" usa paint-order: stroke fill; para
   pintar el contorno debajo del relleno y así no se come el color
   de la letra. Añadimos -webkit-text-fill-color: currentColor como
   fallback para navegadores basados en WebKit (Safari, Chrome, Brave)
   cuando paint-order no está soportado del todo.
   ================================================================ */

.soda-dual-heading__first,
.soda-dual-heading__second {
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
}

/* Algunos navegadores requieren que paint-order tenga markers también,
   añadimos markers al final como no-op. */
.soda-dual-heading__first[style*="paint-order"],
.soda-dual-heading__second[style*="paint-order"] {
    paint-order: stroke fill markers;
    -webkit-font-smoothing: antialiased;
}

/* Link styles (when the whole heading is wrapped in <a>) */
.soda-dual-heading-wrapper > a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.soda-dual-heading-wrapper > a:hover,
.soda-dual-heading-wrapper > a:focus,
.soda-dual-heading-wrapper > a:active {
    text-decoration: none;
    outline: 0;
}