/* =========================================================================
   Retail ITS - header navigation that scales with the menu
   Loaded after style.css and light-site.css (inc/mega-menu.php, handle
   rits-nav). Behaviour lives in assets/js/site.js and the fit script at the
   end of header.php.

   The bar never wraps and never overflows, whatever Apparence > Menus holds:
     1. on one line, at the normal spacing;
     2. html.nav-tight    - the same, with tighter spacing, when 1 overflows;
     3. html.nav-collapsed - the menu button and drawer (as below 1041px),
                             when even 2 does not fit.
   The header measures itself (header.php) before the first paint and again
   on resize and once the web fonts are in, so adding, removing or renaming
   items needs no CSS change. Below 1041px the drawer is always used.
   ========================================================================= */

/* ---- sections reached from the menu land clear of the fixed header ------ */
html{scroll-padding-top:calc(var(--hdr-h) + 16px)}
html:has(body.admin-bar){scroll-padding-top:calc(var(--hdr-h) + 48px)}

/* ---- the current page, and the parent of the current page --------------- */
.main-nav>ul>li:is(.current-menu-ancestor,.current-menu-parent,.current-page-ancestor)>a{background:var(--paper-2)}
.home .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li:is(.current-menu-ancestor,.current-menu-parent,.current-page-ancestor)>a{background:rgba(255,255,255,.16)}
.main-nav .mega-item.is-current>.mega-link{background:rgba(232,240,254,.6)}

/* ---- rows that carry a child of their own (third level) ----------------- */
/* style.css turns a second-level item with children into an uppercase column
   heading - a leftover from the card panel. In the row panel it stays a row
   and its children are listed under it. */
.main-nav .sub-menu .mega-cols>li.mega-item.menu-item-has-children>a.mega-link{
  display:grid;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none;color:inherit;
}
.main-nav .sub-menu .mega-item.menu-item-has-children>a.mega-link::after{
  border:0;margin:0;opacity:1;transform:none;width:14px;height:14px;
}
.main-nav .sub-menu .mega-item.menu-item-has-children:hover>a.mega-link::after{transform:translateX(3px)}
.main-nav .mega-item .sub-sub-menu{list-style:none;margin:-4px 0 8px;padding:0 0 0 72px;display:flex;flex-direction:column;gap:0}
.main-nav .mega-item .sub-sub-menu .sub-sub-menu{margin:0;padding-left:14px}
/* deeper items are plain links in every mode: no chevron, no flex row */
.main-nav .sub-sub-menu li,
.main-nav .sub-sub-menu li.menu-item-has-children{display:block;border-bottom:0}
.main-nav .sub-sub-menu .menu-item-has-children>a::after{content:none}
.main-nav .mega-item .sub-sub-menu a{
  display:block;padding:5px 0;font-size:14px;line-height:1.35;color:var(--ink-2);background:transparent;
  transition:color .15s var(--ease);
}
.main-nav .mega-item .sub-sub-menu a:hover,
.main-nav .mega-item .sub-sub-menu .current-menu-item>a{color:var(--accent)}

/* the rail's button keeps its label on one line */
.mega-exit{max-width:100%;text-wrap:balance;line-height:1.2}

/* ---- rows with a description --------------------------------------------- */
.mega-item.has-desc .mega-link{align-items:start}
.mega-item.has-desc .mega-ic{margin-top:1px}
.mega-item.has-desc .mega-link::after{align-self:center}

/* =========================================================================
   DESKTOP BAR (1041px and up, while the items fit)
   ========================================================================= */
@media(min-width:1041px){
  html:not(.nav-collapsed) .mobile-panel{min-width:0}
  html:not(.nav-collapsed) .main-nav>ul{flex-wrap:nowrap}
  html:not(.nav-collapsed) .main-nav>ul>li>a,
  html:not(.nav-collapsed) .mobile-panel-actions .btn{white-space:nowrap}

  /* the chevron is a real button (site.js): it opens the panel from the
     keyboard and on touch screens, while the label goes to its page */
  html:not(.nav-collapsed) .main-nav>ul>li.menu-item-has-children{display:flex;align-items:center}
  html:not(.nav-collapsed) .main-nav>ul>li.menu-item-has-children>a{padding-right:34px}
  html:not(.nav-collapsed) .main-nav>ul>li.menu-item-has-children>a::after{content:none}
  html:not(.nav-collapsed) .main-nav>ul>li>.submenu-caret{
    display:grid;place-items:center;position:relative;z-index:1;
    width:26px;height:30px;margin-left:-30px;padding:0;border:0;border-radius:999px;
    background:none;color:var(--ink);cursor:pointer;
  }
  html:not(.nav-collapsed) .main-nav>ul>li>.submenu-caret span{
    display:block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .2s var(--ease);
  }
  html:not(.nav-collapsed) .main-nav>ul>li.submenu-open>.submenu-caret span{transform:rotate(-135deg) translateY(-2px)}
  html:not(.nav-collapsed) .main-nav>ul>li>.submenu-caret:focus-visible{outline:2px solid var(--accent);outline-offset:0}
  .home .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>.submenu-caret{color:#fff}
  /* the pill lights up for the whole item, chevron included */
  html:not(.nav-collapsed) .main-nav>ul>li.menu-item-has-children:hover>a,
  html:not(.nav-collapsed) .main-nav>ul>li.submenu-open>a{background:var(--paper-2)}
  .home .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li.menu-item-has-children:hover>a{background:rgba(255,255,255,.16)}

  /* a closed panel is out of the tab order, not just zero rows tall */
  html:not(.nav-collapsed) .main-nav .sub-menu{
    visibility:hidden;
    transition:grid-template-rows .24s var(--ease),visibility 0s linear .24s;
    /* span the header, not 100vw: 100vw includes the scrollbar, which pushed
       the card's right edge under it */
    width:auto;margin-left:0;
  }
  html:not(.nav-collapsed) .main-nav .submenu-open>.sub-menu{visibility:visible;transition:grid-template-rows .24s var(--ease),visibility 0s}

  /* never taller than the screen: a long list scrolls inside the panel */
  html:not(.nav-collapsed) .main-nav .sub-menu>.mega-shell{
    max-height:calc(100vh - var(--hdr-h));max-height:calc(100dvh - var(--hdr-h));
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  }
  body.admin-bar .main-nav .sub-menu>.mega-shell{max-height:calc(100dvh - var(--hdr-h) - 32px)}

  /* no third column (feature "none" on a non-catalogue menu): the rows take its room */
  .main-nav .sub-menu .mega-inner.mega-plain{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
  /* up to three rows: side by side, one per column */
  .main-nav .sub-menu .mega-inner.mega-few .mega-cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .main-nav .sub-menu .mega-inner.mega-few .mega-cols>li:only-child{max-width:440px}
  /* nine rows or more: as many columns as the width allows */
  .main-nav .sub-menu .mega-inner.mega-many .mega-cols{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media(min-width:1041px) and (max-width:1240px){
  .main-nav .sub-menu .mega-inner.mega-plain{grid-template-columns:minmax(180px,210px) minmax(0,1fr)}
  .main-nav .sub-menu .mega-inner.mega-many .mega-cols,
  .main-nav .sub-menu .mega-inner.mega-few .mega-cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* ---- step 2: tighter spacing ---------------------------------------------
   Set by the fit script when the normal spacing overflows; without script the
   narrowest desktop range gets it from the media query. */
@media(min-width:1041px) and (max-width:1180px){
  html:not(.nav-collapsed) .header-inner{gap:14px}
  html:not(.nav-collapsed) .mobile-panel{gap:12px}
  html:not(.nav-collapsed) .main-nav>ul>li>a{padding:8px 10px;font-size:14.5px}
}
html.nav-tight:not(.nav-collapsed) .header-inner{gap:14px}
html.nav-tight:not(.nav-collapsed) .mobile-panel{gap:12px}
html.nav-tight:not(.nav-collapsed) .main-nav>ul{gap:0}
html.nav-tight:not(.nav-collapsed) .main-nav>ul>li>a{padding:8px 10px;font-size:14.5px}
html.nav-tight:not(.nav-collapsed) .main-nav>ul>li.menu-item-has-children>a{padding-right:28px}
html.nav-tight:not(.nav-collapsed) .main-nav>ul>li>.submenu-caret{margin-left:-26px;width:22px}
html.nav-tight:not(.nav-collapsed) .mobile-panel-actions{gap:8px}
html.nav-tight:not(.nav-collapsed) .mobile-panel-actions .btn{padding:9px 16px;font-size:13.5px}

/* the light photo hero on the homepage (light-home.css) keeps dark type */
@media(min-width:1041px){
  :root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li>.submenu-caret{color:var(--lh-ink)}
  :root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li.menu-item-has-children:hover>a,
  :root[data-theme="light"] .lh-on .site-header:not(.is-solid):not(.is-open) .main-nav>ul>li:is(.current-menu-ancestor,.current-menu-parent,.current-page-ancestor)>a{background:rgba(10,13,17,.07)}
}

/* =========================================================================
   STEP 3: THE DRAWER ABOVE 1040px  (html.nav-collapsed)
   The same drawer as on tablets and phones (style.css "responsive: nav",
   light-site.css), for when the menu holds more than the bar can show.
   ========================================================================= */
html.nav-collapsed .menu-toggle{display:flex;margin-left:auto}
html.nav-collapsed .mobile-panel{
  display:none;position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;background:var(--white);
  flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--space-5) var(--gut);
  overflow-y:auto;gap:0;z-index:190;
}
html.nav-collapsed body.admin-bar .mobile-panel{top:calc(var(--hdr-h) + 32px)}
html.nav-collapsed .mobile-panel.is-open{display:flex}
html.nav-collapsed body.mobile-panel-open{overflow:hidden}
html.nav-collapsed .main-nav{width:100%;margin-left:0}
html.nav-collapsed .main-nav>ul{flex-direction:column;gap:0;width:100%;align-items:stretch}
html.nav-collapsed .main-nav>ul>li>a{
  padding:16px 0;font-size:17px;width:100%;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)!important;
  background:transparent;
}
html.nav-collapsed .main-nav>ul>li>a:hover{background:transparent}
html.nav-collapsed .main-nav>ul>li.menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
html.nav-collapsed .main-nav>ul>li.menu-item-has-children>a{flex:1;width:auto;border-bottom:none}
html.nav-collapsed .main-nav .menu-item-has-children>a::after{content:none}
html.nav-collapsed .submenu-caret{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;
}
html.nav-collapsed .submenu-caret span{width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s var(--ease)}
html.nav-collapsed .menu-item-has-children.submenu-open .submenu-caret span{transform:rotate(-135deg)}
html.nav-collapsed .main-nav .sub-menu{
  display:none;position:static;width:100%;margin:0 0 10px;border:0;border-radius:0;
  grid-template-rows:none;overflow:visible;visibility:visible;
  background:
    radial-gradient(40% 90% at 88% 0%, rgba(126,136,214,0.392) 0%, rgba(126,136,214,0) 70%),
    radial-gradient(48% 110% at 6% 110%, color-mix(in srgb,var(--accent) 28%,transparent) 0%, color-mix(in srgb,var(--accent) 0%,transparent) 72%),
    linear-gradient(180deg,#fff 0%,#fff 54%,#F4F6FA 84%,var(--paper-2) 100%);
}
html.nav-collapsed .menu-item-has-children.submenu-open>.sub-menu{display:block;grid-template-rows:none;border-bottom:0}
html.nav-collapsed .main-nav .sub-menu>.mega-shell{overflow:visible;max-height:none}
html.nav-collapsed .main-nav .sub-menu .mega-inner{display:block;padding:0 0 8px;max-width:none}
html.nav-collapsed .main-nav .sub-menu .mega-inner::before,
html.nav-collapsed .main-nav .sub-menu .mega-inner::after{content:none}
html.nav-collapsed .mega-rail,html.nav-collapsed .mega-feature,html.nav-collapsed .mega-aside{display:none}
html.nav-collapsed .main-nav .sub-menu .mega-cols{display:block;padding:0}
html.nav-collapsed .main-nav .sub-menu .mega-cols>li{margin:0}
html.nav-collapsed .mega-link{grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;padding:10px 4px;border-radius:10px}
html.nav-collapsed .mega-link::after{display:none}
html.nav-collapsed .mega-ic{width:34px;height:34px;border-radius:9px;margin-top:0}
html.nav-collapsed .mega-ic svg{width:19px;height:19px}
html.nav-collapsed .mega-desc{display:none}
html.nav-collapsed .main-nav .submenu-open .mega-item{animation:none}
html.nav-collapsed .mobile-panel-actions{flex-direction:column;align-items:stretch;margin:var(--space-5) 0 0;gap:var(--space-3);width:100%}
html.nav-collapsed .mobile-panel-actions .btn{width:100%}
html.nav-collapsed .lang-switch{justify-content:center}
html.nav-collapsed .lang-switch .lang-switch-in{height:44px;padding:4px}
html.nav-collapsed .lang-switch a.lang-link{height:34px;min-width:52px}
/* The drawer is an opaque sheet: the open bar above it stays solid too, and
   above all it must drop the frosted-glass filter. A backdrop-filter makes the
   header the containing block of the fixed drawer inside it, which shrank the
   drawer to a 48px strip under the bar on every page but the homepage
   (style.css's "body:not(.home) .site-header" out-ranked its own .is-open
   exception). Same rule for the drawer below 1041px and above it. */
html.nav-collapsed body .site-header.is-open{
  background:
    linear-gradient(180deg,var(--hdr-lift) 0%,transparent 44%),
    radial-gradient(62% 190% at 13% -60%,var(--hdr-bloom) 0%,transparent 72%),
    linear-gradient(180deg,transparent 58%,var(--hdr-sink) 100%),
    var(--white);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@media(max-width:1040px){
  body:not(.home) .site-header.is-open,body.home .site-header.is-open{
    background:
      linear-gradient(180deg,var(--hdr-lift) 0%,transparent 44%),
      radial-gradient(62% 190% at 13% -60%,var(--hdr-bloom) 0%,transparent 72%),
      linear-gradient(180deg,transparent 58%,var(--hdr-sink) 100%),
      var(--white);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
/* the drawer uses the width it has: a comfortable column, not 1200px rows */
html.nav-collapsed .mobile-panel>.main-nav,
html.nav-collapsed .mobile-panel>.mobile-panel-actions{max-width:760px;margin-inline:auto}

/* =========================================================================
   DRAWER DETAILS, all widths (below 1041px, or collapsed)
   ========================================================================= */
@media(max-width:1040px){
  .main-nav .mega-item.menu-item-has-children{display:block;border-bottom:0}
  .main-nav .sub-menu .mega-cols>li.mega-item.menu-item-has-children>a.mega-link{padding:10px 0 8px}
  .main-nav .mega-item .sub-sub-menu{margin:-2px 0 6px;padding-left:50px}
  .main-nav .mega-item .sub-sub-menu a{padding:9px 0;font-size:15px}
  .mobile-panel>.main-nav,.mobile-panel>.mobile-panel-actions{max-width:760px;margin-inline:auto}
}
html.nav-collapsed .main-nav .mega-item.menu-item-has-children{display:block;border-bottom:0}
html.nav-collapsed .main-nav .sub-menu .mega-cols>li.mega-item.menu-item-has-children>a.mega-link{padding:10px 0 8px}
html.nav-collapsed .main-nav .mega-item .sub-sub-menu{margin:-2px 0 6px;padding-left:50px}
html.nav-collapsed .main-nav .mega-item .sub-sub-menu a{padding:9px 0;font-size:15px}
/* the current page in the drawer: blue type across the whole row, rather
   than a grey block that stops short of the chevron */
@media(max-width:1040px){
  .main-nav>ul>li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor)>a{background:transparent;color:var(--accent)!important}
}
html.nav-collapsed .main-nav>ul>li:is(.current-menu-item,.current-menu-ancestor,.current-menu-parent,.current-page-ancestor)>a{background:transparent;color:var(--accent)!important}

@media(prefers-reduced-motion:reduce){
  .main-nav .sub-menu,.submenu-caret span{transition:none!important}
}

/* The drawer starts beneath the actual header, including the WordPress toolbar.
   Its surface must never cover the logo or the close button. */
.site-header{--nav-admin-offset:0px}
body.admin-bar .site-header{--nav-admin-offset:32px;top:var(--nav-admin-offset)}
@media(max-width:782px){
  body.admin-bar .site-header{--nav-admin-offset:46px}
}
/* A stale admin-bar class must not reserve an empty strip without a toolbar. */
body.admin-bar:not(:has(#wpadminbar)) .site-header,
body.admin-bar:has(#wpadminbar[hidden]) .site-header{--nav-admin-offset:0px}
@media(max-width:1040px){
  body .site-header .mobile-panel{top:calc(var(--hdr-h) + var(--nav-admin-offset))}
  body .site-header .menu-toggle,
  body .site-header .logo{position:relative;z-index:191}
}
html.nav-collapsed body .site-header .mobile-panel{top:calc(var(--hdr-h) + var(--nav-admin-offset))}
html.nav-collapsed body .site-header .menu-toggle,
html.nav-collapsed body .site-header .logo{position:relative;z-index:191}