/*
 * DMA 2026 Custom Header
 *
 * Faithfully replicates the gotheme2015 header design.
 * Colors, sizes, and interaction patterns match the original.
 *
 * SECTIONS
 *   1. Variables
 *   2. Shared / Utility
 *   3. DMA Button
 *   4. Desktop Search Bar
 *   5. Desktop Header Wrap
 *   6. Desktop Header Top Bar
 *   7. Desktop Header Main Nav
 *   8. Mega Menu
 *   9. Homepage Header (transparent / pre-scroll)
 *  10. Sticky Header (post-scroll / interior pages)
 *  11. About Subheader
 *  12. Mobile Header Wrap
 *  13. Mobile Header Bar
 *  14. Mobile Overlays
 *  15. Admin Bar Offset
 */

/* ─── 1. Variables ─────────────────────────────────────────────────────── */
:root {
    --dma-red:          #e4002b;
    --dma-charcoal:     #383838;
    --dma-charcoal-64:  #646569;
    --dma-charcoal-a8:  #a8a8a9;
    --dma-light-grey:   #ebebeb;
    --dma-teal-dark:    #00515a;
    --dma-teal:         #007d8a;
    --dma-teal-light:   #89b1b8;
    --dma-white:        #ffffff;

    --dma-header-top:       36px;
    --dma-header-main:      70px;
    --dma-header-height:    106px; /* 36 + 70 */
    --dma-mobile-cta-h:     40px;
    --dma-mobile-header-h:  100px; /* mobile bar WITH the optional CTA strip */
    --dma-mobile-header-h-plain: 56px; /* mobile bar with just the logo/hamburger row (no CTA strip) — 28px logo + 12px*2 padding */
    --dma-about-sub-h:      48px;  /* desktop subnav bar height (old site) */

    /* Vertical space consumed above the mega menu's actual chip grid —
       full header (106px) + #dma-mega-menu's own top padding (32px). Used
       as a safety cap so an unusually long CPT list scrolls inside the
       grid instead of pushing the (now content-height) panel past the
       bottom of the viewport. */
    --dma-mega-content-top: calc(var(--dma-header-height) + 32px);

    --dma-font-primary: "mr-eaves-modern", sans-serif;
    --dma-font-mono:    "Space Mono", monospace;
}

/* ─── 2. Shared / Utility ──────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 99999;
}

/* Kill any Kadence link overrides inside our header */
#masthead a {
    text-decoration: none;
    color: inherit;
}
#masthead ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dma-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.dma-logo-text {
    font-family: var(--dma-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--dma-teal);
}

/* Hide desktop on small screens; hide mobile on large screens */
.dma-desktop-search-wrap,
.dma-desktop-header-wrap {
    display: none;
}

@media (min-width: 992px) {
    .dma-mobile-header-wrap { display: none; }
    .dma-desktop-search-wrap,
    .dma-desktop-header-wrap { display: block; }
}

/* ─── 3. DMA Button ────────────────────────────────────────────────────── */
.dma-button {
    display: inline-block;
    border: 2px solid var(--dma-red);
    border-bottom: 7px solid var(--dma-red);
    border-radius: 3px;
    padding: 4px 24px;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: var(--dma-red) !important;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #fff 50%, var(--dma-red) 50%);
    transition: all 0.5s ease-in-out;
    text-decoration: none !important;
    font-family: var(--dma-font-primary);
}
.dma-button.grey-back {
    background-image: linear-gradient(to bottom, var(--dma-light-grey) 50%, var(--dma-red) 50%);
}
.dma-button.red-back {
    background-image: linear-gradient(to bottom, transparent 50%, #fff 50%);
}
.dma-button:hover {
    background-position: 0 100%;
    color: #fff !important;
}
.dma-button.grey-back:hover {
    color: var(--dma-light-grey) !important;
}

/* In the mega menu (red background), button is white-bordered and the
   slide-up fill is WHITE with red hover text — a red fill would be
   invisible against the mega menu background. */
#dma-mega-menu .dma-button {
    border: 2px solid #fff;
    border-bottom: 7px solid #fff;
    color: #fff !important;
    background-image: linear-gradient(to bottom, transparent 50%, #fff 50%);
}
#dma-mega-menu .dma-button:hover {
    background-position: 0 100%;
    color: var(--dma-red) !important;
}

/* ─── 4. Desktop Search Bar ────────────────────────────────────────────── */
.dma-desktop-search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.site-header.searching .dma-desktop-search-wrap {
    height: 96px;
}

.dma-desktop-search {
    background: var(--dma-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    height: 96px;
    display: flex;
    align-items: center;
}

.dma-search-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dma-desktop-search-form {
    flex: 1;
}

.dma-desktop-search-form input[type="search"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--dma-charcoal);
    background: transparent;
    font-family: var(--dma-font-mono);
    font-size: 32px;
    line-height: 46px;
    color: var(--dma-charcoal);
    outline: none;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
}

.dma-desktop-search-form input::placeholder { color: var(--dma-charcoal-a8); }

#dma-close-search {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--dma-charcoal);
    flex-shrink: 0;
}

/* Admin bar offset for fixed search */
.admin-bar .dma-desktop-search-wrap { top: 46px; }
@media screen and (min-width: 783px) {
    .admin-bar .dma-desktop-search-wrap { top: 32px; }
}

/* ─── 5. Desktop Header Wrap ───────────────────────────────────────────── */

/* Interior pages: wrap holds the 106px block height so content doesn't jump */
body:not(.home) .dma-desktop-header-wrap {
    height: var(--dma-header-height);
}

/* Homepage: wrap collapses (header hidden until scroll) */
body.home .dma-desktop-header-wrap {
    height: 0;
}

.dma-desktop-header {
    width: 100%;
    transition: transform 0.5s ease-in-out, background 0.5s ease-in-out;
}

/* Interior pages: fixed at top */
body:not(.home) .dma-desktop-header {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--dma-header-height);
    z-index: 9999;
}

/* Homepage pre-scroll: hidden above viewport */
body.home .dma-desktop-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transform: translateY(-100%);
}

/* Homepage post-scroll (.stuck): slides in */
body.home .site-header.stuck .dma-desktop-header {
    transform: translateY(0);
}

/* Admin bar offset */
body.admin-bar:not(.home) .dma-desktop-header { top: 46px; }
@media screen and (min-width: 783px) {
    body.admin-bar:not(.home) .dma-desktop-header { top: 32px; }
    body.admin-bar.home .site-header.stuck .dma-desktop-header { top: 32px; }
}

/* ─── 6. Desktop Top Bar ───────────────────────────────────────────────── */
.dma-header-top {
    background: var(--dma-light-grey);
    height: var(--dma-header-top);
    font-size: 0; /* inline-block gap fix */
    position: relative;
    z-index: 5;
}

.dma-header-top ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    position: relative;
    z-index: 3;
}

.dma-header-top ul li {
    display: inline-block;
    vertical-align: top;
    font-family: var(--dma-font-primary);
    font-size: 18px;
    line-height: var(--dma-header-top);
    color: var(--dma-charcoal-64);
    margin: 0 16px;
}

.dma-header-top ul li a {
    color: var(--dma-charcoal-64) !important;
    text-decoration: none !important;
}

/* Search button */
.dma-search-button {
    cursor: pointer;
}

.dma-search-button svg { vertical-align: middle; margin-right: 4px; }
.dma-search-button .dma-white-icon { display: none; }
.dma-search-button .dma-gray-icon  { display: inline-block; }

/* CTA button in top bar */
.dma-cta-button {
    background: var(--dma-red);
    padding-left: 24px !important;
    padding-right: 39px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.dma-cta-button a {
    color: #fff !important;
}

.dma-cta-button:hover a {
    color: rgba(255,255,255,0.85) !important;
}

.dma-arrow-hover-animate-right { display: flex; align-items: center; gap: 8px; }
.dma-arrow-hover-animate-right .dma-arrow { transition: transform 0.3s ease; }
.dma-arrow-hover-animate-right:hover .dma-arrow { transform: translateX(8px); }

/* Homepage large logo in top bar */
.dma-homepage-logo {
    display: none; /* shown only on homepage via body.home rule below */
}

/* When mega menu is open: turn top bar red */
.dma-header-top.red ul {
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.dma-header-top.red ul li,
.dma-header-top.red ul li a {
    color: white !important;
}
.dma-header-top.red .dma-cta-button {
    background: #646569 !important;
}
.dma-header-top.red .dma-search-button .dma-white-icon { display: inline-block; }
.dma-header-top.red .dma-search-button .dma-gray-icon  { display: none; }

/* Kill any WordPress dropdown sub-menus — we use mega menus instead */
.dma-header-main .dma-main-navigation .sub-menu { display: none !important; }

/* ─── 7. Desktop Main Nav ──────────────────────────────────────────────── */
.dma-header-main {
    height: var(--dma-header-main);
    padding-left: 300px;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.dma-inner-logo {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.dma-inner-logo img {
    max-height: 40px;
    width: auto;
    max-width: 100%;
}

.dma-main-navigation {
    position: relative;
    z-index: 3;
}

.dma-header-main .dma-main-navigation .dma-menu,
.dma-header-main .dma-main-navigation ul.dma-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

.dma-header-main .dma-main-navigation .dma-menu li,
.dma-header-main .dma-main-navigation ul.dma-menu > li {
    height: var(--dma-header-main);
    position: relative;
    font-family: var(--dma-font-primary);
    font-size: 20px;
    line-height: var(--dma-header-main);
    padding: 0 14px;
    border-bottom: 3px solid #fff;
    text-align: center;
    display: inline-block;
}

.dma-header-main .dma-main-navigation ul.dma-menu > li > a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--dma-charcoal) !important;
    text-decoration: none !important;
}

.dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-item,
.dma-header-main .dma-main-navigation ul.dma-menu > li.current-page-ancestor,
.dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-ancestor,
.dma-header-main .dma-main-navigation ul.dma-menu > li.active,
.dma-header-main .dma-main-navigation ul.dma-menu > li:hover {
    border-bottom: 3px solid var(--dma-red);
}

.dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-item > a,
.dma-header-main .dma-main-navigation ul.dma-menu > li.current-page-ancestor > a,
.dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-ancestor > a,
.dma-header-main .dma-main-navigation ul.dma-menu > li.active > a,
.dma-header-main .dma-main-navigation ul.dma-menu > li:hover > a {
    color: var(--dma-red) !important;
}

/* When mega menu open: nav links go semi-transparent white */
.dma-header-main .dma-main-navigation.red ul.dma-menu > li > a {
    opacity: 0.6;
    color: white !important;
}
.dma-header-main .dma-main-navigation.red ul.dma-menu > li { border-bottom: none !important; }
.dma-header-main .dma-main-navigation.red ul.dma-menu > li.current-menu-item,
.dma-header-main .dma-main-navigation.red ul.dma-menu > li.active {
    border-bottom: 3px solid white !important;
    color: white !important;
}
.dma-header-main .dma-main-navigation.red ul.dma-menu > li.current-menu-item a,
.dma-header-main .dma-main-navigation.red ul.dma-menu > li.active a {
    opacity: 1;
}
.dma-header-main .dma-main-navigation.red ul.dma-menu > li:hover > a {
    opacity: 1;
}

/* ─── 8. Mega Menu ─────────────────────────────────────────────────────── */
/* Frosted-glass panel over whatever's scrolled beneath the fixed header,
   plus a saturation boost so colors showing through the blur stay rich
   instead of washing out grey — the standard "frosted glass" combo (iOS/
   macOS panels, Fluent acrylic). --dma-mega-bg/-solid are set inline by
   header.php from the "Mega Menu Appearance" ACF color field (Appearance →
   Header Settings) — the rgba(0,81,90,0.85) fallback here only applies if
   that field has never been saved. Keep whatever alpha is configured there
   at 0.85+ if possible: that's the floor for keeping white body text
   (.menu-contents a, .dma-cpt-title, etc.) at ~5:1 contrast even in the
   worst case of a bright-white section scrolled directly behind the panel.
   The left/bottom hairline gives the panel a defined boundary against
   arbitrary page content, since a translucent fill alone doesn't read as a
   distinct surface the way the old solid red did. Bottom corners are
   rounded (top stays square/flush against the nav row) now that the panel
   sizes to its content instead of always running to the bottom of the
   viewport — a floating card reads better rounded than a docked slab. */
#dma-mega-menu {
    background: var(--dma-mega-bg, rgba(0, 81, 90, 0.85));
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    border-left: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 20px 20px;
    position: absolute;
    top: 100%;         /* sits flush below the nav row */
    right: 0;
    width: 60vw;
    padding: 32px 0;
    box-shadow: -16px 16px 40px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.25);
    z-index: 4;

    /* hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        opacity    0.22s ease,
        transform  0.22s ease,
        visibility 0s   linear 0.22s;
}

#dma-mega-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity   0.22s ease,
        transform 0.22s ease;
}

/* Browsers with no backdrop-filter support (older Firefox) get a solid,
   fully-opaque version of the same configured color instead of a
   half-transparent one that can't actually blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #dma-mega-menu {
        background: var(--dma-mega-bg-solid, rgb(0, 81, 90));
    }
}

.menu-contents {
    display: none;
    color: white;
}
.menu-contents.active {
    display: block;
}
.menu-contents a {
    color: white !important;
    text-decoration: none !important;
}

/* Small caps label orienting the visitor to which panel is open — the
   panel lost its only other piece of context (the descriptive-text column)
   when it switched to an all-chips layout, so without this it can read as
   a disconnected grid of icons rather than "this is the Markets menu". */
.dma-mega-title {
    font-family: var(--dma-font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 20px;
}

/* Scrolls independently when a long CPT list runs taller than the
   available viewport height, instead of pushing the whole panel/page to
   overflow. max-height subtracts ONLY --dma-mega-content-top (everything
   above this element: header + #dma-mega-menu's own top padding), so the
   grid's bottom edge runs all the way to the bottom of the screen — no
   reserved gap. This is a safety cap, not the normal case — the panel now
   sizes to its content and only kicks in for an unusually long list. */
.dma-mega-inner {
    padding: 0 32px;
    max-height: calc(100vh - var(--dma-mega-content-top));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Large chip grid spanning the full width of the panel — mirrors the
   mobile overlay's icon-tile cards (see section 14) instead of the old
   compact icon+text pill list paired with a descriptive-text column. */
.dma-mega-col--list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.dma-cpt-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 28px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
    color: white !important;
    text-decoration: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Lighten and lift on hover, not darken — against the old solid red panel a
   black overlay stood out fine, but against the new near-black glass
   background it would barely register. White at low opacity is the same
   highlight treatment, just flipped to stay visible on a dark surface; the
   slight lift gives the grid some tactile, "clickable" feedback instead of
   a flat color swap. Keyboard focus gets its own visible ring rather than
   relying on the same subtle background shift, which isn't enough contrast
   to meet a11y focus-visibility guidelines on its own. */
.dma-cpt-single:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-2px);
}

.dma-cpt-single:focus-visible {
    background: rgba(255,255,255,0.16);
    outline: 2px solid white;
    outline-offset: 2px;
}

/* The market/service you're currently viewing — persistent state in the panel */
.dma-cpt-single.is-current {
    background: rgba(255,255,255,0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.dma-cpt-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dma-cpt-icon img {
    max-width: 44px;
    max-height: 44px;
    filter: brightness(0) invert(1); /* white tint for SVGs */
}

.dma-cpt-title {
    font-family: var(--dma-font-primary);
    font-size: 17px;
    line-height: 22px;
    font-weight: 700;
    color: white;
}

/* ─── 9. Homepage Header (transparent / pre-scroll) ───────────────────── */
body.home .dma-desktop-header-wrap {
    height: 0;
    transition: height 0.5s ease-in-out;
}

body.home .dma-desktop-header {
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}

/* Homepage top bar — transparent, sits at top.
   height/line-height use --dma-header-top (36px, the same var the stuck/
   interior top bar uses) — this used to be a hardcoded 48px, 12px taller
   than the stuck state for no functional reason, which pushed the border-
   bottom separator line 12px further from the logo than in the stuck
   state (the logo's own band position is unchanged either way — it was
   already pinned to match the stuck inner logo's position, per the
   comment below). Matching this height is what actually fixes the
   inconsistent logo-to-line padding: with both at 36px, the two states'
   total header height comes out identical (106px), which is a good sign
   this was the correct value, not an arbitrary one. */
body.home .site-header:not(.stuck) .dma-header-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--dma-header-top);
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}

body.home .site-header:not(.stuck) .dma-header-top ul li {
    color: white;
    line-height: var(--dma-header-top);
}

body.home .site-header:not(.stuck) .dma-header-top ul li a {
    color: white !important;
}

body.home .site-header:not(.stuck) .dma-header-top .dma-search-button .dma-white-icon { display: inline-block; }
body.home .site-header:not(.stuck) .dma-header-top .dma-search-button .dma-gray-icon  { display: none; }

/* Homepage splash logo — same position as the sticky inner logo */
body.home .site-header:not(.stuck) .dma-homepage-logo {
    position: absolute;
    left: 16px;
    top: var(--dma-header-top);
    height: var(--dma-header-main);
    display: flex;
    align-items: center;
}

body.home .site-header:not(.stuck) .dma-homepage-logo img {
    height: 40px;
    width: auto !important;
    max-width: none;
    display: block;
}

/* Homepage main nav row — transparent, centered */
body.home .site-header:not(.stuck) .dma-header-main {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    top: var(--dma-header-top);
    position: absolute;
    left: 0;
    width: 100%;
}

body.home .site-header:not(.stuck) .dma-header-main .dma-inner-logo {
    width: 0;
    overflow: hidden;
}

body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li > a {
    color: white !important;
}

body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li {
    border-bottom: none;
}

body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-item,
body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li:hover {
    border-bottom: 3px solid rgba(255,255,255,0.7);
}

body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li.current-menu-item a,
body.home .site-header:not(.stuck) .dma-header-main .dma-main-navigation ul.dma-menu > li:hover a {
    color: white !important;
}


/* ─── 10. Stuck / Interior Header ──────────────────────────────────────── */
body.home .site-header.stuck .dma-desktop-header {
    transform: translateY(0);
}

body.home .site-header.stuck .dma-desktop-header-wrap {
    height: var(--dma-header-height);
}

body.home .site-header.stuck .dma-header-top,
body.home .site-header.stuck .dma-header-main {
    position: relative;
    top: auto !important;
}

/* Interior pages: top bar shows icons in dark */
body:not(.home) .dma-desktop-header .dma-header-top ul li,
body:not(.home) .dma-desktop-header .dma-header-top ul li a,
body.home .site-header.stuck .dma-header-top ul li,
body.home .site-header.stuck .dma-header-top ul li a {
    color: var(--dma-charcoal) !important;
}

body:not(.home) .dma-header-top .dma-search-button .dma-white-icon,
body.home .site-header.stuck .dma-header-top .dma-search-button .dma-white-icon { display: none; }
body:not(.home) .dma-header-top .dma-search-button .dma-gray-icon,
body.home .site-header.stuck .dma-header-top .dma-search-button .dma-gray-icon  { display: inline-block; }

/* Interior pages: homepage logo hidden */
body:not(.home) .dma-homepage-logo,
body.home .site-header.stuck .dma-homepage-logo { display: none; }

/* Interior: main nav links dark */
body:not(.home) .dma-header-main .dma-main-navigation ul.dma-menu > li > a,
body.home .site-header.stuck .dma-header-main .dma-main-navigation ul.dma-menu > li > a {
    color: var(--dma-charcoal) !important;
}

/* Interior: inner logo visible */
body:not(.home) .dma-inner-logo { width: 260px; }
body.home .site-header.stuck .dma-inner-logo { width: 260px; }


/* ─── 11. About Subheader ──────────────────────────────────────────────── */
.dma-about-subheader-wrap {
    width: 100%;
    position: relative;
}

.dma-sticky-subheader {
    width: 100%;
    position: fixed;
    left: 0;
    top: var(--dma-mobile-header-h-plain);
    z-index: 999;
}

@media (max-width: 991px) {
    body.has-mobile-cta .dma-sticky-subheader {
        top: var(--dma-mobile-header-h);
    }
}

@media (min-width: 992px) {
    .dma-sticky-subheader {
        top: var(--dma-header-height);
    }
    /* Push page content down to account for subheader */
    body.has-secondary-nav #content {
        padding-top: var(--dma-about-sub-h);
    }
}

.admin-bar .dma-sticky-subheader { top: calc(var(--dma-header-height) + 46px); }
@media screen and (min-width: 783px) {
    .admin-bar .dma-sticky-subheader { top: calc(var(--dma-header-height) + 32px); }
}

/*
 * Old site reference (gotheme2015/stylesheets/layout.scss):
 *   .subheader-wrap.about-subheader — teal ($teal-007) bar, box-shadow.
 *   Mobile: white label text on teal, white dropdown panel w/ teal links,
 *           current item hidden.
 *   Desktop (≥992px): label hidden, links inline-centered, white 24px text,
 *           4px white underline on current item (we add it on hover too).
 */
.dma-about-subheader {
    background: var(--dma-teal);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}

.dma-drop-down-wrap {
    position: relative;
}

.dma-width-wrap {
    position: relative;
}

.dma-label-bar {
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    padding: 6px 15px 9px;
    font-family: var(--dma-font-primary);
    font-size: 20px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dma-label-bar .dma-label-chevron {
    transition: transform 0.3s ease;
}

.dma-label-bar[aria-expanded="true"] .dma-label-chevron {
    transform: scaleY(-1);
}

.dma-drop-wrapper {
    position: absolute;
    width: calc(100% - 24px);
    left: 12px;
    top: calc(100% + 16px);
    background: #fff;
    z-index: 99;
    box-shadow: 0 0 16px rgba(0,0,0,0.3);
    padding-left: 12px;
    display: none;
}

.dma-drop-wrapper.open {
    display: block;
}

.dma-accent-triangle {
    position: absolute;
    left: 30px;
    top: 1px;
    transform: translateY(-100%);
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
}

.dma-drop-buttons { position: relative; background: #fff; z-index: 2; }

.dma-drop-buttons ul { list-style: none; padding: 0; margin: 0; }
.dma-drop-buttons ul li a {
    display: block;
    border-bottom: 1px solid var(--dma-light-grey);
    padding: 14px 8px;
    font-family: var(--dma-font-primary);
    font-size: 20px;
    color: var(--dma-teal) !important;
    text-decoration: none !important;
}
.dma-drop-buttons ul li:last-child a { border-bottom: none; }
.dma-drop-buttons ul li a:hover { color: var(--dma-teal-dark) !important; }
/* Old site hides the current page in the mobile dropdown (it's the label) */
.dma-drop-buttons ul li.current-menu-item { display: none; }

/* Desktop: no dropdown — inline centered links, white text, underline hover */
@media (min-width: 992px) {
    .dma-about-subheader {
        height: 48px;
    }

    .dma-label-bar {
        display: none;
    }

    .dma-drop-wrapper {
        display: block;
        position: static;
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .dma-accent-triangle {
        display: none;
    }

    .dma-drop-buttons {
        background: transparent;
    }

    .dma-drop-buttons ul {
        width: 100%;
        text-align: center;
    }

    .dma-drop-buttons ul li {
        display: inline-block;
        padding: 0 14px;
    }

    .dma-drop-buttons ul li a,
    .dma-drop-buttons ul li:last-child a {
        display: inline-block;
        font-size: 24px;
        line-height: 26px;
        padding: 11px 4.5px 7px;
        color: #fff !important;
        border-bottom: 4px solid transparent;
    }

    .dma-drop-buttons ul li a:hover {
        color: #e6e6e6 !important;   /* darken(#fff, 10%) from the old site */
        border-bottom-color: #fff;
    }

    /* Current page stays visible on desktop: bold + white underline */
    .dma-drop-buttons ul li.current-menu-item {
        display: inline-block;
    }
    .dma-drop-buttons ul li.current-menu-item a {
        font-weight: 700;
        border-bottom-color: #fff;
    }
}

/* ─── 11b. Homepage Loading Screen ─────────────────────────────────────── */
/*
 * Replicates the old site's .gbg-loader-wrap (gotheme2015 header.php +
 * layout.scss L638): fixed full-screen white overlay w/ building pattern
 * (inline bg on the element), centered logo, fades out on window load.
 */
.dma-loader-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: white;
    opacity: 1;
    z-index: 999999999;
    transition: opacity 0.4s ease;   /* matches jQuery fadeOut's 400ms */
}

.dma-loader-wrap.fade-out {
    opacity: 0;
    pointer-events: none;
}

.dma-loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 85%;
    max-height: 65px;
}

.dma-loader-logo.splash {
    max-width: 560px;
}

/* The 560px cap above is fine on desktop, but on phones it's wider than the
   viewport itself — that's the overflow. Fall back to the same relative cap
   the non-splash logo already uses, so it can never exceed the screen. */
@media (max-width: 991px) {
    .dma-loader-logo.splash {
        max-width: 85%;
    }
}

/* Belt-and-braces: never show outside the homepage (old-site rule) */
body:not(.home) .dma-loader-wrap {
    display: none !important;
}

/* ─── 12. Mobile Header Wrap ───────────────────────────────────────────── */
.dma-mobile-header-wrap {
    width: 100%;
    position: relative;
    /* On the homepage this snaps between 0 (floating pre-scroll) and its
       reserved height (post-.stuck) — an instant, untransitioned height
       change here is a layout reflow happening mid-scroll-gesture, which
       on real mobile devices could visibly "jump" as the browser's scroll
       position/anchoring caught up. Animating it spreads that reflow over
       several frames instead of one abrupt jump. */
    transition: height 0.3s ease;
}

body:not(.home) .dma-mobile-header-wrap {
    height: var(--dma-mobile-header-h-plain);
}

@media (max-width: 991px) {
    body:not(.home).has-mobile-cta .dma-mobile-header-wrap {
        height: var(--dma-mobile-header-h);
    }
}

/* Pre-scroll homepage: the mobile bar is never hidden (unlike desktop's
   translateY(-100%) — mobile always needs the hamburger reachable), it just
   has no background yet, floating transparently over the hero. So, exactly
   like desktop's own pre-scroll rule (`.dma-desktop-header-wrap { height:0 }`
   a few lines up), this reserves NO space at all — the previous value here,
   --dma-mobile-cta-h (40px), was an arbitrary in-between that was neither
   "0, fully floating" nor the header's real height, so the bar's actual
   content (which is taller than 40px whenever the optional CTA strip isn't
   present) visually overlapped whatever the hero rendered right after it.
   Once `.stuck` is added on scroll the correctly-sized reservation already
   further down this file (var(--dma-mobile-header-h)) takes over. */
body.home .site-header:not(.stuck) .dma-mobile-header-wrap {
    height: 0;
}

/* ─── 13. Mobile Header Bar ────────────────────────────────────────────── */
.dma-mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    /* Promotes this to its own GPU compositing layer. A well-documented iOS
       Safari quirk: plain position:fixed elements can visibly lag/jump
       during scroll (the browser computes fixed position against the
       "layout viewport", which can momentarily disagree with what's on
       screen while the address bar collapses/expands) — this translateZ(0)
       hint is the standard mitigation, and is a no-op transform otherwise. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

body:not(.home) .dma-mobile-header,
body.home .site-header.stuck .dma-mobile-header {
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.dma-mobile-contact-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--dma-mobile-cta-h);
    background: var(--dma-red);
    color: white !important;
    font-family: var(--dma-font-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: var(--dma-mobile-cta-h);
    text-align: center;
    justify-content: center;
    text-decoration: none !important;
}

.dma-mobile-logo-wrap {
    padding: 12px 16px;
    flex: 1;
}

.dma-mobile-logo-wrap img { max-height: 28px; width: auto; }

/* Homepage white/dark logo split — mirrors the desktop .dma-homepage-logo /
   .dma-inner-logo pair exactly. Default (interior pages, and the homepage
   once .stuck): dark logo. Homepage pre-scroll only: white logo instead —
   matches the mobile header being transparent over the hero at that point
   (see section 12/13, .dma-mobile-header-wrap/.dma-mobile-header). */
.dma-mobile-logo-home { display: none; }

body.home .site-header:not(.stuck) .dma-mobile-logo-home  { display: block; }
body.home .site-header:not(.stuck) .dma-mobile-logo-inner { display: none; }

.dma-mobile-hamburger-wrap {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    color: var(--dma-charcoal);
    flex-shrink: 0;
}

/* Same homepage-transparent/white treatment as the logo just above — the
   icon's stroke uses currentColor (see header.php), so swapping this one
   property is enough, no separate white/dark icon markup needed. */
body.home .site-header:not(.stuck) .dma-mobile-hamburger-wrap {
    color: white;
}

.admin-bar .dma-mobile-header { top: 46px; }
@media screen and (min-width: 783px) {
    .admin-bar .dma-mobile-header { top: 32px; }
}

/* ─── 14. Mobile Overlays ──────────────────────────────────────────────── */
.dma-mobile-header-overlay,
.dma-services-overlay,
.dma-markets-overlay,
.dma-about-menu-overlay,
.dma-mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: var(--dma-light-grey);
    visibility: hidden;
    opacity: 0;
    transform: translate(100%, 0);
    transition: all 0.5s ease-in-out;
}

.dma-mobile-header-overlay.open-menu,
.dma-services-overlay.open-menu,
.dma-markets-overlay.open-menu,
.dma-about-menu-overlay.open-menu,
.dma-mobile-search-overlay.open-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(0, 0);
}

/* Animate nav items in when overlay opens.
   NOTE: this used to target `.menu-header-menu-container`, a class that
   doesn't exist anywhere in header.php's markup (the mobile nav's real
   wrapper is `.dma-main-navigation`) — so this rule never matched, and the
   base "hidden" state below it (opacity:0, translated off-screen) was never
   reversed. The main hamburger menu's top-level items (About, Markets,
   Services, Projects, News + Events, Contact, Careers) were permanently
   invisible whenever the overlay opened. Fixed by retargeting to the real
   wrapper class. */
.dma-mobile-header-overlay.open-menu .dma-main-navigation ul li,
.dma-services-overlay.open-menu .dma-services-menu ul li,
.dma-markets-overlay.open-menu .dma-markets-menu ul li,
.dma-about-menu-overlay.open-menu .dma-about-menu ul li {
    opacity: 1;
    transform: translate(0, 0) !important;
}

.dma-info-wrap {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow-y: auto;
    padding-bottom: 60px;
    overscroll-behavior: contain; /* don't let the background page scroll-chain on iOS */
}

/* Overlay header row (logo + close) */
.dma-mobile-header-overlay .dma-mobile-logo-wrap,
.dma-mobile-header-overlay .dma-mobile-overlay-close {
    display: inline-block;
    vertical-align: top;
}

.dma-mobile-header-overlay .dma-mobile-logo-wrap {
    padding: 24px 24px 0;
    width: 75%;
    max-width: 225px;
    float: left;
}

.dma-mobile-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    padding: 24px 24px 0;
    color: var(--dma-charcoal);
}

.dma-mobile-overlay-close svg { display: block; }

/* Mobile nav links */
.dma-mobile-header-overlay .dma-main-navigation,
.dma-about-menu-overlay .dma-about-menu,
.dma-services-overlay .dma-services-menu,
.dma-markets-overlay .dma-markets-menu {
    padding: 32px 24px 0;
    clear: both;
}

.dma-mobile-header-overlay .dma-main-navigation ul,
.dma-about-menu-overlay .dma-about-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dma-mobile-header-overlay ul li,
.dma-about-menu-overlay ul li {
    transform: translate(200px, 0);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.dma-mobile-header-overlay ul li:nth-child(1) { transition-delay: 0.1s; }
.dma-mobile-header-overlay ul li:nth-child(2) { transition-delay: 0.2s; }
.dma-mobile-header-overlay ul li:nth-child(3) { transition-delay: 0.3s; }
.dma-mobile-header-overlay ul li:nth-child(4) { transition-delay: 0.4s; }
.dma-mobile-header-overlay ul li:nth-child(5) { transition-delay: 0.5s; }
.dma-mobile-header-overlay ul li:nth-child(6) { transition-delay: 0.6s; }
.dma-mobile-header-overlay ul li:nth-child(7) { transition-delay: 0.7s; }

.dma-mobile-header-overlay ul li a,
.dma-about-menu-overlay ul li a {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--dma-font-primary);
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--dma-teal) !important;
    margin-top: 10px;
    text-decoration: none !important;
}

/* Chevron affordance on the three items that open a sub-panel instead of
   navigating directly — without this there's nothing to tell a visitor
   that tapping "Markets" behaves differently than tapping "Projects". */
.dma-mobile-header-overlay .market-menu-link > a::after,
.dma-mobile-header-overlay .service-menu-link > a::after,
.dma-mobile-header-overlay .about-menu-link > a::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.7;
}

/* Overlay title heading */
.dma-overlay-title {
    font-family: var(--dma-font-mono);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--dma-charcoal-64);
    margin-bottom: 16px;
}

/* ── Services / Markets sub-overlays: 2-col icon-tile grid ───────────────
   Dropped the plain icon+text list for a card grid — with 14 markets and
   7 services, a single column meant a lot of scrolling for not much payoff.
   Cards read faster (scannable in 2s, like an app's category picker) and
   give tapping something concrete: layout is a `.wp-block-kadence-columns`
   made of a light card, a bigger icon, and a shorter label. */
.dma-services-menu ul,
.dma-markets-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dma-services-overlay ul li,
.dma-markets-overlay ul li {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.dma-services-overlay ul li:nth-child(1),  .dma-markets-overlay ul li:nth-child(1)  { transition-delay: 0.05s; }
.dma-services-overlay ul li:nth-child(2),  .dma-markets-overlay ul li:nth-child(2)  { transition-delay: 0.08s; }
.dma-services-overlay ul li:nth-child(3),  .dma-markets-overlay ul li:nth-child(3)  { transition-delay: 0.11s; }
.dma-services-overlay ul li:nth-child(4),  .dma-markets-overlay ul li:nth-child(4)  { transition-delay: 0.14s; }
.dma-services-overlay ul li:nth-child(5),  .dma-markets-overlay ul li:nth-child(5)  { transition-delay: 0.17s; }
.dma-services-overlay ul li:nth-child(6),  .dma-markets-overlay ul li:nth-child(6)  { transition-delay: 0.2s; }
.dma-services-overlay ul li:nth-child(7),  .dma-markets-overlay ul li:nth-child(7)  { transition-delay: 0.23s; }
.dma-markets-overlay ul li:nth-child(8)  { transition-delay: 0.26s; }
.dma-markets-overlay ul li:nth-child(9)  { transition-delay: 0.29s; }
.dma-markets-overlay ul li:nth-child(10) { transition-delay: 0.32s; }
.dma-markets-overlay ul li:nth-child(11) { transition-delay: 0.35s; }
.dma-markets-overlay ul li:nth-child(12) { transition-delay: 0.38s; }
.dma-markets-overlay ul li:nth-child(13) { transition-delay: 0.41s; }
.dma-markets-overlay ul li:nth-child(14) { transition-delay: 0.44s; }

.dma-services-overlay.open-menu ul li,
.dma-markets-overlay.open-menu ul li {
    opacity: 1;
    transform: scale(1) !important;
}

.dma-services-overlay ul li a,
.dma-markets-overlay ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    height: 100%;
    padding: 20px 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.dma-services-overlay ul li a:active,
.dma-markets-overlay ul li a:active {
    transform: scale(0.95);
    background: var(--dma-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.dma-services-overlay .dma-overlay-icon img,
.dma-markets-overlay .dma-overlay-icon img {
    width: 44px;
    height: 44px;
}

.dma-services-overlay .dma-overlay-title-text,
.dma-markets-overlay .dma-overlay-title-text {
    font-family: var(--dma-font-primary);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--dma-teal);
}

.dma-overlay-icon img { width: 32px; height: 32px; }
.dma-overlay-title-text { font-size: 24px; font-weight: 200; }

/* Back arrow buttons in overlays */
.dma-services-back-arrow,
.dma-markets-back-arrow,
.dma-about-back-arrow,
.dma-search-back-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--dma-font-primary);
    font-size: 28px;
    line-height: 34px;
    color: var(--dma-teal);
    padding: 18px 16px;
}

/* Mobile CTA fixed at bottom of overlay */
.dma-mobile-cta-link {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background: var(--dma-red);
    color: white !important;
    font-family: var(--dma-font-primary);
    font-size: 22px;
    line-height: 45px;
    text-align: center;
    font-weight: 700;
    z-index: 999;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Mobile search form */
.dma-mobile-search-form {
    padding: 32px 24px 0;
    clear: both;
}

.dma-mobile-search-form input[type="search"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--dma-teal);
    background: transparent;
    font-family: var(--dma-font-primary);
    font-size: 28px;
    padding: 8px 0;
    outline: none;
    color: var(--dma-charcoal);
    border-radius: 0;
    -webkit-appearance: none;
}

/* Mobile search wrap in main overlay */
.dma-mobile-search-wrap { padding: 0 24px; }
.dma-mobile-search-wrap .dma-search-button {
    cursor: pointer;
    font-family: var(--dma-font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--dma-teal);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

/* About mobile link — pointer-events disabled so the JS click handler on
   the parent <li> fires instead of navigating (see custom-header.js).
   Scoped to the mobile overlay specifically: the About item now carries
   this same 'about-menu-link' class on the DESKTOP nav too (both render
   the same "Main Menu"), and this rule used to have no scoping at all —
   it would have made the desktop About link permanently unclickable the
   moment that class was added there. */
.dma-mobile-header-overlay .about-menu-link a { pointer-events: none !important; }

/* ─── 15. Interior page padding (accounts for fixed header) ────────────── */
body:not(.home) {
    padding-top: 0; /* handled by .dma-desktop-header-wrap height on desktop */
}

/* Mobile: push content below the fixed mobile header */
@media (max-width: 991px) {
    body:not(.home) #content {
        margin-top: 0; /* mobile header takes up space via .dma-mobile-header-wrap height */
    }
    body.home .site-header.stuck .dma-mobile-header-wrap {
        height: var(--dma-mobile-header-h-plain);
    }
    body.home.has-mobile-cta .site-header.stuck .dma-mobile-header-wrap {
        height: var(--dma-mobile-header-h);
    }
}

/* ─── 16. Anchor Scroll Offset ──────────────────────────────────────────
   Both headers are position:fixed, so a plain #anchor jump (e.g. the
   Location Map block's linked dots) scrolls its target flush to the very
   top of the viewport — right underneath the header. scroll-padding-top
   tells the browser to stop that many pixels short instead, for ANY
   fragment link or scrollIntoView() call, site-wide, with no JS needed.

   Set on BOTH html and body: scroll-padding-top only has an effect on
   whichever element is the document's actual scrolling box, which is
   normally <html> — except Kadence's own global.css sets
   `body { overflow-x: hidden }`, and per the HTML5 "propagate the
   viewport scrolling box" rule, ANY overflow value on <body> (even just
   overflow-x) hands that role to <body> instead when <html> itself has
   no overflow set. Confirmed empirically: an html-only rule here was a
   no-op (verified with matching before/after screenshots at the same
   #anchor), while adding the body rule fixed it. Targeting both means
   this keeps working regardless of which element ends up the scroller.

   The extra --dma-anchor-buffer on top of the raw header height is
   breathing room below the header — e.g. the location cards on /contact/
   use a heading with margin-top:-40px to overlap their box's top border,
   so the raw header height alone still leaves that heading tucked behind
   the header. */
:root {
    --dma-anchor-buffer: 40px;
}
html,
body {
    scroll-padding-top: calc(var(--dma-mobile-header-h-plain) + var(--dma-anchor-buffer));
}
@media (max-width: 991px) {
    body.has-mobile-cta {
        scroll-padding-top: calc(var(--dma-mobile-header-h) + var(--dma-anchor-buffer));
    }
}
@media (min-width: 992px) {
    html,
    body {
        scroll-padding-top: calc(var(--dma-header-height) + var(--dma-anchor-buffer));
    }
    /* About-section pages also have a fixed secondary subnav bar
       (.dma-sticky-subheader) stacked below the main header — anchors need
       to clear that too, or they land tucked underneath it. */
    body.has-secondary-nav {
        scroll-padding-top: calc(var(--dma-header-height) + var(--dma-about-sub-h) + var(--dma-anchor-buffer));
    }
}