/* Green-header variant — dark green section, white title + subheading, nav
   fades white-over-green and reverts on scroll past. The nav logo paths use
   fill="currentColor" so we can control colour via the .nav__logo wrapper. */
.internal-hero--green.hero--geo {
    background: var(--primary-dark);
}
.internal-hero--green .about-hero-new__left h1 {
    color: #ffffff;
    /* Drop the white halo because the background is already dark */
    filter: none;
}
.internal-hero--green .about-hero-new__left p {
    color: rgba(255, 255, 255, 0.85);
}

/* Default nav logo + links — applies to all pages (logo SVG now uses currentColor) */
.nav__logo { color: #005950; transition: color 0.45s ease; }
.nav__link { transition: color 0.45s ease; }

/* When green-header mode is active AND the user hasn't scrolled past the hero,
   the nav over the green section uses white logo + light text. */
body.body--green-header:not(.scrolled-past-green-header) .nav__logo {
    color: #ffffff;
}
body.body--green-header:not(.scrolled-past-green-header) .nav__link {
    color: #ffffff;
}
body.body--green-header:not(.scrolled-past-green-header) .nav__dropdown svg {
    color: #ffffff;
}
/* Hamburger bars over the green hero — the default in style.css uses
   var(--primary) (brand green) which is invisible against the green
   header background, especially at narrower widths where the hamburger
   actually appears. We flip the three spans to white in green-header
   mode. Once .scrolled-past-green-header is added (handled by
   HomePage.cshtml's inline scroll listener) this selector no longer
   matches and the bars revert to the default green — same pattern as
   the logo + nav links. */
body.body--green-header:not(.scrolled-past-green-header) .nav__hamburger span {
    background: #ffffff;
}

/* On hover the mint pill returns under the white menu link — flip the text
   back to brand green so it's readable against the mint background.
   (The white-override above wins over the default .nav__link:hover rule due
   to higher specificity, so we have to re-state the hover here.) */
body.body--green-header:not(.scrolled-past-green-header) .nav__link:hover,
body.body--green-header:not(.scrolled-past-green-header) .nav__link--active {
    color: var(--primary);
}

/* Section anchor markers — emitted between sections by HomePage.cshtml /
   GeneralPage.cshtml. The scroll-margin-top offsets the fixed nav so the
   target section sits below it rather than under it when jumped to. */
.section-anchor {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: 100px;
}

/* Internal-page header (v5-about pattern). Scoped to .internal-hero so it
   doesn't override the home hero (.hero--geo on the home page is different). */

.internal-hero.hero--geo {
    min-height: 0;
    display: block;
    background: var(--bg-warm);
    /* Equalise the content-area padding above and below the title so it sits
       at the visual centre of the hero. (Top is `nav-h + X`, bottom is `X`,
       with X = 110 — the same total spread as the old 140 + 80.) */
    padding-top: calc(var(--nav-h, 88px) + 110px);
    padding-bottom: 110px;
    /* Lift the hero into its own stacking context so the .about-jumps pills
       (which hang below via bottom:-80px) sit on top of the next section. */
    position: relative;
    z-index: 3;
    /* Default .hero--geo has overflow:hidden which clips the pills. Allow
       them to overhang the section's bottom edge. */
    overflow: visible;
}

/* Green-header variant overrides the warm bg above (more specific + later) */
.internal-hero.internal-hero--green.hero--geo {
    background: var(--primary-dark);
    align-items: initial;
    overflow: visible;
}

/* Top fade — default is warm cream; swap to dark green so it blends with the
   green hero instead of bleeding white over the dot animation. */
.internal-hero--green .hero__overlay {
    background: linear-gradient(to bottom,
        rgba(2, 61, 54, 0.95) 0%,
        rgba(2, 61, 54, 0.75) 45%,
        rgba(2, 61, 54, 0) 100%);
}

/* Drop the white halo on the title — the default selector has same specificity
   as our green one so we have to win via class chaining + later position. */
.internal-hero.internal-hero--green .about-hero-new__left h1 {
    filter: none;
    color: #ffffff;
}
.internal-hero.internal-hero--green .about-hero-new__left p {
    color: rgba(255, 255, 255, 0.85);
}
/* Subtitle kicker: flips to coral on the green-header variant — brand-green
   on dark-green would be invisible. */
.internal-hero.internal-hero--green .about-hero-new__left .label {
    color: var(--coral);
}

@keyframes internalHeroSlideUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}

.internal-hero .about-hero-new__left h1 {
    animation: internalHeroSlideUp 1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.18s both;
    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px rgba(255, 255, 255, 0.65));
    margin: 0;
}

.internal-hero .about-hero-new__left p {
    animation: internalHeroSlideUp 1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.25s both;
    margin-top: 18px;
    font-size: clamp(1.1875rem, 1vw + 0.6rem, 1.625rem);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
    max-width: 760px;
}

.internal-hero .container {
    position: relative;
}

/* Centre-aligned heading + subheading variant.
   The default grid is 1.2fr/1fr; we flatten it and centre the inner div so
   both the container AND the text align centrally. */
.internal-hero--centred .about-hero-new__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}
.internal-hero--centred .about-hero-new__left {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.internal-hero--centred .about-hero-new__left p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.internal-hero .about-jumps {
    position: absolute;
    left: 36px;
    /* Matches the hero's padding-bottom so the pills sit at the section's
       bottom edge (then translateY(50%) shifts half of their height below it,
       producing the overhang into the next section). */
    bottom: -110px;
    transform: translateY(50%);
    margin: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.internal-hero .about-jump {
    gap: 8px;
    transition: transform var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

.internal-hero .about-jump:hover {
    transform: translateY(-2px);
}

.internal-hero .about-jump__arrow {
    width: 0;
    height: 16px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, width 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.internal-hero .about-jump:hover .about-jump__arrow {
    opacity: 1;
    width: 16px;
    transform: translateY(0);
}

@media (max-width: 720px) {
    .internal-hero .about-jumps {
        position: static;
        transform: none;
        margin-top: 24px;
    }
}

/* =====================================================================
   Full-height header variant — section fills the viewport (matches the
   home hero's min-height: 100vh), and the jump-link pills sit at the
   bottom-left INSIDE the section instead of overhanging the edge.
   Editor toggle: fullHeightHeader on Internal Page Header.
   ===================================================================== */

/* Force 100vh on the base + green variants. The selectors below all use
   the same .internal-hero.hero--geo specificity as the rule that sets
   min-height: 0, then add .internal-hero--full-height to win.
   Section becomes a flex column so its container can grow to fill the
   remaining vertical space — that lets the container stay
   max-width-centered (keeping horizontal alignment with the heading
   text) AND own its own bottom, so pills positioned inside the
   container line up with the heading's left edge. */
.internal-hero.internal-hero--full-height.hero--geo,
.internal-hero.internal-hero--green.internal-hero--full-height.hero--geo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Just enough top padding to clear the fixed nav — content vertical
       position is driven by the container's flex:1 + flex-end below. */
    padding-top: var(--nav-h, 88px);
    padding-bottom: 0;
}

/* Container fills the section's remaining height so its bottom edge IS
   the section's bottom. Internally it's a flex column with content
   pinned to the bottom (flex-end) — gives the "heading low in the
   viewport" feel. Keep position:relative (default for .container in
   this file) so the pills' absolute positioning resolves HERE — that's
   what aligns them with the heading's horizontal left edge instead of
   the section's raw left edge. */
.internal-hero.internal-hero--full-height .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Reserve space at the bottom of the container for the abs-
       positioned pills below the heading. 170px lifts the heading
       ~50px higher than the 120px starting value. */
    padding-bottom: 170px;
}

/* Pills sit 48px above the container's bottom edge — a roomier gap
   from the viewport bottom than the original 28px so they don't feel
   crammed into the corner. Container spans the section's full height
   so "container bottom" = "section bottom"; pills still align with the
   container's max-width box (and therefore with the heading text). */
.internal-hero.internal-hero--full-height .about-jumps {
    bottom: 48px;
    transform: none;
}

/* On mobile keep the existing static-flow behaviour (no absolute
   bottom-pin) — at narrow widths a 100vh hero is already a lot of
   real estate; pushing pills to the visual bottom would make them
   hard to reach. The base mobile rule at the top of this section
   handles this; this rule just makes sure we don't fight it back. */
@media (max-width: 720px) {
    .internal-hero.internal-hero--full-height .about-jumps {
        bottom: auto;
    }
}