/*!
 * 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
 */

/* ---- 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;
}