/**
 * Dark header skin for single Case Studies (post type `our_work`).
 *
 * The hero on a case study is dark (senary / ink). The default site header is a
 * white frosted bar that's unreadable over that hero. These rules:
 *  - Float the header over the hero (absolute) instead of sticking.
 *  - Recolour logo dots, nav pill and status chip for a dark backdrop.
 *  - Re-attach as a fixed, dark, blurred bar once the user has scrolled past
 *    the hero (toggled by `single-our-work.js` adding `is-scrolled`).
 */

.single-our_work .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
}

.single-our_work .site-header.is-scrolled {
    position: fixed;
    background: rgba(15, 11, 34, 0.86);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Logo */
.single-our_work .site-header__logo,
.single-our_work .custom-logo-link {
    color: #fff;
}

/* Replace the brand-dots SVG so the bottom-right dot becomes white (visible on dark). */
.single-our_work .site-header__logo::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'><circle cx='3.5' cy='3.5' r='3.5' fill='%23009fe3'/><circle cx='15' cy='3.5' r='3.5' fill='%23d61254'/><circle cx='26.5' cy='3.5' r='3.5' fill='%23fdc41f'/><circle cx='3.5' cy='16.5' r='3.5' fill='%2382378c'/><circle cx='15' cy='16.5' r='3.5' fill='%232fad66'/><circle cx='26.5' cy='16.5' r='3.5' fill='%23ffffff'/></svg>");
}

/* Nav pill */
.single-our_work .site-header #nav-menu ul.menu {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.single-our_work .site-header #nav-menu li a {
    color: rgba(255, 255, 255, 0.85);
}

.single-our_work .site-header #nav-menu li a:hover,
.single-our_work .site-header #nav-menu li a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.single-our_work .site-header #nav-menu .current-menu-item > a,
.single-our_work .site-header #nav-menu .current_page_item > a,
.single-our_work .site-header #nav-menu .current-menu-ancestor > a {
    background: #fff;
    color: var(--wp--preset--color--ink, #0f0b22);
}

.single-our_work .site-header #nav-menu li.cta > a {
    background: var(--wp--preset--color--primary, #d61254);
    color: #fff;
}

.single-our_work .site-header #nav-menu li.cta > a:hover,
.single-our_work .site-header #nav-menu li.cta > a:focus-visible {
    background: #fff;
    color: var(--wp--preset--color--ink, #0f0b22);
}

/* Right-side status chip */
.single-our_work .site-header #contact-button-wrap a {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.single-our_work .site-header #contact-button-wrap a:hover {
    background: #fff;
    color: var(--wp--preset--color--ink, #0f0b22);
    border-color: #fff;
}