/* kmllp modern shell layer — sits on top of the legacy compiled main.min.css (the design source
   of truth). Only defines the open/close states for the vanilla-JS toggles that replace the
   legacy jQuery main.js; the visual styling itself comes from main.min.css. */

/* Mobile menu: main.min.css leaves .c-navmobile display:none/hidden by default. site.js toggles
   .is-active to reveal it (the legacy bundle set inline styles). */
.c-navmobile.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Global keyword search: main.min.css already styles .c-header__search.is-active; ensure the
   collapsed state hides it so the toggle reads cleanly. */
.c-header__search:not(.is-active) {
    opacity: 0;
    visibility: hidden;
}

/* "Why Kirby McInerney?" pinned-scroll (c-pinned). site.js adds .is-pinned-enhanced on desktop
   (>=851px, matching the legacy GSAP matchMedia); the effect is off (plain readable list) on
   mobile, without JS, and under prefers-reduced-motion. All of the geometry — the header/waves/
   progress-bar pin, the two mask layers' size and offset, the statement opacities — is set
   per-frame by site.js on scroll, because every one of those values is scroll-scrubbed. No CSS
   transition is used (it would lag the scrubbed values); will-change keeps the compositor warm
   for the animated properties.

   The header is pinned by TRANSFORM, not position:sticky: sticky looked right while pinned but
   only released at the end of its containing block, ~690px after the legacy GSAP pin ends. */
.is-pinned-enhanced .js-pinned-header,
.is-pinned-enhanced .js-pinned-bg-waves,
.is-pinned-enhanced .js-pinned-waves-mask,
.is-pinned-enhanced .js-pinned-bg-mask,
.is-pinned-enhanced .js-pinned-progressbar {
    will-change: transform;
}
.is-pinned-enhanced .js-pinned-opacity-item {
    will-change: opacity;
}

/* ── Cases/News filter selects (modern native-<select> port of the legacy jCF custom select) ──
   The legacy front end replaced each <select> with jCF-generated .jcf-select markup that main.css
   styled (white box, 1px #ddd border, 18px text, a #273669 caret). We keep the native <select>
   (HTMX + vanilla-JS stack, no jCF) and style it here to render the same box + caret, so
   .c-filters selects match the live site 1:1. Caret is an inline SVG chevron in #273669. */
.c-filters__col select.js-select-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    display: block;
    background-color: #fff;
    color: #727272;
    border: 1px solid #ddd;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    padding: 11px 40px 11px 18px;
    cursor: pointer;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23273669' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.c-filters__col select.js-select-dropdown::-ms-expand { display: none; }
.c-filters__col select.js-select-dropdown:focus {
    outline: none;
    border-color: #273669;
}