/*!
 * Shearwater Light Theme Override
 *
 * Loaded conditionally when ACF "Use Light Theme" option is enabled.
 * Loaded AFTER dist/css/main.min.X.X.X.css so these rules take precedence.
 *
 * To revert: toggle "Use Light Theme" off in WP admin → Options.
 *
 * Lives outside dist/ because the gulp build deletes dist/ on every run.
 *
 * v1.0.0 — initial light theme overrides
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* ---- Body: white background, dark grey text, no side frame borders ---- */
body {
    background: #fff;
    color: #1d1d1f;
    border-left: 0;
    border-right: 0;
}

/* ---- Remove decorative dark frame bars (top & bottom 12px stripes) ---- */
body:before,
body:after {
    display: none;
}

/* ---- Headings: <mark> switches from white to dark, blue underline kept ---- */
mark {
    color: #1d1d1f;
}

/* ---- Sticky nav (scrolled state): white background instead of dark navy ---- */
#nav-background.headroom--pinned.headroom--not-top {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    width: 100%; /* was calc(100% - 24px); side borders removed */
}

/* ---- Nav links: dark text instead of white ---- */
.nav-link {
    color: #1d1d1f;
}

/* ---- Logo: bumped sizing for the wordmark version ---- */
.nav-logo img {
    width: 14rem;
}

/* ---- Mobile menu drawer: white background to match sticky nav ---- */
@media screen and (max-width: 60em) {
    .nav-ul {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }
}

/* ---- Footer copyright (kept dark): force white text ---- */
footer .copyright {
    color: #fff;
}

/* ---- /* ---- Contact address card: light grey background with grey text ---- */
.contact-address {
    background: #f5f5f5;
    color: #444;
}
/* Invert the white LinkedIn icon so it shows on the new grey background */
.contact-address img[src*="linkedin-white"] {
    filter: invert(1) opacity(0.55);
}

/* ---- Cards: soft grey bottom divider for separation on white body ---- */
.card {
    border-bottom: 8px solid #f5f5f5;
}

/* ---- Home hero: lighten the dark hero image for light theme ---- */
header.home {
    background-color: rgba(255, 255, 255, 0.55);
    background-blend-mode: lighten;
}

/* ---- Kill the skewed .diagonal-box (and its children's counter-skew) ---- */
/* The skew was a dark-theme decorative device that creates an awkward wedge on light */
.diagonal-box,
.diagonal-box > .feature:first-child,
.diagonal-box > .feature:last-child {
    transform: none;
}

/* ---- Investment Focus section: dark slab so the light icons pop ---- */
/* !important needed to beat the original .feature ~ .feature { margin: 6rem 0 } rule */
section.feature:has(.grid-icons) {
    background: #f5f5f5;
    color: #444;
    padding: 4rem 2rem 5rem;
    margin: -6rem 0 0 !important;
}
section.feature:has(.grid-icons) h2,
section.feature:has(.grid-icons) h3 {
    color: #1d1d1f;
}
section.feature:has(.grid-icons) p {
    color: #444;
}
section.feature:has(.grid-icons) a {
    color: #0077B5;
}
section.feature:has(.grid-icons) .icon-grid {
    filter: brightness(0) opacity(0.55);
}

/* ---- Mobile hamburger menu icon: invert white SVG to dark ---- */
#nav-menu-button img {
    filter: invert(1) opacity(0.7);
}

/* ---- Portfolio cards: same soft grey divider as the team cards ---- */
.grid-item.portfolio {
    border-bottom: 8px solid #f5f5f5;
}

/* ---- Logo glyph: invert white SVG to soft grey on light backgrounds ---- */
.logo-glyph {
    filter: invert(1) opacity(0.45);
}
/* Keep the white logo in the (still-dark) footer */
.copyright .logo-glyph {
    filter: none;
}
/* ---- Hero overlap (single post pages): hide dark decorative banner ---- */
.hero-overlap {
    display: none;
}


/* ---- Cormorant Garamond on all h1 (excluding the diagonal-box "Since 2018" h1) ---- */
h1:not(.no-underline) {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
}
h1:not(.no-underline) mark {
    font-family: inherit;
    font-weight: inherit;
}
/* Hero container: widen + balance line breaks (beats original 40rem on home) */
h1.hero,
header.home h1.hero {
    max-width: 60rem;
    text-wrap: balance;
}
/* Default hero size (Why Shearwater etc.): ~15% smaller than homepage */
h1.hero {
    font-size: 2.45em;
}
@media (min-width: 50em) {
    h1.hero {
        font-size: 5.5em;
    }
}
/* Homepage hero: larger size override */
header.home h1.hero {
    font-size: 2.875em;
}
@media (min-width: 50em) {
    header.home h1.hero {
        font-size: 6.5em;
    }
}


/* ---- Triangle shape only, no text inside it ---- */
.feature-grid .grid-item.portfolio .exit-status-flag {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    height: 3.25rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: #00b2ff; /* Realised / any custom status — same blue as the stage banner */
    z-index: 2;
    pointer-events: none;
}

/* Exact match on "Exit" or "Exited" (case-insensitive) switches the ribbon green */
.feature-grid .grid-item.portfolio .exit-status-flag.is-exited {
    background: #00a651;
}


.feature-grid .grid-item.portfolio .exit-status-label {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: .58rem;
    line-height: 1;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

@media screen and (max-width: 50em) {
    .feature-grid .grid-item.portfolio .exit-status-flag {
        width: 30%;
        height: 2.75rem;
    }
    .feature-grid .grid-item.portfolio .exit-status-label {
        font-size: .55rem;
        top: .45rem;
        right: .45rem;
    }
}