/* ============================================================
   Mega nav dropdown desktop. Hasil ukur coterie.com 24 Agustus 2026.
   Pasangan dari MegaNav.tsx. Import SETELAH site.css, urutan itu
   yang membuat override warna header di bagian 8 menang.

   URUTAN MUAT, JANGAN DIUBAH: berkas ini wajib jadi <link> paling
   akhir di antara berkas chrome. Bagian 8 menyetir selektor milik
   blok header, .site-header:has(.mega-nav) .site-header__content,
   dan spesifisitasnya cuma SERI dengan .site-header--static, bukan
   menang. Yang memenangkannya murni urutan sumber. Menggeser link
   berkas ini ke atas akan mematikan override warna header tanpa
   pesan error apa pun.

   Semua angka px di komentar diukur di viewport 1280 dengan root
   font-size 8.886px. Rumus root font ada di tokens.css bagian 1.
   ============================================================ */

:root {
  /* Easing keluar panel. Belum ada di tokens.css, jadi didefinisikan
     di sini dengan prefix sendiri. Nilainya sama persis dengan easing
     tutup chevron dan transisi warna header yang sudah dipakai
     site.css, cuma di sana ditulis literal. */
  /* Catatan pindahan: aturan proyek menaruh semua token di
     tokens.css. Idealnya deklarasi ini pindah ke sana nanti dan blok
     :root di berkas ini dihapus. Nilainya jangan ikut diubah saat
     dipindah. */
  --mega-nav-ease-out: cubic-bezier(0.66, 0, 0.34, 1);
}

/* === 1. Akar dan gerbang tampil =========
   Panel hidup di dalam <header class="site-header">. SiteHeader
   merender header dua kali, statis dan fixed, dan cuma satu yang
   is-shown. Instance di header yang tidak tampil dimatikan total. Itu
   yang mencegah backdrop dobel dan mencegah fokus keyboard mendarat di
   panel yang tidak kelihatan. */
.site-header:not(.is-shown) .mega-nav {
  display: none;
}

/* Panel HANYA desktop. Di bawah 1024 yang dipakai drawer mobile. */
@media (max-width: 1023.98px) {
  .mega-nav,
  .mega-nav__hover-field {
    display: none;
  }
}

/* Akar tidak punya tinggi sendiri, semua anaknya absolute atau fixed,
   jadi dia tidak pernah menghalangi klik. */
.mega-nav {
  position: absolute;
  top: var(--header-height); /* 86.9 */
  left: 0;
  right: 0;
  width: 100%;
}
/* Header fixed tidak membawa banner, jadi panelnya naik 3.2rem.
   58.5 versus 86.9. */
.site-header--fixed .mega-nav {
  top: var(--header-height-fixed);
}

/* === 2. Backdrop =========
   z-index -1 menaruhnya di belakang .site-header__content, tapi dia
   tetap di dalam stacking context .site-header (z-index 10), jadi
   tetap menutupi seluruh halaman di bawah header. Persis "di belakang
   header". */
.mega-nav__backdrop {
  position: fixed;
  inset: 0;
  height: 100svh;
  z-index: -1;
  background-color: rgba(20, 20, 20, 0);
  visibility: hidden;
  transition:
    background-color 0.3s var(--mega-nav-ease-out),
    visibility 0.3s var(--mega-nav-ease-out);
}
.mega-nav[data-open='true'] .mega-nav__backdrop {
  background-color: var(--overlay); /* rgba(20, 20, 20, 0.2) */
  visibility: visible;
}

/* === 3. Panel =========
   Tinggi ikut isi, jadi tiap menu punya tinggi sendiri. Terukur:
   Wipes 519.3, Skincare 604.1, Bundles 310.3, Gifting 519.3.
   Wipes dan Gifting kembar karena tingginya ditentukan blok promo,
   bukan navnya. Skincare lebih tinggi karena navnya dua grup
   bertumpuk. Bundles paling pendek karena tanpa promo dan cuma satu
   baris item.

   Tanpa radius, tanpa shadow. Terukur.

   Masuk cuma opacity. Keluar opacity plus visibility. Dua panel
   berbeda menjalankan dua transisi ini bersamaan, dan itulah
   crossfade-nya. */
.mega-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: fit-content;
  max-height: calc(100svh * 0.9);
  overflow-y: clip;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--mega-nav-ease-out),
    visibility 0.3s var(--mega-nav-ease-out);
}
.mega-nav__panel[data-active='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease-in-overshoot);
}

/* Di bawah 1680 isi panel memakai lebar layar penuh. Di atasnya
   dikunci selebar --grid-width dan di-center, sama seperti section
   lain di halaman. */
.mega-nav__inner {
  display: flex;
}
@media (min-width: 1680px) {
  .mega-nav__inner {
    width: var(--grid-width);
    max-width: var(--max-width);
    margin: 0 auto;
  }
}

/* === 4. Kolom kiri, daftar produk =========
   flex 1, jadi lebarnya sisa. Terukur 869.7 saat blok promo ada
   (1280 dikurangi 411.3). Saat promo tidak ada, Bundles, dia
   memakai lebar penuh dengan sendirinya. */
.mega-nav__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rem; /* 35.5, jarak antar grup */
  padding: 4rem; /* 35.5 */
  overflow-y: auto;
}

.mega-nav__group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4.8rem; /* 42.6 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Varian tanpa blok promo. Item tidak lagi dipaku ke kolom grid,
   melainkan dikumpulkan di tengah. */
.mega-nav__group--full {
  display: flex;
  justify-content: center;
  gap: 8rem; /* 71.1 */
}

.mega-nav__cell {
  display: flex;
  flex-direction: column;
  gap: 2.4rem; /* 21.3 */
}

/* Label grup atau eyebrow item. 15.3 lh 21.42 w400 lewat .lg-t-17.
   Elemennya tetap dirender walau kosong, dan gap 2.4rem di atas tetap
   berlaku. Itu yang mencocokkan tinggi Bundles ke 310.3. */
.mega-nav__label {
  color: var(--black7);
  font-weight: 400;
}

.mega-nav__item {
  display: flex;
  flex-direction: column;
  gap: 1.3rem; /* 11.6 */
  color: inherit;
  text-decoration: none;
}

/* 17.5rem = 155.5 persegi @1280. Sengaja rem tetap, bukan 100%,
   supaya varian fullWidth yang flex tetap dapat ukuran yang sama
   dengan varian grid. */
.mega-nav__thumb {
  display: block;
  width: 17.5rem;
  height: 17.5rem;
  border-radius: var(--radius-card); /* 0.8rem */
  overflow: clip;
}

.mega-nav__copy {
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* 7.1 */
}
/* Deskripsi 12.6 lewat .lg-t-14, judul clamp(21.6, 2.4rem, 24) lh
   23.76 ls -0.01em lewat .lg-t-24. Keduanya sudah ada di tokens.css. */
.mega-nav__desc {
  color: var(--black7);
}
.mega-nav__name {
  color: var(--black);
}
/* ponytail: posisi badge di panel tidak diukur. Nilai gayanya disalin
   dari .site-header__new yang sudah terukur di site.css. */
.mega-nav__new {
  margin-left: 0.8rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue);
}

/* === 5. Kolom kanan, blok promo =========
   Lebar total 411.3, padding kiri 4rem (35.5), jadi isinya 375.8.
   46.3rem x 8.886 = 411.4.
   Tinggi 519.3 = 35.5 padding atas + 375.8 gambar + 32 gap
   + 23.76 heading + 32 gap + 21.42 CTA = 520.5. Selisih 1.2px
   masuk toleransi ukur. */
.mega-nav__promo {
  display: flex;
  flex-direction: column;
  gap: 3.6rem; /* 32.0 */
  width: 46.3rem;
  padding: 4rem 0 0 4rem;
}
.mega-nav__promo-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: clip;
}
.mega-nav__promo-heading {
  color: var(--black);
}
/* CTA 15.3 w600 bergaris bawah, lewat .lg-t-17. */
.mega-nav__promo-cta {
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* === 6. Safe area hover intent =========
   Tiga elemen di dalam .site-header__link-wrap. Tersembunyi sampai
   menunya aktif.

   Kotak fieldnya sendiri pointer-events none dan cuma jadi jangkar.
   inset -1.5rem plus height 86.9 membuatnya menutupi linknya sendiri,
   dan link top-level harus tetap bisa diklik.

   Dua segitiga anaknya yang benar benar menangkap kursor. Mereka
   ditempel di BAWAH field, bukan di atas, supaya tidak menutupi link
   tetangga. Kalau menutupi, pindah menu lewat hover jadi mustahil.
   Bentuk segitiga dibuat dari border transparan, terukur 130 x 60.5:
   header-height 86.9 dikali 1.5 = 130.4 dan dikali 0.7 = 60.8. */
.mega-nav__hover-field {
  position: absolute;
  inset: -1.5rem 0 0; /* top -13.3 */
  height: var(--header-height); /* 86.9 */
  visibility: hidden;
  pointer-events: none;
}
.mega-nav__hover-field[data-active='true'] {
  visibility: visible;
}

.mega-nav__hover-field-left,
.mega-nav__hover-field-right {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  pointer-events: auto;
}
/* Puncak segitiga di kanan atas, melebar turun ke kiri. */
.mega-nav__hover-field-left {
  right: 100%;
  border-width: 0 0 calc(var(--header-height) * 0.7) calc(var(--header-height) * 1.5);
}
/* Cermin: puncak di kiri atas, melebar turun ke kanan. */
.mega-nav__hover-field-right {
  left: 100%;
  border-width: 0 calc(var(--header-height) * 1.5) calc(var(--header-height) * 0.7) 0;
}

/* === 7. Chevron =========
   site.css sudah memutar chevron saat :hover. Yang ini mengikat
   rotasi ke menu yang benar benar AKTIF, jadi rotasinya juga jalan
   saat panel dibuka dari keyboard. Penanda aktifnya menumpang
   data-active milik hover field, tanpa atribut baru di SiteHeader.
   Spesifisitas 0,3,1 menang atas .site-header__link-wrap:hover
   (0,2,0). */
.site-header__link-wrap:has(.mega-nav__hover-field[data-active='true']) .site-header__chevron {
  transform: rotate(180deg) translateZ(0);
  transition: transform 0.2s var(--ease-in-overshoot);
}

/* === 8. Warna header saat submenu aktif =========
   Token warna hidup di .site-header__content, bukan di <header>.
   Dipaksa dari sini lewat :has() supaya site.css tidak perlu
   disentuh.

   Tutup 0.25s. Spesifisitas 0,3,0, seri dengan
   .site-header--static.is-transparent .site-header__content, dan
   menang karena file ini diimpor belakangan. Nilainya memang sama
   dengan yang di sana, ini cuma memperluasnya ke header yang tidak
   transparan. */
.site-header:has(.mega-nav) .site-header__content {
  transition:
    color 0.25s var(--mega-nav-ease-out),
    background-color 0.25s var(--mega-nav-ease-out);
}
/* Buka 0.2s. Skema dipaksa terang. Spesifisitas 0,4,0, menang atas
   varian transparan. */
.site-header:has(.mega-nav[data-open='true']) .site-header__content {
  --color: var(--black);
  --color-bg: var(--white);
  --cta-hover-bg: var(--blue600);
  --cta-hover-color: var(--white);
  transition:
    color 0.2s var(--ease-in-overshoot),
    background-color 0.2s var(--ease-in-overshoot);
}

/* === 9. Reduced motion =========
   Durasi dipangkas, bukan transisinya dibuang. visibility tetap perlu
   berpindah lewat transition supaya panel yang tertutup benar benar
   hilang dari urutan tab. */
@media (prefers-reduced-motion: reduce) {
  .mega-nav__panel,
  .mega-nav__backdrop,
  .site-header__chevron,
  .site-header__content {
    transition-duration: 0.01ms !important;
  }
}