/*
 * ST. MARY'S IOC COVENTRY
 * MOBILE SLIDER TEXT CONTRAST FIX V1
 *
 * Frontend only.
 * Load LAST after all slider/mobile/theme CSS.
 *
 * Purpose:
 * - Keep homepage slider text readable on phones
 * - Override global navy/black heading rules
 * - Preserve desktop appearance
 */

@media (max-width: 767px) {

    /* ---------------------------------------------------------
       1. FORCE MOBILE HERO TEXT TO CONTRAST
       Covers both original BXSlider markup and the rebuilt mobile slider.
       --------------------------------------------------------- */

    .main-slider h1,
    .main-slider h2,
    .main-slider .inner h1,
    .main-slider .inner h2,
    .main-slider .text h1,
    .main-slider .text h2,
    .slider h1,
    .slider h2,
    .slider ul li h1,
    .slider ul li h2 {
        color: #FFFFFF !important;
        text-shadow:
            0 2px 4px rgba(0,0,0,.85),
            0 4px 16px rgba(0,0,0,.55) !important;
    }

    .main-slider h3,
    .main-slider h4,
    .main-slider .inner h3,
    .main-slider .inner h4,
    .main-slider .text h3,
    .main-slider .text h4,
    .slider h3,
    .slider h4,
    .slider ul li h3,
    .slider ul li h4 {
        color: #F0D18D !important;
        text-shadow:
            0 2px 4px rgba(0,0,0,.85),
            0 3px 12px rgba(0,0,0,.50) !important;
    }

    .main-slider p:not(.button),
    .main-slider .inner p:not(.button),
    .main-slider .text p:not(.button),
    .slider p:not(.button),
    .slider ul li p:not(.button) {
        color: rgba(255,255,255,.96) !important;
        text-shadow:
            0 1px 3px rgba(0,0,0,.90),
            0 3px 10px rgba(0,0,0,.45) !important;
    }

    /* Inline CMS spans sometimes carry their own dark colour. */
    .main-slider h1 span,
    .main-slider h2 span,
    .main-slider .text h1 span,
    .main-slider .text h2 span,
    .slider h1 span,
    .slider h2 span {
        color: #FFFFFF !important;
    }

    .main-slider h3 span,
    .main-slider h4 span,
    .main-slider .text h3 span,
    .main-slider .text h4 span,
    .slider h3 span,
    .slider h4 span {
        color: #F0D18D !important;
    }

    .main-slider p:not(.button) span,
    .slider p:not(.button) span {
        color: rgba(255,255,255,.96) !important;
    }


    /* ---------------------------------------------------------
       2. SUBTLE LOCAL CONTRAST BEHIND TEXT
       Does not darken the whole image; only protects the copy.
       --------------------------------------------------------- */

    .main-slider .text,
    .slider ul li .text {
        position: relative !important;
        z-index: 3 !important;

        padding: 10px 14px 12px !important;

        background:
            linear-gradient(
                90deg,
                rgba(10,18,34,.72) 0%,
                rgba(10,18,34,.42) 72%,
                rgba(10,18,34,0) 100%
            ) !important;

        border-radius: 8px !important;
    }


    /* ---------------------------------------------------------
       3. KEEP BUTTON TEXT WHITE / CLEAN
       --------------------------------------------------------- */

    .main-slider p.button,
    .slider p.button {
        text-shadow: none !important;
    }

    .main-slider p.button a,
    .slider p.button a {
        color: #FFFFFF !important;
        text-shadow: none !important;
    }


    /* ---------------------------------------------------------
       4. MOBILE TYPE SCALE
       Prevent long titles from covering too much of the photo.
       --------------------------------------------------------- */

    .main-slider h1,
    .main-slider h2,
    .slider h1,
    .slider h2 {
        font-size: clamp(22px, 6.8vw, 29px) !important;
        line-height: 1.08 !important;
        margin-bottom: 6px !important;
    }

    .main-slider h3,
    .slider h3 {
        font-size: clamp(14px, 4.3vw, 17px) !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .main-slider p:not(.button),
    .slider p:not(.button) {
        font-size: 13px !important;
        line-height: 1.42 !important;
    }
}


/* Very small phones */
@media (max-width: 380px) {
    .main-slider .text,
    .slider ul li .text {
        padding: 8px 10px 10px !important;
    }

    .main-slider h1,
    .main-slider h2,
    .slider h1,
    .slider h2 {
        font-size: clamp(20px, 6.5vw, 25px) !important;
    }
}