/* =====================================================================
   custom_css_S.css
   All CSS additions/overrides from the "Submit Observations" feature and
   the page-banner unification work. Kept in a dedicated file so the
   original stylesheets (custom_css_M.css / custom_css_K.css) stay clean.
   Loaded LAST in the layout so these rules win the cascade.
   ===================================================================== */

/* --- Submit Observations banner: its own background image --- */
.observation-header {
    background-image: url('/images/group-single/amphibians--group-header-banner.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 9%;
}

/* --- Groups banner: drop the built-in padding (height now comes from .page-banner) --- */
.groups-top-banner {
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== Unified frontend page banners =====
   (Gallery, Contact, Submit, Blog, Groups, Checklist) — same height, top
   spacing and title treatment while each page keeps its own background image. */
.page-banner {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 7rem;
    padding: 0;
}
/* Olive title bar for banners whose image has no baked-in band (Checklist, Groups).
   Uses the exact colour (#6f821d) baked into the other banner images. */
.checklist-top-banner.page-banner::before,
.groups-top-banner.page-banner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6rem;
    background: linear-gradient(90deg, rgb(111, 130, 29) 0%, rgba(111, 130, 29, 0.85) 35%, rgba(111, 130, 29, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
.page-banner .Gpage-title {
    position: relative;
    z-index: 1;
    padding-top: 8rem;
    padding-bottom: 7rem;
    margin-bottom: 0;
}
/* guarantee the blog banner keeps its background at all desktop widths */
.post-archive-header.page-banner {
    background-image: url('/images/posts/blog-header_02.png');
}
/* 768–991px: the site header is position:fixed and overlaps content, so the
   banner needs a top margin (~header height) to clear it and stay visible. */
@media (min-width: 768px) and (max-width: 991px) {
    .page-banner {
        margin-top: 5rem;
    }
}
/* ≤767px: the header switches to position:unset (normal flow), so no top margin. */
@media (max-width: 767px) {
    .page-banner {
        margin-top: 0;
    }
}
@media (max-width: 991px) {
    .checklist-top-banner.page-banner::before,
    .groups-top-banner.page-banner::before {
        height: 4rem;
    }
    .page-banner .Gpage-title {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* ===== Floating "Submit Observations" side tab — green to match the brand ===== */
.barList.submit-obs-bar > ul > li.highlight {
    background-color: #8bc34a;
}
.barList.submit-obs-bar > ul > li.highlight:hover {
    background-color: #7cb342;
}

/* ===== Remove the black focus outline/border that appears when clicking links,
   cards and buttons with a mouse. Keyboard focus keeps a visible ring for
   accessibility (:focus-visible is untouched). ===== */
a:focus:not(:focus-visible),
a:active,
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
.card:focus:not(:focus-visible),
.card a:focus:not(:focus-visible),
.owl-item a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}