/* =====================================================================
   Header menu refinements (September 2026)
   ---------------------------------------------------------------------
   Loaded after new-july-2026.css and after Max Mega Menu's generated CSS.

   Symbol rules (client request):
     •  bullet   = page with no sub-pages (whole row is a link)
     >  chevron  = page with sub-pages; click the chevron (or anywhere on
                   the row that is not the words) to expand, it rotates to
                   "v" while open. Clicking the words goes to that
                   section's landing page.
   Desktop: the panels open instantly on hover of the top-level label with
   a short fade-up. Everything inside the panels is click-to-expand, with
   an animated expand/collapse. Health Insurance Denials sits in the left
   column and is expanded by default; the other practice areas sit in the
   right column, collapsed.
   Mobile (.mobinav): bullets for leaf pages, the existing (+)/(-) toggle
   for pages with sub-pages.

   Markup produced by js/header-menu-2026-09.js for each parent <li>:
     <li class="menu-item-has-children [jd-open]">
        <a>Label</a>
        <button class="jd-toggle"></button>
        <div class="jd-sub"><ul class="sub-menu">…</ul></div>
     </li>
   ===================================================================== */

:root {
    --jd-menu-link: #244A52;        /* section links + chevrons (dark teal, ~8.9:1 on white) */
    --jd-menu-link-hover: #12292E;  /* hover / open state */
    --jd-menu-dark: #244A52;        /* sub-page links */
    --jd-menu-rule: #F3F3F3;
    --jd-menu-hover-bg: #F3F8F7;
    --jd-menu-sym-col: 28px;   /* width of the symbol column (bullet / chevron) */
}

/* ---------------------------------------------------------------------
   Toggle button (chevron). Sits in a flex row next to the link and
   stretches to the row height, so the chevron is always vertically
   centered on the label, even when the label wraps.
   --------------------------------------------------------------------- */
.jd-toggle {
    order: 1;
    flex: 0 0 var(--jd-menu-sym-col);
    width: var(--jd-menu-sym-col);
    align-self: stretch;
    min-height: 34px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jd-menu-link);
    line-height: 1;
    border-radius: 6px;
}
.jd-toggle::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-2px) rotate(-45deg);   /* > */
    transition: transform .2s ease;
}
li.jd-open > .jd-toggle::before {
    transform: translateY(-2px) rotate(45deg);    /* v */
}
.jd-toggle:hover,
.jd-toggle:focus-visible,
li.jd-open > .jd-toggle {
    color: var(--jd-menu-link-hover);
}
.jd-toggle:focus-visible {
    outline: 2px solid var(--jd-menu-dark);
    outline-offset: -2px;
}

/* A parent link with no destination (empty href or "#") toggles its list */
a.jd-link-toggles {
    cursor: pointer;
}

/* Collapsible wrapper: animates 0 -> auto height via grid rows */
.jd-sub {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .2, 1), padding-bottom .3s ease;
    cursor: default;
}
li.jd-open > .jd-sub {
    grid-template-rows: 1fr;
    padding-bottom: 8px;
}
.jd-sub > ul {
    min-height: 0;
    overflow: hidden;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
}
li.jd-open > .jd-sub > ul {
    opacity: 1;
    visibility: inherit;   /* inherit, not visible: must stay hidden when the whole panel is closed */
    transform: none;
    transition: opacity .22s ease .05s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

/* Panel open animation (top-level hover) */
@keyframes jdPanelIn {
    from { opacity: 0; translate: -50% 14px; }
    to   { opacity: 1; translate: -50% 0; }
}

@media screen and (min-width: 1025px) {

    /* -----------------------------------------------------------------
       Kill the legacy indicators: Max Mega Menu arrows inside panels and
       the old (+)/(-) toggles.
       ----------------------------------------------------------------- */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu ul.mega-sub-menu span.mega-indicator,
    .top-menu .hdr-practice-submenu .submenu-toggle {
        display: none !important;
    }

    /* Top-level items stay the positioning context for their panels
       (Max Mega Menu sets megamenu items to static). */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-item {
        position: relative !important;
    }

    /* Shared panel geometry: centered under the label, fade-up on open.
       The theme forces transform via !important, so the centering uses
       the separate `translate` property, which the keyframes animate. */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-item > ul.mega-sub-menu {
        left: 50% !important;
        right: auto !important;
        transform: none !important;
        translate: -50% 0;
        top: 100% !important;
        max-width: calc(100vw - 40px) !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
        max-height: min(620px, calc(100vh - 150px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
        transition: none !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu {
        animation: jdPanelIn .24s cubic-bezier(.2, .7, .2, 1) both;
    }

    /* -----------------------------------------------------------------
       PRACTICE AREAS mega panel
       ----------------------------------------------------------------- */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
        width: 800px !important;
        padding: 26px 30px 28px !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu .textwidget > div,
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu .textwidget > div > div {
        margin: 0;
        padding: 0;
    }

    /* Shortcode wrapper: single block (the old right-hand hover panel is gone) */
    .practice-area-menu {
        display: block;
        gap: 0;
    }
    .practice-area-menu .menu-area,
    .practice-area-menu .menu-practice-areas-sep-2026-container {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* Two columns: Health Insurance Denials (first item) left, the rest right */
    .practice-area-menu #practice-menu {
        display: grid !important;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        column-gap: 34px;
        align-items: start;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .practice-area-menu #practice-menu > li {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--jd-menu-rule);
    }
    .practice-area-menu #practice-menu > li:first-child {
        grid-column: 1;
        grid-row: 1 / span 12;
        border-bottom: 0;
        padding-right: 10px;
        border-right: 1px solid var(--jd-menu-rule);
    }
    .practice-area-menu #practice-menu > li:not(:first-child) {
        grid-column: 2;
    }
    .practice-area-menu #practice-menu > li:last-child {
        border-bottom: 0;
    }
    .practice-area-menu #practice-menu li {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
        float: none;
    }
    /* Parent rows: flex row = [chevron][label], then the collapsible list */
    .practice-area-menu #practice-menu li.menu-item-has-children {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        cursor: pointer;
    }
    .practice-area-menu #practice-menu li.menu-item-has-children > a {
        order: 2;
        flex: 0 1 auto;
        /* clamp so a long label shares the line with the chevron instead of wrapping under it */
        max-width: calc(100% - var(--jd-menu-sym-col));
        min-width: 0;
        padding-left: 0 !important;
    }
    .practice-area-menu #practice-menu li.menu-item-has-children:hover > .jd-toggle {
        color: var(--jd-menu-link-hover);
    }

    /* Links: reset the July theme styling, then style per level */
    .top-menu .mega-sub-menu li .menu-practice-areas-sep-2026-container ul > li > a,
    .practice-area-menu #practice-menu a {
        float: none;
        width: auto;
        display: block;
        position: relative !important;
        text-transform: none;
        border-bottom: 0 !important;
        background: transparent !important;
        text-decoration: none !important;
        line-height: 1.3;
        transition: color .15s ease, background-color .15s ease;
    }
    .practice-area-menu #practice-menu > li > a {
        font-size: 16px;
        font-weight: 500 !important;
        color: var(--jd-menu-link) !important;
        padding: 14px 24px 14px var(--jd-menu-sym-col);
    }
    .practice-area-menu #practice-menu > li > a:hover,
    .practice-area-menu #practice-menu > li.jd-open > a {
        color: var(--jd-menu-link-hover) !important;
    }
    .practice-area-menu #practice-menu > li > a:hover {
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    /* Level 2 (e.g. the Health Insurance Denials pages) */
    .practice-area-menu #practice-menu ul.sub-menu {
        padding: 0 0 0 10px;
        list-style: none;
        display: block !important;
    }
    .practice-area-menu #practice-menu .jd-sub > ul.sub-menu {
        display: block !important;
    }
    .practice-area-menu #practice-menu ul.sub-menu li {
        border: 0;
    }
    .practice-area-menu #practice-menu ul.sub-menu a {
        font-size: 15px;
        font-weight: 400 !important;
        color: var(--jd-menu-dark) !important;
        padding: 9px 12px 9px 26px;
        border-radius: 6px;
    }
    .practice-area-menu #practice-menu ul.sub-menu li.menu-item-has-children > a {
        padding-left: 2px !important;
        max-width: calc(100% - 24px);
    }
    .practice-area-menu #practice-menu ul.sub-menu a:hover {
        background: var(--jd-menu-hover-bg) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
    .practice-area-menu #practice-menu ul.sub-menu > li > .jd-toggle {
        flex-basis: 24px;
        width: 24px;
        color: var(--jd-menu-dark);
    }
    .practice-area-menu #practice-menu ul.sub-menu > li.jd-open > a {
        font-weight: 600 !important;
    }

    /* Level 3+ (e.g. the insurance companies list) */
    .practice-area-menu #practice-menu ul.sub-menu ul.sub-menu {
        padding: 0 0 0 14px;
    }
    .practice-area-menu #practice-menu ul.sub-menu ul.sub-menu a {
        font-size: 14px;
        padding: 7px 10px 7px 24px;
    }
    .practice-area-menu #practice-menu ul.sub-menu ul.sub-menu li.menu-item-has-children > a {
        padding-left: 0 !important;
    }

    /* Symbols inside the Practice Areas panel */
    .top-menu .mega-sub-menu li .menu-practice-areas-sep-2026-container ul > li > a::before,
    .practice-area-menu #practice-menu a::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 50%;
        background: currentColor !important;
        background-image: none !important;
        filter: none !important;
        transform: none;
    }
    .practice-area-menu #practice-menu ul.sub-menu a::before {
        left: 9px;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
    }
    .practice-area-menu #practice-menu ul.sub-menu ul.sub-menu a::before {
        left: 8px;
    }
    .practice-area-menu #practice-menu li.menu-item-has-children > a::before,
    .practice-area-menu #practice-menu a::after {
        display: none !important;
    }

    /* -----------------------------------------------------------------
       FLYOUT panels (About / Results / Resources)
       ----------------------------------------------------------------- */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu {
        display: block !important;
        width: 440px !important;
        padding: 20px 26px 22px !important;
        column-gap: 0 !important;
    }
    /* Long flyouts (7+ items, e.g. Resources) get two columns */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu:has(> li:nth-child(7)) {
        display: block !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 30px !important;
        width: 760px !important;
		column-count:2 !important;
    }

    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item {
        position: relative;
        display: block;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--jd-menu-rule) !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item:last-child {
        border-bottom: 0 !important;
    }
    /* Parent rows (e.g. Service Areas) */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item-has-children {
        display: flex !important;
        flex-wrap: wrap;
        align-items: stretch;
        cursor: pointer;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu > li.mega-menu-item-has-children:hover > .jd-toggle {
        color: var(--jd-menu-link-hover);
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
        float: none !important;
        display: block !important;
        width: auto !important;
        position: relative !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        text-transform: none !important;
        color: var(--jd-menu-link) !important;
        padding: 14px 15px 14px var(--jd-menu-sym-col) !important;
        background: transparent !important;
        border: 0 !important;
        text-decoration: none !important;
        height: auto !important;
        transition: color .15s ease;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link {
        order: 2;
        flex: 0 1 auto;
        max-width: calc(100% - var(--jd-menu-sym-col)) !important;
        min-width: 0;
        padding-left: 0 !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.jd-open > a.mega-menu-link {
        color: var(--jd-menu-link-hover) !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    /* Symbols inside flyouts */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 9px !important;
        top: 50% !important;
        width: 6px !important;
        height: 6px !important;
        margin: -3px 0 0 !important;
        border-radius: 50%;
        background: currentColor !important;
        background-image: none !important;
        filter: none !important;
        font: 0/0 a;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link::before {
        display: none !important;
    }

    /* Nested lists inside flyouts (e.g. Service Areas cities): collapsed
       until the chevron is clicked, then a compact two-column list. Max
       Mega Menu would otherwise fly these out on hover, and the July theme
       applies `all: inherit` to these lists with a higher-specificity
       selector, hence the !important on every property here. */
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu .jd-sub > ul.mega-sub-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 14px !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 0 0 10px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-height: none !important;
        float: none !important;
        translate: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-6px) !important;
        transition: opacity .18s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.jd-open > .jd-sub > ul.mega-sub-menu {
        opacity: 1 !important;
        visibility: inherit !important;
        transform: none !important;
        transition: opacity .22s ease .05s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item {
        border: 0 !important;
        width: 100% !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
        font-size: 14px !important;
        color: var(--jd-menu-dark) !important;
        padding: 7px 8px 7px 24px !important;
        border-radius: 6px !important;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
        background: var(--jd-menu-hover-bg) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
    #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before {
        width: 5px !important;
        height: 5px !important;
        margin-top: -2.5px !important;
        left: 8px !important;
    }

    /* Narrower screens */
    @media screen and (max-width: 1366px) {
        #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
            width: 740px !important;
            padding: 22px 24px 24px !important;
        }
        #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu:has(> li:nth-child(7)) {
            width: 700px !important;
        }
        .practice-area-menu #practice-menu > li > a,
        #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
            font-size: 15px !important;
            padding-top: 12px !important;
            padding-bottom: 12px !important;
        }
        .practice-area-menu #practice-menu ul.sub-menu a {
            font-size: 14px;
        }
    }
    @media screen and (max-width: 1180px) {
        #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
            width: 680px !important;
        }
        #mega-menu-wrap-header-july-menu #mega-menu-header-july-menu > li.mega-menu-flyout > ul.mega-sub-menu:has(> li:nth-child(7)) {
            width: 640px !important;
        }
    }
}

/* ---------------------------------------------------------------------
   MOBILE (.mobinav): bullet for leaf pages, keep (+)/(-) for parents.
   Parents lose the old ">" arrow so each row shows a single symbol.
   --------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .mobinav a::before {
        background-image: none;
        background-color: #231F20;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        left: 8px;
        top: 7px;
        filter: none;
    }
    .mobinav ul li ul li a::before {
        top: 6px;
        left: 4px;
        width: 5px;
        height: 5px;
    }
    .mobinav li.menu-item-has-children > a::before {
        display: none;
    }
    .mobinav li.menu-item-has-children > a {
        padding-right: 50px;
    }
    /* bigger tap target for the (+)/(-) */
    .mobinav ul li .drop,
    .mobinav ul li .drop.open {
        width: 44px;
        height: 40px;
        top: -10px;
        right: 0;
    }
    .mobinav ul li .drop::before {
        top: 19px;
        right: 8px;
    }
    .mobinav ul li .drop.close::after {
        top: 11px;
        right: 16px;
    }
    /* darker label while its section is open */
    .mobinav li.menu-item-has-children:has(> .drop.open) > a {
        color: #244A52;
    }
}