/* ============================================================
   RCN Menu v2 — desktop mega-menu + mobile panel   (Phase 5)

   Loaded ONLY when rcn_menu_v2_active() is true (see rcn/inc/menu-v2.php).
   While the rcn_menu_v2 option is off this file is never enqueued → the extra
   weight for a real visitor is exactly 0 bytes.

   NB: this file is versioned in menu-v2.php as RCN_VER . '.m2-N'. If you edit it
   after it has ever been served publicly, bump that suffix or browsers keep the
   old copy.

   THEME-BLEED (motors-rcn / skin-custom.css) — read before editing:
     - a bare `button` gets  background:#e41515 !important + box-shadow + min-width
     - a bare `input`  gets  its own padding/background and wins on specificity
     - bare `a` / headings get restyled too
   → every property the skin can reach is pinned with !important here, and fonts
     are written LONGHAND. The `font: ... inherit` shorthand is blacklisted in
     this codebase: it is invalid and has silently broken the header before.

   STACKING — the thing that decides where the mobile panel may live:
     .rcn-header is `position:sticky; z-index:200`, which CREATES A STACKING
     CONTEXT. Every descendant is painted inside it, so a z-index on a panel
     nested in the header is capped at the header's 200 no matter how large it
     is. That is why v1's .rcn-header__mobile (z-index 800) is painted UNDER the
     .rcn-mobnav bottom bar (99800, root level) — VERIFIED at 375px with
     elementFromPoint over the bar, it returns the bar, not the overlay.
     → the v2 mobile panel is rendered from wp_footer, at ROOT level, where its
       z-index is real. Measured map:
         .rcn-header         200   (--rcn-z-sticky)   stacking context
         .rcn-header__mobile 800   (--rcn-z-overlay)  trapped inside it → 200
         .rcn-mobnav       99800   root — the REAL fixed bottom bar
         .rcn-mobsheet     99900   root — account sheet
         .rcn-m2-panel     99950   root — this panel, above all of them
   ============================================================ */

/* ============================================================
   1. DESKTOP — shared trigger bits
   ============================================================ */

/* The mega panel is anchored to the BAR, not to the trigger: anchoring a 940px
   panel to a trigger that sits ~230px from the left overflows the viewport (and
   adds a horizontal scrollbar) on 769–1100px screens. Centering on the bar cannot. */
body.rcn-menu2 .rcn-header__bar { position: relative; }

.rcn-m2-dd { position: static; }
.rcn-m2-dd--sm { position: relative; }

/* header.css's B3 fix pins `body.rcn-theme .rcn-header .rcn-header__icon-btn
   { background: transparent !important }` — specificity (0,3,1). The search
   trigger carries that class too, so a plain `.rcn-m2-trigger[aria-expanded]`
   rule (0,2,0) LOSES and the open state never paints. Measured on the live page
   (computed background came back rgba(0,0,0,0)), not guessed. Match the scope to
   outrank it; the standalone selector still covers the Browse/Industry triggers,
   which are .rcn-header__link-toggle and never hit the B3 rule. */
body.rcn-theme .rcn-header .rcn-m2-trigger[aria-expanded="true"],
.rcn-m2-trigger[aria-expanded="true"] {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10) !important;
}
.rcn-m2-chev { transition: transform var(--rcn-transition); flex-shrink: 0; }
.rcn-m2-trigger[aria-expanded="true"] .rcn-m2-chev { transform: rotate(180deg); }

/* ============================================================
   2. DESKTOP — Browse mega-menu
   ============================================================ */

.rcn-m2-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(940px, calc(100vw - 32px));
    margin-top: 8px;
    background: var(--rcn-surface);
    border-radius: var(--rcn-radius-lg);
    box-shadow: var(--rcn-shadow-lg);
    padding: var(--rcn-space-4);
    z-index: 120;
}
.rcn-m2-mega[hidden] { display: none !important; }
.rcn-m2-mega__grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: var(--rcn-space-4);
    align-items: start;
}
.rcn-m2-mega__cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.rcn-m2-item {
    display: flex !important;
    align-items: center;
    gap: var(--rcn-space-3);
    padding: 10px var(--rcn-space-3);
    border-radius: var(--rcn-radius);
    color: var(--rcn-text) !important;
    text-decoration: none !important;
    transition: background var(--rcn-transition);
}
.rcn-m2-item:hover { background: var(--rcn-surface-alt); }
.rcn-m2-item > svg { color: var(--rcn-brand); flex-shrink: 0; }
.rcn-m2-item__tx { min-width: 0; flex: 1; }
.rcn-m2-item__t {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--rcn-font-sans);
    font-weight: 700;
    font-size: var(--rcn-text-sm);
    line-height: 1.25;
    color: var(--rcn-text);
}
.rcn-m2-item__d {
    font-family: var(--rcn-font-sans);
    font-size: var(--rcn-text-xs);
    font-weight: 400;
    line-height: 1.35;
    color: var(--rcn-text-muted);
    margin-top: 2px;
}
/* Live count pill — honest numbers, straight from the race-category terms. */
.rcn-m2-count {
    flex-shrink: 0;
    font-family: var(--rcn-font-mono);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--rcn-text-muted);
    background: var(--rcn-surface-alt);
    border: 1px solid var(--rcn-border);
    border-radius: var(--rcn-radius-full);
    padding: 3px 7px;
}
.rcn-m2-item:hover .rcn-m2-count {
    border-color: var(--rcn-brand);
    color: var(--rcn-brand);
}
.rcn-m2-new {
    background: var(--rcn-accent-green);
    color: #fff;
    font-family: var(--rcn-font-sans);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    padding: 3px 5px;
    border-radius: var(--rcn-radius-sm);
}

/* Featured column */
.rcn-m2-mega__feat {
    background: var(--rcn-surface-alt);
    border-radius: var(--rcn-radius);
    padding: var(--rcn-space-3);
}
.rcn-m2-feat__h {
    font-family: var(--rcn-font-sans);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rcn-text-subtle);
    margin: 2px 0 10px 2px;
}
.rcn-m2-card {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: var(--rcn-radius-sm);
    background: var(--rcn-surface);
    text-decoration: none !important;
    color: var(--rcn-text) !important;
    margin-bottom: 6px;
    transition: box-shadow var(--rcn-transition);
}
.rcn-m2-card:hover { box-shadow: var(--rcn-shadow-sm); }
.rcn-m2-card__img {
    width: 56px;
    height: 42px;
    border-radius: var(--rcn-radius-sm);
    object-fit: cover;
    background: var(--rcn-surface-alt);
    flex-shrink: 0;
    display: block;
}
/* min-width:0 is load-bearing: a flex item defaults to min-width:auto and will
   not shrink below its content, so a long listing title would push the card
   past the column instead of clamping. */
.rcn-m2-card__tx { min-width: 0; flex: 1; }
.rcn-m2-card__t {
    font-family: var(--rcn-font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rcn-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rcn-m2-card__p {
    font-family: var(--rcn-font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--rcn-brand);
    margin-top: 3px;
}
.rcn-m2-feat__links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rcn-border);
}
.rcn-m2-feat__link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: var(--rcn-radius-sm);
    font-family: var(--rcn-font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rcn-text) !important;
    text-decoration: none !important;
}
.rcn-m2-feat__link:hover { background: var(--rcn-surface); color: var(--rcn-brand) !important; }
.rcn-m2-feat__link svg { color: var(--rcn-brand); flex-shrink: 0; }

/* Small-desktop guard: below 1000px the featured column squeezes the categories
   into two unreadable strips — drop it, keep the categories. */
@media (max-width: 1000px) {
    .rcn-m2-mega__grid { grid-template-columns: 1fr; }
    .rcn-m2-mega__feat { display: none; }
}

/* ============================================================
   3. DESKTOP — Industry dropdown
   ============================================================ */

.rcn-m2-drop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    background: var(--rcn-surface);
    border-radius: var(--rcn-radius-lg);
    box-shadow: var(--rcn-shadow-lg);
    padding: var(--rcn-space-2);
    z-index: 120;
}
.rcn-m2-drop[hidden] { display: none !important; }

/* ============================================================
   4. DESKTOP — inline header search
   ============================================================ */

.rcn-m2-search { position: relative; margin-left: auto; }

.rcn-m2-search__pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 420px;
    background: var(--rcn-surface);
    border-radius: var(--rcn-radius-lg);
    box-shadow: var(--rcn-shadow-lg);
    padding: var(--rcn-space-3);
    z-index: 120;
}
.rcn-m2-search__pop[hidden] { display: none !important; }

.rcn-m2-field { position: relative; display: block; }
.rcn-m2-field > svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rcn-text-subtle);
    pointer-events: none;
    z-index: 1;
}
/* The skin restyles bare inputs and wins on specificity (it moved the padding
   out from under the lens on the /for-sale/ hub) → pin every reachable property. */
.rcn-m2-field input[type="search"],
.rcn-m2-field input[type="text"] {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    padding: 0 14px 0 40px !important;
    margin: 0 !important;
    background: var(--rcn-surface) !important;
    background-image: none !important;
    border: 1.5px solid var(--rcn-border-strong) !important;
    border-radius: var(--rcn-radius) !important;
    box-shadow: none !important;
    color: var(--rcn-text) !important;
    font-family: var(--rcn-font-sans) !important;
    font-size: 16px !important; /* <16px makes iOS Safari zoom the page on focus */
    font-weight: 500 !important;
    line-height: 44px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.rcn-m2-field input[type="search"]:focus {
    border-color: var(--rcn-brand) !important;
    box-shadow: 0 0 0 3px var(--rcn-brand-glow) !important;
}
.rcn-m2-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.rcn-m2-res { margin-top: 8px; max-height: 340px; overflow-y: auto; }
.rcn-m2-res:empty { display: none; }
.rcn-m2-res__g {
    font-family: var(--rcn-font-sans);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rcn-text-subtle);
    padding: 8px 6px 5px;
}
.rcn-m2-res__i {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 7px 6px;
    border-radius: var(--rcn-radius-sm);
    text-decoration: none !important;
    color: var(--rcn-text) !important;
    font-family: var(--rcn-font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}
.rcn-m2-res__i:hover,
.rcn-m2-res__i.is-sel { background: var(--rcn-surface-alt); }
.rcn-m2-res__i img {
    width: 38px;
    height: 29px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--rcn-surface-alt);
    flex-shrink: 0;
    display: block;
}
.rcn-m2-res__n {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--rcn-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--rcn-text-muted);
}
.rcn-m2-res__all {
    display: block !important;
    margin-top: 4px;
    padding: 9px 6px;
    border-top: 1px solid var(--rcn-border);
    text-align: center;
    text-decoration: none !important;
    color: var(--rcn-brand) !important;
    font-family: var(--rcn-font-sans);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
}
.rcn-m2-res__all:hover { background: var(--rcn-surface-alt); border-radius: var(--rcn-radius-sm); }
.rcn-m2-res__empty {
    padding: 14px 6px;
    text-align: center;
    font-family: var(--rcn-font-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--rcn-text-muted);
}

/* ============================================================
   5. MOBILE — full-screen panel  (≤768px, where 53% of the traffic is)
   ============================================================ */

.rcn-m2-panel {
    position: fixed;
    inset: 0;
    z-index: 99950; /* root level — see the STACKING note at the top of this file */
    background: var(--rcn-surface);
    display: flex;
    flex-direction: column;
}
.rcn-m2-panel[hidden] { display: none !important; }

/* Egon previews this logged-in: without these the WP admin bar (fixed, z-99999)
   covers the panel header exactly during the review. */
.admin-bar .rcn-m2-panel { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .rcn-m2-panel { top: 46px; }
}

.rcn-m2-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rcn-space-3);
    padding: 10px var(--rcn-space-4);
    background: var(--rcn-dark);
    border-bottom: 1px solid var(--rcn-border-dark);
    flex-shrink: 0;
    min-height: 56px;
}
.rcn-m2-logo { display: flex; align-items: center; text-decoration: none !important; }
.rcn-m2-logo img { height: 32px; width: auto; display: block; }

/* 44px touch target, and immune to the skin's red `button` background. */
.rcn-m2-x {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0 !important;
    border-radius: var(--rcn-radius) !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer;
    flex-shrink: 0;
}
.rcn-m2-x:hover, .rcn-m2-x:active { background: rgba(255, 255, 255, 0.16) !important; }

.rcn-m2-panel__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--rcn-space-4);
    overscroll-behavior: contain;
}

.rcn-m2-msearch { margin: 0 0 var(--rcn-space-4); }

/* --- accordion --- */
.rcn-m2-acc { border-bottom: 1px solid var(--rcn-border); }
.rcn-m2-acc__t {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 52px !important;
    min-width: 0 !important;
    padding: 12px 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--rcn-text) !important;
    font-family: var(--rcn-font-sans) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    cursor: pointer;
}
.rcn-m2-acc__t .rcn-m2-chev { color: var(--rcn-text-subtle); }
.rcn-m2-acc__p { padding-bottom: 8px; }
.rcn-m2-acc__p[hidden] { display: none !important; }

.rcn-m2-link {
    display: flex !important;
    align-items: center;
    gap: var(--rcn-space-3);
    min-height: 48px;
    padding: 10px 8px;
    border-radius: var(--rcn-radius);
    color: var(--rcn-text) !important;
    text-decoration: none !important;
    font-family: var(--rcn-font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.rcn-m2-link:active { background: var(--rcn-surface-alt); }
.rcn-m2-link > svg { color: var(--rcn-brand); flex-shrink: 0; }
.rcn-m2-link__tx { min-width: 0; flex: 1; }
.rcn-m2-link__d {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--rcn-text-muted);
    margin-top: 2px;
}

/* --- account block --- */
.rcn-m2-acct {
    display: flex;
    align-items: center;
    gap: var(--rcn-space-3);
    padding: var(--rcn-space-3) 8px;
    margin-top: var(--rcn-space-2);
    border-top: 1px solid var(--rcn-border);
}
.rcn-m2-acct__av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.rcn-m2-acct__tx { min-width: 0; }
.rcn-m2-acct__n {
    font-family: var(--rcn-font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rcn-text);
}
.rcn-m2-acct__e {
    font-family: var(--rcn-font-sans);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--rcn-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rcn-m2-bdg {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--rcn-radius-full);
    background: var(--rcn-brand);
    color: #fff;
    font-family: var(--rcn-font-sans);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.rcn-m2-bdg[data-count="0"], .rcn-m2-bdg[hidden] { display: none !important; }

/* --- sticky footer CTA --- */
.rcn-m2-panel__foot {
    flex-shrink: 0;
    padding: var(--rcn-space-3) var(--rcn-space-4);
    padding-bottom: calc(var(--rcn-space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rcn-border);
    background: var(--rcn-surface);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.rcn-m2-sell {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 var(--rcn-space-4);
    border-radius: var(--rcn-radius);
    background: var(--rcn-brand) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--rcn-font-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--rcn-shadow-brand);
}
.rcn-m2-sell:active { background: var(--rcn-brand-dark) !important; }
.rcn-m2-sell svg { flex-shrink: 0; }

/* ============================================================
   6. Motion / focus
   ============================================================ */

.rcn-m2-anim { animation: rcnM2In 160ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes rcnM2In {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* The mega panel already carries translateX(-50%); animating `transform` here
   would fight it and snap the panel to the left edge. Fade only. */
.rcn-m2-mega.rcn-m2-anim { animation-name: rcnM2Fade; }
@keyframes rcnM2Fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.rcn-m2-panel.rcn-m2-anim { animation-name: rcnM2Fade; animation-duration: 130ms; }

@media (prefers-reduced-motion: reduce) {
    .rcn-m2-anim { animation: none !important; }
    .rcn-m2-chev { transition: none !important; }
}

body.rcn-m2-locked { overflow: hidden !important; }

.rcn-m2-panel :focus-visible,
.rcn-m2-mega :focus-visible,
.rcn-m2-drop :focus-visible,
.rcn-m2-search__pop :focus-visible {
    outline: 2px solid var(--rcn-brand) !important;
    outline-offset: 2px !important;
}

/* Safety net: the panel is a ≤768px surface. If a wide viewport ever renders it
   (orientation flip while open), it must not become a stray full-screen sheet. */
@media (min-width: 769px) {
    .rcn-m2-panel { display: none !important; }
}