/*
=======================================================================
MG SERVICE AREAS — R4-R7
STRICT APPROVED MAP OVERLAY
=======================================================================
*/

/*
 * These classes are runtime-only and are assigned by the R4-R7 binder.
 * No header/global selectors are allowed here.
 */


/* ================================================================
   LOGO
================================================================ */

.mg-r4-r7-logo {
    display: block !important;

    width: clamp(235px, 22vw, 350px) !important;
    max-width: 350px !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;
    object-fit: contain !important;

    margin:
        0
        auto
        0
        auto
        !important;

    padding: 0 !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;

    /*
     * No dark logo halo.
     * Small blue illumination only.
     */
    filter:
        drop-shadow(0 0 4px rgba(5, 28, 68, .90))
        drop-shadow(0 0 8px rgba(12, 104, 190, .70))
        drop-shadow(0 0 12px rgba(115, 218, 255, .55))
        !important;
}


/* ================================================================
   COPY CONTAINER
================================================================ */

.mg-r4-r7-copy {
    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;
    align-items: center !important;

    position: relative !important;

    width: min(96%, 980px) !important;

    /*
     * Explicit physical separation from logo.
     */
    margin:
        24px
        auto
        0
        auto
        !important;

    padding: 0 16px !important;

    text-align: center !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;

    filter: none !important;

    z-index: 20 !important;
}


/* ================================================================
   TITLE FOUNDATION
================================================================ */

.mg-r4-r7-primary,
.mg-r4-r7-secondary {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    color: #ffffff !important;

    font-weight: 900 !important;
    font-style: italic !important;

    text-align: center !important;

    /*
     * IMPORTANT:
     * Completely neutralize inherited shadow/filter first.
     */
    filter: none !important;

    -webkit-filter: none !important;

    box-shadow: none !important;

    /*
     * ONLY BLACK:
     * exactly 3px glyph stroke.
     */
    -webkit-text-stroke:
        3px
        #000000
        !important;

    paint-order:
        stroke
        fill
        !important;

    /*
     * BLUE-ONLY progression.
     *
     * None of these values are black or charcoal.
     */
    text-shadow:
        0 0 2px rgba(4, 22, 62, 1),
        0 0 4px rgba(4, 38, 92, 1),
        0 0 6px rgba(4, 70, 145, .99),
        0 0 8px rgba(5, 113, 205, .98),
        0 0 10px rgba(31, 163, 238, .98),
        0 0 12px rgba(128, 225, 255, 1)
        !important;

    transform: none !important;
    translate: none !important;
    scale: none !important;
}


/* ================================================================
   LARGE APPROVED PRIMARY TITLE
================================================================ */

.mg-r4-r7-primary {
    font-size:
        clamp(54px, 5.6vw, 76px)
        !important;

    line-height:
        1.02
        !important;

    letter-spacing:
        -0.025em
        !important;

    margin-top:
        0
        !important;

    margin-bottom:
        10px
        !important;
}


/* ================================================================
   LARGE APPROVED SECONDARY TITLE
================================================================ */

.mg-r4-r7-secondary {
    font-size:
        clamp(31px, 3.7vw, 48px)
        !important;

    line-height:
        1.06
        !important;

    letter-spacing:
        -0.015em
        !important;

    margin-top:
        0
        !important;

    margin-bottom:
        0
        !important;
}


/* ================================================================
   DESCENDANT LEGACY NULLIFICATION
   Old build sometimes places spans/em/strong inside title elements.
================================================================ */

.mg-r4-r7-primary *,
.mg-r4-r7-secondary * {
    filter: none !important;
    -webkit-filter: none !important;

    box-shadow: none !important;

    -webkit-text-stroke:
        inherit
        !important;

    text-shadow:
        inherit
        !important;
}


/* ================================================================
   TRANSITION STATE
================================================================ */

.mg-r4-r7-logo,
.mg-r4-r7-copy,
.mg-r4-r7-primary,
.mg-r4-r7-secondary {
    animation-name: none !important;

    /*
     * opacity transitions remain allowed through JS/runtime,
     * but no movement is permitted.
     */
}


/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 780px) {

    .mg-r4-r7-logo {
        width:
            clamp(195px, 46vw, 275px)
            !important;
    }

    .mg-r4-r7-copy {
        margin-top:
            18px
            !important;
    }

    .mg-r4-r7-primary {
        font-size:
            clamp(38px, 9vw, 56px)
            !important;
    }

    .mg-r4-r7-secondary {
        font-size:
            clamp(25px, 6vw, 38px)
            !important;
    }
}