/* =============================================================
   Unified public-page headers (about / news / faq / contact / etc.)
   - same deep-teal gradient as the navbar
   - no gap: the banner runs up under the fixed navbar
   - a centred Damascus motif, transparent, fading out to every edge
   ============================================================= */
/* On pages that have a teal banner, the navbar floats transparently over it
   (so the gradient is continuous — no seam) and only turns solid on scroll. */
body.has-page-hero #mainNavbar:not(.is-scrolled),
body:has(.page-header, .news-page-header, .faq-page-header, .contact-hero, .complaint-hero) #mainNavbar:not(.is-scrolled) {
    background: transparent !important;
    box-shadow: none !important;
}

.page-header,
.news-page-header,
.faq-page-header,
.contact-hero,
.complaint-hero,
.announcements-page-header,
.complaints-page-header,
.page-hero {
    background: linear-gradient(160deg, #002623 0%, #054239 60%, #0a5d50 100%) !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: -78px !important;
    padding-top: calc(78px + 3.4rem) !important;
    padding-bottom: 3.6rem !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    text-align: center;
}

/* Remove each header's own full-cover background pattern — we add our own
   centred motif instead (this is what was tiling over the whole news banner). */
.page-header::before,
.news-page-header::before,
.faq-page-header::before,
.complaint-hero::before,
.announcements-page-header::before {
    display: none !important;
}

/* keep the existing header content above the pattern */
.page-header > *,
.news-page-header > *,
.faq-page-header > *,
.contact-hero > *,
.complaint-hero > *,
.announcements-page-header > *,
.complaints-page-header > *,
.page-hero > * {
    position: relative;
    z-index: 2;
}

/* centred Damascus motif as an <img> injected per header (see .ph-pattern),
   plus a CSS-background fallback on ::after for any header without the img */
.ph-pattern {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 540px;
    max-width: 90%;
    height: auto;
    opacity: .14;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at center, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 80%);
    mask-image: radial-gradient(ellipse 62% 78% at center, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 80%);
}

/* Titles / subtitles inside the banner */
.page-header h1, .news-page-header h1, .faq-page-header h1,
.contact-hero h1, .page-header h2, .news-page-header h2 {
    color: #fff !important;
    font-weight: 800 !important;
}
.page-header p, .news-page-header p, .faq-page-header p,
.contact-hero p { color: rgba(255, 255, 255, .85) !important; }