/* static/css/global.css */
/* Sticky footer styles */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}


/*.navbar-custom-color {*/
/*    background: #2A5CAA !important;*/
/*}*/
/* Gradient background for header & footer */
.navbar-custom-color {
    background: linear-gradient(135deg, #0f3d91, #00a86b) !important;
    background-size: 200% 200%;
    animation: gradientMove 12s ease infinite;
    color: white;
}

.icon-dual-pitch {
    background: linear-gradient(to right, #0f3d91 50%, #00a86b 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* Animate the gradient to mimic the flowing effect */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ensure text/icons stay visible */
.navbar-custom-color .nav-link,
.navbar-custom-color .navbar-brand,
.footer .text-white,
.footer .text-white-50 {
    color: white !important;
}

/* HTMX Modal Styles */
.htmx-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 1040; /* Below Bootstrap's default modal z-index but high enough */
    display: flex; /* Used to center the modal content */
    align-items: center;
    justify-content: center;
}

.htmx-modal-content-wrapper {
    background-color: #fff;
    padding: 20px; /* Or use Bootstrap padding classes */
    border-radius: 0.3rem; /* Bootstrap's default modal border-radius */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Bootstrap's default modal shadow */
    z-index: 1050; /* Above the overlay */
    max-width: 800px; /* Corresponds to modal-lg */
    width: 90%; /* Responsive width */
    max-height: 90vh;
    overflow-y: auto; /* Allow scrolling for long modal content */
}

/* Optional: Styling for the modal header and footer if you build them manually */
.htmx-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem; /* mb-3 */
    border-bottom: 1px solid #dee2e6; /* Bootstrap's default border */
    margin-bottom: 1rem;
}

.htmx-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem; /* mt-3 */
    border-top: 1px solid #dee2e6; /* Bootstrap's default border */
    margin-top: 1rem;
}

.htmx-modal-footer .btn + .btn {
    margin-left: 0.5rem; /* Spacing between buttons */
}

/* Hide elements meant to be shown as modals by default */
.htmx-modal-hidden {
    display: none !important;
}

.smaller {
    font-size: .675em !important;
}

/* --- Green Certification Tiered Icon Colors --- */

/* --- Sustainability Logo Icon (Resizable) --- */
.sustainability-logo-icon {
    font-size: 4.5rem; /* This is the single property to control the icon's size */
    display: block;
    margin: 0 auto;
    width: 1em; /* Sets width relative to the font-size */
    height: 1em; /* Sets height relative to the font-size */
}


/* static/css/global.css */

/* ... (keep all existing styles) ... */

/* --- THIS IS THE KEY CSS FIX --- */
/* This animation now flashes from a bright blue to a slightly darker, persistent blue */
@keyframes flash-animation {
    0% {
        background-color: #0dcaf0; /* Bright blue start (Bootstrap 'info' color) */
    }
    50% {
        background-color: #0dcaf0; /* Hold bright blue */
    }
    100% {
        background-color: #cfe2ff; /* End on the persistent blue (Bootstrap 'primary-subtle') */
    }
}

/* This is the class that gets ADDED by JavaScript */
.suggestion-highlight-active mark.suggestion-highlight {
    /* Apply the animation */
    animation: flash-animation 1.5s ease-out;

    /* --- THIS IS THE NEW, CRITICAL PART --- */
    /* After the animation finishes, KEEP this background color. */
    background-color: #cfe2ff; /* Persistent blue */
}