/* ==========================================================================
   Studio 24/7 — Mobile Drawer Menu
   Image-tile strip + chevron list rows with drill-down sub-panels.

   Colours follow the site's active design direction (warm near-black ground,
   warm-white ink, single burnt-orange accent). Type is inherited from the
   theme so the drawer matches the rest of the site.

   BRANDING: change the variables in :root below. Nothing else needs editing.
   ========================================================================== */

:root {
  --s247-accent:        #ee6123;                    /* single locked accent   */
  --s247-accent-ink:    #f6f1ea;                    /* ink on the orange      */
  --s247-ink:           #f6f1ea;                    /* main text (warm white) */
  --s247-ink-soft:      #b4aa9e;                    /* chevrons, secondary    */
  --s247-line:          rgba(246, 241, 234, .12);   /* hairline dividers      */
  --s247-surface:       #0e0c0b;                    /* drawer ground          */
  --s247-surface-alt:   #191512;                    /* row hover, tile ground */
  --s247-scrim:         rgba(14, 12, 11, .72);      /* overlay behind drawer  */
  --s247-radius-tile:   16px;
  --s247-radius-btn:    999px;                      /* pill                   */
  --s247-row-h:         62px;
  --s247-tile-w:        124px;
  --s247-tile-h:        158px;
  --s247-pad:           20px;
  --s247-font:          inherit;                    /* match the theme        */
  --s247-logo-h:        30px;
  --s247-drawer-w:      min(92vw, 420px);
  --s247-breakpoint:    1024px;                     /* mirror in the PHP too  */
  --s247-z:             99990;
}

/* ---------- trigger (hamburger) ---------- */
.s247-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--s247-radius-btn);
  background: transparent;
  color: currentColor;                 /* picks up the header's own colour */
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s247-trigger__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.s247-trigger--floating {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--s247-z) - 1);
  background: var(--s247-surface);
  color: var(--s247-ink);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}
.s247-trigger__bars,
.s247-trigger__bars::before,
.s247-trigger__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
.s247-trigger__bars { position: relative; }
.s247-trigger__bars::before { position: absolute; top: -7px; }
.s247-trigger__bars::after  { position: absolute; top:  7px; }

/* ---------- overlay + drawer shell ---------- */
.s247-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--s247-z);
  background: var(--s247-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.s247-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--s247-z) + 1);
  display: flex;
  flex-direction: column;
  width: var(--s247-drawer-w);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--s247-font);
  color: var(--s247-ink);
  background: var(--s247-surface);
  box-shadow: 0 0 48px rgba(0, 0, 0, .55);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility .32s;
}
.s247-menu--right { right: 0; left: auto; transform: translateX(102%); }

html.s247-open,
body.s247-open { overflow: hidden; }

.s247-open .s247-overlay { opacity: 1; visibility: visible; }
.s247-open .s247-menu    { transform: translateX(0); visibility: visible; }

/* ---------- drawer header ---------- */
.s247-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px var(--s247-pad) 14px;
  border-bottom: 1px solid var(--s247-line);
}
.s247-menu__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: inherit;
}
.s247-menu__brand img {
  display: block;
  height: var(--s247-logo-h);   /* wide logos: bump this, not max-width */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.s247-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--s247-line);
  border-radius: 50%;
  background: transparent;
  color: var(--s247-ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.s247-close:hover {
  background: var(--s247-accent);
  border-color: var(--s247-accent);
  color: var(--s247-accent-ink);
}

/* ---------- optional CTA (solid accent pill, per the design direction) ---- */
.s247-cta {
  display: block;
  flex: 0 0 auto;
  margin: 16px var(--s247-pad) 6px;
  padding: 14px 20px;
  border: 1px solid var(--s247-accent);
  border-radius: var(--s247-radius-btn);
  background: var(--s247-accent);
  color: var(--s247-accent-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.s247-cta:hover,
.s247-cta:focus-visible {
  background: transparent;
  color: var(--s247-accent);
}

/* ---------- sliding panel stage ---------- */
.s247-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.s247-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--s247-surface);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility .3s;
}
.s247-panel[data-state="current"] { transform: translateX(0);    visibility: visible; }
.s247-panel[data-state="behind"]  { transform: translateX(-28%); visibility: visible; }

/* ---------- image tile strip ---------- */
.s247-tiles {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  padding: 18px var(--s247-pad) 22px;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.s247-tiles::-webkit-scrollbar { display: none; }
.s247-tile {
  flex: 0 0 var(--s247-tile-w);
  scroll-snap-align: start;
}
.s247-tile a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.s247-tile__img {
  display: block;
  width: 100%;
  height: var(--s247-tile-h);
  border-radius: var(--s247-radius-tile);
  background: var(--s247-surface-alt) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--s247-line);
  transition: transform .22s ease, box-shadow .22s ease;
}
.s247-tile a:hover .s247-tile__img,
.s247-tile a:focus-visible .s247-tile__img {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--s247-accent), 0 0 0 2px var(--s247-accent);
}
/* Clamped to two lines so a long category name cannot make the strip ragged. */
.s247-tile__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--s247-ink);
}

/* ---------- list rows ---------- */
.s247-list {
  margin: 0;
  padding: 0 0 40px;
  list-style: none;
  border-top: 1px solid var(--s247-line);
}
.s247-list__item + .s247-list__item { border-top: 1px solid var(--s247-line); }
.s247-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--s247-row-h);
  width: 100%;
  padding: 14px var(--s247-pad);
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.s247-list__link:hover,
.s247-list__link:focus-visible { background: var(--s247-surface-alt); }
.s247-list__link .s247-chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--s247-ink-soft);
  border-bottom: 2px solid var(--s247-ink-soft);
  transform: rotate(-45deg);
  transition: border-color .15s ease, transform .15s ease;
}
.s247-list__link:hover .s247-chev,
.s247-list__link:focus-visible .s247-chev {
  border-color: var(--s247-accent);
  transform: rotate(-45deg) translate(2px, 2px);
}
/* current page: orange bar down the left edge */
.s247-list__item--current > .s247-list__link {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--s247-accent);
}

/* ---------- sub-panel header (back) ---------- */
.s247-panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px var(--s247-pad);
  border-bottom: 1px solid var(--s247-line);
  background: var(--s247-surface);
}
.s247-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--s247-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.s247-back .s247-chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--s247-accent);
  border-bottom: 2px solid var(--s247-accent);
  transform: rotate(45deg);
}

/* ---------- focus + motion ---------- */
.s247-menu :focus-visible,
.s247-trigger:focus-visible {
  outline: 2px solid var(--s247-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .s247-menu, .s247-panel, .s247-overlay, .s247-tile__img { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Theme hand-off: below the breakpoint the drawer replaces the EmilyNolan
   hamburger and the Max Mega Menu panel. Above it, the desktop mega menu is
   untouched and the drawer never renders its trigger.
   ========================================================================== */
@media (max-width: 1024px) {
  body.s247-has-drawer .ms-nav .hamburger,
  body.s247-has-drawer .ms-nav .height-full-viewport,
  body.s247-has-drawer .mega-menu-toggle {
    display: none !important;
  }
}
/* The trigger stands in for the theme's own hamburger inside .ms-nav, so it has
   to inherit that button's two layout jobs:
     margin-left:auto  — pushes it to the right of the flex row (the theme's
                         hamburger did this; hiding it moved ours next to the logo)
     z-index:8         — the theme paints a full-screen .content-overlay at
                         z-index 3 and its own hamburger clears it at 7. Without
                         a stacking context of its own the button is covered and
                         cannot be tapped. position:relative makes z-index apply. */
.s247-trigger--replaces-theme {
  position: relative;
  z-index: 8;
  margin-left: auto;
  margin-right: 0;
}

@media (min-width: 1025px) {
  .s247-trigger--replaces-theme { display: none !important; }
}