/* ==========================================================================
   Jlaude Schedule — BASE
   Design tokens, scoped reset, layout wrapper, keyframes.
   Warna dan font mengikuti tema (Appearance > Editor > Styles), termasuk mode
   gelap. Nilai setelah koma dipakai bila plugin dipasang di tema lain.
   ========================================================================== */

.jj {
  /* Warna dasar: diambil dari palet tema */
  --jj-page: var(--wp--preset--color--base, #faf7f2);
  --jj-panel: var(--wp--preset--color--accent-5, #f1ece3);
  /* Aksen: Sage, senada dengan beranda. Teks gelap di atasnya terbaca di mode terang dan gelap. */
  --jj-accent: var(--wp--preset--color--accent-1, #8fa58b);
  --jj-ink-base: var(--wp--preset--color--contrast, #1f2a24);
  --jj-ink: var(--jj-ink-base);
  --jj-paper: var(--jj-page);

  /* Teks di atas warna aksen: tetap gelap di mode terang maupun gelap.
     Bila warna aksen diganti menjadi warna tua, balik kedua nilai ini. */
  --jj-on-accent: #1f2a24;
  --jj-on-accent-paper: #faf7f2;

  /* Bayangan dan tirai di belakang detail tiket: selalu gelap */
  --jj-shade: #000;

  /* Tipografi */
  --jj-serif: var(--wp--preset--font-family--fraunces, Georgia, serif);
  --jj-sans: var(--wp--preset--font-family--dm-sans, system-ui, -apple-system, sans-serif);
  --jj-mono: var(--jj-sans);

  /* Motion & misc */
  --jj-ease: cubic-bezier(.2, .7, .2, 1);
  --jj-photo-fallback: repeating-linear-gradient(135deg, color-mix(in srgb, var(--jj-ink-base) 14%, var(--jj-panel)) 0 6px, color-mix(in srgb, var(--jj-ink-base) 9%, var(--jj-panel)) 6px 12px);

  background: var(--jj-page);
  color: var(--jj-text);
  font-family: var(--jj-sans);
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Permukaan berwarna aksen: teks memakai --jj-on-accent */
.jj-ticket__foot,
.jj-ticket--special .jj-ticket__half,
.jj-chip.is-active,
.jj-witem--special,
.jj-mcell__sp,
.jj-mspec__date,
.jj-mini .is-special,
.jj-ymonth__foot,
.jj-modal__foot,
.jj-modal--special .jj-modal__l,
.jj-modal--special .jj-modal__r {
  --jj-ink: var(--jj-on-accent);
  --jj-paper: var(--jj-on-accent-paper);
  color: var(--jj-ink);
}

/* Permukaan panel di dalam tiket spesial: kembali ke warna tema */
.jj-ticket--special .jj-ticket__foot,
.jj-modal--special .jj-modal__foot {
  --jj-ink: var(--jj-ink-base);
  --jj-paper: var(--jj-page);
  color: var(--jj-ink);
}

/* Warna turunan: dihitung ulang dari --jj-ink di setiap permukaan di atas */
.jj,
.jj-ticket__foot,
.jj-ticket--special .jj-ticket__half,
.jj-chip.is-active,
.jj-witem--special,
.jj-mcell__sp,
.jj-mspec__date,
.jj-mini .is-special,
.jj-ymonth__foot,
.jj-modal__foot,
.jj-modal--special .jj-modal__l,
.jj-modal--special .jj-modal__r {
  --jj-text: var(--jj-ink);
  --jj-soft: color-mix(in srgb, var(--jj-ink) 84%, transparent);
  --jj-muted: color-mix(in srgb, var(--jj-ink) 68%, transparent);
  --jj-faint: color-mix(in srgb, var(--jj-ink) 35%, transparent);
  --jj-line: color-mix(in srgb, var(--jj-ink) 16%, transparent);
  --jj-empty: color-mix(in srgb, var(--jj-ink) 20%, transparent);
}

/* Reset ringan, hanya di dalam .jj agar tidak bentrok dengan tema WordPress */
.jj *, .jj *::before, .jj *::after { box-sizing: border-box; }
.jj :where(h1, h2, h3, p) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.jj :where(button) {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit;
  font: inherit; line-height: inherit; letter-spacing: inherit;
  text-transform: none; text-align: inherit; cursor: pointer;
}
.jj :where(button):disabled { cursor: default; }
.jj :where(button, [tabindex]):focus-visible { outline: 2px solid var(--jj-accent); outline-offset: 2px; }

/* Tombol yang berisi tata letak (hari di strip minggu, sesi di tampilan Minggu, sel Bulan,
   kartu bulan di tampilan Tahun, baris edisi spesial). Safari tidak melebarkan isi sebuah
   <button> selebar tombolnya: tiap bagian menyusut selebar teksnya, sehingga isi yang
   seharusnya rata kiri-kanan jadi berdempetan. Lebar isi karena itu ditulis terang-terangan,
   tidak diserahkan ke perilaku bawaan browser. */
.jj-day > *, .jj-witem > *, .jj-mcell > *, .jj-ymonth > *, .jj-mspec > * { width: 100%; min-width: 0; }
/* Kaki kartu bulan melebar sampai tepi kartu, melewati padding 14px di kiri dan kanan. */
.jj-ymonth > .jj-ymonth__foot { width: calc(100% + 28px); }

/* Layout — responsif terhadap lebar konten WP, bukan layar: app.js memasang kelas jj-w-1023, jj-w-760,
   jj-w-639, jj-w-389 di .jj__wrap bila lebarnya sebesar itu atau kurang, dan aturannya ditulis
   :where(.jj-w-N) .x (bobot sama dengan container query dulu). Bukan container-type: di Safari elemen
   di dalamnya kehilangan gaya :hover sesudah sekejap (tiket tidak terangkat; jebakan 44). */
.jj__inner { max-width: 1200px; margin: 0 auto; padding: 44px 36px 64px; }

/* Foto dengan fallback bergaris bila gambar gagal dimuat */
.jj-photo {
  background-color: color-mix(in srgb, var(--jj-ink-base) 12%, var(--jj-panel));
  background-image: var(--jj-photo-fallback);
  background-size: cover;
  background-position: center;
}

.jj-brand { font: 600 14px var(--jj-serif); }
.jj-small { font: 500 11px var(--jj-sans); }
.jj-empty { padding: 60px 0; text-align: center; color: var(--jj-muted); }

html.jj-lock { overflow: hidden; }

/* Isi awal dari server (sebelum JavaScript berjalan / untuk mesin pencari) */
/* Isi statis (untuk mesin pencari dan pengunjung tanpa JavaScript) tidak ditampilkan sekilas
   sebelum jadwal siap: tetap memakan tempat agar footer tidak melompat, dan muncul sendiri
   setelah 4 detik bila skrip jadwal gagal berjalan. */
.jj-js [data-jlaude-jadwal]:not([data-jj-ready]) > .jj-static { visibility: hidden; animation: jj-static-fallback 0s linear 4s forwards; }
@keyframes jj-static-fallback { to { visibility: visible; } }
.jj-static { max-width: 760px; margin: 0 auto; padding: 44px 24px 64px; font-size: 15px; line-height: 1.55; }
.jj-static__title { font: 600 56px/.95 var(--jj-serif); letter-spacing: -.035em; margin-bottom: 8px; }
.jj-static h2 { margin: 28px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--jj-line); font: 600 22px var(--jj-serif); }
.jj-static ul { margin: 0; padding: 0; list-style: none; }
.jj-static li { padding: 8px 0; color: var(--jj-soft); }
.jj-static strong { color: var(--jj-ink); font-weight: 600; }

@keyframes jj-in   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jj-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jj-book-l { from { opacity: 0; transform: rotateY(32deg) translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes jj-book-r { from { opacity: 0; transform: rotateY(-32deg) translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes jj-sheet { from { transform: translateY(100%); } to { transform: none; } }

/* (dulu @container jj (max-width: 1023px); kelas jj-w-1023 dari app.js, jebakan 44) */
:where(.jj-w-1023) .jj__inner { padding: 32px 24px 56px; }

/* (dulu @container jj (max-width: 639px); kelas jj-w-639 dari app.js, jebakan 44) */
:where(.jj-w-639) .jj__inner { padding: 22px 16px 72px; }


@media (prefers-reduced-motion: reduce) {
  .jj *, .jj *::before, .jj *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important;
  }
}