/* Hero banners – all pages (aligned with unionmonique.com) */

/* Shared hero content typography */
#wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h1,
#wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h2,
#wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h1,
#wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h2 {
    font-family: ManropeBold, helvetica, arial, sans-serif !important;
    font-weight: bold !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
}

#wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt p,
#wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow p {
    font-family: ManropeRegular, helvetica, arial, sans-serif !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ── Desktop (overlay + bottom text) ── */
@media screen and (min-width: 1025px) {
    #wrapper .jumbotron.jumbo-img.banner-hero {
        position: relative !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-color: #00205c !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.no-height-xs.half-height,
    #wrapper .jumbotron.jumbo-img.banner-hero.no-height-xs:not(.default-height) {
        height: 300px !important;
        min-height: 300px !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.no-height-xs.default-height,
    #wrapper #jumbo-600.jumbotron.jumbo-img.banner-hero {
        height: 380px !important;
        min-height: 380px !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .overlay {
        display: block !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero > .row {
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 1170px !important;
        margin: 0 !important;
        padding: 0 15px 32px !important;
        background: none !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero > .row > .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero.half-height .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero.default-height .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero .row.half-height .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero .row.default-height .hero-col-txt {
        min-height: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .hero-col-txt h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .text-noshadow h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .text-noshadow h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .hero-col-txt p,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .text-noshadow p {
        text-align: center !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt p,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow p {
        color: #fff !important;
        text-shadow: none !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-centered .text-noshadow {
        text-align: center !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-left .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-bg-txt-left .text-noshadow,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-txt-float .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero.col-txt-float .text-noshadow {
        text-align: left !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h2 {
        font-size: 2.25em !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt p {
        font-size: 1.25em !important;
    }

    #wrapper #hero.jumbotron.jumbo-img.banner-hero,
    #wrapper #banner-services.jumbotron.jumbo-img.banner-hero,
    #wrapper #hero-banner.jumbotron.jumbo-img.banner-hero,
    #wrapper #hero-top.jumbotron.jumbo-img.banner-hero,
    #wrapper #connect-banner.jumbotron.jumbo-img.banner-hero,
    #wrapper #jumbo-600.jumbotron.jumbo-img.banner-hero {
        background-size: cover !important;
        background-position: 65% center !important;
    }
}

/* ── Tablet / mobile stacked layout (image top, text below) ── */
@media screen and (max-width: 1024px) {
    #wrapper .jumbotron.jumbo-img.banner-hero {
        display: block !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 200px 0 0 !important;
        overflow: visible !important;
        background-color: #f6f6f6 !important;
        background-repeat: no-repeat !important;
        background-position: -250px 0 !important;
        background-size: 270% auto !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .overlay {
        display: none !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero > .row {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 28px 20px 36px !important;
        background: #f6f6f6 !important;
        box-sizing: border-box !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero [class*="col-md-"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        min-height: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt .text-noshadow,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow {
        text-align: center !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h2,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h1,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h2 {
        font-size: 1.875em !important;
        line-height: 1.4 !important;
        color: #073579 !important;
        text-shadow: none !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt p,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow p {
        font-size: 1.125em !important;
        line-height: 1.5 !important;
        color: #073579 !important;
        padding: 0 4px !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt .btn,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow .btn {
        display: inline-block !important;
        margin-top: 16px !important;
    }

    /* Override legacy inline .banner-hero { 125% } and broken contain rules */
    #wrapper .jumbotron.jumbo-img.banner-hero {
        background-size: 270% auto !important;
    }

    /* Business / personal interior heroes (#hero) – wider crop, not PPC portrait art */
    #wrapper #hero.jumbotron.jumbo-img.banner-hero,
    #wrapper #hero-banner.jumbotron.jumbo-img.banner-hero,
    #wrapper #hero-top.jumbotron.jumbo-img.banner-hero,
    #wrapper #jumbo-600.jumbotron.jumbo-img.banner-hero {
        background-size: 200% auto !important;
        background-position: top right !important;
        padding-top: 220px !important;
        background-color: #f6f6f6 !important;
    }

    /* Force readable navy copy below image (beats .text-white on mobile) */
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .hero-col-txt p,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow h1,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow h2,
    #wrapper .jumbotron.jumbo-img.banner-hero.text-white .text-noshadow p,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h1.text-white,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h2.text-white,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h1.text-white,
    #wrapper .jumbotron.jumbo-img.banner-hero .text-noshadow h2.text-white {
        color: #073579 !important;
    }
}

@media screen and (max-width: 512px) {
    #wrapper .jumbotron.jumbo-img.banner-hero {
        padding-top: 180px !important;
        background-position: -200px 0 !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero > .row {
        padding: 24px 16px 32px !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h1,
    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt h2 {
        font-size: 1.625em !important;
    }

    #wrapper .jumbotron.jumbo-img.banner-hero .hero-col-txt p {
        font-size: 1em !important;
    }
}

/* Homepage carousel */
@media screen and (max-width: 1150px) {
    #wrapper #randomBanner.jumbotron.jumbo-img {
        background-size: 160% !important;
        background-position: right top !important;
    }
}

@media screen and (max-width: 1024px) {
    #wrapper #randomBanner.jumbotron.jumbo-img.banner-hero {
        padding-top: 220px !important;
        background-size: 200% auto !important;
        background-position: right top !important;
    }
}

/* Interior page heroes without no-height-xs – desktop only */
@media screen and (min-width: 1025px) {
    #wrapper #hero.banner-hero:not(.no-height-xs),
    #wrapper #jumbo-600.banner-hero:not(.no-height-xs) {
        background-size: cover !important;
        background-position: 65% center !important;
    }
}