/* ===========================================================
   APMech iView Slider – Branding Overrides (Blue on Yellow)
   - Blue text on Yellow background (captions only)
   - Preserve Bootstrap button colours
   - Mobile tweak: darken yellow ≤ 576px
   - Subtle text-shadow for readability
   =========================================================== */

/* ---- Brand tokens ---- */
:root {
    --apmech-blue: #32356e; /* rgb(50,53,110) text colour */
    --apmech-yellow: #f7de43; /* rgb(247,222,67) background colour */
    --apmech-yellow-mobile: #f2d523; /* slightly darker yellow for contrast on small screens */
    --apmech-text-shadow: 0 1px 2px rgba(0,0,0,.45);
    --apmech-text: var(--apmech-blue); /* or yellow/red depending on that file */
}

/* 1) Remove old white enforcement */
.iview-caption.text-center * {
    color: inherit;
}

/* 2) Ensure captions have a solid yellow background even with bg-no-caption */
.iview-caption,
.iview-caption.bg-no-caption {
    background-color: var(--apmech-yellow) !important;
    /* Optional translucency alternative:
     background-color: rgba(247,222,67,.92) !important; */
}

    /* 3) Caption text is blue (headings + paragraphs + text classes) */
    .iview-caption h1,
    .iview-caption h2,
    .iview-caption h3,
    .iview-caption h4,
    .iview-caption h5,
    .iview-caption h6,
    .iview-caption p,
    .iview-caption .light-font,
    .iview-caption .lead {
        color: var(--apmech-blue) !important;
        text-shadow: var(--apmech-text-shadow);
    }

    /* 4) Non-button links inside captions also blue */
    .iview-caption a:not(.btn) {
        color: var(--apmech-blue) !important;
        text-decoration-color: var(--apmech-blue);
        text-shadow: var(--apmech-text-shadow);
    }

        .iview-caption a:not(.btn):hover,
        .iview-caption a:not(.btn):focus {
            opacity: .92;
            text-decoration: underline;
        }

    /* 5) Keep Bootstrap button colours untouched */
    .iview-caption .btn,
    .iview-caption .btn * {
        color: inherit;
        background: inherit;
        border-color: inherit;
        text-shadow: none;
    }

    /* 6) Center alignment consistency */
    .iview-caption.text-center * {
        text-align: center !important;
    }

/* 7) Caption container fine-tune */
.iview-caption {
    border-radius: 0;
    text-shadow: var(--apmech-text-shadow);
}

/* 8) Mobile tweak: darker yellow for legibility */
@media (max-width: 576px) {
    .iview-caption,
    .iview-caption.bg-no-caption {
        background-color: var(--apmech-yellow-mobile) !important;
    }

        .iview-caption p {
            font-size: 1.0625rem;
            line-height: 1.45;
        }
}

/* 9) Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .iview-caption a:not(.btn) {
        transition: none !important;
    }
}

/* 10) Defensive inheritance */
.iview-caption * {
    color: inherit;
}

/* 11) Maintain visibility of navigation arrows */
#iview div.iview-directionNav a {
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

    #iview div.iview-directionNav a:hover {
        opacity: 0.95;
    }

/* 12) Remove any heavy caption shadow from theme skins */
.iview-caption.caption1,
.iview-caption.caption2,
.iview-caption.caption3 {
    box-shadow: none;
}

/* ===========================================================
   13) Button text + icon use theme text colour inside captions
   =========================================================== */

.iview-caption a.btn.btn-primary,
.iview-caption a.btn.btn-primary:hover,
.iview-caption a.btn.btn-primary:focus,
.iview-caption a.btn.btn-primary:active {
    color: var(--apmech-text) !important;
}

    .iview-caption a.btn.btn-primary .btn-icon,
    .iview-caption a.btn.btn-primary .btn-icon i,
    .iview-caption a.btn.btn-primary:hover .btn-icon i,
    .iview-caption a.btn.btn-primary:focus .btn-icon i,
    .iview-caption a.btn.btn-primary:active .btn-icon i {
        color: var(--apmech-text) !important;
    }