/* ═══════════════════════════════════════════════════
   Lexitas XbyK — Header override CSS
   Purpose: Align the DESKTOP header layout with live K13 (lexitaslegal.com).

   IMPORTANT: every rule here is scoped to >=992px. Below that breakpoint the
   migrated SCSS + header JS drive the mobile drawer (matching K13): the JS
   retaches the utility nav + primary nav INTO the drawer and moves the drawer
   logo into the header. If these desktop grid/util/logo rules leak into mobile
   they duplicate the logo, hide the drawer's Contact Us / Login / Pay Invoice
   links (display:none follows the retached element), and break the drawer.
   So: desktop-only here; leave mobile to the baseline.

   Issues fixed (desktop):
     1. Util top row too tall (SCSS sets height:4rem, K13 is ~2.5rem)
     2. Util item/label alignment (line-height:5rem overflow trick → flex center)
     3. Schedule Services margin-top offset removed
     4. Logo grid placement matches K13 (row 1 col 1, direct grid child)
     5. Utility flyout backdrop dimming + flyout position match K13
   ═══════════════════════════════════════════════════ */

@media (min-width: 992px) {
    /* ── 1. Header inner grid ───────────────────────── */
    /* Row 1 = full-width utility strip; row 2 = logo + main nav + search.
       The logo sits in the SECOND row, left-aligned with the nav (Services,
       Products, …) rather than spanning both rows. */
    .header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "util   util    util"
            "logo   nav     search";
        align-items: stretch;
        position: relative;
    }

    /* ── 2. Grid area assignments ───────────────────── */
    .header__util   { grid-area: util; }
    .header__logo   { grid-area: logo; }
    .header__nav    { grid-area: nav; }
    .header__search { grid-area: search; }

    /* ── 3. Util top row — compact to match K13 (~40px) ── */
    /* Override SCSS height:4rem which makes the row too tall */
    .header__util {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .header__util .util__primary {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0 1.5rem 0 0;
        gap: 0;
        height: 2.5rem;        /* matches K13 compact top bar height */
        justify-content: flex-end;
    }

    .header__util .util__primary-item {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Replace line-height:5rem overflow trick with proper flex centering */
    .header__util .util__primary-label {
        display: flex;
        align-items: center;
        line-height: 1.2;
        font-size: 0.875rem;
        height: 100%;
        white-space: nowrap;
        cursor: pointer;
        text-decoration: none;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow: visible;
    }

    /* ── 4. Logo — align center in its grid row span ─── */
    .header__logo {
        display: flex;
        align-items: center;
        padding-right: 0.5rem;
        align-self: center;
    }

    .header__logo .logo__image {
        height: clamp(2.125rem, 3.125rem, 3.125rem);
        width: auto;
        display: block;
    }

    /* ── 5. Main nav row height — keep at 4rem (matches K13) ── */
    .header__nav {
        height: 4rem;
        display: flex;
        align-items: center;
    }

    /* ── 6. Schedule Services — remove SCSS margin-top:0.6rem offset ── */
    .header .nav__primary-item.schedule-services-btn .nav__primary-label {
        margin-top: 0 !important;
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    /* ── 7. Utility flyout backdrop — match K13 dimming ──────────────
       When "Contact Us" / "Login" (top utility strip) opens a flyout, K13 dims
       the whole header below the utility strip (logo + main nav) plus the page.

       The header JS (_header.js displayBackdrop) emits an invalid calc() for the
       utility branch — `calc(100% - 40px` is missing its closing paren — so the
       backdrop's `top` silently falls back to the SCSS `top:100%` and the overlay
       never rises over the header (logo/nav stay bright, shadow looks short).

       Pin the backdrop just below the utility strip for the utility-flyout case
       only (scoped via :has so nav mega-menus, which correctly use top:100%, are
       untouched). z-index:3 (from SCSS) keeps it above the logo so the logo dims;
       the active flyout panel (z-index:12) stays above the backdrop. */
    .header:has(.header__util .util__primary-item--sub.is-active) .header__backdrop {
        top: 2.5rem !important;   /* bottom of the white utility strip (grid row 1) */
        height: 100vh !important; /* dim the full page below the strip, like K13 */
    }

    .header .util__secondary {
        top: 70%;
    }
}

/* ── Mobile (<992px): de-duplicate the logo ──────────────────────
   The markup carries a logo twice: a direct child of .header__inner AND one inside
   .header__drawer-header. On mobile the header JS retaches .header__drawer-header
   into .header__inner (it is the intended mobile logo — the SCSS gives it
   margin-right:auto to push the utility links right), so the original direct-child
   logo renders a SECOND logo. Hide the original on mobile only; on desktop the
   drawer is hidden and the original .header__logo (grid-area: logo) is used. */
@media (max-width: 991px) {
    .header__inner > .header__logo {
        display: none;
    }

    /* Open drawer should be a clean, full-height white panel (K13 parity).
       The drawer is fixed at top:<headerHeight> (JS) but only `calc(100dvh - 50px)`
       tall, so it doesn't reach the viewport bottom; the gray .header__backdrop
       (rgba(0,0,0,.5), z-index:3) shows through the gap as a stray gray strip.
       While the drawer is open, drop the backdrop and let the drawer fill the
       screen below the header. */
    .header:has(.header__drawer.is-open) .header__backdrop {
        display: none !important;
    }

    .header__drawer.is-open {
        height: auto !important;
        bottom: 0 !important;
    }
}