/* Fonts — Spectral (headlines) + Inter (body). Free stand-ins for the
   brand spec serif (Spectral) and sans (Inter). */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Sapphire — brand spec #0E4773. Replaces the previous off-brand #124673. */
    --cca-blue: #0e4773;
    --cca-blue-tint: #3e6c8f;
    --cca-blue-shade: #0b395c;
    /* Vestment — brand spec #DAC49B. Snapped to exact value. */
    --cca-brown: #dac49b;
    --cca-brown-tint: #e1d0af;
    --cca-brown-shade: #ae9d7c;
    /* Aubergine — brand spec #453C5E. Snapped to exact value. */
    --cca-purple: #453c5e;
    --cca-purple-tint: #6a637e;
    --cca-purple-shade: #37304b;
    /* Burgundy — brand spec #8C182E. Snapped to exact value.
       Note: --cca-red-tint was previously missing its '#' and silently broken. */
    --cca-red: #8c182e;
    --cca-red-tint: #a34658;
    --cca-red-shade: #701325;
    /* Midnight — brand spec #102940. Exact match. */
    --cca-dkblue: #102940;
    --cca-dkblue-tint: #405466;
    --cca-bkblue-shade: #0a1926;
    /* Body text uses Midnight per brand rule "never pure black; Midnight
       replaces it for every near-black need." Variable name kept as
       --black-color so existing references don't need to change. */
    --black-color: #102940;
    --white-color: #ffffff;
    --cca-brown-dark: #6b5c3e;
    /* MDB / Bootstrap framework variable overrides — kills the default
       link blue #3B71CA that was reading as "stock template." */
    --bs-primary: #0e4773;
    --bs-link-color: #0e4773;
    --bs-link-hover-color: #102940;
    --mdb-primary: #0e4773;
    --bs-body-color: #102940;
    --bs-body-color-rgb: 16, 41, 64;
    --bs-link-color-rgb: 14, 71, 115;
}


body {
    font-family: 'Inter', 'Untitled Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.7;
    color: var(--black-color);
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--cca-dkblue); /* Midnight per brand: headings anchor in Midnight, not Sapphire-shade */
    font-family: 'Spectral', Georgia, serif;
    
    letter-spacing: -0.005em;
    line-height: 1.15;
}

h1, .h1, .display-1, .display-2, .display-3, .display-4 {
    
    letter-spacing: -0.01em;
}

/* Hero eyebrow — small Inter label that sits above the slide headline.
   Replaces the old uppercase H1 treatment. */
.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    margin: 0 0 0.5rem;
    opacity: 0.92;
}

/* Tagline — italic Spectral, used sparingly for "Faith, Hope, and Remembrance"
   and any pull-quote moments. */
.tagline {
    font-family: 'Spectral', serif;
    font-style: italic;
    
    font-weight: 400;
}

/* Values section subheadings */
.values-title {
    font-size: 1rem;
    font-weight: 700 !important;
}

/* Softer drop shadow on hero text — avoids pure black, uses Midnight
   at low opacity instead. Brand rule: never pure black. */
.text-cca {
    text-shadow: 0 2px 8px rgba(16, 41, 64, 0.55);
}

.red-text {
    color: var(--cca-red)
}

.purple-text {
    color: var(--cca-purple)
}

.text-blue {
    color: var(--cca-blue)
}

.figure-caption-cca {
    font-size: 0.875em;
    color: var(--cca-dkblue);
}

.background {
    background-color: #f3f3f5;
}

.highlight-text {
    color: var(--red-color);
}

.alert-info-cca {
    background-color: var(--mdb-info-bg-subtle);
    color: var(--black-color);
}

.mask-cca {
    backdrop-filter: blur(0px);
    background-color: rgba(16, 41, 64, 0.45); /* Midnight at 45% — replaces the off-palette slate gray */
}

.badge-cca {
    background-color: var(--cca-brown);
    color: var(--cca-dkblue); /* Midnight on Vestment — brand-spec contrast pairing (10:1) */
}

.badge-blue {
    background-color: var(--cca-blue);
    color: var(--white-color);
}

.badge-purple {
    background-color: var(--cca-purple);
    color: var(--white-color);
}

.badge-red {
    background-color: var(--cca-red);
    color: var(--white-color);
}

/* 01 fleur de lis icon*/
.icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url("icon-set.png") no-repeat;
}

    .icon.icon-fleur {
        background-position: 0 0;
    }

/* 02 Icons */
.icons-cca {
    font-size: 1rem; /* Change icon size */
    color: #ecebef; /* light purple */
    background-color: var(--cca-purple); /* dark background */
    padding: 10px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.social-links a {
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 18px;
    border-radius: 100%;
    transition: color 0.2s ease, background-color 0.2s ease;
}

    .social-links a:hover {
        background-color: var(--cca-brown);
        color: var(--cca-dkblue);
    }

/* 03 Buttons */
.btn-cca {
    background-color: var(--cca-blue);
    color: var(--white-color);
    border-color: var(--cca-blue);
}

    .btn-cca:hover {
        background-color: var(--cca-dkblue); /* Midnight hover — anchor down, not sideways */
        color: var(--white-color);
        border-color: var(--cca-dkblue);
    }

.btn-cca2 {
    background-color: var(--cca-purple);
    color: var(--white-color);
    border-color: var(--cca-purple);
}

    .btn-cca2:hover {
        background-color: var(--cca-purple-shade);
        color: var(--white-color);
        border-color: var(--cca-purple-shade);
    }

.btn-cca3 {
    background-color: var(--cca-brown);
    color: var(--cca-dkblue); /* Midnight text on Vestment — brand-spec pairing */
    border-color: var(--cca-brown);
}

    .btn-cca3:hover {
        background-color: var(--cca-brown-shade);
        color: var(--cca-dkblue);
        border-color: var(--cca-brown-shade);
    }

.btn-cca4 {
    background-color: var(--cca-red);
    color: var(--white-color);
    border-color: var(--cca-red);
}

    .btn-cca4:hover {
        background-color: var(--cca-red-shade); /* darker burgundy on hover */
        color: var(--white-color);
        border-color: var(--cca-red-shade);
    }

/* 04 blogbox */
.blog-box {
    display: flex;
    align-items: center;
}

    .blog-box img {
        width: 150px;
        margin-right: 18px;
    }

.event-info .event-info-title-wrapper {
    display: flex;
    align-items: center;
}

    .event-info .event-info-title-wrapper .event-info-date-blue {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--cca-blue);
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
    }

        .event-info .event-info-title-wrapper .event-info-date-blue .event-info-date-day {
            color: #fff;
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 1;
        }

        .event-info .event-info-title-wrapper .event-info-date-blue .event-info-date-month {
            color: #fff;
            line-height: 1;
            font-size: 1rem;
            text-transform: uppercase;
        }

    .event-info .event-info-title-wrapper .event-info-date-red {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--cca-red);
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
    }

        .event-info .event-info-title-wrapper .event-info-date-red .event-info-date-day {
            color: #fff;
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 1;
        }

        .event-info .event-info-title-wrapper .event-info-date-red .event-info-date-month {
            color: #fff;
            line-height: 1;
            font-size: 1rem;
            text-transform: uppercase;
        }

    .event-info .event-info-title-wrapper .event-info-date-purple {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--cca-purple);
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
    }

        .event-info .event-info-title-wrapper .event-info-date-purple .event-info-date-day {
            color: #fff;
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 1;
        }

        .event-info .event-info-title-wrapper .event-info-date-purple .event-info-date-month {
            color: #fff;
            line-height: 1;
            font-size: 1rem;
            text-transform: uppercase;
        }

    .event-info .event-info-title-wrapper .event-info-date-brown {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: var(--cca-brown-dark);
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
    }

        .event-info .event-info-title-wrapper .event-info-date-brown .event-info-date-day {
            color: #fff;
            font-weight: 500;
            font-size: 1.5rem;
            line-height: 1;
        }

        .event-info .event-info-title-wrapper .event-info-date-brown .event-info-date-month {
            color: #fff;
            line-height: 1;
            font-size: 1rem;
            text-transform: uppercase;
        }

    .event-info .event-info-title-wrapper .event-info-meeting {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;
    }

        .event-info .event-info-title-wrapper .event-info-meeting .event-info-pro-title {
            color: var(--black-color);
            font-size: 14px;
        }

        .event-info .event-info-title-wrapper .event-info-meeting .event-info-meeting-time {
            color: var(--cca-red);
            font-size: 14px;
        }

/* 05 top row */
.top-nav {
    background-color: var(--cca-blue);
    padding-top: 5px;
    padding-bottom: 5px;
}

    .top-nav p {
        margin-bottom: 0;
        display: inline-block;
        margin-right: 16px;
        color: var(--white-color);
    }

    .top-nav i,
    .top-nav span {
        vertical-align: middle;
    }

/* 06 nav */

.navbar {
    background-color: var(--white-color) !important;
    box-shadow: 0px 6px 30px rgba(16, 41, 64, 0.08); /* Midnight-tinted shadow, not pure black */
}

    .navbar .navbar-brand img {
        width: 20rem;
        height: auto;
        object-fit: cover;
    }

    .navbar .navbar-nav .nav-link {
        color: var(--cca-dkblue); /* Midnight on white — brand-spec primary text on paper */
        font-family: 'Inter', sans-serif;
        font-weight: 500;
    }

    .navbar .dropdown-item {
        color: var(--cca-dkblue);
        font-family: 'Inter', sans-serif;
        font-weight: 500;
    }

.nav-item:hover > .dropdown-toggle::after,
.nav-link.dropdown-toggle.show {
    color: var(--cca-blue); /* Sapphire on hover */
}

.dropdown-item:focus,
.dropdown-item:hover,
.navbar .navbar-nav .nav-link:hover {
    color: var(--cca-blue);
    background-color: transparent;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.navbar .navbar-toggler {
    color: var(--cca-dkblue);
    padding: 0;
}

    .navbar .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
        color: var(--cca-blue);
    }

/* 07 footer */
.bottom-footer {
    background-color: var(--cca-dkblue);
    padding-top: 5px;
    padding-bottom: 20px;
}

    .bottom-footer p {
        margin-bottom: 0;
        display: inline-block;
        margin-right: 16px;
        color: var(--white-color);
    }

.main-footer {
    background-color: var(--cca-blue);
    padding-top: 0.5em;
}

    .main-footer p {
        color: var(--white-color);
    }



    .main-footer a:not([class]) {
        color: var(--white-color);
        font-weight: 500;
        font-family: 'Inter', sans-serif;
    }

        .main-footer a:not([class]):hover {
            color: var(--cca-brown);
            background-color: transparent;
        }


/* Blog card links */
.card-link {
    color: var(--cca-blue);
    font-weight: 600;
    text-decoration: underline;
}

    .card-link:hover {
        color: var(--cca-dkblue);
        text-decoration: underline;
    }


/* PDF link indicator - excludes buttons */
a[href$=".pdf"]:not(.btn)::after {
    content: " (PDF)";
    font-size: 0.8em;
    font-weight: 600;
    color: var(--cca-red);
}

/* PDF label needs to be readable on dark footer backgrounds — Vestment
   reads cleanly on Sapphire (~6.5:1 contrast) and matches the warm tone
   already used for icons and headings in that band. */
.main-footer a[href$=".pdf"]:not(.btn)::after,
.bottom-footer a[href$=".pdf"]:not(.btn)::after {
    color: var(--cca-brown);
}


/* 08 custom alert box */
.alert-custom {
    background-color: #e9f3f7;
    border: none;
    color: var(--cca-dkblue); /* Midnight text — replaces pure black */
    border-radius: 0.5rem;
}

    .alert-custom .alert-icon,
    .alert-custom i,
    .alert-custom svg {
        color: var(--cca-dkblue);
        fill: var(--cca-dkblue);
    }

.checklist-card {
    border-radius: 1rem;
}

.section-title {
    letter-spacing: .3px;
}

.form-check {
    margin-bottom: .4rem;
}

.form-check {
    margin-bottom: .35rem;
}

.visitation-table td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.contact-list i,
.quickfacts i {
    color: var(--cca-red);
}

.quickfacts .col {
    display: flex;
    align-items: center;
}

.hours-section h1 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--cca-dkblue); /* Midnight — replaces the previous #333 grey */
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.hours-label {
    color: var(--cca-dkblue);
}

.hours-time {
    color: var(--cca-dkblue);
    white-space: nowrap;
}

/* === Brand cascade enforcement === */
a:not([class]) {
    color: var(--cca-blue);
}

.dropdown-menu,
.dropdown-item {
    color: var(--cca-dkblue);
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--cca-blue);
        background-color: transparent;
    }

a:not([class]):hover {
    color: var(--cca-dkblue);
}