/* DC Full Width Headline Widget Styles */

.dc-fullwidth-headline {
    width: 100%;
    line-height: 1.2;
    font-weight: bold;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
    contain: layout style;
}

.dc-fullwidth-headline.dc-fitty-text {
    /*
     * Fitty reads this element's own scrollWidth as the "current text
     * width" and compares it against the parent's clientWidth to decide
     * how much to scale the font. A forced width:100% (from the base
     * .dc-fullwidth-headline rule) would make scrollWidth always equal
     * the parent's width, so the ratio is always 1 and Fitty never
     * resizes. Overriding back to width:auto lets the box shrink-wrap
     * its actual text content for an accurate measurement.
     */
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    max-width: 100%;
    font-size: clamp(var(--min-font-size, 24px), 5vw, var(--max-font-size, 120px));
    min-height: var(--min-font-size, 24px);
}

.dc-fullwidth-headline.dc-fitty-text[style*="font-size"] {
    font-size: inherit;
}

.dc-fullwidth-headline.dc-fitty-text[data-fitty-multiline="true"] {
    white-space: normal;
    word-break: break-word;
}

/*
 * Wrapper around the headline, not on the headline itself: Fitty reads
 * its own element's parentNode.clientWidth as the available width, so the
 * 100vw breakout must live one level up or Fitty ends up measuring its
 * own forced width instead of the actual text size.
 */
.dc-fullwidth-breakout {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.dc-fullwidth-headline.dc-gradient-text {
    background: linear-gradient(
        var(--gradient-direction, 45deg),
        var(--gradient-color-1, #667eea) var(--gradient-position-1, 0%),
        var(--gradient-color-2, #764ba2) var(--gradient-position-2, 100%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    display: block;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .dc-fullwidth-headline.dc-gradient-text {
        background: none;
        -webkit-text-fill-color: initial;
        color: var(--gradient-color-1, #667eea);
    }
}

.dc-fullwidth-headline a {
    color: inherit;
    text-decoration: none;
    display: inherit;
    width: inherit;
    line-height: inherit;
    font-weight: inherit;
    background: inherit;
    background-clip: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
}

.dc-fullwidth-headline a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.dc-fullwidth-headline:not(.dc-fitty-text) {
    font-size: clamp(
        var(--min-font-size, 2rem),
        8vw,
        var(--max-font-size, 6rem)
    );
}

@media (max-width: 768px) {
    .dc-fullwidth-headline.dc-fitty-text:not([style*="font-size"]) {
        font-size: clamp(var(--min-font-size, 20px), 6vw, var(--max-font-size, 80px));
    }

    .dc-fullwidth-headline:not(.dc-fitty-text) {
        font-size: clamp(
            var(--min-font-size, 1.5rem),
            10vw,
            var(--max-font-size, 4rem)
        );
    }
}

@media (max-width: 480px) {
    .dc-fullwidth-headline.dc-fitty-text:not([style*="font-size"]) {
        font-size: clamp(var(--min-font-size, 16px), 8vw, var(--max-font-size, 60px));
    }

    .dc-fullwidth-headline:not(.dc-fitty-text) {
        font-size: clamp(
            var(--min-font-size, 1.25rem),
            12vw,
            var(--max-font-size, 3rem)
        );
    }
}

@media print {
    .dc-fullwidth-headline {
        font-size: 36pt !important;
        color: black !important;
        background: none !important;
        -webkit-text-fill-color: initial !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-fullwidth-headline a:hover {
        transition: none;
    }
}