/*
 * SWITCH Native 2 header (patterns/header.php): utility links and the category menu as Navigation
 * blocks. The bar itself, the logo, search, bag link and currency select are still styled by base.css
 * and the switch-storefront design system, which load before this file.
 * Below 600px the Navigation block switches to its own overlay (the core "mobile" breakpoint).
 */

/* Utility bar: links are list items of a Navigation block instead of paragraphs. */
.swx-site-header .sg-utility-links .wp-block-navigation__container{gap:inherit}
.swx-site-header .sg-utility-links .wp-block-navigation-item{font-size:12px;line-height:1.5}
@media(max-width:600px){
.swx-site-header .sg-utility-links .wp-block-navigation-item:first-child,
.swx-site-header .sg-utility-links .wp-block-navigation-item:last-child{display:none}
}

/* Category menu: top level. */
.swx-site-header .sp-header .sp-nav{gap:30px;font:500 14px/1.5 Arial,sans-serif}
.swx-site-header .sp-nav .wp-block-navigation__container{gap:inherit}
.swx-site-header .sp-nav .wp-block-navigation-item__content{color:inherit;text-decoration:none}
.swx-site-header .sp-nav :is(.wp-block-navigation__submenu-icon,.wp-block-navigation__responsive-container-open,.wp-block-navigation__responsive-container-close){min-width:0;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;cursor:pointer}
@media(max-width:849px){
.swx-site-header .sp-header .sp-nav{gap:20px}
}

@media(min-width:600px){
/* The panel spans the header bar, so nothing between the bar and the menu item may be positioned. */
.swx-site-header .sp-header .sp-nav,
.swx-site-header .sp-nav :is(.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-dialog,.wp-block-navigation__responsive-container-content),
.swx-site-header .sp-nav .wp-block-navigation__container>.wp-block-navigation-item{position:static}
.swx-site-header .sp-nav .sw-nav-mobile-only{display:none}
.swx-site-header .sp-nav .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{padding-block:20px;text-transform:uppercase}
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-icon{position:relative;width:10px;height:10px;margin-left:8px}
/* Touch screens have no hover: the arrow opens the panel, so give it a finger-sized target. */
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-icon::after{content:'';position:absolute;inset:-17px -14px -17px -6px}
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-icon svg{transition:transform .15s}
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child:is(:hover,:focus-within)>:is(.wp-block-navigation-item__content,.wp-block-navigation__submenu-icon){color:var(--sw-orange)}
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child:hover>.wp-block-navigation__submenu-icon svg,
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-icon[aria-expanded="true"] svg{transform:rotate(180deg)}

/* Panel: one column per group, "Explore all" across the top. */
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-container{top:100%;left:var(--sw-page-edge);right:var(--sw-page-edge);box-sizing:border-box;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;padding:28px 32px 32px;background:var(--sw-white);color:var(--sw-ink);border:0;border-top:3px solid var(--sw-orange);box-shadow:0 14px 30px #0002;z-index:100;text-align:left;text-transform:none}
/* Keeps the panel open while the pointer crosses the gap below the menu item. */
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-container::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:16px}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item{display:block;margin:0;padding:0}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .sw-nav-all{grid-column:1/-1}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .sw-nav-all>.wp-block-navigation-item__content{display:inline-block;margin:0 0 20px;padding:0 0 14px;border-bottom:1px solid var(--sw-line);font:700 14px/1.5 Arial,sans-serif;text-transform:uppercase;color:var(--sw-ink)}
/* Group headings are submenus without a link; their lists stay open inside the panel. */
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .has-child>.wp-block-navigation-item__content{display:block;margin:0 0 10px;padding:0;font:700 14px/1.5 Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--sw-ink)}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{display:none}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .has-child>.wp-block-navigation__submenu-container,
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .has-child:hover>.wp-block-navigation__submenu-container{position:static;display:block;visibility:inherit;opacity:1;width:auto;height:auto;min-width:0;overflow:visible;margin:0 0 20px;padding:0;background:none;border:0;box-shadow:none}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .has-child>.wp-block-navigation__submenu-container::before{content:none}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:block;padding:7px 0;font:400 14px/1.45 Arial,sans-serif;color:var(--sw-muted);text-transform:none}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover{color:var(--sw-ink);text-decoration:underline;text-decoration:underline}
.swx-site-header .sp-nav .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:focus-visible{outline:2px solid var(--sw-orange);outline-offset:2px}
}
@media(min-width:600px) and (max-width:999px){
.swx-site-header .sp-nav .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-container{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px}
}

/* Phones: the menu button sits after search and the bag; the menu opens as a dark full-screen list. */
@media(max-width:599px){
.swx-site-header .sp-header .sp-nav{display:flex;order:3;flex:0 0 auto;margin-left:4px}
.swx-site-header .sp-header .sp-tools{order:2}
.swx-site-header .sp-nav .wp-block-navigation__responsive-container-open{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--sw-white)}
.swx-site-header .sp-nav .wp-block-navigation__responsive-container-open svg{width:26px;height:26px}
.swx-site-header .sp-header .sp-nav .wp-block-navigation__responsive-container.is-menu-open{padding:12px 24px 32px;background:var(--sw-ink);color:var(--sw-white);text-align:left}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__responsive-container-close{top:8px;right:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--sw-white)}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__responsive-container-close svg{width:28px;height:28px}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:52px;align-items:stretch}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__container{width:100%;gap:0;align-items:stretch}
/* Top level rows. Submenus stay closed until a row is tapped (assets/header.js). */
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item{display:block;width:100%;border-bottom:1px solid #333}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;align-items:center;min-height:58px;padding:0;font:500 18px/1.4 Arial,sans-serif;text-transform:uppercase;color:var(--sw-white)}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__submenu-icon{display:none}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__container>.has-child>.wp-block-navigation__submenu-container{display:none!important;margin:0;padding:0 0 12px}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{display:block;margin:0;padding:0}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{display:none!important;margin:0;padding:0 0 8px}
.swx-site-header .sp-nav .is-menu-open .sw-nav-all>.wp-block-navigation-item__content{display:flex;align-items:center;min-height:44px;padding:0;font:700 16px/1.4 Arial,sans-serif;text-transform:uppercase;color:var(--sw-orange)}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .has-child>.wp-block-navigation-item__content{display:block;padding:18px 0 4px;font:700 12px/1.4 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{display:flex;align-items:center;min-height:44px;padding:0;font:400 16px/1.3 Arial,sans-serif;text-transform:none;color:var(--sw-white)}
.swx-site-header .sp-nav .is-menu-open a.wp-block-navigation-item__content:hover{color:var(--sw-orange)}
.swx-site-header .sp-nav .is-menu-open :is(a,button):focus-visible{outline:2px solid var(--sw-orange);outline-offset:2px}
}


/* Phone menu accordions: the open row shows its list, an arrow on every row that opens. */
@media(max-width:599px){
.swx-site-header .sp-header .sp-nav .is-menu-open .has-child.sw-open>.wp-block-navigation__submenu-container{display:block!important}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__container>.has-child>.wp-block-navigation-item__content{cursor:pointer}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .has-child>.wp-block-navigation-item__content{display:flex;align-items:center;min-height:48px;padding:0;font:700 16px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--sw-white);cursor:pointer}
.swx-site-header .sp-nav .is-menu-open .has-child>.wp-block-navigation-item__content::after{content:"";flex:none;width:9px;height:9px;margin:-4px 6px 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.swx-site-header .sp-nav .is-menu-open .has-child.sw-open>.wp-block-navigation-item__content::after{margin-top:4px;transform:rotate(-135deg)}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding-left:12px;color:var(--sw-line)}
/* Three levels that read differently: category in the display font, group in plain text, links smaller along a line. */
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{min-height:60px;font:400 24px/1.2 var(--sw-font-display);letter-spacing:.01em;text-transform:uppercase}
.swx-site-header .sp-nav .is-menu-open .sw-nav-all>.wp-block-navigation-item__content{min-height:40px;font:700 14px/1.4 Arial,sans-serif;text-transform:none!important}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .has-child>.wp-block-navigation-item__content,.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .has-child>.wp-block-navigation-item__content .wp-block-navigation-item__label{font:400 16px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none!important}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .has-child.sw-open>.wp-block-navigation-item__content{font-weight:700}
.swx-site-header .sp-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{margin:0 0 8px 2px;padding:0;border-left:1px solid #555}
.swx-site-header .sp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{min-height:40px;padding-left:16px;font:400 14px/1.3 Arial,sans-serif;text-transform:none}
}
/* The support chat button (switch-slack-chat, z-index 999999) would cover the open phone menu. */
html.has-modal-open #swsc-root{display:none}