/**
 * Header Menu Styles
 * Styles for the header navigation menu component
 */

/* ============================================
   BASE MENU STYLES
   ============================================ */

.header-menu {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.header-menu__wrapper {
  /* wrapper styles */
}

.header-menu__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================
   MENU ITEMS
   ============================================ */

.header-menu__item {
  position: relative;
  color: #fff;
}

.header-menu__item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  width: 100%;
}

.header-menu__item-content > .header-menu__link,
.header-menu__item-content > .header-menu__dropdown-link {
  flex: 1;
}

.header-menu__item-content button {
  color: currentColor;
}

.header-menu__link {
  display: block;
  padding: 1rem 0;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 1.4rem;
  line-height: 120%;
  text-transform: uppercase;
}

/* ============================================
   DROPDOWN MENU (DESKTOP)
   ============================================ */

.header-menu__item--has-dropdown {
  position: relative;
}

.header-menu__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.header-menu__dropdown-icon {
  display: block;
  width: 11px;
  height: 6px;
  fill: currentColor;
}

.header-menu__dropdown-icon path {
  fill: currentColor;
}

.header-menu__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
  z-index: 1000;
}

.header-menu__item--has-dropdown:hover > .header-menu__dropdown,
.header-menu__item--has-dropdown.is-open > .header-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-menu__dropdown-item {
  position: relative;
}

.header-menu__dropdown-link {
  display: block;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  color: #000;
  font-size: 1.6rem;
}

.header-menu__dropdown-link:hover {
  background-color: transparent;
}

.header-menu__dropdown .header-menu__item {
  color: #000;
}

.header-menu__dropdown .header-menu__item-content {
  color: #000;
  width: 100%;
  justify-content: flex-start;
  gap: 0.25rem;
}

.header-menu__dropdown .header-menu__item-content:hover {
  background-color: #f5f5f5;
}

.header-menu__dropdown .header-menu__dropdown-toggle {
  margin-left: 0;
  margin-right: 0.5rem;
}

.header-menu__dropdown .header-menu__dropdown {
  top: 0;
  left: 100%;
  transform: translateX(10px);
}

.header-menu__dropdown
  .header-menu__item--has-dropdown:hover
  > .header-menu__dropdown,
.header-menu__dropdown
  .header-menu__item--has-dropdown.is-open
  > .header-menu__dropdown {
  transform: translateX(0);
}

/* ============================================
   MOBILE MENU TOGGLE — TWO-PHASE HAMBURGER
   Bars move to center first, then rotate into ×
   ============================================ */

.header-menu__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 1001;
  outline: none;
}

.header-menu__toggle:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Middle bar */
.header-menu__toggle-icon {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background-color 0.15s ease 0.22s;
}

/* Top & bottom bars */
.header-menu__toggle-icon::before,
.header-menu__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition:
    top 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.22s,
    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
}

.header-menu__toggle-icon::before {
  top: -7px;
}

.header-menu__toggle-icon::after {
  top: 7px;
  width: 75%;
}

/* — × (close) state — */
.header-menu__toggle[aria-expanded="true"] .header-menu__toggle-icon {
  background-color: transparent;
  transition: background-color 0.1s ease 0s;
}

.header-menu__toggle[aria-expanded="true"] .header-menu__toggle-icon::before,
.header-menu__toggle[aria-expanded="true"] .header-menu__toggle-icon::after {
  transition:
    top 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.22s,
    width 0.2s ease 0s;
  top: 0;
  width: 100%;
}

.header-menu__toggle[aria-expanded="true"] .header-menu__toggle-icon::before {
  transform: rotate(45deg);
}

.header-menu__toggle[aria-expanded="true"] .header-menu__toggle-icon::after {
  transform: rotate(-45deg);
}

/* ============================================
   RESIZE FLASH PREVENTION
   Suppresses all transitions while viewport is being resized
   so the mobile styles don't animate in when crossing the breakpoint
   ============================================ */

.is-resizing .header-menu__wrapper,
.is-resizing .header-menu__list > .header-menu__item,
.is-resizing .header-menu__mobile-logo,
.is-resizing .header-menu__dropdown,
.is-resizing .header-menu__dropdown-icon,
.is-resizing .header-menu__toggle-icon,
.is-resizing .header-menu__toggle-icon::before,
.is-resizing .header-menu__toggle-icon::after {
  transition: none !important;
  animation: none !important;
}

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 1200px) {
  /* ── Toggle button ── */
  .header-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  /* ── Menu overlay — enters with scale+fade, easeOutExpo ── */
  .header-menu__wrapper {
    will-change: transform, opacity;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    background-color: var(--bricks-color-pqnfvl);
    background-image: radial-gradient(
      ellipse 130% 70% at 80% -5%,
      rgba(255, 255, 255, 0.045) 0%,
      transparent 55%
    );
    color: #fff;
    box-shadow: none;
    transform: translateY(-0.8%) scale(0.986);
    transform-origin: top center;
    opacity: 0;
    transition:
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0.5s;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: max(9rem, calc(env(safe-area-inset-top) + 7rem))
      clamp(2.4rem, 6vw, 4.8rem) clamp(3.2rem, 8vw, 6rem);
    z-index: 1002;
  }

  .header-menu__wrapper.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition:
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s linear 0s;
    visibility: visible;
    pointer-events: auto;
  }

  /* ── Logo inside menu ── */
  .header-menu__mobile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.6rem;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.07s,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.07s;
  }

  .header-menu__wrapper.is-open .header-menu__mobile-logo {
    opacity: 1;
    transform: translateY(0);
  }

  .header-menu__mobile-logo a {
    display: block;
    line-height: 0;
  }

  .header-menu__mobile-logo img {
    height: 2.8rem;
    width: auto;
  }

  /* ── List — items centered ── */
  .header-menu__list {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* ── Item stagger — hidden by default, revealed on is-open ── */
  .header-menu__list > .header-menu__item {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    text-align: center;
  }

  .header-menu__wrapper.is-open .header-menu__list > .header-menu__item {
    opacity: 1;
    transform: translateY(0);
  }

  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(1) {
    transition-delay: 0.1s;
  }
  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(2) {
    transition-delay: 0.16s;
  }
  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(3) {
    transition-delay: 0.22s;
  }
  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(4) {
    transition-delay: 0.28s;
  }
  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(5) {
    transition-delay: 0.34s;
  }
  .header-menu__wrapper.is-open
    .header-menu__list
    > .header-menu__item:nth-child(6) {
    transition-delay: 0.4s;
  }

  /* ── Individual items — no divider lines ── */
  .header-menu__item {
    width: 100%;
    border-bottom: none;
    border-top: none;
  }

  .header-menu__item:first-child {
    border-top: none;
  }

  /* Items centered: text + chevron together in the middle */
  .header-menu__item-content {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0;
  }

  /* Override base flex:1 for ALL depths so chevron stays adjacent everywhere */
  .header-menu__item-content > .header-menu__link,
  .header-menu__item-content > .header-menu__dropdown-link {
    flex: 0 0 auto;
  }

  /* ── Top-level links ── */
  .header-menu__item--depth-0 > .header-menu__item-content > .header-menu__link,
  .header-menu__item--depth-0
    > .header-menu__item-content
    > .header-menu__dropdown-link {
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: none;
    color: #fff !important;
    padding: 1.4rem 0;
    flex: 0 0 auto; /* key: don't grow — chevron stays right next to text */
  }

  .header-menu__link,
  .header-menu__dropdown-link {
    padding: 0.4rem 0;
    color: #fff !important;
    transition: opacity 0.25s ease;
  }

  .header-menu__item-content:hover > .header-menu__link,
  .header-menu__item-content:hover > .header-menu__dropdown-link,
  .header-menu__link:hover,
  .header-menu__dropdown-link:hover {
    opacity: 0.5;
  }

  /* ── Dropdown toggle chevron — small, no focus ring ── */
  .header-menu__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    transition: background 0.25s ease;
    outline: none;
  }

  /* Remove ugly default focus ring */
  .header-menu__dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
  }

  /* Accessible keyboard focus only */
  .header-menu__dropdown-toggle:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.4);
    outline-offset: 3px;
  }

  /* Only apply hover ring on pointer devices — touch taps leave :hover sticky */
  @media (hover: hover) {
    .header-menu__dropdown-toggle:hover {
      background: rgba(255, 255, 255, 0.07);
    }
  }

  .header-menu__dropdown-toggle svg path {
    fill: currentColor !important;
  }

  .header-menu__dropdown-icon {
    width: 1rem;
    height: 0.6rem;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Chevron rotates on open; no background ring */
  .header-menu__item--has-dropdown.is-open
    > .header-menu__item-content
    .header-menu__dropdown-icon {
    transform: rotate(180deg);
  }

  .header-menu__item--has-dropdown.is-open
    > .header-menu__item-content
    .header-menu__dropdown-toggle {
    background: transparent;
  }

  /* ── Dropdown submenu — clean, no borders, centered ── */
  .header-menu__dropdown {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
  }

  .header-menu__item--has-dropdown.is-open > .header-menu__dropdown {
    max-height: 28rem;
    padding: 0.4rem 0 1.6rem;
  }

  /* ── Sub-item stagger — opacity-only fade (no Y transform to avoid clip glitch) ── */
  .header-menu__item--has-dropdown
    > .header-menu__dropdown
    > .header-menu__item {
    opacity: 0;
    transition: opacity 0.22s ease;
  }

  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item {
    opacity: 1;
  }

  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item:nth-child(1) {
    transition-delay: 0.05s;
  }
  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item:nth-child(2) {
    transition-delay: 0.09s;
  }
  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item:nth-child(3) {
    transition-delay: 0.13s;
  }
  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item:nth-child(4) {
    transition-delay: 0.17s;
  }
  .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown
    > .header-menu__item:nth-child(5) {
    transition-delay: 0.21s;
  }

  /* ── Sub-item links — readable contrast ── */
  .header-menu__dropdown-link {
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 0.55rem 0;
    transition:
      opacity 0.2s ease,
      color 0.2s ease;
  }

  .header-menu__dropdown-link:hover,
  .header-menu__dropdown
    .header-menu__item-content:hover
    > .header-menu__dropdown-link {
    color: #fff !important;
    opacity: 1;
  }

  .header-menu__dropdown .header-menu__item {
    color: rgba(255, 255, 255, 0.88);
    border-bottom: none;
    border-top: none;
    text-align: center;
  }

  .header-menu__dropdown .header-menu__item:first-child {
    border-top: none;
  }

  .header-menu__dropdown .header-menu__item-content {
    color: rgba(255, 255, 255, 0.88);
    justify-content: center;
    gap: 0.3rem;
    padding: 0;
  }

  .header-menu__dropdown .header-menu__item-content:hover {
    background: transparent;
  }

  .header-menu__dropdown .header-menu__dropdown-toggle {
    width: 2.8rem;
    height: 2.8rem;
  }

  /* ── Depth-1 items that are themselves parents — keep them minimal ── */
  .header-menu__item--depth-1.header-menu__item--has-dropdown:not(
      :first-child
    ) {
    margin-top: 0.9rem;
  }

  .header-menu__item--depth-1.header-menu__item--has-dropdown
    > .header-menu__item-content {
    background: transparent;
    border-radius: 0;
    padding: 0.35rem 0 0.45rem;
    width: auto;
    margin: 0 auto;
    gap: 0.2rem;
  }

  .header-menu__item--depth-1.header-menu__item--has-dropdown
    > .header-menu__item-content
    > .header-menu__dropdown-link {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .header-menu__item--depth-1.header-menu__item--has-dropdown
    > .header-menu__item-content
    > .header-menu__dropdown-toggle {
    opacity: 0.68;
  }

  .header-menu__item--depth-1.header-menu__item--has-dropdown.is-open
    > .header-menu__item-content {
    border-bottom-color: rgba(255, 255, 255, 0.3);
  }

  /* Nested dropdowns (depth 2+) */
  .header-menu__dropdown .header-menu__dropdown {
    left: 0;
    transform: none;
    margin-left: 0;
    border-left: none;
  }

  .header-menu__dropdown
    .header-menu__item--has-dropdown.is-open
    > .header-menu__dropdown {
    transform: none;
  }

  .header-menu__dropdown .header-menu__dropdown-link {
    font-size: 1.45rem;
    color: rgba(255, 255, 255, 0.75) !important;
    padding-left: 0;
  }

  .header-menu__dropdown .header-menu__dropdown-link:hover {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* ── Hold the header's flex space when toggle goes fixed ── */
  .header-menu {
    min-width: 4.8rem;
  }

  /* ── Close (×) button — fixed position, subtle hover ── */
  .header-menu__toggle[aria-expanded="true"] {
    position: fixed;
    top: max(2rem, calc(env(safe-area-inset-top) + 0.8rem));
    right: max(2rem, calc(env(safe-area-inset-right) + 0.8rem));
    left: auto;
    color: #fff;
    border: none;
    background: transparent;
    border-radius: 50%;
    width: 4.8rem;
    height: 4.8rem;
    z-index: 1003;
    outline: none;
    transition: background 0.25s ease;
  }

  .header-menu__toggle[aria-expanded="true"]:hover {
    background: rgba(255, 255, 255, 0.09);
  }

  .header-menu__toggle[aria-expanded="true"]:focus {
    outline: none;
  }

  .header-menu__toggle[aria-expanded="true"]:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
  }
}