/**
 * Global CSS for Highlight Heading module.
 * Shared styles that apply to all instances.
 */

/* Base heading reset - higher specificity to override theme */
.fl-builder-content .fm-highlight-heading,
.fl-module-fm-highlight-heading .fm-highlight-heading {
    margin: 0;
    padding: 0;
    position: relative;
}

.fm-highlight-heading a {
    text-decoration: none;
    color: inherit;
}

.fm-highlight-heading a:hover {
    text-decoration: none;
}

/* Text spans base */
.fm-highlight-heading span {
    display: inline;
}

/* Highlighted spans need inline-block + nowrap to prevent SVG wrapping issues */
.fm-highlight-heading .highlight {
    position: relative;
    display: inline;
    white-space: normal;
    overflow: visible;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    z-index: 1;
}

/* Spacing between segments is handled per-instance (see frontend.css.php). */

/* SVG base styles */
.fm-highlight-heading .highlight-svg {
    position: absolute;
    fill: none;
    pointer-events: none;
    overflow: visible;
    z-index: -1;
}

/**
 * Heading Size Presets
 * Applied via class on .fm-highlight-heading element
 */

/* Large Heading */
.fm-highlight-heading.large-heading {
    font-size: 3rem;
}

/* Extra Large Heading */
.fm-highlight-heading.xl-heading {
    font-size: 4.5rem;
}

/* XXL Heading */
.fm-highlight-heading.xxl-heading {
    font-size: 6rem;
}

/* Eyebrow */
.fm-highlight-heading.eyebrow {
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

/**
 * Responsive Step-Down for Large Heading Sizes
 * Desktop -> Tablet -> Mobile progression
 */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .fm-highlight-heading.xxl-heading {
        font-size: 4.5rem;
    }
    .fm-highlight-heading.xl-heading {
        font-size: 3rem;
    }
    .fm-highlight-heading.large-heading {
        font-size: 2.5rem;
    }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
    .fm-highlight-heading.xxl-heading {
        font-size: 3rem;
    }
    .fm-highlight-heading.xl-heading {
        font-size: 2.25rem;
    }
    .fm-highlight-heading.large-heading {
        font-size: 2rem;
    }
}