/* Menu offcanvas (mobile) Tour Travel 1 — pil menu DESKTOP tidak boleh sampai
 * ke sini. (ARA-135)
 *
 * ## Sebabnya, terukur
 *
 * Satu `<nav class="tp-mobile-menu-active">` melayani dua tampilan: ia menu
 * desktop di dalam `.tp-main-menu`, dan `main.js` MENYALIN isinya ke
 * `.tp-offcanvas-menu > nav` untuk layar kecil. Salinan itu membawa serta
 * kelas-kelasnya, termasuk `has-dropdown` dan `active`.
 *
 * Di `main.css` ada aturan pil untuk butir menu aktif:
 *
 *     li.has-dropdown.active { border-radius: 9999px; background-color: ...;
 *                              box-shadow: ...; padding: 8px 32px 8px 16px; }
 *     ^ main.css:2894 — selektornya TANPA induk apa pun
 *
 * Karena tidak dibatasi `.tp-main-menu`, ia ikut mengenai salinan di offcanvas.
 * Gejalanya: di halaman yang butir menu aktifnya PUNYA submenu (mis.
 * `/kapal-phinisi-labuan-bajo/superior/` → "Komodo Liveaboard"), butir itu
 * muncul sebagai pil bercahaya yang melebar keluar dari daftar. Di beranda
 * gejalanya tidak ada — bukan karena halamannya berbeda, melainkan karena butir
 * aktifnya ("Home") tidak punya submenu, jadi tidak ber-`has-dropdown`.
 *
 * ## Kenapa diperbaiki DI SINI, bukan dengan membatasi selektornya di main.css
 *
 * `main.css` adalah salinan tema dari sumbernya, dan pil itu sedang dikerjakan
 * pemilik repo — perubahannya belum di-commit saat berkas ini ditulis
 * (22 Sep 2026). Menyunting baris yang sedang dipegang orang lain adalah cara
 * termurah menimpa pekerjaannya.
 *
 * Berkas ini dimuat SESUDAH `main.css`, dan selektornya lebih spesifik, jadi ia
 * menang tanpa `!important` dan tetap menang apa pun yang nanti diputuskan
 * untuk tampilan pil desktopnya. Yang dinyatakan di sini bukan "pil itu salah",
 * melainkan "pil desktop berhenti di tepi offcanvas".
 */

.tp-offcanvas-menu li.has-dropdown.active,
.tp-offcanvas-menu li.has-dropdown.active:hover {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
}

/* `margin-right` di sumbernya memakai `!important`, jadi ia tidak bisa
 * dikalahkan oleh spesifisitas saja. Nilainya `0` dan daftar offcanvas memang
 * selebar penuh, jadi tidak ada yang perlu dikembalikan — baris ini ada supaya
 * pembaca berikutnya tidak mengira ia terlewat. */

/* Aturan pil di atas TIDAK bisa diganti oleh perbaikan di JavaScript saja.
 * `main.js` MENAMBAHKAN `active` kembali setiap kali pengunjung mengetuk panah
 * untuk membuka submenu -- jadi tanpa aturan di atas, pilnya muncul lagi pada
 * ketukan pertama, di halaman mana pun. */

/* Tanda "halaman ini" di offcanvas. Dipindahkan ke kelasnya sendiri oleh
 * `tt1-header-dropdown.js` untuk butir yang punya submenu, karena di sana
 * `active` sudah dipakai `main.js` dengan arti lain ("submenu terbuka").
 * Alasan lengkapnya ada di berkas JS itu. (ARA-135) */
.tp-offcanvas-menu li.tt1-menu-kini > a {
  color: var(--tp-theme-1);
}

/* Butir aktif yang sedang terbuka tetap berwarna tema, seperti butir aktif
 * lain di offcanvas -- `color: inherit` di atas melucuti warna dari `li`-nya,
 * bukan dari tautannya, tapi ditulis eksplisit supaya tidak bergantung pada
 * urutan dua aturan di berkas yang berbeda. */
.tp-offcanvas-menu li.has-dropdown.active > a {
  color: var(--tp-theme-1);
}

/* ------------------------------------------------------------------
 * Pemilih bahasa di drawer (ARA-160)
 *
 * Tombol bahasa di header memakai `d-none d-xl-block`, jadi di lebar ponsel
 * ia tidak pernah ada. Sebelum blok ini, pengunjung ponsel tidak punya satu
 * pun cara mengganti bahasa dari navigasi -- satu-satunya jalan adalah
 * mengetik awalan `/en/` atau `/id/` sendiri di bilah alamat.
 *
 * Bentuknya pil, bukan dropdown. Dropdown di dalam drawer butuh JS pembuka
 * dan bertabrakan dengan handler `main.js` yang sudah memegang
 * `.tp-header-login ul`; daftar mendatar tidak butuh apa pun dan tetap
 * terjangkau ibu jari.
 * ------------------------------------------------------------------ */
.tp-offcanvas-lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-offcanvas-lang-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  /* 44px = ambang sasaran sentuh yang nyaman; jangan diperkecil. */
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tp-offcanvas-lang-item:hover,
.tp-offcanvas-lang-item:focus-visible {
  border-color: var(--tp-theme-1);
  color: var(--tp-theme-1);
}

.tp-offcanvas-lang-item.is-active {
  background-color: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
  color: #fff;
}