/* ========================================
   Root Variables
======================================== */

:root {
    --fade-delay: 0.5s;
    --fade-distance: 100px;
    --fade-duration-fast: 0.5s;
    --fade-duration-slow: 1s;

    --color-light-gray: #f8f8f8;
    --color-border: rgb(222, 226, 230);

    --footer-logo-spacing: 1rem;
}


/* ========================================
   Animation Utilities - Locations: Homepage Banner
======================================== */

/* Base fade-in-up animation utility */
.fadeInUp {
    --fade-duration: var(--fade-duration-fast);
}

.fadeInUp2x {
    --fade-duration: var(--fade-duration-slow);
}

/* Shared animation behavior */
.fadeInUp,
.fadeInUp2x {
    animation: fadeInUp var(--fade-duration) ease var(--fade-delay) backwards;
    display: inline-block;
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        transform: translateY(var(--fade-distance));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ========================================
   Section Styles
======================================== */

.section-primary {
    background: #1c2f5c url("/images/dca_banner_bg.svg") top / cover no-repeat;
}


/* ========================================
   Components
======================================== */

/* Date block - Location Used: Newsroom */
.date-block {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    background-color: var(--color-light-gray);
}

/* Footer logo */
.footer-logo {
    margin-right: var(--footer-logo-spacing);
}


/* ========================================
   Responsive Styles (Mobile First)
======================================== */

/* Mobile (<767px) */
@media (max-width: 767px) {

    .executive-wrap .executive-profile {
        border-bottom: 1px solid var(--color-border);
        border-right: none !important;
    }

    .footer-logo {
        margin-right: 0;
    }
}

/* Tablet (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {

    .executive-wrap .executive-profile {
        display: flex;
        flex-direction: column;
    }

    .footer-logo {
        margin-right: 0;
    }

    .global-footer .footer-links {
        margin-bottom: 1.5rem;
        justify-content: center;
    }
}


/* ========================================
   Site Improve Fixes
======================================== */

/* Breadcrumbs - Force color to white */
.section-primary .breadcrumbs ol li a,
.section-primary .breadcrumbs ol li {
    color: #ffffff;
}

/* Alert Banner - Force color to white */
.alert-banner a {
    color: #ffffff;
}
/* Page Banner - Force color to white */
.section-primary a {
    color: #FFFFFF;
}