/* =============================================================================
   Site UI polish — header icon buttons + slide-out menu hovers.
   Loaded globally after the inlined critical.css so these win. No build step.
   ========================================================================== */

/* ---------- Header alignment ----------
   The three columns carried different scroll-state `padding-top` values, which
   threw the burger, logo and basket out of vertical line. Centre the row and
   each column's single child, and clear those ad-hoc paddings so all three
   sit on one line at any header height. */
.fixed-header .container-top-header > .container > .row { align-items: center; }
.fixed-header .container-top-header > .container > .row > [class*="col-"] {
  display: flex;
  align-items: center;
  margin: 0;            /* kills a stray global .text-right{margin-bottom:15px} that gapped the basket */
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}
.fixed-header .top-nav-svg,
.fixed-header .top-nav-svg.menu,
.fixed-header .top-nav-svg.text-right { padding-top: 0; padding-bottom: 0; }
/* Logo anchor carries its own padding-top (9px) in a few states — clear it so
   the logo sits on the same centre line as the burger and basket. */
.fixed-header .container-top-header > .container > .row .logo-text { padding-top: 0; padding-bottom: 0; margin: 0; }
.fixed-header .container-top-header > .container > .row > .col-4.menu        { justify-content: flex-start; }
.fixed-header .container-top-header > .container > .row > .col-4.text-center { justify-content: center; }
.fixed-header .container-top-header > .container > .row > .col-4.text-right  { justify-content: flex-end; }

/* ---------- Header icon buttons (burger + basket) ----------
   Zero layout shift: the hover circle is an absolutely-positioned ::before,
   and the icon only transforms — nothing in normal flow changes size. */
.fixed-header .top-nav-svg .js-navControl,
.fixed-header .top-nav-svg a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fixed-header .top-nav-svg .js-navControl::before,
.fixed-header .top-nav-svg a::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(17, 17, 17, .07);
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 0;
  pointer-events: none;
}
.fixed-header .top-nav-svg .js-navControl:hover::before,
.fixed-header .top-nav-svg a:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.fixed-header .top-nav-svg .js-navControl img,
.fixed-header .top-nav-svg a img {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform .18s ease;
}
.fixed-header .top-nav-svg .js-navControl:hover img,
.fixed-header .top-nav-svg a:hover img { transform: scale(1.08); }
.fixed-header .top-nav-svg .js-navControl:active img,
.fixed-header .top-nav-svg a:active img { transform: scale(.92); }

/* Keyboard accessibility */
.fixed-header .top-nav-svg a:focus-visible::before,
.fixed-header .top-nav-svg .js-navControl:focus-visible::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  background: rgba(17, 17, 17, .12);
}

/* ---------- Slide-out menu links ----------
   Upgrade the flat #eee hover to a soft highlight + icon lift + gentle slide. */
#menu ul li a {
  transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
#menu ul li a .svg-icon img,
#menu ul li a .svg-icon svg {
  transition: transform .18s ease, opacity .18s ease;
}
#menu ul li a:hover,
#menu ul li a:focus {
  background: #f4f5f7;
  color: #111;
  padding-left: 26px;            /* subtle slide-in (base is 20px) */
}
#menu ul li a:hover .svg-icon img,
#menu ul li a:hover .svg-icon svg,
#menu ul li a:focus .svg-icon img,
#menu ul li a:focus .svg-icon svg {
  transform: scale(1.12);
}

/* ---------- Header burger (three bars) ----------
   The slide-out menu has its own X close button (always visible, including on
   mobile where the panel covers the burger), so the burger does NOT morph —
   it simply steps aside (fades out) while the menu is open. That guarantees a
   single, obvious close control on every screen. */
.gm-burger { -webkit-tap-highlight-color: transparent; transition: opacity .2s ease; }
.gm-burger__box {
  position: relative; display: block; width: 28px; height: 18px;
  transition: transform .12s ease;
}
.gm-burger__bar {
  position: absolute; left: 0; width: 100%; height: 3px;
  background: #1d1d1d; border-radius: 3px;
}
.gm-burger__bar:nth-child(1) { top: 0; }
.gm-burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.gm-burger__bar:nth-child(3) { bottom: 0; }

/* While the menu is open, the burger gives way to the in-drawer X. */
body.menu-open #open-menu { opacity: 0; pointer-events: none; }

/* Press feedback */
.gm-burger:active .gm-burger__box { transform: scale(.88); }

/* Mobile: a touch bigger + comfortable 44px tap target */
@media (max-width: 640px) {
  .gm-burger__box { width: 26px; height: 17px; }
  .fixed-header .top-nav-svg .js-navControl,
  .fixed-header .top-nav-svg a { min-width: 44px; min-height: 44px; }
  .fixed-header .top-nav-svg .js-navControl::before,
  .fixed-header .top-nav-svg a::before { width: 44px; height: 44px; }
  /* Show the hover circle on tap (no hover on touch) so taps feel responsive */
  .fixed-header .top-nav-svg .js-navControl:active::before,
  .fixed-header .top-nav-svg a:active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- In-drawer X close button (the single close control) ----------
   Lives inside the menu panel so it's always visible + tappable when the menu
   is open, on mobile and desktop alike. Steady X with a playful hover spin. */
.gm-burger--close {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  background: none; border: 0; margin: 0; padding: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  transition: background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gm-burger--close:hover,
.gm-burger--close:focus-visible { background: rgba(17, 17, 17, .07); outline: none; }
.gm-burger--close .gm-burger__box {
  width: 22px; height: 16px;
  transition: transform .4s cubic-bezier(.62, .03, .2, 1.12);
}
.gm-burger--close:hover .gm-burger__box { transform: rotate(90deg); }
.gm-burger--close:active .gm-burger__box { transform: rotate(90deg) scale(.85); }
.gm-burger--close .gm-burger__bar { transition: none; }
.gm-burger--close .gm-burger__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.gm-burger--close .gm-burger__bar:nth-child(2) { opacity: 0; }
.gm-burger--close .gm-burger__bar:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .gm-burger__bar, .gm-burger__box { transition: none; }
}