/* =====================
   ACS — Paleta v3 (default)
   Navbar/bands: azul #191845 → turquesa #469CAA (gradiente)
   Acento: verde #8D9E30
   Blanco como fondo principal
   ===================== */
:root {
    --ts-bump: 0px;
    --acs-green: #8D9E30;
    --acs-green-lt: #A0B235;
    --acs-fuchsia: #C8317A;
    --acs-fuchsia-lt: #D9458A;
    --acs-navy: #191845;
    --acs-teal: #469CAA;
    --acs-teal-lt: #57AEBA;
    --acs-gray: #808080;
    --acs-light: #F8F8F8;
    --acs-light-lt: #FFFFFF;
    --acs-dark: #222222;
    --acs-dark-lt: #000000;
    --acs-nav-gradient: linear-gradient(90deg, #191845 30%, #469CAA 100%);
}

/* HTML TEXT ELEMENTS — responsive scale via --ts-bump
   Base values match Bootstrap 5 defaults; calc() adds the breakpoint offset. */
h1 {
    font-size: calc(2.5rem  + var(--ts-bump));
}

h2 {
    font-size: calc(2rem    + var(--ts-bump));
}

h3 {
    font-size: calc(1.75rem + var(--ts-bump));
}

h4 {
    font-size: calc(1.5rem  + var(--ts-bump));
}

h5 {
    font-size: calc(1.25rem + var(--ts-bump));
}

h6 {
    font-size: calc(1rem    + var(--ts-bump));
}

p {
    font-size: calc(1rem    + var(--ts-bump));
}

/* NAV */
.navbar {
    background: var(--acs-nav-gradient) !important;
    --bs-navbar-toggler-focus-width: 1px;
}

.navbar-brand img {
    height: 52px;
}

.navbar-toggler {
    border: 1px solid #fff !important;
    color: #fff !important;
    padding: .45rem .65rem;
}

.acs-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
}

.acs-hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: transform .3s ease, opacity .2s ease;
}

ul.menu {
    align-items: center;
}

.navbar-toggler[aria-expanded="true"] .acs-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .acs-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.navbar-toggler[aria-expanded="true"] .acs-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-nav .nav-link {
    color: rgba(255,255,255,.85);
    font-size: .9rem;
    letter-spacing: .04em;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--acs-light);
}

.navbar-nav .nav-link.active:hover {
    text-decoration: none;
}

.navbar-nav .nav-link:hover {
    text-decoration: underline;
}

.navbar-nav .dropdown .nav-link:hover,
.navbar-nav .dropdown .nav-link:active {
    color: var(--acs-light);
}

.navbar-nav .dropdown .nav-link:active {
    font-weight: bold;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--acs-light);
    background-color: var(--acs-teal);
    border-radius: 7px;
    padding-block: 5px;
}

.navbar-nav .dropdown .nav-link.show {
    background-color: transparent;
    color: var(--acs-light);
    text-decoration: none;
    font-weight: bold;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: transparent;
    color: var(--acs-navy);
}

[data-bs-theme="dark"] {
    .navbar-nav .nav-link.active {
        background-color: var(--acs-teal);
    }

    .navbar-nav .nav-link:hover {
        color: var(--bs-light);
    }

    .navbar-nav .dropdown .nav-link.show {
        color: var(--acs-light);
    }

    .themeSwitcher:hover {
        color: var(--acs-teal) !important;
    }
}

@media (min-width: 991.98px) {
    .navbar-nav .nav-link.show {
        color: var(--acs-light);
    }

    .navbar-nav .dropdown .nav-link.show {
        color: var(--acs-light);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        margin-top: 15px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse .nav-link {
        text-align: center;
        color: var(--bs-light);
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding: .75rem 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse .btn-interest,
    .navbar-collapse .themeSwitcher {
        display: block;
        margin: .5rem auto;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse .themeSwitcher {
        border-radius: 50px !important;
        padding: .4rem 1.2rem;
        width: auto;
    }
}

.btn.btn-interest {
    background-color: var(--acs-green);
    color: #fff;
    border: none;
    font-size: .85rem;
    padding: .4rem 1.1rem !important;
    border-radius: 50px !important;
}

.btn.btn-interest:hover {
    background-color: var(--acs-green-lt);
    color: #fff;
    text-decoration: none;
}

/* HERO */
.hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Capa 0 — fondo: imagen, video o color sólido */
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--acs-gray);
}

.hero-bg img,
.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Capa 1 — textura SVG (entre video e imagen y el overlay de color) */
.hero-texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-texture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Capa 2 — overlay de opacidad/color */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--hero-overlay, rgba(0,0,0,.45));
}

.hero-overlay--light {
    --hero-overlay: rgba(0,0,0,.25);
}

.hero-overlay--dark {
    --hero-overlay: rgba(0,0,0,.65);
}

.hero-overlay--navy {
    --hero-overlay: rgba(25,24,69,.65);
}

.hero-overlay--gradient {
    --hero-overlay: linear-gradient(135deg, rgba(25,24,69,.85) 0%, rgba(70,156,170,.55) 100%);
}

/* Capa 3 — contenido */
.hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.hero-content h1 {
    font-size: calc(2.5rem + var(--ts-bump));
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

@media (min-width: 992px) {
    .hero-content h1 {
        font-size: calc(3.5rem + var(--ts-bump));
        letter-spacing: .12em;
    }
}

/* BAND MEDIA — band con capas bg/texture/overlay como el hero */
.band-media {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.band-media .bm-bg {
    position: absolute;
    inset: 0;
}

.band-media .bm-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.band-media .bm-texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.band-media .bm-texture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.band-media .bm-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--bm-overlay, rgba(25,24,69,.65));
}

.band-media .bm-overlay--light {
    --bm-overlay: rgba(0,0,0,.25);
}

.band-media .bm-overlay--dark {
    --bm-overlay: rgba(0,0,0,.65);
}

.band-media .bm-overlay--navy {
    --bm-overlay: rgba(25,24,69,.65);
}

.band-media .bm-overlay--teal {
    --bm-overlay: rgba(70,156,170,.75);
}

.band-media .bm-overlay--gradient {
    --bm-overlay: linear-gradient(135deg, rgba(25,24,69,.85) 0%, rgba(70,156,170,.55) 100%);
}

.band-media .bm-content {
    position: relative;
    z-index: 3;
}

/* SECTION SPACING */
section {
    padding-top: 30px;
    padding-bottom: 30px;
}

@media (min-width: 768px) {
    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (min-width: 1200px) {
    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

/* SECTION HEADINGS */
.section-post-category {
    /* color: var(--acs-teal); */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 50%;
    font-size: small;
}

.section-post-title {
    /* color: var(--acs-teal); */
    font-weight: 700;
    text-transform: none;
    margin-bottom: 20px;
}

.section-title {
    font-weight: 700;
    text-transform: normal;
    margin-bottom: 15px;
}

.post-title {
    /* color: var(--acs-teal); */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.section-subtitle {
    /* color: var(--acs-navy); */
    opacity: 75%;
    margin-bottom: 20px;
}

/* BANDS */
.band-green {
    background-color: var(--acs-green);
    color: #fff;
}

.band-fuchsia {
    background-color: var(--acs-fuchsia);
    color: #fff;
}

.band-navy {
    background-color: var(--acs-navy);
    color: #fff;
}

.band-teal {
    background-color: var(--acs-teal);
    color: #fff;
}

.band-gradient {
    background: var(--acs-nav-gradient);
    color: #fff;
}

.band-light {
    background-color: var(--acs-light);
}

/* ICON CARDS */
.icon-card {
    text-align: center;
    padding: 1.5rem 1rem;
}

.icon-card .icon-circle img {
    padding: 15px;
}

.icon-card .icon-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;

    /* background: #fff; */
    /* color: #111; */
    border: 2px solid #e0e0e0;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.icon-card h5 {
    font-size: calc(.95rem + var(--ts-bump));
    font-weight: 700;
    color: #111;
}

/* FPO IMAGES */
.fpo {
    background-color: var(--acs-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* CTA BAND */
.cta-band {
    background-color: var(--acs-navy);
    color: #fff;
    padding: 3rem 1rem;
    text-align: center;
}

.cta-band h2 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.btn.btn-acs {
    background-color: #fff;
    color: #111;
    border: 2px solid #111;
    padding: .6rem 1.8rem;
    font-weight: 600;
}

.btn.btn-acs:hover {
    background-color: #f0f0f0;
    color: #111;
}

.btn.btn-acs-outline,
.btn.btn-outline-acs {
    border: 2px solid #fff;
    color: #fff;
    padding: .6rem 1.8rem;
    font-weight: 600;
    background: transparent;
}

.btn.btn-acs-outline:hover,
.btn.btn-outline-acs:hover {
    background: #fff;
    color: var(--acs-navy);
}

/* FOOTER */
footer {
    background: var(--acs-nav-gradient);
    color: rgba(255,255,255,.8);
    font-size: .85rem;
}

footer a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
}

footer a:hover {
    color: #fff;
}

footer .footer-logo img {
    height: 64px;
}

footer .footer-nav {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
}

/* TABS */
.nav-tabs .nav-link {
    color: var(--acs-navy);
}

.nav-tabs .nav-link.active {
    color: var(--acs-green);
    border-bottom: 3px solid var(--acs-green);
    font-weight: 700;
}

.nav-tabs--navy .nav-link.active {
    color: var(--acs-navy);
    border-bottom-color: var(--acs-navy);
}

.nav-tabs .nav-link .btn.btn-theme-switcher {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color) !important;
    padding: .3rem .6rem !important;
}

/* FORM */
.form-label {
    font-weight: 600;

    /* color: var(--acs-teal); */
}

.form-control:focus {
    border-color: var(--acs-green);
    box-shadow: 0 0 0 .2rem rgba(141,158,48,.15);
}

/* QUOTE */
blockquote.acs-quote {
    border-left: 4px solid var(--acs-green);
    padding-left: 1.2rem;
    font-style: italic;
    font-size: calc(1.15rem + var(--ts-bump));
    color: var(--acs-navy);
    opacity: 75%;
}

/* PILLAR CARD */
.pillar-card {
    border-top: 4px solid var(--acs-green);
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* THEME SWITCHER */
.themeSwitcher {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
    transition: opacity .2s;
}

.themeSwitcher:hover {
    opacity: 1;
    color: var(--acs-teal) !important;
}

/* =====================
   COLOR UTILITIES
   Aplica como clase adicional al componente.
   Default: fondo blanco, texto negro.
   ===================== */
/* -- Botón de interés (navbar) -- */
.btn-interest.acs-fuchsia {
    background-color: var(--acs-fuchsia);
}

.btn-interest.acs-fuchsia:hover {
    background-color: var(--acs-fuchsia-lt);
}

.btn-interest.acs-navy {
    background-color: var(--acs-navy);
}

.btn-interest.acs-navy:hover {
    background-color: #252870;
}

.btn-interest.acs-teal {
    background-color: var(--acs-teal);
}

.btn-interest.acs-teal:hover {
    background-color: var(--acs-teal-lt);
}

.btn-interest.acs-light {
    background-color: var(--acs-light);
}

.btn-interest.acs-light:hover {
    background-color: var(--acs-light-lt);
}

.btn-interest.acs-dark {
    background-color: var(--acs-dark);
}

.btn-interest.acs-dark:hover {
    background-color: var(--acs-black-lt);
}

/* -- Section subtitle -- */
.section-subtitle.acs-green {
    color: var(--acs-green);
}

.section-subtitle.acs-fuchsia {
    color: var(--acs-fuchsia);
}

.section-subtitle.acs-navy {
    color: var(--acs-navy);
}

.section-subtitle.acs-teal {
    color: var(--acs-teal);
}

.section-subtitle.acs-light {
    color: var(--acs-light);
}

.section-subtitle.acs-dark {
    color: var(--acs-dark);
}

/* -- Footer -- */
footer.acs-green {
    background-color: var(--acs-green);
}

footer.acs-fuchsia {
    background-color: var(--acs-fuchsia);
}

footer.acs-light {
    background-color: var(--acs-light);
}

footer.acs-dark {
    background-color: var(--acs-dark);
}

/* -- Texto -- */
.acs-text-green {
    color: var(--acs-green) !important;
}

.acs-text-fuchsia {
    color: var(--acs-fuchsia) !important;
}

.acs-text-navy {
    color: var(--acs-navy) !important;
}

.acs-text-teal {
    color: var(--acs-teal) !important;
}

.acs-text-light {
    color: var(--acs-light) !important;
}

.acs-text-dark {
    color: var(--acs-dark) !important;
}

span.acs-icon svg,
span.acs-icon img {
    width: 36px;
    height: auto;
}

span.acs-icon.acs-icon-small img {
    width: 28px;
}

span.acs-icon.acs-icon-medium img {
    width: 52px;
}

span.acs-icon.acs-icon-large img {
    width: 72px;
}

span.acs-icon.acs-icon-xlarge img {
    width: 100px;
}

/* -- Iconos: span.acs-icon envuelve un <svg> inline, hereda el color de .acs-text-* -- */
span.acs-icon svg,
span.acs-icon svg * {
    fill: currentColor;
}

/* -- Iconos <img> (ícono base negro/transparente): recolor aproximado vía filter -- */
.acs-text-teal    span.acs-icon img {
    filter: invert(55%) sepia(100%) saturate(242%) hue-rotate(140deg) brightness(83%) contrast(87%);
}

.acs-text-navy    span.acs-icon img {
    filter: invert(7%) sepia(79%) saturate(2825%) hue-rotate(237deg) brightness(83%) contrast(94%);
}

.acs-text-green   span.acs-icon img {
    filter: invert(57%) sepia(91%) saturate(371%) hue-rotate(29deg) brightness(89%) contrast(74%);
}

.acs-text-fuchsia span.acs-icon img {
    filter: invert(34%) sepia(40%) saturate(5695%) hue-rotate(312deg) brightness(82%) contrast(88%);
}

.acs-text-light   span.acs-icon img {
    filter: invert(100%) sepia(60%) saturate(33%) hue-rotate(47deg) brightness(117%) contrast(95%);
}

.acs-text-dark    span.acs-icon img {
    filter: invert(13%);
}

/* -- Fondos -- */
.acs-bg-white {
    background-color: #fff;
    color: #111;
}

.acs-bg-light {
    background-color: var(--acs-light);
    color: #111;
}

.acs-bg-green {
    background-color: var(--acs-green);
    color: #fff;
}

.acs-bg-fuchsia {
    background-color: var(--acs-fuchsia);
    color: #fff;
}

.acs-bg-navy {
    background-color: var(--acs-navy);
    color: #fff;
}

.acs-bg-teal {
    background-color: var(--acs-teal);
    color: #fff;
}

.acs-bg-gradient {
    background: var(--acs-nav-gradient);
    color: var(--acs-light);
}

.acs-bg-light {
    background: var(--acs-light);
    color: var(--acs-dark);
}

.acs-bg-dark {
    background: var(--acs-dark);
    color: var(--acs-light);
}

/* -- Iconos (icon-circle) -- */
.icon-circle.acs-green {
    background: var(--acs-green);
    color: #fff;
    border-color: var(--acs-green);
}

.icon-circle.acs-fuchsia {
    background: var(--acs-fuchsia);
    color: #fff;
    border-color: var(--acs-fuchsia);
}

.icon-circle.acs-navy {
    background: var(--acs-navy);
    color: #fff;
    border-color: var(--acs-navy);
}

.icon-circle.acs-teal {
    background: var(--acs-teal);
    color: #fff;
    border-color: var(--acs-teal);
}

.icon-circle.acs-light {
    background: var(--acs-light);
    color: var(--acs-dark);
    border-color: var(--acs-light);
}

.icon-circle.acs-dark {
    background: var(--acs-dark);
    color: var(--acs-light);
    border-color: var(--acs-dark);
}

/* -- Títulos de sección -- */
.section-title.acs-green {
    color: var(--acs-green);
}

.section-title.acs-fuchsia {
    color: var(--acs-fuchsia);
}

.section-title.acs-navy {
    color: var(--acs-navy);
}

.section-title.acs-teal {
    color: var(--acs-teal);
}

.section-title.acs-light {
    color: var(--acs-light);
}

.section-title.acs-dark {
    color: var(--acs-dark);
}

/* -- Botones -- */
.btn-acs.acs-green {
    background-color: var(--acs-green);
    color: var(--acs-light);
    border-color: var(--acs-green);
}

.btn-acs.acs-green:hover {
    background-color: var(--acs-green-lt);
    border-color: var(--acs-green-lt);
}

.btn-acs.acs-fuchsia {
    background-color: var(--acs-fuchsia);
    color: var(--acs-light);
    border-color: var(--acs-fuchsia);
}

.btn-acs.acs-fuchsia:hover {
    background-color: var(--acs-fuchsia-lt);
    border-color: var(--acs-fuchsia-lt);
}

.btn-acs.acs-navy {
    background-color: var(--acs-navy);
    color: var(--acs-light);
    border-color: var(--acs-navy);
}

.btn-acs.acs-navy:hover {
    background-color: var(--acs-light);
    border-color: var(--acs-navy);
}

.btn-acs.acs-teal {
    background-color: var(--acs-teal);
    color: var(--acs-light);
    border-color: var(--acs-teal);
}

.btn-acs.acs-teal:hover {
    background-color: var(--acs-teal-lt);
    border-color: var(--acs-teal-lt);
}

.btn-acs.acs-light {
    background-color: var(--acs-light);
    color: var(--acs-dark);
    border-color: var(--acs-light);
}

.btn-acs.acs-light:hover {
    background-color: var(--acs-light-lt);
    border-color: var(--acs-light-lt);
}

.btn-acs.acs-dark {
    background-color: var(--acs-dark);
    color: var(--acs-light);
    border-color: var(--acs-dark);
}

.btn-acs.acs-light:hover {
    background-color: var(--acs-dark-lt);
    border-color: var(--acs-dark-lt);
}

.btn-outline-acs.acs-green {
    background-color: var(--acs-light);
    color: var(--acs-green);
    border-color: var(--acs-green);
}

.btn-outline-acs.acs-green:hover {
    background-color: var(--acs-light);
    border-color: var(--acs-green-lt);
    color: var(--acs-light);
}

.btn-outline-acs.acs-fuchsia {
    background-color: var(--acs-light);
    color: var(--acs-fuchsia);
    border-color: var(--acs-fuchsia);
}

.btn-outline-acs.acs-fuchsia:hover {
    background-color: var(--acs-light);
    border-color: var(--acs-fuchsia-lt);
    color: var(--acs-light);
}

.btn-outline-acs.acs-navy {
    background-color: var(--acs-light);
    color: var(--acs-navy);
    border-color: var(--acs-navy);
}

.btn-outline-acs.acs-navy:hover {
    background-color: #252870;
    border-color: #252870;
    color: var(--acs-light);
}

.btn-outline-acs.acs-teal {
    background-color: var(--acs-light);
    color: var(--acs-teal);
    border-color: var(--acs-teal);
}

.btn-outline-acs.acs-teal:hover {
    background-color: var(--acs-teal-lt);
    border-color: var(--acs-teal-lt);
    color: var(--acs-light);
}

.btn-outline-acs.acs-light {
    background-color: var(--acs-default);
    color: var(--acs-light);
    border-color: var(--acs-light);
}

.btn-outline-acs.acs-light:hover {
    background-color: var(--acs-light-lt);
    border-color: var(--acs-light-lt);
    color: var(--acs-dark);
}

.btn-outline-acs.acs-dark {
    background-color: var(--acs-light);
    color: var(--acs-dark);
    border-color: var(--acs-dark);
}

.btn-outline-acs.acs-dark:hover {
    background-color: var(--acs-dark-lt);
    border-color: var(--acs-dark-lt);
    color: var(--acs-light);
}

/* -- CTA band -- */
.cta-band.acs-green {
    background-color: var(--acs-green);
}

.cta-band.acs-fuchsia {
    background-color: var(--acs-fuchsia);
}

.cta-band.acs-teal {
    background-color: var(--acs-teal);
}

.cta-band.band-teal {
    background-color: var(--acs-teal);
}

.cta-band.band-gradient {
    background: var(--acs-nav-gradient);
}

.cta-band.band-light {
    background: var(--acs-nav-light);
}

.cta-band.band-dark {
    background: var(--acs-nav-dark);
}

/* -- Pillar cards -- */
.pillar-card.acs-green {
    border-top-color: var(--acs-green);
}

.pillar-card.acs-fuchsia {
    border-top-color: var(--acs-fuchsia);
}

.pillar-card.acs-navy {
    border-top-color: var(--acs-navy);
}

.pillar-card.acs-teal {
    border-top-color: var(--acs-teal);
}

.pillar-card.acs-light {
    border-top-color: var(--acs-light);
}

.pillar-card.acs-dark {
    border-top-color: var(--acs-dark);
}

/* -- Quotes -- */
blockquote.acs-quote.acs-green {
    border-left-color: var(--acs-green);
}

blockquote.acs-quote.acs-fuchsia {
    border-left-color: var(--acs-fuchsia);
}

blockquote.acs-quote.acs-navy {
    border-left-color: var(--acs-navy);
}

blockquote.acs-quote.acs-teal {
    border-left-color: var(--acs-teal);
}

blockquote.acs-quote.acs-light {
    border-left-color: var(--acs-light);
}

blockquote.acs-quote.acs-dark {
    border-left-color: var(--acs-dark);
}

.accordion.acs-green .accordion-button {
    background-color: var(--acs-green);
    color: var(--acs-light);
    border-color: var(--acs-green);
}

.accordion.acs-green:hover .accordion-button {
    background-color: var(--acs-green-lt);
    border-color: var(--acs-green-lt);
}

.accordion.acs-fuchsia .accordion-button {
    background-color: var(--acs-fuchsia);
    color: #fff;
    border-color: var(--acs-fuchsia);
}

.accordion.acs-fuchsia:hover .accordion-button {
    background-color: var(--acs-fuchsia-lt);
    border-color: var(--acs-fuchsia-lt);
}

.accordion.acs-navy .accordion-button {
    background-color: var(--acs-navy);
    color: var(--acs-light);
    border-color: var(--acs-navy);
}

.accordion.acs-navy:hover .accordion-button {
    background-color: #252870;
    border-color: #252870;
}

.accordion.acs-teal .accordion-button {
    background-color: var(--acs-teal);
    color: #fff;
    border-color: var(--acs-teal);
}

.accordion.acs-teal:hover .accordion-button {
    background-color: var(--acs-teal-lt);
    border-color: var(--acs-teal-lt);
}

.accordion.acs-light .accordion-button {
    background-color: var(--acs-light);
    color: var(--acs-dark);
    border-color: var(--acs-light);
}

.accordion.acs-light:hover .accordion-button {
    background-color: var(--acs-light-lt);
    border-color: var(--acs-light-lt);
}

.accordion.acs-dark .accordion-button {
    background-color: var(--acs-dark);
    color: var(--acs-light) !important;
    border-color: var(--acs-dark);
}

.accordion.acs-dark:hover .accordion-button {
    background-color: var(--acs-dark-lt);
    border-color: var(--acs-dark-lt);
}

.list-group-item.border-bottom {
    border-bottom: rgba(255,255,255, .35) !important;
}

.list-group-item {
    color: inherit;
    background-color: inherit;
}

/* =====================
   DARK MODE
   ===================== */
[data-bs-theme="dark"] {
    --acs-light: #191845;
    --bs-body-bg: #191845;
}

[data-bs-theme="dark"] body {
    background-color: #191845;
}

[data-bs-theme="dark"] .band-light {
    background-color: #191845;
}

[data-bs-theme="dark"] .section-subtitle {
    color: #cccccc;
}

[data-bs-theme="dark"] blockquote.acs-quote {
    color: #cccccc;
}

[data-bs-theme="dark"] .icon-card h5 {
    color: #cccccc;
}

[data-bs-theme="dark"] .pillar-card {
    background: #191845;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

[data-bs-theme="dark"] .card {
    background-color: #191845;
    border-color: #333333;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: #333333;
    color: inherit;
}

[data-bs-theme="dark"] .accordion-item {
    background-color: transparent;
    border-color: #333333;
}

[data-bs-theme="dark"] .accordion-button {
    background-color: #191845;
    color: inherit;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #191845;
}

[data-bs-theme="dark"] .accordion-body {
    background-color: #191845;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #cccccc;
}

[data-bs-theme="dark"] .nav-tabs .nav-link .btn.btn-theme-switcher {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color) !important;
    padding: .3rem .6rem !important;
}

[data-bs-theme="dark"] .nav-tabs {
    border-color: #333333;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #191845;
    border-color: #333333;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .acs-bg-white {
    background-color: #191845;
    color: #e0e0e0;
}

[data-bs-theme="dark"] hr {
    border-color: #333333 !important;
}

[data-bs-theme="dark"] .navbar {
    background-color: #191845 !important;
}

[data-bs-theme="dark"] footer {
    background-color: #191845;
}

[data-bs-theme="dark"] .band-navy {
    background-color: #191845;
}

[data-bs-theme="dark"] .cta-band:not(.acs-green):not(.acs-fuchsia):not(.acs-navy) {
    background-color: #191845;
}

h4.faculty-title {
    font-size: calc(1rem + var(--ts-bump));
    font-weight: bold;
    margin-bottom: 12px;
}

.section-post-content {
    opacity: 75%;
}

.section-content {
    margin-bottom: 20px;
    opacity: 75%;
}

.post-content {
    margin-bottom: 10px;
    opacity: 75%;
    font-size: medium;
}

.post-content ul,
.post-content p {
    margin-bottom: 10px;
    opacity: inherit;
    font-size: medium;
}

.faculty-subtitle {
    font-size: small;
    opacity: 75%;
}

@media (min-width: 1200px) {
    .faculty-subtitle {
        font-size: calc(.9rem + var(--ts-bump));
    }
}

.service-subtitle {
    opacity: 75%;
    font-size: small;
}

@media (min-width: 1200px) {
    .service-subtitle {
        font-size: calc(.9rem + var(--ts-bump));
    }
}

@media (min-width: 992px) {
    .service-title {
        font-size: calc(1rem + var(--ts-bump));
        line-height: 1.2rem;
        font-weight: bold;
        margin-bottom: 0;
    }
}

.service-title {
    font-weight: bold;
}

@media (min-width: 992px) {
    h1.hero-title {
        font-size: calc(3.5rem + var(--ts-bump));
        letter-spacing: .12em;
    }
}

h1.hero-title {
    font-size: calc(2.5rem + var(--ts-bump));
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.hero-subtitle {
    font-size: x-large;
    opacity: 75%;
}

.calendar-content {
    opacity: 75%;
    font-size: small;
}

.calendar-title {
    font-size: large;
    font-weight: bold;
}

.calendar-month {
    opacity: 75%;
    font-size: small;
    margin-bottom: 0;
    text-transform: uppercase;
}

.calendar-time {
    opacity: 75%;
    font-size: small;
    margin-bottom: 0;
}

.calendar-day {
    font-weight: bold;
    white-space: nowrap;
    font-size: calc(2.5rem + var(--ts-bump));
    line-height: 1;
}

.content-block {
}

.content-block * {
    /* margin-bottom: 20px; */
}

.content-block h2,
.content-block h3 {
    font-weight: 700;
}

.content-block p,
.content-block p span,
.content-block p a {
    margin: 0 0 1rem;
    font-weight: normal;
    font-style: normal;
    font-size: calc(1rem + var(--ts-bump));
}

.content-block p,
.content-block p span,
.content-block p a {
    margin: 0 0 1rem;
    font-weight: normal;
    font-style: normal;
    font-size: calc(1rem + var(--ts-bump));
}

.content-block blockquote,
.content-block blockquote p {
    margin: 0 0 1rem;
    font-weight: bold;
    font-style: italic;
    font-size: larger;
}

/* RESPONSIVE TYPOGRAPHY SCALE
   Increments --ts-bump by 2px at each Bootstrap breakpoint.
   Applied via calc() on all design-system font-size declarations. */
@media (min-width: 768px)  {
    :root {
        --ts-bump: 2px;
    }
}

@media (min-width: 992px)  {
    :root {
        --ts-bump: 4px;
    }
}

@media (min-width: 1200px) {
    :root {
        --ts-bump: 6px;
    }
}

@media (min-width: 1400px) {
    :root {
        --ts-bump: 8px;
    }
}