/* Common CSS */

:root {
    --activ8-blue: #1e4d8c;
    --activ8-blue-dark: #163866;
    --activ8-red:  #c8202c;
}
body { font-family: var(--bs-font-sans-serif); }
.bg-activ8-blue { background-color: var(--activ8-blue) !important; }
.text-activ8-red { color: var(--activ8-red) !important; }
.btn-activ8 {
    background-color: var(--activ8-red);
    border-color: var(--activ8-red);
    color: #fff;
}
.btn-activ8:hover, .btn-activ8:focus {
    background-color: #a81a24;
    border-color: #a81a24;
    color: #fff;
}
.navbar-brand img { height: 64px; width: auto; }
@media (max-width: 991.98px) {
    .navbar-brand img { height: 48px; }
}
.hero {
    background: linear-gradient(135deg, var(--activ8-blue) 0%, var(--activ8-blue-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://images.unsplash.com/photo-1578575437130-527eed3abbec?fm=jpg&q=80&w=2000&auto=format&fit=crop");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 50%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.9) 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 50%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 991.98px) {
    .hero::before { display: none; }
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { letter-spacing: -0.02em; }
.feature-icon {
    width: 3rem; height: 3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .5rem;
    background-color: rgba(30, 77, 140, 0.1);
    color: var(--activ8-blue);
    font-size: 1.5rem;
}
.news-card img { aspect-ratio: 16 / 9; object-fit: cover; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Ensure the top nav sticks regardless of how the header wrapper is rendered */
header { position: sticky; top: 0; z-index: 1030; }

.search-card { transition: background-color 0.15s ease; cursor: pointer; }
.search-card:hover { background-color: #f3f4f6; }