/*
 * Carnival Collective — homepage heading typography
 * Loaded last in Views/Home/Index.cshtml, after reviews, gigs and Bandcamp CSS.
 * Scoped to #scrollRoot so it does not affect Admin, Music or Gigs standalone pages.
 */

/* Every actual heading, plus Bootstrap heading utilities, uses the band's display font. */
#scrollRoot :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
#scrollRoot .book-left .fs-3 {
    font-family: 'Luckiest Guy', Impact, sans-serif !important;
    font-weight: 400 !important;
}

/* League Spartan's tight tracking looks cramped when replaced with Luckiest Guy. */
#scrollRoot #reviews :is(h2, h3) {
    letter-spacing: .015em;
}

/* Don't clip enlarged, outlined final words at line edges. */
#scrollRoot #bandcamp-home .cc-bandcamp-carousel__heading h2,
#scrollRoot #gigs .cc-upcoming-gigs__header h2 {
    overflow: visible;
    padding-bottom: .10em;
    text-wrap: balance;
}

/* Matching oversized, outlined gradient treatments for HOME. and LIVE! */
#scrollRoot #bandcamp-home .cc-bandcamp-carousel__heading h2 > span,
#scrollRoot #gigs .cc-upcoming-gigs__header h2 > span {
    display: inline-block;
    position: relative;
    vertical-align: -.055em;
    padding: .035em .065em .055em;
    margin-inline: .015em;
    font-family: 'Luckiest Guy', Impact, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.30em !important;
    line-height: .92;
    letter-spacing: .008em;
    white-space: nowrap;

    /* Visible colour fallback; modern browsers show the gradient. */
    color: #16c5e9;
    background-image: linear-gradient(105deg,
        #ff259a 0%,
        #fb369f 19%,
        #ab62bd 40%,
        #25c2ed 73%,
        #034456 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Comic-style dark border, then a small dimensional shadow. */
    -webkit-text-stroke: 2.2px #0a0b17;
    paint-order: stroke fill;
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .75));
}

/* On narrow phones, retain the larger words without making the line unwieldy. */
@media (max-width: 600px) {
    #scrollRoot #bandcamp-home .cc-bandcamp-carousel__heading h2 > span,
    #scrollRoot #gigs .cc-upcoming-gigs__header h2 > span {
        font-size: 1.22em !important;
        -webkit-text-stroke-width: 1.6px;
        filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .75));
    }
}