/**
 * 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; }
/* Panel anchors to the LEFT edge of its nav item and grows rightwards
   (was: 900px centered on the item via translateX(-50%) — the nav items sit
   near the viewport's left edge, so a centered 900px panel extended ~350px
   off-screen to the left, clipping its links unreachably). It also resets
   the uppercase/letter-spacing typography inherited from .atl-nav so panel
   links render in normal case. */
.atl-megamenu-panel {
  position: absolute;
  top: calc(100% + var(--atl-header-pad-y) + 1px);
  left: 0;
  width: min(720px, calc(100vw - 64px));
  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(2, 1fr) 220px;
  gap: 32px;
  z-index: 30;
  text-transform: none;
  letter-spacing: normal;
}
.atl-megamenu-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: calc(var(--atl-header-pad-y) + 1px); }
.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; }
/* Pin the promo tile to the fixed 220px end track even when a panel has
   fewer link columns than the grid defines (e.g. the Women panel: one link
   column + promo). */
.atl-megamenu-promo { display: flex; flex-direction: column; gap: 10px; grid-column: -2 / -1; }
.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; }

/* Hamburger shows in the compact header (<=1199.98px or .atl-header--compact); 44px drawer targets at <=767px. */
.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; }

.atl-nav-drawer-toggle:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }
@media (max-width: 1199.98px) {
  .atl-megamenu-panel { display: none !important; }
  .atl-nav-drawer-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -4px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--atl-text); }
}
.atl-header--compact .atl-megamenu-panel { display: none !important; }
.atl-header--compact .atl-nav-drawer-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -4px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--atl-text); }
@media (max-width: 767px) {
  /* 44px tap targets (CLAUDE.md 11.4); head padding drops 18->12px so the head height stays 68px. */
  .atl-nav-drawer-head { padding-top: 12px; padding-bottom: 12px; }
  .atl-nav-drawer-close { width: 44px; height: 44px; margin-right: -6px; }
  .atl-nav-drawer-sublist a { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}