/* =========================================================
   Carrefour Proprip — Main Menu Component
   ========================================================= */

/* Wrapper nav */
header {
  nav#block-cp-main-menu {
    border-top: none;
  }

  nav ul {
    display:flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
    flex-wrap: wrap;
    font-family: var(--font-label);
    letter-spacing: 0;
    font-size: var(--type-sm);
    font-weight: 700;
    color: var(--header-secondary-text);
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-bottom: 2px solid transparent;

      :hover {
        color: var(--header-text);
        border-bottom-color: var(--header-accent);

        a {
          text-decoration: none;
        }
        a:focus-visible {
          outline: 2px solid var(--focus);
          outline-offset: 3px;
        }
      }
    }
    li:has(.is-active),
    li.is-active {
      color: var(--header-text);
      border-bottom-color: var(--header-accent);
    }
  }

  .c-hdr__region {
    nav {
      border: 0;
      padding-top: 0;
      ul {
        gap: clamp(14px, 1.6vw, 28px);
      }
    }
    nav[id*="account"] li:has(.is-active),
    nav[id*="account"] li.is-active { /* TODO: Add .is-active */
      color: var(--header-text);
      border-bottom-color: var(--header-accent);
    }
  }

  .c-hdr__region nav[id*="account"] ul,
  .c-hdr__region .menu--account ul {
    gap: clamp(14px, 1.6vw, 24px);
    flex-wrap: nowrap;
    margin-top: 1ex;
  }

  .c-hdr__region nav[id*="account"] li,
  .c-hdr__region .menu--account li {
    border-bottom: 2px solid transparent;
    font-size: var(--type-xs);
    font-weight: 500;
  }

  .c-hdr__region nav[id*="account"] a:hover,
  .c-hdr__region .menu--account a:hover {
    color: var(--header-text);
    border-bottom-color: var(--header-accent);
    text-decoration: none;
  }

  /* Mobile main menu layout */
  .c-hdr__panel nav {
    border: none;
    ul {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      font-size: var(--type-xl);
    }
  }
}