/**
 * Dark top-of-page hero. Contrasts with the rest of the page.
 * Optional background image: add hero-banner.jpg or hero-banner.png to wwwroot/images.
 */

.harbor-hero-banner {
    position: relative;
    background: linear-gradient(165deg, #0d3b4c 0%, #0a2d3a 50%, #08252f 100%);
    background-color: #0a2d3a;
    border: 0;
    border-radius: 0;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    overflow: hidden;
}

/* Optional: background image from wwwroot/images (add hero-banner.jpg or .png) */
.harbor-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/hero-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
}

/* Show image when it exists (use a class or rely on opacity 0 so dark bg shows until they add image) */
.harbor-hero-banner.has-bg-image::before {
    opacity: 0.35;
}

/* Dark overlay so text stays readable over image or gradient */
.harbor-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(13, 59, 76, 0.92) 0%, rgba(10, 45, 58, 0.94) 50%, rgba(8, 37, 47, 0.96) 100%);
    z-index: 1;
    pointer-events: none;
}

.harbor-hero-banner .container {
    position: relative;
    z-index: 2;
}

.harbor-hero-banner .harbor-intro__eyebrow {
    color: #fff !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.harbor-hero-banner .harbor-intro__title {
    color: #fff;
}

.harbor-hero-banner .harbor-intro__text {
    color: rgba(255, 255, 255, 0.9);
}

.harbor-hero-banner .btn-primary {
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

.harbor-hero-banner .btn-primary:hover {
    background: var(--brand-accent-hover) !important;
    border-color: var(--brand-accent-hover) !important;
    color: #fff !important;
}

.harbor-hero-banner .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.95);
}

.harbor-hero-banner .btn-outline-secondary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

@media (min-width: 768px) {
    .harbor-hero-banner {
        margin-top: 2rem;
        margin-bottom: 3rem;
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1200px) {
    .harbor-hero-banner {
        margin-top: 2.5rem;
        margin-bottom: 3.5rem;
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .harbor-hero-banner {
        border-radius: 0 !important;
    }
}