/* What the storefront's scripts rely on, whatever a site's design looks like: menus open and close,
   the phone menu folds away, tabs switch, an element marked hidden stays hidden, and a menu entry
   meant for one kind of screen shows only there. This file always loads before the theme, so a
   site that replaces the theme with its own (public/theme/theme.css) keeps all of it. Only showing
   and hiding lives here; how anything looks belongs to the theme. */

[hidden] { display: none !important; }

/* Simple dropdowns: shut until hovered, focused, or opened by the script (.is-open). */
.main-nav .submenu { display: none; }
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu { display: block; }

/* Mega-menu panels: the script marks the navigation [data-enhanced] once it has taken over. */
.menu-panel { display: none; }
.nav-item.is-open > .menu-panel { display: grid; }
.main-nav:not([data-enhanced]) .nav-item:hover > .menu-panel,
.main-nav:not([data-enhanced]) .nav-item:focus-within > .menu-panel { display: grid; }

.menu-toggle { display: none; }

/* Phone: the menu button opens the whole navigation, and entries open on a tap rather than a hover. */
@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .main-nav { display: none; }
    .main-nav.is-open { display: block; }
    .nav-item:hover > .submenu,
    .nav-item:focus-within > .submenu { display: none; }
    .nav-item.is-open > .submenu { display: block; }
    .main-nav:not([data-enhanced]) .nav-item:hover > .menu-panel { display: none; }
    .main-nav:not([data-enhanced]) .nav-item:focus-within > .menu-panel { display: grid; }
}

/* Menu entries meant for one kind of screen (MenuItem::devices); the navigation switches at 901 px. */
@media (min-width: 901px) {
    .nav-item--only-mobile,
    .menu-entry--only-mobile { display: none !important; }
}
@media (max-width: 900px) {
    .nav-item--only-desktop,
    .menu-entry--only-desktop { display: none !important; }
}

/* Tabs inside page copy (the legacy pages' Bootstrap tabs). */
.cms-content .tab-content > .tab-pane { display: none; }
.cms-content .tab-content > .tab-pane.active { display: block; }
.cms-content .collapse:not(.in) { display: none; }