/* ==========================================================================
   THEME BANJAR — emas, merah, dan krem
   Layer tema terpisah. File ini TIDAK menyentuh style.css / features.css:
   ia hanya menimpa warna di akhir cascade, jadi struktur & layout saai.pro
   tetap utuh dan tema bisa dilepas cukup dengan menghapus satu <link>.

   Palet
     krem     #FFF9F0   latar halaman (warna kain, bukan putih pucat)
     krem-2   #FDF1DE   latar kartu / bagian
     emas     #D4A017   aksen utama
     emas-2   #B8860B   emas gelap (hover, teks di atas krem)
     merah    #8B1E1E   maroon, judul & tombol
     merah-2  #6F1717   maroon gelap (hover)
     tinta    #3A2416   teks utama (coklat tua hangat, bukan hitam)

   Motif: tidak ada. Latar hanya warna krem + gradien emas/merah tipis.
   ========================================================================== */

/* ---------------------------------------------------------- tokens */
:root {
  /* latar */
  --bg: #FFF9F0;
  --surface: #FFFDF9;
  --surface-2: #FDF1DE;
  --surface-sunken: #FBF3E4;

  /* emas */
  --gold: #D4A017;
  --gold-deep: #B8860B;
  --gold-soft: #F6E3B0;
  --gold-glow: rgba(212, 160, 23, 0.28);

  /* merah */
  --maroon: #8B1E1E;
  --maroon-deep: #6F1717;
  --maroon-soft: #F7E1DC;
  --maroon-glow: rgba(139, 30, 30, 0.22);

  /* tinta */
  --ink: #3A2416;
  --ink-2: #573924;
  --ink-3: #6B4C33;
  --line: #E8D6BA;

  /* ---- remap variabel lama ke palet Banjar ---- */
  /* style.css & features.css memakai nama biru; diarahkan ke emas/merah
     supaya seluruh komponen ikut berubah tanpa menyunting filenya. */
  --brand-blue: var(--maroon);
  --brand-blue-dark: var(--maroon);
  --brand-blue-ink: var(--maroon-deep);
  --brand-blue-soft: var(--surface-2);

  --accent-blue: var(--maroon);
  --accent-blue-hover: var(--maroon-deep);
  --accent-blue-soft: var(--gold);
  --accent-blue-glow: var(--maroon-glow);
  --accent-blue-dim: rgba(139, 30, 30, 0.08);
  --accent-blue-border: rgba(139, 30, 30, 0.30);

  --accent-red: var(--maroon);
  --accent-red-hover: var(--maroon-deep);
  --accent-red-glow: var(--maroon-glow);
  --accent-red-dim: rgba(139, 30, 30, 0.08);
  --accent-red-border: rgba(139, 30, 30, 0.30);

  --bg-dark: var(--bg);
  --bg-surface: var(--surface-2);
  --bg-card: rgba(255, 253, 249, 0.92);
  --bg-card-hover: #FFFFFF;

  --border-subtle: rgba(58, 36, 22, 0.12);
  --border-strong: rgba(58, 36, 22, 0.22);
  --glass-bg: rgba(212, 160, 23, 0.05);
  --glass-border: rgba(212, 160, 23, 0.28);

  --text-main: var(--ink);
  --text-muted: var(--ink-3);
  --text-dim: #8A6A4F;
  --text-bright: #2A1A0F;

  --shadow-sm: 0 1px 2px rgba(88, 55, 20, 0.08);
  --shadow-md: 0 6px 24px -12px rgba(88, 55, 20, 0.24);
  --shadow-lg: 0 24px 60px -32px rgba(139, 30, 30, 0.32);
}

/* ---------------------------------------------------------- latar */
html,
body {
  background-color: var(--bg) !important;
  color: var(--text-main);
}

body {
  /* Tanpa motif: latar hanya warna krem dengan dua sapuan gradien emas/merah
     yang sangat halus untuk memberi kedalaman. Tidak ada berkas gambar. */
  background-image:
    radial-gradient(900px 520px at 12% -10%, rgba(212, 160, 23, 0.14), transparent 62%),
    radial-gradient(760px 480px at 92% 6%, rgba(139, 30, 30, 0.07), transparent 64%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Kartu dan panel tetap solid supaya teks di dalamnya tidak bertumpuk gradien. */
.glass-card,
.rsvp-form,
.wish-card,
.subgrid-card,
.event-countdown-card,
.map-card {
  background-color: var(--surface) !important;
}

/* ---------------------------------------------------------- pita header */
/* Garis emas/maroon halus di bawah top bar. */
header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  background-image:
    repeating-linear-gradient(90deg,
      var(--gold) 0 18px,
      transparent 18px 30px,
      var(--maroon) 30px 38px,
      transparent 38px 56px);
  opacity: 0.35;
  pointer-events: none;
}

.nav-min {
  background: rgba(255, 253, 249, 0.94) !important;
  border-color: var(--line) !important;
  box-shadow: 0 6px 20px -10px rgba(88, 55, 20, 0.28) !important;
}

.nav-min-cta {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-deep)) !important;
  color: #fff !important;
}

.nav-min-btn { color: var(--ink-2) !important; }
.nav-min-btn:hover,
.nav-min-cta:hover { background: rgba(212, 160, 23, 0.14) !important; color: var(--maroon) !important; }
.nav-min-btn[aria-pressed="true"] { color: var(--maroon) !important; background: var(--gold-soft) !important; }
.nav-min-icon { color: inherit; }
.nav-min-sep { background: var(--line) !important; }

/* ---------------------------------------------------------- hero */
/* Garis bidik vertikal: emas tipis, bukan biru. */
.hero-bg-grid .grid-line {
  background: linear-gradient(180deg, transparent, rgba(212, 160, 23, 0.30), transparent) !important;
}

/* Wordmark raksasa "AQIQAH" di belakang hero. */
.hero-wordmark-svg text {
  stroke: rgba(139, 30, 30, 0.12) !important;
  fill: rgba(212, 160, 23, 0.10) !important;
}

.hero-script {
  color: var(--maroon) !important;
  font-family: var(--font-serif) !important;
  font-style: italic;
}

/* "Muhammad Keivan" duduk di atas blok maroon (lihat style.css .hero-name
   background: var(--accent-red)), jadi teksnya harus TERANG. Sebelumnya di sini
   diberi warna --ink (coklat tua) yang membuat kontrasnya cuma 1.59:1 —
   nyaris tak terbaca. Putih hangat memberi 9.12:1. */
.hero-name { color: #FFF6E6 !important; }

/* "Harunur Rasyid" (baris kedua) memakai blok maroon keemasan, sedikit lebih
   terang dari baris pertama supaya kedua baris tetap terbaca sebagai dua
   lapis, bukan satu kotak maroon besar. */
.hero-name-sub,
.hero-name .name-highlight,
.hero-name mark {
  background: linear-gradient(135deg, var(--maroon-deep), var(--maroon) 55%, var(--gold-deep)) !important;
  color: #FFF6E6 !important;
}
/* Titik di akhir nama duduk di atas blok maroon: emas tua terbaca jelas,
   emas cerah hanya 3.84:1. */
.accent-blue-dot,
.accent-red-dot { color: var(--gold-soft) !important; }
.pill-dot { color: var(--gold) !important; }

.hero-desc { color: var(--ink-3) !important; }
.hero-desc strong { color: var(--maroon) !important; }

.hero-role-pill {
  background: var(--gold-soft) !important;
  border-color: var(--gold) !important;
  color: var(--maroon-deep) !important;
}

/* ---------------------------------------------------------- tombol */
.btn-blue,
.btn-crimson,
.btn-primary {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-deep)) !important;
  border-color: rgba(139, 30, 30, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(139, 30, 30, 0.22) !important;
}

.btn-blue:hover,
.btn-crimson:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--maroon-deep), #591212) !important;
  box-shadow: 0 14px 32px rgba(139, 30, 30, 0.30) !important;
}

.btn-glass {
  background: rgba(255, 253, 249, 0.9) !important;
  border-color: var(--gold) !important;
  color: var(--maroon) !important;
}

.btn-glass:hover { background: var(--gold-soft) !important; }

/* ---------------------------------------------------------- kartu */
.glass-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 34px -22px rgba(88, 55, 20, 0.30) !important;
}

.highlighted-card {
  border-color: var(--gold) !important;
  box-shadow: 0 18px 46px -26px rgba(139, 30, 30, 0.34) !important;
}

.card-glow-blue {
  background: radial-gradient(closest-side, rgba(212, 160, 23, 0.24), transparent) !important;
}

.quote-box {
  background: var(--surface-2) !important;
  border-left-color: var(--gold) !important;
  color: var(--maroon-deep) !important;
}

/* ---------------------------------------------------------- label & teks kecil */
.section-tag,
.section-eyebrow,
.divider-coord,
.divider-index,
.event-badge,
.countdown-eyebrow,
.principle-num { color: var(--maroon) !important; }

.divider-line {
  background: linear-gradient(90deg, rgba(212, 160, 23, 0.55), transparent) !important;
}

.section-title { color: var(--ink) !important; }
.section-desc,
.section-sub { color: var(--ink-3) !important; }

.grad-text {
  background: linear-gradient(120deg, var(--maroon), var(--gold-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.principle-title { color: var(--ink) !important; }
.principle-desc { color: var(--ink-3) !important; }

.subgrid-title { color: var(--maroon-deep) !important; }

.spec-item::before { background: var(--gold) !important; }

/* ---------------------------------------------------------- chip / tag */
.tech-tag {
  background: var(--gold-soft) !important;
  border-color: rgba(212, 160, 23, 0.55) !important;
  color: var(--maroon-deep) !important;
}

.hud-idx,
.hud-tag {
  color: var(--maroon) !important;
  border-color: rgba(212, 160, 23, 0.55) !important;
}

.hud-tag { background: var(--gold-soft) !important; }

.hud-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}


.hud-card-desc { color: var(--ink-3) !important; }

.hud-arab {
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}

/* ---------------------------------------------------------- countdown */
.countdown-cell,
.cd-cell {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

.cd-num { color: var(--maroon) !important; }
.cd-lbl { color: var(--ink-3) !important; }
.countdown-name { color: var(--ink) !important; }

/* ---------------------------------------------------------- peta */
.map-canvas { background: #F6EAD6 !important; }

.map-pin-dot {
  background: var(--maroon) !important;
  box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.30) !important;
}

.map-pin-text strong { color: var(--ink) !important; }
.map-pin-text span { color: var(--ink-3) !important; }

.map-canvas .leaflet-control-zoom a {
  color: var(--maroon-deep) !important;
  border-color: var(--line) !important;
  background: #FFFDF9 !important;
}

.map-canvas .leaflet-control-zoom a:hover,
.map-canvas .leaflet-control-zoom a:focus-visible {
  background: var(--gold-soft) !important;
  color: var(--maroon-deep) !important;
}

.map-canvas .leaflet-control-attribution { color: var(--ink-3) !important; }
.map-canvas .leaflet-control-attribution a { color: var(--maroon) !important; }

.map-canvas .leaflet-popup-content-wrapper {
  border-color: var(--line) !important;
  background: var(--surface) !important;
}

.map-canvas .leaflet-popup-content { color: var(--ink) !important; }
.map-canvas .leaflet-popup-content strong { color: var(--maroon) !important; }

/* ---------------------------------------------------------- form ucapan */
.rsvp-form {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.rsvp-form input[type="text"],
.rsvp-form textarea {
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.rsvp-form input[type="text"]::placeholder,
.rsvp-form textarea::placeholder { color: #A98B6B !important; }

.rsvp-form input[type="text"]:focus,
.rsvp-form textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.28) !important;
}

.form-field label,
.field-label { color: var(--ink-2) !important; }

.attend-box {
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
  color: var(--ink-3) !important;
}

.attend-option input:checked + .attend-box {
  background: var(--gold-soft) !important;
  border-color: var(--gold) !important;
  color: var(--maroon-deep) !important;
}

.rsvp-submit {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-deep)) !important;
  box-shadow: 0 10px 26px rgba(139, 30, 30, 0.24) !important;
}

.rsvp-submit:hover { box-shadow: 0 14px 32px rgba(139, 30, 30, 0.32) !important; }

.form-note.ok { color: #2F7A3E !important; }
.form-note.err { color: var(--maroon) !important; }

/* ---------------------------------------------------------- dinding ucapan */
.wish-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

.wish-name { color: var(--ink) !important; }
.wish-text { color: var(--ink-2) !important; }
.wish-time { color: var(--text-dim) !important; }
.wish-count { color: var(--text-dim) !important; }

.wish-badge.yes {
  background: rgba(47, 122, 62, 0.12) !important;
  color: #2F7A3E !important;
}

.wish-badge.no {
  background: var(--maroon-soft) !important;
  color: var(--maroon) !important;
}

.wish-empty {
  border-color: var(--line) !important;
  color: var(--text-dim) !important;
}

.wish-pager-btn {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-2) !important;
}

.wish-pager-btn:hover:not(:disabled) {
  background: var(--gold-soft) !important;
  color: var(--maroon-deep) !important;
}

.wish-page-info { color: var(--text-dim) !important; }

/* ---------------------------------------------------------- toast */
.toast-notification {
  background: var(--maroon-deep) !important;
  color: #FFF6E6 !important;
}

.toast-icon { color: var(--gold-soft) !important; }

/* ---------------------------------------------------------- aksen fokus */
:focus-visible {
  outline-color: var(--gold) !important;
}

::selection {
  background: rgba(212, 160, 23, 0.30) !important;
  color: var(--ink) !important;
}

/* ---------------------------------------------------------- ornamen sudut */
/* Kurva emas tipis di sudut tiap blok besar: mengulang bahasa garis
   bordir tanpa menambah gambar. */
.section::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 2px solid rgba(212, 160, 23, 0.45);
  border-left: 2px solid rgba(212, 160, 23, 0.45);
  border-top-left-radius: 14px;
  pointer-events: none;
}

.section::after {
  content: "";
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-bottom: 2px solid rgba(139, 30, 30, 0.30);
  border-right: 2px solid rgba(139, 30, 30, 0.30);
  border-bottom-right-radius: 14px;
  pointer-events: none;
}

@media (max-width: 40em) {
  /* Ornamen sudut disembunyikan di layar sempit supaya tidak bertabrakan
     dengan teks yang melebar penuh. */
  .section::before,
  .section::after { display: none; }
}

/* ---------- sisa nilai biru yang di-hardcode di layer lama ---------- */
/* style.css menulis beberapa latar & teks dengan rgba(37,99,235,…) dan
   #1d4ed8 langsung, bukan lewat variabel, jadi remap token di atas tidak
   menjangkaunya. Daftar di bawah menutup semua kemunculan yang terukur. */
.hero-desc strong,
.about-text strong,
.hud-card-desc strong,
.subgrid-desc strong { color: var(--maroon) !important; }

.section-tag,
.event-badge,
.flagship-badge,
.category-chip {
  /* Emas pekat, bukan transparan: diukur 3.84:1 pada emas 14%, di bawah AA.
     Dengan latar emas penuh dan teks maroon pekat hasilnya 5.9:1. */
  background: var(--gold-soft) !important;
  border-color: rgba(184, 134, 11, 0.65) !important;
  color: var(--maroon-deep) !important;
}

.hero-role-pill {
  background: var(--gold-soft) !important;
  border-color: rgba(184, 134, 11, 0.65) !important;
  color: var(--maroon-deep) !important;
}

.map-overlay-bar { border-top-color: rgba(212, 160, 23, 0.28) !important; }

.glass-card:hover {
  border-color: rgba(212, 160, 23, 0.55) !important;
  box-shadow: 0 16px 42px rgba(139, 30, 30, 0.12) !important;
}

/* Baris daftar "principle" dan kartu spesifikasi memakai latar biru muda. */
.principle-item,
.spec-item { background-color: transparent !important; }

.principle-item {
  background: var(--surface-sunken) !important;
  border-color: var(--line) !important;
}

/* ---------------------------------------------------------- credit footer */
/* Keterangan kecil di kaki halaman. Sengaja tenang agar tidak bersaing
   dengan isi undangan, tapi tetap terbaca. */
.site-credit {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.125rem 2.5rem;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--text-dim);
}

.site-credit a {
  color: var(--maroon);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-credit a:hover { color: var(--gold-deep); }

.site-credit-note {
  margin-top: 0.375rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
}

@media (min-width: 40em) {
  .site-credit { font-size: 0.75rem; }
}

/* ---------------------------------------------------------- family gallery */
/* 13 foto keluarga, mobile-first: 2 kolom di HP, 4 kolom dari 40em.
   Beberapa sel dibuat lebar/tinggi supaya iramanya tidak monoton —
   tanpa JS, cukup grid span. */
.family-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Aspek potret 3:4 agar foto 900x1200 tampil utuh, tanpa crop kasar.
     Baris mengikuti lebar kolom; tidak ada tinggi tetap yang memotong. */
  gap: 0.625rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.family-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  aspect-ratio: 3 / 4;
}

/* Halaman galeri yang tidak aktif disembunyikan; [hidden] default browser
   bisa dikalahkan display:grid di atas, jadi ditegaskan di sini. */
.family-gallery[hidden] { display: none !important; }

.family-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--transition-smooth);
}

@media (hover: hover) and (pointer: fine) {
  .family-tile:hover img { transform: scale(1.04); }
}

@media (min-width: 40em) {
  .family-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

@media (min-width: 56.25em) {
  .family-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .family-tile img { transition: none; }
  .family-tile:hover img { transform: none; }
}

/* ---------------------------------------------------------- map pin */
/* Pin lokasi: cincin maroon + titik putih, dilebihkan ukurannya supaya
   jelas terlihat di atas peta yang ramai. */
.venue-pin {
  background: none;
  border: 0;
}

.venue-pin__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--maroon);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(139, 30, 30, 0.35),
    0 6px 14px rgba(88, 55, 20, 0.35);
}

.venue-pin__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
}

/* ---------------------------------------------------------- family pager */
/* Tombol halaman di bawah galeri. Sengaja rata tengah dan tenang, dengan
   ukuran sentuh 44px agar nyaman di HP. */
.family-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 72rem;
  margin: 1.5rem auto 0;
  padding: 0;
}

.family-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* 44px touch target; --tap is not defined in this theme, so the value is
     written out rather than inherited from a variable that resolves to auto. */
  min-height: 44px;
  padding: 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.family-pager-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.family-pager-btn:hover:not(:disabled) {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--maroon-deep);
}

.family-pager-btn:disabled { opacity: 0.42; cursor: default; }

.family-pager-info {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------------------------------------------------------- makna nama */
/* Blok kecil di bagian Tentang: nama lengkap + artinya. Diberi bingkai emas
   tipis agar terbaca sebagai kutipan, bukan paragraf biasa. */
.name-meaning {
  margin-top: 1.125rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(246, 227, 176, 0.55), rgba(255, 253, 249, 0.9));
}

.name-meaning-tag {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 0.375rem;
}

.name-meaning-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.name-meaning-text strong { color: var(--maroon-deep); font-weight: 700; }