/*CSS FOR HACP PAGES*/

/*PUBLIC HOME PAGE*/
.block-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /*GAP BETWEEN BLOCKS*/
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: stretch;
}

    .block-container .hero {
        background-image: url('https://cihq-fsec.org/images/bg-emergency.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        min-height: 200px;
        padding-bottom: 1rem;
        overflow: hidden;
    }

    .block-container .content-block {
        flex: 1 1 calc((100% - 12px) / 2); /*2 PER ROW, RESPONSIVE*/
        background-color: #ededed;
        border: 1px solid #ccc;
        font-size: 1rem;
        font-weight: 500;
        color: #333;
        border-radius: 0;
        box-sizing: border-box;
        height: auto;
        padding: 0;
    }

    .block-container .overlay {
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 0;
    }

    .block-container .content-block .header {
        background-color: #002244;
        line-height: 1.3;
        padding: 1rem;
    }

@media (max-width: 767.98px) {
    .block-container .content-block {
        flex: 1 1 100%; /* 1 per row on phones */
    }
}

.hacp-hero-overlay {
    position: relative;
    width: 100%;
    height: 236px; /* FIXED height */
    overflow: hidden;
}

/* DARKENING OVERLAY (sits between images and text) */
.hacp-slide-darken {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* below text, above image */
    pointer-events: none;
    background: rgba(0, 34, 68, 0.6); /* default fallback */
}

    .hacp-slide-darken.slide1 {
        background: rgba(0, 34, 68, 0.55);
    }

    .hacp-slide-darken.slide2 {
        background: rgba(0, 34, 68, 0.70);
    }

    .hacp-slide-darken.slide3 {
        background: rgba(0, 34, 68, 0.75);
    }

.hacp-text-overlay {
    text-align: center;
    position: absolute;
    z-index: 5;
    color: #f8f9fa;
    text-shadow: 0 2px 8px rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    height: 100%; /* required so flex has vertical space */
}

    .hacp-text-overlay h2 {
        font-size: 1.8rem;
        margin: 1.5rem 0 0.75rem 0;
        line-height: 1.1;
        padding-left: 1rem;
        padding-right: 1rem;
        font-weight: 600;
    }

    .hacp-text-overlay ul {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;
    }

        .hacp-text-overlay ul li {
            font-size: 1.3rem;
            line-height: 1.3;
        }

    .hacp-text-overlay p {
        margin-top: auto; /* pushes it to the bottom */
        text-align: center;
        max-width: 100%;
        font-weight: normal;
        line-height: 1.25;
        font-size: .85rem;
        padding-left: 1rem;
        padding-right: 1rem;
        color: silver;
    }

/* SLIDE + IMAGE MUST MATCH FIXED HEIGHT */
#hacpCarousel .carousel-item {
    position: relative;
    height: 236px; /* match wrapper */
    overflow: hidden;
}

    #hacpCarousel .carousel-item img {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 236px;
        width: auto;
        min-width: 100%; /* prevents shrinking */
        object-fit: cover;
        object-position: right bottom;
    }

/*CERTIFIED PROFESSIONAL LIST*/
/* Base overlay badge shape */
.badge-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: bold;
    /* overlap */
    margin-left: -7px;
    z-index: 2;
}

.badge-inline:first-of-type {
    margin-left: 5px;
}

.badge-container {
    display: inline-flex;
    align-items: center;
    gap: -3px; /* spacing between icons */
}

/* Overlay badge colors (override Bootstrap) */
.badge-ten-year {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.badge-new {
    background-color: #0000cc !important;
    color: #fff !important;
}

.badge-renewal {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* Modal badge large versions */
.modal-badge-lg {
    font-size: 1rem;
    padding: .5rem .75rem;
    border-radius: .4rem;
}

.modal-ten-year,
.modal-new,
.modal-renewal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-weight: bold;
    border-radius: 50%;
    color: white;
}

.modal-ten-year {
    background-color: #dc3545;
}

.modal-new {
    background-color: #0000cc;
}

.modal-renewal {
    background-color: #6f42c1;
}

/* Main credential badges (override Bootstrap .badge) */
.cmsBadge {
    background-color: #333 !important; /* Dark gray */
    color: #ffffff !important;
}

.peBadge {
    background-color: #666 !important; /* Medium gray */
    color: #ffffff !important;
}

.icBadge {
    background-color: #999 !important; /* Light gray */
    color: #ffffff !important;
}

.triple-star {
    color: #D4AF37;
    font-size: 0.95rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    position: relative;
    top: -0.05rem;
}