/* ============================================================
   ST. MARY'S IOC COVENTRY — FRONTEND HOTFIX V3
   Load AFTER style-redesign-v2.css / style.css
   Frontend only: mobile navigation, icon contrast, mobile hero
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT AWESOME / ICON CONTRAST
   Default icons on light surfaces = navy, not gold.
   Gold is retained only as an accent where contrast is sufficient.
   ------------------------------------------------------------ */

/* Header / navigation icons */
.sf-menu .menu-description,
.sf-menu .menu-description i,
.sf-menu > li > a i,
header .fa,
header [class^="fa-"],
header [class*=" fa-"] {
    color: var(--navy, #1A2744) !important;
}

/* Hovered desktop menu can use gold because background stays light */
@media (min-width: 992px) {
    .sf-menu > li:hover > a .menu-description,
    .sf-menu > li:hover > a .menu-description i,
    .sf-menu > li.sfHover > a .menu-description,
    .sf-menu > li.sfHover > a .menu-description i {
        color: var(--gold, #C5973A) !important;
    }
}

/* Anything sitting on a gold button/surface must be white */
.btn-primary i,
.btn-submit i,
.slider p.button a i,
.quote-v1 .quote-button a i,
.scrollup i,
.top-social ul li a:hover i,
.footer-social .item ul li:hover a i,
.attorney-v1 .social-icons ul li a i,
.news-v1 .date .day i,
.service-v3-menu .active i,
.bg-gold i,
.gold-bg i,
[class*="gold"] > i,
[class*="gold"] > a > i {
    color: #fff !important;
}

/* Department tab: gold icon on navy is fine; active/hover gold surface = white */
.department-v1 .department-tab .nav-tabs > li > a span,
.department-v1 .department-tab .nav-tabs > li > a span i {
    color: var(--gold-light, #DEB96A) !important;
}

.department-v1 .department-tab .nav-tabs > li.active > a span,
.department-v1 .department-tab .nav-tabs > li.active > a span i,
.department-v1 .department-tab .nav-tabs > li > a:hover span,
.department-v1 .department-tab .nav-tabs > li > a:hover span i,
.department-v1 .department-tab .nav-tabs > li > a:focus span,
.department-v1 .department-tab .nav-tabs > li > a:focus span i {
    color: #fff !important;
}

/* ------------------------------------------------------------
   2. MOBILE / TABLET NAVIGATION
   IMPORTANT: undo the previous display:none on .menu-description.
   ------------------------------------------------------------ */
@media (max-width: 991px) {

    header,
    header.sticky {
        height: auto !important;
        min-height: 64px;
        z-index: 10050 !important;
    }

    header .container {
        position: relative;
        min-height: 64px;
    }

    header .logo {
        float: left !important;
        display: flex !important;
        align-items: center;
        max-width: calc(100% - 72px);
        min-height: 64px;
        padding: 7px 0 !important;
    }

    header .logo img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 50px !important;
    }

    header .nav-wrapper {
        float: none !important;
        clear: both !important;
        width: 100% !important;
    }

    /* Force hamburger visible even if Bootstrap/Superfish hides it */
    .navbar-toggle,
    header .navbar-toggle,
    .nav-wrapper .navbar-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        width: 46px !important;
        height: 44px !important;
        min-width: 46px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        background: #fff !important;
        border: 1px solid rgba(26,39,68,.24) !important;
        border-radius: 6px !important;
        z-index: 10070 !important;
        box-shadow: 0 2px 10px rgba(17,27,51,.08) !important;
    }

    .navbar-toggle .icon-bar,
    header .navbar-toggle .icon-bar {
        display: block !important;
        width: 23px !important;
        height: 2px !important;
        margin: 4px 0 !important;
        background-color: var(--navy, #1A2744) !important;
        border-radius: 2px !important;
        opacity: 1 !important;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus,
    .navbar-toggle:active {
        background: var(--navy, #1A2744) !important;
        border-color: var(--navy, #1A2744) !important;
    }

    .navbar-toggle:hover .icon-bar,
    .navbar-toggle:focus .icon-bar,
    .navbar-toggle:active .icon-bar {
        background-color: #fff !important;
    }

    /* Bootstrap collapse behaviour */
    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse.collapse.in,
    .navbar-collapse.in,
    .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navbar-collapse.collapsing {
        display: block !important;
    }

    .navbar-collapse {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-top: 1px solid #E7E2D7 !important;
        box-shadow: 0 10px 24px rgba(17,27,51,.12) !important;
        max-height: calc(100svh - 72px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sf-menu,
    .sf-menu > li,
    header .nav-wrapper ul {
        float: none !important;
        width: 100% !important;
    }

    .sf-menu > li {
        margin: 0 !important;
        border-bottom: 1px solid #ECE8DF !important;
        background: #fff !important;
    }

    /* Restore the menu icon hidden by V2 */
    .sf-menu .menu-description {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        margin: 0 10px 0 0 !important;
        border-radius: 50% !important;
        background: #F5EDD8 !important;
        color: var(--navy, #1A2744) !important;
        text-align: center !important;
    }

    .sf-menu .menu-description i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--navy, #1A2744) !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .sf-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 52px !important;
        padding: 9px 14px !important;
        color: var(--navy, #1A2744) !important;
        background: #fff !important;
        text-align: left !important;
    }

    .sf-menu .menu-title {
        display: inline-block !important;
        flex: 1 1 auto !important;
        text-align: left !important;
        color: var(--navy, #1A2744) !important;
        font-size: 13px !important;
    }

    .sf-menu > li:hover > a,
    .sf-menu > li.sfHover > a {
        background: var(--gold, #C5973A) !important;
        color: #fff !important;
    }

    .sf-menu > li:hover > a .menu-title,
    .sf-menu > li.sfHover > a .menu-title {
        color: #fff !important;
    }

    .sf-menu > li:hover > a .menu-description,
    .sf-menu > li.sfHover > a .menu-description {
        background: rgba(255,255,255,.18) !important;
        color: #fff !important;
    }

    .sf-menu > li:hover > a .menu-description i,
    .sf-menu > li.sfHover > a .menu-description i {
        color: #fff !important;
    }

    /* Keep CMS-generated submenus reachable on mobile once main menu opens */
    .navbar-collapse.in .sf-menu ul,
    .navbar-collapse.collapse.in .sf-menu ul,
    .navbar-collapse.show .sf-menu ul {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .sf-menu li li {
        background: #F8F6F1 !important;
        border-bottom: 1px solid rgba(26,39,68,.06) !important;
    }

    .sf-menu li li a,
    .sf-menu li li:hover a,
    .sf-menu li li:hover li a,
    .sf-menu ul ul li a {
        display: block !important;
        min-height: 42px !important;
        padding: 10px 18px 10px 58px !important;
        color: #3D4A5C !important;
        background: #F8F6F1 !important;
    }

    .sf-menu li li a:hover,
    .sf-menu ul ul li a:hover {
        color: var(--navy, #1A2744) !important;
        background: #F5EDD8 !important;
    }

    /* --------------------------------------------------------
       3. MOBILE HERO / BANNER
       Do not use desktop cover-crop on phones. Show the image much more
       completely and provide a navy canvas for any spare aspect-ratio area.
       -------------------------------------------------------- */
    .main-slider {
        overflow: hidden !important;
        background: var(--navy-deep, #111B33) !important;
    }

    .slider ul li {
        position: relative !important;
        width: 100% !important;
        height: clamp(360px, 72vw, 500px) !important;
        min-height: 360px !important;
        max-height: 500px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-color: var(--navy-deep, #111B33) !important;
    }

    .slider ul li .overlay {
        background: linear-gradient(
            to bottom,
            rgba(17,27,51,.20) 0%,
            rgba(17,27,51,.38) 45%,
            rgba(17,27,51,.88) 100%
        ) !important;
    }

    .slider ul li .content {
        display: flex !important;
        align-items: flex-end !important;
        width: 100% !important;
        height: 100% !important;
        padding: 28px 0 30px !important;
    }

    .slider ul li .inner {
        width: calc(100% - 32px) !important;
        max-width: 620px !important;
        margin: 0 auto !important;
    }

    .slider ul li .text::before {
        width: 34px !important;
        height: 3px !important;
        margin: 0 0 12px !important;
    }

    .slider h2 {
        margin: 0 0 7px !important;
        font-size: clamp(23px, 7vw, 31px) !important;
        line-height: 1.12 !important;
        color: #fff !important;
    }

    .slider h3 {
        margin: 0 0 10px !important;
        font-size: clamp(15px, 4.5vw, 19px) !important;
        color: #F0D18D !important;
    }

    .slider p:not(.button) {
        margin-bottom: 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: rgba(255,255,255,.88) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .slider p.button {
        margin-top: 14px !important;
    }

    .slider p.button a {
        min-height: 42px !important;
        padding: 10px 18px !important;
        background: var(--gold, #C5973A) !important;
        color: #fff !important;
    }

    .slider p.button a i {
        color: #fff !important;
    }
}

@media (max-width: 480px) {
    .slider ul li {
        height: clamp(340px, 88vw, 420px) !important;
        min-height: 340px !important;
        max-height: 420px !important;
    }

    .slider ul li .content {
        padding: 22px 0 24px !important;
    }

    .slider p:not(.button) {
        -webkit-line-clamp: 1 !important;
    }
}