/* ============================================================================
   DIY Off Road — Header system, engineering-blueprint.
   1) Top utility bar (.panel.wrapper)  2) Curated mega-menu (desktop).
   Bookends the navy footer. Tokens from design-system.css.
   The stock Luma menu (.nav-sections) is kept for the mobile off-canvas drawer.
   ========================================================================== */

/* ── 1. Top utility bar — clean light strip, high contrast ────────────────── */
/* Two same-specificity rules fight this bar: Luma's `.page-header .panel.wrapper
   { background:#6e716e }` and the theme's `_extend.less` `{ background:@diy_blue }`.
   Neither uses !important, so force the clean look: white strip + subtle grey
   bottom hairline, dark readable text. */
.panel.wrapper,
.page-header .panel.wrapper {
    background-color: var(--diy-paper) !important;   /* white */
    background-image: none !important;
    border-bottom: 1px solid var(--diy-hair) !important;   /* subtle grey */
}
.panel.header {
    padding-top: 9px;
    padding-bottom: 9px;
}
.panel.header .not-logged-in,
.panel.header .greet.welcome {
    font-family: var(--diy-font-mono);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--diy-muted); font-weight: 400;
}
.panel.header .header.links { margin: 0; }
.panel.header .header.links > li { margin: 0 0 0 22px; }
.panel.header .header.links > li > a,
.panel.header .header.links > li > a:visited {
    font-family: var(--diy-font-display);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 12px;
    color: var(--diy-text); text-decoration: none; transition: color .15s ease;
}
.panel.header .header.links > li > a:hover { color: var(--diy-brand); }
.panel.header .header.links .authorization-link a { border: 0; color: var(--diy-text); }
.panel.header .header.links .authorization-link a:hover { color: var(--diy-brand); }

/* ── 2. Mega-menu (desktop ≥768) ──────────────────────────────────────────── */
.jadog-mega { display: none; }   /* mobile: hidden, stock off-canvas used instead */

@media (min-width: 768px) {
    .nav-sections { display: none; }   /* hide stock desktop horizontal menu */

    .jadog-mega {
        display: block; position: relative;
        background-color: var(--diy-ink);
        background-image:
            linear-gradient(var(--diy-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--diy-grid) 1px, transparent 1px);
        background-size: 30px 30px;
        border-top: 1px solid var(--diy-ink-edge);
        border-bottom: 1px solid var(--diy-ink-edge);
        -webkit-font-smoothing: antialiased;
    }
    .jadog-mega__bar {
        display: flex; align-items: stretch; flex-wrap: nowrap; justify-content: center;
        max-width: 1320px; margin: 0 auto; padding: 0 18px;
        list-style: none;
    }
    .jadog-mega__item { position: static; display: flex; }

    .jadog-mega__top {
        appearance: none; background: none; border: 0; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        height: 52px; box-sizing: border-box;
        font-family: var(--diy-font-display);
        text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: 13.5px;
        color: var(--diy-on-ink); text-decoration: none;
        padding: 0 18px; line-height: 1; position: relative;
        transition: color .15s ease;
    }
    .jadog-mega__top > span { display: block; line-height: 1; transform: translateY(0.5px); }
    .jadog-mega__top > span { display: inline-block; }
    /* Luxury hover: the group "seats" into the panel's navy with a brand-blue
       base bar that meets the mega-panel's brand top border below it. Explicit
       dark fill so white text never lands on a stray grey background. */
    .jadog-mega__top { background-color: transparent; transition: color .15s ease, background-color .2s ease; }
    /* neutralise the global `button:hover { background:#e1e1e1; border:1px solid #ccc }` */
    .jadog-mega__top:hover { border: 0; box-shadow: none; }
    .jadog-mega__item:hover .jadog-mega__top,
    .jadog-mega__item:focus-within .jadog-mega__top,
    .jadog-mega__item.is-open .jadog-mega__top {
        color: #fff;
        background-color: var(--diy-ink-2);
        border: 0;
        box-shadow: none;
    }
    .jadog-mega__top::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0;
        height: 2px; background: var(--diy-brand);
        transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
    }
    .jadog-mega__item:hover .jadog-mega__top::after,
    .jadog-mega__item:focus-within .jadog-mega__top::after,
    .jadog-mega__item.is-open .jadog-mega__top::after { transform: scaleX(1); }

    /* Full-width blueprint panel */
    .jadog-mega__panel {
        position: absolute; left: 0; right: 0; top: 100%;
        background-color: var(--diy-ink-2);
        background-image:
            linear-gradient(var(--diy-grid) 1px, transparent 1px),
            linear-gradient(90deg, var(--diy-grid) 1px, transparent 1px);
        background-size: 26px 26px;
        border-top: 1px solid var(--diy-brand);
        border-bottom: 1px solid var(--diy-ink-edge);
        box-shadow: 0 26px 44px rgba(10, 19, 38, .45);
        opacity: 0; visibility: hidden; transform: translateY(6px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        z-index: 200;
    }
    .jadog-mega__item:hover .jadog-mega__panel,
    .jadog-mega__item:focus-within .jadog-mega__panel,
    .jadog-mega__item.is-open .jadog-mega__panel {
        opacity: 1; visibility: visible; transform: none;
    }
    .jadog-mega__panelinner {
        max-width: 1320px; margin: 0 auto; padding: 28px 22px 32px; position: relative;
    }
    /* corner registration tick */
    .jadog-mega__panelinner::before {
        content: ""; position: absolute; top: 14px; left: 22px;
        width: 12px; height: 12px; border: 2px solid var(--diy-brand);
        border-right: 0; border-bottom: 0; opacity: .85;
    }
    .jadog-mega__eyebrow {
        display: block; font-family: var(--diy-font-mono);
        font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--diy-brand); margin: 0 0 20px; text-align: center;
    }
    .jadog-mega__eyebrow::before { content: "// "; }

    .jadog-mega__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 44px; }
    .jadog-mega__col { width: 208px; }
    .jadog-mega__colhead {
        display: block; font-family: var(--diy-font-display);
        text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 13px;
        color: var(--diy-on-ink-head); text-decoration: none;
        padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--diy-ink-edge);
        transition: color .15s ease;
    }
    .jadog-mega__colhead:hover { color: var(--diy-bright); }
    .jadog-mega__list { list-style: none; margin: 0; padding: 0; }
    .jadog-mega__list li { margin: 0 0 9px; }
    .jadog-mega__list a {
        color: var(--diy-on-ink); font-size: 13px; line-height: 1.35; text-decoration: none;
        transition: color .15s ease, padding-left .15s ease;
    }
    .jadog-mega__list a:hover { color: var(--diy-bright); padding-left: 4px; }
    .jadog-mega__more a {
        font-family: var(--diy-font-mono); font-size: 11px; letter-spacing: .06em;
        text-transform: uppercase; color: var(--diy-brand);
    }
    .jadog-mega__more a:hover { color: var(--diy-bright); }
}