/**
 * SM MegaMenu vertical ("ALL CATEGORIES") flyout panels.
 *
 * 1. Each flyout opens level with the category you are pointing at, instead of
 *    at the top of the menu. Its first link lines up with the category name.
 * 2. Each flyout is only as wide as its longest link, instead of the fixed
 *    column widths set in the MegaMenu admin (e.g. 4 columns = 673px).
 *
 * Desktop/tablet only (768px and up). The phone menu is left as the theme has it.
 *
 * OPT-OUT: to keep the original fixed-width, multi-column layout for one
 * category, give its menu item the Custom Class "keep-columns" in
 * Content > SM MegaMenu. The theme turns that into "keep-columns-parent" on
 * the list item, which the selectors below skip.
 */
@media all and (min-width: 768px) {

    /* Anchor each flyout to its own category row, not to the whole panel.
       Before this, the rows were position: static, so "top: 0" meant the top
       of the menu. */
    .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu > li.sm_megamenu_lv1 {
        position: relative;
    }

    /* The flyout itself. */
    .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu > li.sm_megamenu_lv1:not(.keep-columns-parent) > .sm-megamenu-child {
        width: auto;              /* shrink to the longest link */
        min-width: 0;
        min-height: 0;            /* was 100% of the whole menu height */
        white-space: nowrap;      /* long names stay on one line and set the width */

        /* 11px matches the category row's own top padding, so the first link
           sits on the same line as the category name. Adjust by a pixel or two
           here if your fonts render slightly differently. */
        padding: 11px 30px 20px;
    }

    /* The theme floats sub-items in percentage-width columns, which only work
       inside a fixed-width box. Stack them as a simple list instead. */
    .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu > li.sm_megamenu_lv1:not(.keep-columns-parent) > .sm-megamenu-child [class*="sm_megamenu_col_"] {
        float: none;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* OPTIONAL: cap very long flyouts and let the longest names wrap instead.
       Uncomment and set the width you want.
    .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu > li.sm_megamenu_lv1:not(.keep-columns-parent) > .sm-megamenu-child {
        max-width: 500px;
        white-space: normal;
    }
    */
}