/* ==========================================================================
   Roket Category Mega Menu
   Layout is fully grid-based (sidebar + content), driven by a single
   equal-spacing gap variable so every gap in the menu is identical.
   Design tokens sourced from the Pink Pharma Figma (node 57:6689).
   ========================================================================== */

.roket-category-menu {
    /* Brand */
    --rcmm-accent: #c70c7f;
    --rcmm-dark: #490830;

    /* Figma design tokens */
    --rcmm-bg: #f8f8f8;              /* bg-neutral-secondary */
    --rcmm-text: #0a0a0a;           /* text-primary */
    --rcmm-text-muted: #5e5e5e;     /* input-enabled-text */
    --rcmm-border: #e2e2e7;         /* border-primary */
    --rcmm-active: #c60c7e1a;

    /* One spacing value for EVERY gap and pad in the menu */
    --rcmm-gap: 16px;

    /* Layout */
    --rcmm-frame-width: 1440px;
    --rcmm-sidebar-width: 300px;
    --rcmm-columns: 3;
    --rcmm-dropdown-top: 0px;

    /* Typography (Figma: Miranda Sans) */
    --rcmm-font: "Miranda Sans", inherit;

    display: block;
    height: auto;
}

/* --------------------------------------------------------------------------
   "Visi produktai" opener button
   -------------------------------------------------------------------------- */
.roket-category-menu__opener {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;                       /* Figma: gap-10 */

    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px 20px !important;              /* Figma: py-10 px-20 */

    border: 2px solid rgba(255, 255, 255, 0) !important;  /* Figma skeuomorphic border */
    border-radius: 1024px !important;           /* Figma: button-40-radius (pill) */
    background-color: var(--rcmm-dark) !important;         /* Figma: #490830 */
    box-shadow: none !important;

    color: #fff !important;                     /* Figma: button-primary-fg */
    font-family: var(--rcmm-font) !important;   /* Miranda Sans */
    font-size: 14px !important;                 /* Figma: Body M */
    font-weight: 500 !important;                /* Figma: Weight 500 (Medium) */
    line-height: 20px !important;
    letter-spacing: -0.28px !important;         /* Figma: body-m-letter-spacing */
    text-transform: none !important;
    white-space: nowrap !important;

    cursor: pointer;
}

.roket-category-menu__opener:hover,
.roket-category-menu__opener:focus,
.roket-category-menu__opener[aria-expanded="true"] {
    background-color: var(--rcmm-dark) !important;
    color: #fff !important;
}

.roket-category-menu__hamburger {
    display: grid;
    gap: 4px;
    width: 18px;
}

.roket-category-menu__hamburger span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
}

/* --------------------------------------------------------------------------
   Full-screen dropdown
   -------------------------------------------------------------------------- */
.roket-category-menu__dropdown {
    position: fixed;
    top: var(--rcmm-dropdown-top);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;

    display: none;

    box-sizing: border-box;
    background: var(--rcmm-bg);
    overflow: hidden;
}

.roket-category-menu.is-open .roket-category-menu__dropdown {
    display: block;
}

/* --------------------------------------------------------------------------
   The menu itself: ONE grid — sidebar column + content column.
   Equal gap between the two columns, and equal padding around everything.
   -------------------------------------------------------------------------- */
.roket-mega-menu {
    display: grid;
    grid-template-columns: var(--rcmm-sidebar-width) minmax(0, 1fr);
    gap: var(--rcmm-gap);
    align-content: start;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--rcmm-frame-width);
    height: 100%;
    margin: 0 auto;
    padding: var(--rcmm-gap);

    background: var(--rcmm-bg);
    color: var(--rcmm-text);
    font-family: var(--rcmm-font);
    overflow: hidden;
}

.roket-mega-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.roket-mega-menu a {
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Left column — also a grid. Level-one links stacked with the same gap.
   -------------------------------------------------------------------------- */
.roket-mega-menu__sidebar {
    min-height: 0;
    overflow-y: auto;
}

.roket-mega-menu__level-one {
    display: grid;
    gap: var(--rcmm-gap);
    align-content: start;
}

.roket-mega-menu__level-one-link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;

    min-height: 44px;
    padding: 10px 16px;

    border-radius: 999px;
    color: var(--rcmm-text);
    font-size: 14px;      /* Body M */
    line-height: 20px;
    font-weight: 500;
}

.roket-mega-menu__level-one-item.is-active .roket-mega-menu__level-one-link,
.roket-mega-menu__level-one-link:hover,
.roket-mega-menu__level-one-link:focus-visible {
    background: var(--rcmm-active);
    color: var(--rcmm-text);          /* text stays black on hover/active */
}

.roket-mega-menu__arrow {
    color: #aaa;
    font-size: 20px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Right column — content panels.
   -------------------------------------------------------------------------- */
.roket-mega-menu__content {
    min-height: 0;
    overflow-y: auto;
}

.roket-mega-menu__panel {
    display: none;
}

.roket-mega-menu__panel.is-active {
    display: block;
}

/* Category groups: equal column gap AND equal row gap */
.roket-mega-menu__groups {
    display: grid;
    grid-template-columns: repeat(var(--rcmm-columns), minmax(0, 1fr));
    gap: var(--rcmm-gap);
    align-items: start;
    width: 100%;
}

/* Each group is a grid too — heading + link list, same gap */
.roket-mega-menu__group {
    display: grid;
    gap: var(--rcmm-gap);
    align-content: start;
    min-width: 0;
}

.roket-mega-menu__heading {
    color: var(--rcmm-text);
    font-size: 18px;      /* Title XS */
    line-height: 24px;
    font-weight: 600;
}

/* Level-three link list — grid, same gap */
.roket-mega-menu__level-three {
    display: grid;
    gap: var(--rcmm-gap);
    align-content: start;
}

.roket-mega-menu__level-three a {
    color: var(--rcmm-text-muted);
    font-size: 14px;      /* Body M */
    line-height: 20px;
}

.roket-mega-menu__heading:hover,
.roket-mega-menu__heading:focus-visible,
.roket-mega-menu__level-three a:hover,
.roket-mega-menu__level-three a:focus-visible {
    color: var(--rcmm-accent);
}

.roket-category-menu__notice {
    padding: var(--rcmm-gap);
}

html.rcmm-menu-open,
body.rcmm-menu-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .roket-category-menu {
        --rcmm-sidebar-width: 260px;
        --rcmm-columns: 2;
    }
}

@media (max-width: 1024px) {
    .roket-category-menu {
        display: none;
    }
}