/* ==========================================================================
   5MA FASHIONS — nav.css
   --------------------------------------------------------------------------
   The whole navigation, in one file.

     1. Main bar
     2. Dropdown  (level 2)
     3. Submenu   (level 3, nested)
     4. Mobile drawer
     5. Responsive

   Desktop opening is pure CSS — :hover and :focus-within. No JavaScript
   touches this menu, so keyboard access comes for free and there is no state
   to keep in sync. The mobile accordion needs a few lines of JS, and that is
   all of it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. NAVIGATION TYPE SCALE

   Outfit is a geometric sans with a large x-height, so it holds up small.
   What it does need is a little positive tracking at menu sizes — geometric
   letterforms sit tight to one another otherwise — and neutral tracking once
   the size grows.

   Link size is a flat 16px at every desktop width. Gaps still scale, 24px to
   46px, so density stays proportional without the type moving.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   1. MAIN BAR
   -------------------------------------------------------------------------- */
.mainnav { display: flex; justify-content: center; width: 100%; }

.mainnav__list {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mainnav__item { position: relative; }

.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: #1C1A1A;
  white-space: nowrap;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
}

/* A hairline that draws out from the centre — quieter than a colour swap */
.mainnav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: #75174E;
  transform: scaleX(0);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.mainnav__item:hover > .mainnav__link::after,
.mainnav__link.is-current::after,
.mainnav__link:focus-visible::after { transform: scaleX(1); }

.mainnav__item:hover > .mainnav__link,
.mainnav__link.is-current { color: #75174E; }

.mainnav__caret {
  opacity: .5;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.mainnav__item--menu:hover > .mainnav__link .mainnav__caret,
.mainnav__item--menu:focus-within > .mainnav__link .mainnav__caret {
  transform: rotate(180deg);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   4. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.mnav { list-style: none; margin: 0; padding: 0; }
.mnav__item + .mnav__item { border-top: 1px solid #F6EFEF; }

.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  color: #1C1A1A;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.mnav__link:hover { color: #75174E; }
.mnav__caret { opacity: .5; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.mnav__toggle[aria-expanded="true"] { color: #75174E; }
.mnav__toggle[aria-expanded="true"] .mnav__caret { transform: rotate(180deg); opacity: 1; }

/* Panels animate on max-height, set by JS from scrollHeight */
.mnav__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1);
}

.mnav__sub { list-style: none; margin: 0; padding: 4px 0 12px; }
.mnav__subitem + .mnav__subitem { margin-top: 4px; }

.mnav__row { display: flex; align-items: center; gap: 6px; }
.mnav__row .mnav__sublink { flex: 1 1 auto; }

.mnav__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 10px;
  background: #FCF9F9;
  font-size: 15px;
  line-height: 1.45;
  color: #4E4A49;
  transition: background .2s ease, color .2s ease;
}
.mnav__sublink:hover { background: #F9F3F3; color: #75174E; }
.mnav__sublink--all {
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  color: #1C1A1A;
}

.mnav__mini {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 1px solid #F0E6E6;
  border-radius: 10px;
  background: transparent;
  color: #6D6767;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.61,.36,1),
              border-color .2s ease, color .2s ease;
}
.mnav__mini[aria-expanded="true"] {
  transform: rotate(180deg);
  border-color: #75174E;
  color: #75174E;
}

.mnav__kids { list-style: none; margin: 0; padding: 4px 0 2px 12px; }
.mnav__kid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  margin-bottom: 4px;
  border-left: 2px solid #F0E6E6;
  font-size: 15px;
  line-height: 1.45;
  color: #4E4A49;
  transition: border-color .2s ease, color .2s ease;
}
.mnav__kid:hover { border-left-color: #75174E; color: #75174E; }

.mnav__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #6D6767;
  margin: 24px 0 4px;
  padding-top: 24px;
  border-top: 1px solid #F0E6E6;
}
.mnav--minor .mnav__link { font-size: 15px; color: #4E4A49; padding: 12px 0; }

.drawer__logo { display: block; height: 62px; width: auto; }


/* --------------------------------------------------------------------------
   5. RESPONSIVE

   Sizes are already fluid, so these breakpoints only handle STRUCTURE —
   what collapses, what swaps, what hides. There are no font-size jumps.
   -------------------------------------------------------------------------- */

/* ---- Laptop: 1024 – 1399 ------------------------------------------------ */
@media (max-width: 1399.98px) {
}

/* ---- Small laptop: 992 – 1199 ------------------------------------------- */
@media (max-width: 1199.98px) {
  .mainnav__link  { padding: 12px 0; }
}

/* ---- Tablet and below: the drawer takes over -----------------------------
   Hover is unreliable on touch, so the CSS-driven menu is not rendered at
   all below this width. Everything moves into the drawer accordion. */
@media (max-width: 991.98px) {
  /* Hide the WRAPPER, not just the <nav> inside it. Left visible, .hdr__nav
     stays a grid item holding column 2 — the same column as the logo — which
     forces a second row and drags the action icons down with it. */
  .hdr__nav,
  .mainnav { display: none; }

  /* Comfortable targets: every row clears the 44px minimum */
  .mnav__link    { padding: 16px 0; min-height: 56px; }
  .mnav__sublink { padding: 16px 16px; min-height: 50px; }
  .mnav__kid     { padding: 12px 16px; min-height: 46px; }
  .mnav__mini    { width: 46px; height: 46px; }
}

/* ---- Tablet portrait ---------------------------------------------------- */
@media (max-width: 767.98px) {
  .drawer__logo { height: 58px; }
  .mnav__label  { margin-top: 24px; padding-top: 16px; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .drawer__logo  { height: 50px; }
  .mnav__link    { padding: 16px 0; min-height: 54px; }
  .mnav__sublink { padding: 12px 12px; min-height: 48px; }
  .mnav__mini    { width: 44px; height: 44px; }
}

/* ---- Very small phones -------------------------------------------------- */
@media (max-width: 360px) {
  .mnav__kids { padding-left: 8px; }
}

/* ---- Coarse pointers: no hover, so give the caret a real hit area -------- */
@media (hover: none) {
  .mnav__mini { min-width: 44px; min-height: 44px; }
}

@media (max-width: 1199.98px) {
}

@media (prefers-reduced-motion: reduce) {
}


/* ==========================================================================
   SHOP DROPDOWN

   A vertical list, with the lengths on a flyout beside the one category that
   has them. Pure CSS on :hover and :focus-within — no JavaScript, so it
   works before the page has finished loading and keyboard users reach it
   with Tab like anything else.
   ========================================================================== */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 340px;
  padding-top: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .28s;
  z-index: 950;
}
.mainnav__item--menu:hover .dropdown,
.mainnav__item--menu:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown__list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  background: #FFFFFF;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(28,26,26,.04), 0 20px 48px rgba(28,26,26,.12);
}

.dropdown__item { position: relative; }

.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  font-size: 15px;
  color: #1C1A1A;
  transition: background .2s ease, color .2s ease;
}
.dropdown__link:hover,
.dropdown__item--parent:hover > .dropdown__link {
  background: #FCF9F9;
  color: #75174E;
}

.dropdown__caret { flex: 0 0 auto; opacity: .5; transition: transform .3s ease, opacity .2s ease; }
.dropdown__item--parent:hover .dropdown__caret { opacity: 1; transform: translateX(2px); }

/* The flyout, aligned to the top of its parent row so the eye stays put */
.submenu {
  position: absolute;
  top: -12px;
  left: 100%;
  min-width: 264px;
  margin-left: 8px;
  padding: 20px 0 16px;
  background: #FFFFFF;
  border: 1px solid #F0E6E6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(28,26,26,.04), 0 20px 48px rgba(28,26,26,.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .26s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .26s;
}
.dropdown__item--parent:hover > .submenu,
.dropdown__item--parent:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.submenu__title {
  margin: 0 0 8px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  color: #1C1A1A;
}

.submenu__list { list-style: none; margin: 0; padding: 0; }

.submenu__link {
  display: block;
  padding: 10px 24px;
  font-size: 15px;
  color: #6D6767;
  transition: background .2s ease, color .2s ease, padding-left .3s cubic-bezier(.16,1,.3,1);
}
.submenu__link:hover { background: #FCF9F9; color: #75174E; padding-left: 28px; }

/* Near the right edge the flyout would run off screen, so it flips */
@media (max-width: 1399.98px) {
  .dropdown { left: 0; transform: translateX(0) translateY(8px); }
  .mainnav__item--menu:hover .dropdown,
  .mainnav__item--menu:focus-within .dropdown { transform: translateX(0) translateY(0); }
}

/* The label inside a dropdown row, so long category names wrap rather than
   pushing the caret off the edge */
.dropdown__name { flex: 1 1 auto; min-width: 0; }