/*
Theme Name:   Morattibali
Theme URI:    https://www.morattibali.com/
Description:  Child theme Astra untuk desain Moratti Bali 14 bahasa. Front page dirender dari template tema; blog dan area mitra mengikuti bahasa visual yang sama. Harga IDR dihitung otomatis oleh plugin Moratti Multi-Currency Price.
Author:       Bali Web Design
Author URI:   https://www.morattibali.com/
Template:     astra
Version:      0.1.0
License:      GPL-2.0-or-later
Text Domain:  morattibali
*/

/*
  Gaya desain utama ada di assets/site.css (kiriman klien, jangan diedit manual —
  akan tertimpa saat paket baru di-bake ulang lewat build/bake.php).
  File ini hanya untuk override milik tema.
*/

/* ------------------------------------------------------------------
   Pengalih bahasa

   build/bake.php memindahkan seluruh elemen .language-strip ke dalam
   <header>, tepat sebelum tombol CTA. Penempatan visualnya diatur di sini
   per breakpoint:

     >= 1151px  sebaris di dalam header, di kiri CTA
     761-1150px kembali jadi pita full-bleed di baris pertama header
     <= 760px   idem, dengan picker full-width (desain mobile klien)

   Alasan tidak dipasang sebaris di semua lebar: CSS klien sendiri sudah
   menurunkan nav ke baris kedua di 761-1150px untuk seluruh bahasa selain
   Inggris (html:not([lang="en"]) .header{flex-wrap:wrap}), jadi di rentang
   itu header memang sudah kehabisan ruang.

   Full-bleed di dalam header memakai margin negatif. Margin persen dihitung
   terhadap content box header, sedangkan padding-nya terhadap lebar header,
   jadi nilainya p / (1 - 2p/100): 4,3% -> 4,7046% dan 5% -> 5,5556%.
   ------------------------------------------------------------------ */

/* Logo kiri, nav mengisi tengah, lalu [bahasa][CTA] mengelompok di kanan.
   Harus anak langsung — nav.language-options ada di dalam .language-strip
   dan tidak boleh ikut ter-flex. */
.mb-design .header > nav {
  flex: 1;
  justify-content: center;
}

@media (min-width: 1151px) {
  .mb-design .header .language-strip {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    justify-content: flex-end;
  }

  .mb-design .header .language-strip .language-picker {
    width: auto;
  }
}

@media (max-width: 1150px) {
  .mb-design .header {
    flex-wrap: wrap;
    height: auto;
    padding-top: 0;
    padding-bottom: 14px;
  }

  /*
   * Full-bleed: lebar diserahkan ke flex, JANGAN pakai width:100%.
   *
   * Dengan width:100% lebar box sudah ditetapkan sebesar content box header,
   * sehingga margin negatif hanya MENGGESER box ke kiri alih-alih
   * melebarkannya — hasilnya mepet di kiri dan menyisakan celah di kanan.
   *
   * Dengan flex-basis 100% + flex-grow dan width:auto, margin negatif ikut
   * diperhitungkan sebagai ruang kosong yang lalu diisi oleh flex-grow,
   * sehingga box persis selebar header termasuk gutter-nya.
   */
  .mb-design .header .language-strip {
    order: -1;
    flex: 1 0 100%;
    width: auto;
    margin-inline: -4.7046%;
  }
}

@media (min-width: 761px) and (max-width: 1150px) {
  /* Sejajarkan pita dengan gutter header, bukan dengan kotak 620px di tengah. */
  .mb-design .header .language-strip {
    justify-content: flex-end;
    padding-left: 4.3%;
    padding-right: 4.3%;
  }

  .mb-design .header .language-strip .language-picker {
    width: auto;
  }
}

@media (max-width: 760px) {
  .mb-design .header .language-strip {
    margin-inline: -5.5556%;
  }
}

/* ------------------------------------------------------------------
   Dropdown bahasa (desktop/tablet)

   Desain klien memaksa 7 kolom di panel 620px -> lebar sel 80,6px,
   sementara isi terpanjang ("Indonesia": bendera + teks 1rem + padding 13px)
   butuh ~121px, sehingga bendera dan teks keluar dari kotaknya.

   Panel dilebarkan ke 700px dan jumlah kolom dibiarkan mengikuti kebutuhan
   isi lewat auto-fit, sehingga jadi 5 kolom x 131px. Label terpanjang
   ("Indonesia") butuh ~116px, jadi masih ada ~15px kelonggaran — cukup aman
   terhadap selisih metrik font. Ellipsis dipasang sebagai jaring pengaman
   kalau suatu saat ada label yang lebih panjang lagi.

   Breakpoint <= 760px sengaja tidak disentuh — di sana klien memakai
   tata letak dua kolom full-width yang sudah pas.
   ------------------------------------------------------------------ */
@media (min-width: 761px) {
  .mb-design .header .language-strip nav.language-options {
    width: min(700px, calc(100vw - 24px));
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 6px;
  }

  .mb-design .header .language-strip .language-option {
    min-width: 0;
    gap: 8px;
    padding: 0 10px;
    font-size: .9rem;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
  }

  .mb-design .header .language-strip .language-option > span:not(.flag) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mb-design .header .language-strip .language-option .flag {
    flex: none;
  }
}

/* ------------------------------------------------------------------
   Kontras hover pada opsi bahasa

   CSS klien mengganti latar saat hover (.language-options a:hover{
   background:#1b4c6d}) tapi membiarkan warna teks tetap #283a4c.
   Teks gelap di atas latar gelap itu hanya ~1,3:1 — jauh di bawah
   ambang WCAG AA 4,5:1 dan praktis tidak terbaca.

   Disamakan dengan state terpilih (#f8eac9), yang memberi ~7:1.
   Border ikut digelapkan supaya tidak ada cincin terang mengelilingi
   chip gelap.
   ------------------------------------------------------------------ */
.mb-design .header .language-strip .language-option:hover,
.mb-design .header .language-strip .language-option:focus-visible {
  background: #1b4c6d;
  border-color: #1b4c6d;
  color: #f8eac9;
}

/* ------------------------------------------------------------------
   Lebar halaman di layar besar

   CSS klien membatasi seluruh halaman di >= 1600px:
     @media(min-width:1600px){ body{max-width:1800px;margin:auto} }

   Karena cap dipasang di <body>, pita full-bleed (strip 01-04, hero,
   footer) ikut terpotong dan berhenti sebelum tepi layar. Di 1920px
   sisanya hanya ~60px per sisi — terlalu sempit untuk terbaca sebagai
   bingkai yang disengaja, jadi malah terlihat seperti cacat. Di bawah
   1600px halaman full-bleed, sehingga perilakunya tidak konsisten
   antar resolusi.

   Cap dilepas. Aman karena panjang baris teks sudah dibatasi masing-
   masing (.lead & .section-intro p = 390px, .price-note & .guide-note
   = 860px), dan seluruh padding memakai persen sehingga ikut menskala.
   Tiga aturan lain di blok 1600px (tinggi hero & film) tetap berlaku.
   ------------------------------------------------------------------ */
@media (min-width: 1600px) {
  body.mb-design {
    max-width: none;
    margin-inline: 0;
  }
}

/* ------------------------------------------------------------------
   Menu burger (mobile)

   Desain klien menyembunyikan nav utama di <= 760px (`nav{display:none}`)
   tanpa menyediakan penggantinya, sehingga kelima tautan seksi tidak bisa
   dijangkau sama sekali dari ponsel. Tombol burger ditambahkan di kanan CTA
   dan membuka nav sebagai daftar di bawah header.

   Markup tombol disisipkan build/bake.php agar ikut di 14 bahasa dan tidak
   hilang saat paket klien di-bake ulang.
   ------------------------------------------------------------------ */
.mb-design .mb-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  flex: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}

.mb-design .mb-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.mb-design .mb-menu-toggle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Tiga garis berubah jadi tanda silang saat terbuka. */
.mb-design .mb-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mb-design .mb-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mb-design .mb-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .mb-design .mb-menu-toggle { display: flex; }

  /* Lebih spesifik daripada `nav{display:none}` milik desain. */
  .mb-design .header.is-nav-open > nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 3;
    flex: 1 0 100%;
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .mb-design .header.is-nav-open > nav a {
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .mb-design .header.is-nav-open > nav a:last-child { border-bottom: 0; }
}