/**
 * Atelier — Mega-menu + mobile drawer (C3). Desktop: a full-width panel
 * that drops from a top-nav link on hover/focus, showing sub-category
 * columns + a promo tile. Mobile: the same nav content becomes a slide-in
 * drawer from the left, opened by a hamburger button (the "New In" /
 * "Journal" / "About" single-level links in _header.css stay as-is; only
 * items with sub-navigation -- Women / Men -- get the expandable treatment).
 */

/* Desktop mega-menu */
.atl-megamenu-item { position: relative; }
.atl-megamenu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  box-shadow: 0 12px 32px var(--atl-shadow-tint);
  padding: 32px;
  display: none;
  grid-template-columns: repeat(3, 1fr) 220px;
  gap: 32px;
  z-index: 30;
}
.atl-megamenu-item:hover .atl-megamenu-panel,
.atl-megamenu-item:focus-within .atl-megamenu-panel,
.atl-megamenu-panel[data-open] {
  display: grid;
}
.atl-megamenu-col-title { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-accent-2); margin-bottom: 14px; }
.atl-megamenu-col a { display: block; font-size: 14px; color: var(--atl-text); text-decoration: none; padding: 6px 0; }
.atl-megamenu-col a:hover { color: var(--atl-accent); }
.atl-megamenu-col a:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-megamenu-promo { display: flex; flex-direction: column; gap: 10px; }
.atl-megamenu-promo-media { aspect-ratio: 4/5; background: var(--atl-bg); border: 1px solid var(--atl-border); }
.atl-megamenu-promo-title { font-family: 'Cormorant Garamond', serif; font-size: 16px; }
.atl-megamenu-promo-link { font-size: 12px; color: var(--atl-accent); text-decoration: none; }

/* Mobile drawer (shares the .atl-mobile-nav 767px breakpoint) */
.atl-nav-drawer-toggle { display: none; }
.atl-nav-drawer-overlay { position: fixed; inset: 0; background: var(--atl-overlay-scrim); z-index: 80; display: none; }
.atl-nav-drawer-overlay[data-open] { display: block; }
.atl-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85%;
  background: var(--atl-surface);
  z-index: 81;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.atl-nav-drawer[data-open] { transform: translateX(0); }
.atl-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--atl-border); }
.atl-nav-drawer-close { background: none; border: none; font-size: 18px; color: var(--atl-text-muted); cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; font-family: inherit; }
.atl-nav-drawer-close:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
.atl-nav-drawer-section { border-bottom: 1px solid var(--atl-border); }
.atl-nav-drawer-toplink { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--atl-text); text-decoration: none; background: none; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.atl-nav-drawer-toplink-caret { transition: transform 0.2s ease; }
.atl-nav-drawer-toplink[aria-expanded="true"] .atl-nav-drawer-toplink-caret { transform: rotate(180deg); }
.atl-nav-drawer-sublist { display: none; flex-direction: column; padding: 0 20px 14px; }
.atl-nav-drawer-sublist[data-open] { display: flex; }
.atl-nav-drawer-sublist a { padding: 8px 0; font-size: 13.5px; color: var(--atl-text-muted); text-decoration: none; }

@media (max-width: 767px) {
  .atl-megamenu-panel { display: none !important; }
  .atl-nav-drawer-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--atl-text);
  }
  .atl-nav-drawer-toggle:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
}