/* ==========================================================================
   menu-fix.css — F3 fixes for header / main navigation (owner: menu-fixer)
   Loaded after style.css (see theme/inc/nav.php enqueue). Only menu/header
   related rules live here; nothing else in the theme consumes this file.

   Reference baseline: recon/theme-spec/ref/d-panel-*.png + live
   https://www.caroll.com/fr_fr/ measured at 1440 / 1200 / 1024 (sticky and
   non-sticky). Evidence: recon/theme-spec/menu-fix/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Desktop mega menu: keep the panel full-bleed in every header state.
   --------------------------------------------------------------------------
   The reference stylesheet (assets/css/global.css) makes
   `header.sticky .main-menu .top-level > .menu-level-list` position:relative.
   Our `.menu-level.top-level` is a centred flex box, so in sticky mode that
   <ul> shrank to the width of the 5 nav items (~718px) and became the
   containing block of the absolutely positioned panel: links wrapped, the
   promo tiles overlapped the columns. Forcing the list to 100% keeps the
   panel anchored to the full header width (reference: 1440x506 at 1440px).
    */
@media (min-width: 769px) {
  .main-menu .menu-level.top-level > .menu-level-list,
  header.sticky .main-menu .menu-level.top-level > .menu-level-list {
    width: 100%;
  }

  .main-menu .main-menu-nav,
  .main-menu .main-menu-nav-wrapper {
    width: 100%;
  }

  /* The opening panel must sit below the nav row in sticky mode exactly like
     on the reference site (panel top = nav bottom). */
  header.sticky .main-menu .menu-level-last {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   2. Desktop mega menu: content-driven panel height + never-flush gutters.
   --------------------------------------------------------------------------
   Reference panels are sized by their content (padding 20px + tallest
   column): Idées cadeaux 228, Prêt-à-porter 506, Sacs 322, La Marque 370 at
   1440. The previous per-nth-child `min-height` values in style.css froze the
   old capture and made the panel bottom padding arbitrary — neutralise them
   so the height follows the content at every width.
    */
@media (min-width: 769px) {
  .main-menu .menu-level.top-level > .menu-level-list > .list-item:nth-child(n) > .menu-level-last {
    min-height: 0;
  }

  /* Reference: padding-inline = (100% - 1024px)/2 (208px at 1440). The
     reference formula goes to 0px at 1024 and negative below, leaving the
     copy flush with the viewport edge; clamp it so there is always a gutter. */
  .menu-level-last {
    padding-left: max(24px, calc((100% - 1024px) / 2));
    padding-right: max(24px, calc((100% - 1024px) / 2));
  }
}

/* --------------------------------------------------------------------------
   3. Desktop mega menu: tiles.
   --------------------------------------------------------------------------
   Promo tiles are grid cells of the push column (350px / 380px wide, image
   + 13px caption area). The reference ratio (nav data w/h) is pinned inline
   on the <img> in inc/nav.php so the rendered height matches the reference
   (e.g. La Marque 350x213 instead of the S3 file's natural 350x207).
   No sizing rule is needed here: style.css already sets max-width:100%.
    */

/* --------------------------------------------------------------------------
   4. Mobile drawer (<= 768.98px): level headers, see-all row and sticky bar.
   --------------------------------------------------------------------------
   Reference (recon/theme-spec/ref/m-drawer-1/2.png + live 390x844):
   - level header is an absolute 75px band spanning the viewport, back arrow
     on the left, title right next to it, close button on the right;
   - "Voir tout" is an absolute 40px row under the header (13px/600);
   - the bottom shortcut bar belongs to level 1 and slides away with it.
   The previous theme override put the header in flow at 100px height and
   centred the title, which shifted every level down and clipped long titles.
    */
@media (max-width: 768.98px) {
  .main-menu .mobile-level-nav-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: -15px;
    top: 0;
    width: 100vw;
    max-width: 450px;
    height: 75px;
    padding: 7.5px 10px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .main-menu .mobile-level-nav-header-container .go-to-prev-level {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 75px;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
  }

  .main-menu .mobile-level-nav-header-container .go-to-prev-level > i {
    height: 15px;
    margin-right: 10px;
    flex: 0 0 auto;
  }

  .main-menu .mobile-level-nav-header-container .go-to-prev-level .item-link {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-menu .mobile-level-nav-header-container .close-main-menu {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-menu .mobile-level-nav .go-to-category {
    position: absolute;
    top: 75px;
    left: -15px;
    width: 100vw;
    max-width: 450px;
    height: 40px;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #00112e;
  }

  /* The shortcut bar is part of the level-1 drawer on the reference site and
     slides out when a sub level is opened — hide it instead of letting it
     float over level 2/3 content. */
  .main-menu:has(.menu-level-last.show) .mobile-sticky-menu,
  .main-menu:has(.menu-level.no-slide-level.show) .mobile-sticky-menu {
    display: none;
  }

  /* Keep the dialog usable when the sticky bar is visible on level 1: reserve
     room at the end of the scroll container so the last row is reachable. */
  .main-menu .main-menu-nav-wrapper {
    padding-bottom: 76px;
    box-sizing: border-box;
  }

  .main-menu:has(.menu-level-last.show) .main-menu-nav-wrapper,
  .main-menu:has(.menu-level.no-slide-level.show) .main-menu-nav-wrapper {
    padding-bottom: 0;
  }

  /* The shared mobile stylesheet hides every .menu-icon-label; the reference
     drawer keeps the four shortcut labels under their icons. */
  .main-menu.open .mobile-sticky-menu .menu-icon-label {
    display: block;
    font-size: 11px;
    line-height: 14px;
    margin-top: 4px;
    color: #4c586c;
    white-space: nowrap;
  }

  .main-menu .mobile-sticky-menu .user-links-stickyMenu {
    align-items: flex-start;
    left: 0;
    width: 100%;
  }

  .main-menu .mobile-sticky-menu .user-links-stickyMenu > li {
    display: flex;
    justify-content: center;
  }

  /* Reference order-tracking CTA: outlined, ~88px tall, three centred lines. */
  .main-menu .order-track-submit {
    padding: 18px 12px;
    line-height: 1.7;
    font-size: 13px;
    text-align: center;
    white-space: normal;
    border: 1px solid var(--color-secondary, #d1aa65);
  }

  .main-menu .order-track-info {
    font-size: 15px;
    line-height: 1.4;
    color: #4c586c;
  }
}