/*
    Condensed category sidebar trial.

    Everything here is scoped to .nav-variant, so a request without ?nav= renders exactly as
    it always has. Switch on with ?nav=a, ?nav=b or ?nav=c; clear with ?nav=off.

    Temporary: delete this file, nav-variants.ts/js, NavVariantResolver, the UseNavVariant
    middleware and the guard in CategoryHeaderToggle.ts to remove the trial entirely.

    Baseline for comparison: 26 groups at 67px each, 2512px collapsed on a 375px viewport.
*/

/* ---- Shared by every variant: compact rows ---- */

/* The live design spends 40px of padding and a 5px divider per row. Trimming both is where
   most of the height saving comes from. */
.nav-variant .products-header {
    border-bottom: 1px solid #e5e5e5;
    margin-top: 0 !important;
    margin-bottom: 4px;
    padding: 11px 14px;
}

    .nav-variant .products-header span {
        font-size: 16px;
        line-height: 1.35;
    }

    .nav-variant .products-header .glyphicon {
        font-size: 12px;
        line-height: 1.6;
    }

.nav-variant .products-sidebar-container {
    margin-bottom: 8px;
    margin-top: 0;
    padding: 6px 14px;
}

    .nav-variant .products-order-list li {
        padding-bottom: 7px;
        padding-top: 7px;
    }

/* ---- Trial controls ---- */

.nav-variant-show-all,
.nav-variant-master-toggle {
    background-color: #fff;
    border: 1px solid #eb8b16;
    color: #eb8b16;
    display: none;
    font-size: 16px;
    margin-top: 10px;
    padding: 11px 14px;
    text-align: left;
    width: 100%;
}

    .nav-variant-show-all:hover,
    .nav-variant-master-toggle:hover {
        background-color: #eb8b16;
        color: #fff;
    }

    .nav-variant-master-toggle .glyphicon {
        float: right;
        font-size: 12px;
        line-height: 1.6;
    }

/* ---- Variant A: compact rows plus single-open accordion. Nothing hidden. ---- */

/* Rows only; the shared block above is the whole of variant A. */

/* ---- Variant B: variant A plus the tail of the list folded away ---- */

.nav-variant-b .nav-variant-show-all {
    display: block;
}

/* Groups past the leading few are hidden until "show all" is pressed. They stay in the DOM
   so every category link is still there for crawlers. */
.nav-variant-b .nav-variant-overflow {
    display: none !important;
}

.nav-variant-b.nav-variant-expanded .products-header.nav-variant-overflow {
    display: block !important;
}

.nav-variant-b.nav-variant-expanded .nav-variant-show-all {
    display: none;
}

/* ---- Variant C: the whole list behind one control, on small screens only ---- */

@media (max-width: 767px) {
    .nav-variant-c .nav-variant-master-toggle {
        display: block;
    }

    .nav-variant-c .nav-variant-groups {
        display: none;
    }

    .nav-variant-c.nav-variant-expanded .nav-variant-groups {
        display: block;
    }

    .nav-variant-c.nav-variant-expanded .nav-variant-master-toggle .glyphicon-menu-down {
        transform: rotate(180deg);
    }
}

/* Above the mobile breakpoint variant C falls back to variant A: the sidebar sits beside the
   content there, so collapsing it costs wayfinding for no space saving. */
@media (min-width: 768px) {
    .nav-variant-c .nav-variant-master-toggle {
        display: none;
    }

    .nav-variant-c .nav-variant-groups {
        display: block;
    }
}