/* ═══════════════════════════════════════════════════════════════════════════
   YouTube/Amazon-style left-rail mega menu — DESKTOP ONLY (>=992px). v3.
   v3 changes (2026-06-12 user feedback):
   • Left breathing room — sidebar no longer flush against the viewport edge.
   • Larger fonts everywhere — easier to read + click on large desktops.
   • Denser L2/L3 layout — each L2 group now uses `column-count: 2` so long L3
     lists balance into two visual mini-columns, cutting the right-side
     whitespace the user complained about.
   • Flyout cap raised to 1500px — uses more of the available screen width on
     1440p / 4K displays.
   • Phantom-caret guard kept (:has() rule).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 0. Mobile / tablet (<992px): keep .h-bar-mobile + .mm-* in place. */
.ymega-hamburger,
.ymega,
.ymega-backdrop {
    display: none;
}

@media (min-width: 992px) {

    /* ── 1. Hide the legacy horizontal .dm nav. */
    nav.dm { display: none !important; }

    /* ── 2. Hamburger button (in .h-bar-desktop, before the logo). */
    .ymega-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        margin: 0 12px 0 0;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: inherit;
        cursor: pointer;
        transition: background 0.15s ease;
    }
    .ymega-hamburger:hover  { background: rgba(0, 0, 0, 0.06); }
    .ymega-hamburger:active { background: rgba(0, 0, 0, 0.12); }
    .ymega-hamburger svg { width: 24px; height: 24px; display: block; }
    .h-bar-desktop__inner { display: flex; align-items: center; }

    /* ── 3. Layout constants. The sidebar + flyout no longer touch the left
       viewport edge — `--ymega-left` adds breathing space so the menu reads
       as a card hovering inside the page, not an OS taskbar bolted to the edge. */
    :root {
        --ymega-top: 88px;        /* 70px fixed header + 18px breathing */
        --ymega-left: 32px;       /* NEW v3: gap between left edge and sidebar */
        --ymega-rail-w: 290px;    /* sidebar (left rail) width — wider for new font size */
        --ymega-gap: 16px;        /* gap between rail and flyout */
    }

    /* ── 4. Sidebar (left rail) — card style, pushed down from top AND in
       from the left edge for breathing room.
       NOTE on transition: animating `left` (not `transform`) because the
       fly-out submenus inside use `position: fixed` and CSS spec re-anchors
       fixed children to any transformed ancestor — animating left keeps the
       sidebar a clean containing block so the flyout's `top:var(--ymega-top)`
       resolves against the viewport as intended. */
    .ymega {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--ymega-top);
        left: calc(0px - var(--ymega-rail-w) - 16px);   /* off-screen left */
        width: var(--ymega-rail-w);
        max-height: calc(100vh - var(--ymega-top) - 24px);
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 2px 6px 24px rgba(15, 23, 42, 0.12);
        z-index: 10001;
        transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
        overflow: hidden;
    }
    body.ymega-open .ymega { left: var(--ymega-left); }

    .ymega-backdrop {
        display: block;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.4);
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    body.ymega-open .ymega-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.ymega-open { overflow: hidden; }

    /* ── 5. Sidebar header (close button + label). */
    .ymega__head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        flex-shrink: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .ymega__close {
        width: 42px;
        height: 42px;
        background: transparent;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease;
    }
    .ymega__close:hover { background: rgba(0, 0, 0, 0.06); }
    .ymega__close svg { width: 24px; height: 24px; display: block; }
    .ymega__title {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
        letter-spacing: 0.3px;
    }

    /* ── 6. Top-level vertical list. Larger font + bigger padding for big
       displays — user explicitly asked for "kích thước font to lên để đọc và
       thao tác cho dễ". */
    .ymega__list {
        list-style: none;
        margin: 8px 0 12px;
        padding: 0 8px;
        overflow-y: auto;
        flex: 1 1 auto;
    }
    .ymega__list::-webkit-scrollbar         { width: 8px; }
    .ymega__list::-webkit-scrollbar-thumb   { background: rgba(0,0,0,.18); border-radius: 4px; }
    .ymega__list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }

    .ymega__list > li { list-style: none; position: relative; }
    .ymega__list > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 11px 16px;          /* was 9px 14px */
        margin: 1px 0;
        color: #0f172a;
        font-size: 15.5px;            /* was 14px — bigger for large displays */
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        border-radius: 10px;
        transition: background 0.12s ease;
    }
    .ymega__list > li > a:hover,
    .ymega__list > li.menu-item-has-children:hover > a {
        background: rgba(0, 0, 0, 0.05);
    }
    .ymega__list > li.menu-item-has-children > a::after {
        content: "›";
        color: #64748b;
        font-size: 20px;             /* matched up to new title font */
        line-height: 1;
        font-weight: 400;
        margin-left: auto;
        transition: transform 0.12s ease, color 0.12s ease;
    }
    .ymega__list > li.menu-item-has-children:hover > a::after {
        transform: translateX(2px);
        color: #0f172a;
    }
    /* Phantom-caret guard — WP's walker still tags `menu-item-has-children` on
       items whose actual `<ul class="sub-menu">` no longer exists (legacy
       class). Hide the caret in that case. :has() = Chrome 105+ / Safari 15.4+
       / Firefox 121+; older UAs show the caret (harmless). */
    .ymega__list > li.menu-item-has-children:not(:has(> ul.sub-menu)) > a::after {
        content: none;
    }

    /* ── 7. FLY-OUT mega panel — WIDE horizontal card with multi-column grid.
       v3 tweaks:
       • cap raised to 1500px so wide displays (>= 1920px) use more space
       • minmax raised to 280px so each L2 group has enough width to host
         the new 2-col L3 layout
       • smaller row gap inside the L3 list (denser, less whitespace) */
    .ymega__list > li > .sub-menu {
        position: fixed;
        top: var(--ymega-top);
        left: calc(var(--ymega-left) + var(--ymega-rail-w) + var(--ymega-gap));
        width: clamp(820px, calc(100vw - var(--ymega-left) - var(--ymega-rail-w) - var(--ymega-gap) - 40px), 1500px);
        max-height: calc(100vh - var(--ymega-top) - 24px);
        padding: 24px 28px;
        margin: 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        box-shadow: 4px 8px 36px rgba(15, 23, 42, 0.16);
        list-style: none;
        overflow-y: auto;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px 32px;
        align-content: start;

        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
        z-index: 10002;
    }
    .ymega__list > li:hover > .sub-menu,
    .ymega__list > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    /* Hover bridge — invisible strip between rail and flyout so the mouse can
       cross diagonally without dropping the hover state. Updated to account
       for the new left offset. */
    .ymega__list > li.menu-item-has-children::after {
        content: "";
        position: fixed;
        top: var(--ymega-top);
        left: calc(var(--ymega-left) + var(--ymega-rail-w) - 8px);
        width: calc(var(--ymega-gap) + 16px);
        height: calc(100vh - var(--ymega-top));
        z-index: 10001;
        pointer-events: none;
    }
    .ymega__list > li.menu-item-has-children:hover::after {
        pointer-events: auto;
    }

    /* ── 8. Level-2 styling INSIDE the flyout grid. */

    /* (a) L2 with children — column heading + L3 list. */
    .ymega__list > li > .sub-menu > li.menu-item-has-children {
        list-style: none;
        min-width: 0;
    }
    .ymega__list > li > .sub-menu > li.menu-item-has-children > a {
        display: block;
        padding: 6px 0 10px;
        margin: 0 0 10px;
        color: #1d4ed8;
        font-size: 13px;             /* was 11.5px */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        text-decoration: none;
        border-bottom: 2px solid #e2e8f0;
        transition: color 0.12s ease;
    }
    .ymega__list > li > .sub-menu > li.menu-item-has-children > a:hover {
        color: #1e3a8a;
    }
    /* L3 list under each column heading. v3: column-count: 2 so the items
       balance into two visual mini-columns — kills the right-side whitespace
       that v2 had when one L2 group was much shorter than the others. */
    .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        column-count: 2;
        column-gap: 16px;
        column-fill: balance;
    }
    .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu > li {
        list-style: none;
        break-inside: avoid;          /* never split a single row across cols */
        page-break-inside: avoid;
    }
    .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
        display: block;
        padding: 5px 10px 5px 0;
        color: #334155;
        font-size: 14.5px;            /* was 13.5px */
        font-weight: 400;
        line-height: 1.35;
        text-decoration: none;
        border-radius: 4px;
        transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
    }
    .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a:hover {
        background: rgba(29, 78, 216, 0.06);
        color: #1d4ed8;
        padding-left: 8px;
    }

    /* If a group has 5 or fewer items, force single-column (2-col looks empty). */
    .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu:not(:has(> li:nth-child(6))) {
        column-count: 1;
    }

    /* ── 8.5. `.mc-showcase` integration (mc-menu-showcase plugin).
       The plugin injects a `<div class="mc-showcase">` after the menu link of
       items it tags as showcase (e.g. 9Minecraft Studios). Its OWN CSS positions
       this absolutely BELOW the parent `<li>` — designed for the old horizontal
       `.dm` nav. In the new vertical rail that drops the cards INSIDE the rail
       (4 cards × 165px columns wrap into 2 visible) and pushes everything below
       it. Override to treat .mc-showcase like a `.sub-menu` flyout instead:
       same fixed-position anchor, same width budget, same hover trigger. */
    .ymega__list > li.mc-showcase-menu-item > .mc-showcase {
        position: fixed !important;
        top: var(--ymega-top) !important;
        left: calc(var(--ymega-left) + var(--ymega-rail-w) + var(--ymega-gap)) !important;
        width: clamp(820px, calc(100vw - var(--ymega-left) - var(--ymega-rail-w) - var(--ymega-gap) - 40px), 1500px) !important;
        max-height: calc(100vh - var(--ymega-top) - 24px) !important;
        max-width: none !important;
        padding: 24px 28px !important;
        background: #fff;
        border: 1px solid #e5e7eb !important;
        border-radius: 14px !important;
        box-shadow: 4px 8px 36px rgba(15, 23, 42, 0.16) !important;
        overflow-y: auto;
        z-index: 10002 !important;

        /* Card grid — 5 columns at the v3 default width to use the wider canvas;
           the plugin defaulted to 4 cols at 660px wide. */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 14px !important;

        /* Re-do the open/close transition so it matches `.sub-menu` flyout. */
        display: grid !important;             /* keep `display: grid` so cards render */
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
    }
    .ymega__list > li.mc-showcase-menu-item:hover > .mc-showcase,
    .ymega__list > li.mc-showcase-menu-item:focus-within > .mc-showcase,
    .ymega__list > li.mc-showcase-menu-item.mc-showcase-open > .mc-showcase {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    /* The plugin's cards are styled — but font-size is 12px which is too small
       on a 1500px-wide panel. Bump to match the rest of v3's denser palette. */
    .ymega__list > li.mc-showcase-menu-item .mc-showcase__title {
        font-size: 13.5px !important;
        white-space: normal !important;        /* allow 2-line titles to wrap */
        line-height: 1.3 !important;
        padding: 8px 10px 10px !important;
        text-align: left !important;
    }
    .ymega__list > li.mc-showcase-menu-item .mc-showcase__card {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0;
        border-radius: 10px !important;
    }
    [data-theme="dark"] .ymega__list > li.mc-showcase-menu-item > .mc-showcase {
        background: #0f1419 !important;
        border-color: #1f2937 !important;
        box-shadow: 4px 8px 36px rgba(0, 0, 0, 0.65) !important;
    }
    [data-theme="dark"] .ymega__list > li.mc-showcase-menu-item .mc-showcase__card {
        background: #1a1f24 !important;
        border-color: #1f2937;
    }
    [data-theme="dark"] .ymega__list > li.mc-showcase-menu-item .mc-showcase__title {
        color: #e2e8f0 !important;
    }

    /* (b) Flat L2 — no children. Render as plain card tile. */
    .ymega__list > li > .sub-menu > li:not(.menu-item-has-children) {
        list-style: none;
        min-width: 0;
    }
    .ymega__list > li > .sub-menu > li:not(.menu-item-has-children) > a {
        display: block;
        padding: 10px 14px;
        color: #0f172a;
        font-size: 14.5px;            /* was 13.5px */
        font-weight: 500;
        line-height: 1.35;
        text-decoration: none;
        border-radius: 8px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        transition: all 0.12s ease;
    }
    .ymega__list > li > .sub-menu > li:not(.menu-item-has-children) > a:hover {
        background: #eff6ff;
        border-color: #93c5fd;
        color: #1d4ed8;
        transform: translateY(-1px);
    }

    /* ── 9. Dark mode (toggled via [data-theme="dark"] on <html>). */
    [data-theme="dark"] .ymega {
        background: #0f1419;
        border-color: #1f2937;
        box-shadow: 2px 6px 24px rgba(0, 0, 0, 0.5);
    }
    [data-theme="dark"] .ymega-backdrop  { background: rgba(0, 0, 0, 0.55); }
    [data-theme="dark"] .ymega-hamburger:hover  { background: rgba(255, 255, 255, 0.08); }
    [data-theme="dark"] .ymega-hamburger:active { background: rgba(255, 255, 255, 0.14); }
    [data-theme="dark"] .ymega__head    { border-bottom-color: #1f2937; }
    [data-theme="dark"] .ymega__close:hover { background: rgba(255, 255, 255, 0.08); }
    [data-theme="dark"] .ymega__title   { color: #f1f5f9; }
    [data-theme="dark"] .ymega__list > li > a { color: #e2e8f0; }
    [data-theme="dark"] .ymega__list > li > a:hover,
    [data-theme="dark"] .ymega__list > li.menu-item-has-children:hover > a {
        background: rgba(255, 255, 255, 0.06);
    }
    [data-theme="dark"] .ymega__list > li.menu-item-has-children > a::after { color: #64748b; }
    [data-theme="dark"] .ymega__list > li.menu-item-has-children:hover > a::after { color: #f1f5f9; }
    [data-theme="dark"] .ymega__list > li > .sub-menu {
        background: #0f1419;
        border-color: #1f2937;
        box-shadow: 4px 8px 36px rgba(0, 0, 0, 0.65);
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li.menu-item-has-children > a {
        color: #93c5fd;
        border-bottom-color: #1f2937;
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li.menu-item-has-children > a:hover {
        color: #bfdbfe;
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a {
        color: #cbd5e1;
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li.menu-item-has-children > .sub-menu > li > a:hover {
        background: rgba(96, 165, 250, 0.12);
        color: #93c5fd;
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li:not(.menu-item-has-children) > a {
        background: #1a1f24;
        border-color: #1f2937;
        color: #e2e8f0;
    }
    [data-theme="dark"] .ymega__list > li > .sub-menu > li:not(.menu-item-has-children) > a:hover {
        background: rgba(96, 165, 250, 0.12);
        border-color: #3b82f6;
        color: #93c5fd;
    }
    [data-theme="dark"] .ymega__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
    [data-theme="dark"] .ymega__list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
}