/* Tema undangan: Batik Jawa.
   DESIGN.md bagian 4, baris `batik`. Kontrak C3 untuk nama hook dan custom property.
   Ornamen parang dibuat ulang dari bentuk dasar (busur dan belah ketupat), bukan salinan
   motif batik yang sudah ada. Dipakai sebagai pita sudut, bukan latar seluruh halaman. */

:root {
  --inv-bg: #F5EFE6;
  --inv-ink: #2B1D12;
  --inv-muted: #6B5842;
  --inv-accent: #8C5A2B;
  --inv-deep: #3E2A19;
  --inv-line: #A08056;
  --inv-surface: #FBF7F0;
  --inv-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --inv-font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --inv-radius: 6px;

  --inv-parang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cpattern id='p' width='36' height='48' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cg fill='%233E2A19'%3E%3Cpath d='M6 2A22 22 0 0 1 6 46 30 30 0 0 0 6 2Z'/%3E%3Cpath d='M31.5 18l3.5 6-3.5 6-3.5-6z'/%3E%3Cpath d='M0 0h1.5v48H0z'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 0h200L0 200Z' fill='url(%23p)'/%3E%3C/svg%3E");
}

.inv {
  background: var(--inv-bg);
  color: var(--inv-ink);
  font-family: var(--inv-font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100%;
}

/* Sampul dan pita sudut parang */

.inv .inv-cover {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 48px;
  text-align: center;
}

.inv .inv-cover::before,
.inv .inv-cover::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--inv-parang) 0 0 / 200px 200px no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.inv .inv-cover::before {
  top: 0;
  left: 0;
}

.inv .inv-cover::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.inv .inv-cover > * {
  position: relative;
  z-index: 1;
}

.inv .inv-cover-kicker {
  margin: 0 0 24px;
  color: var(--inv-muted);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.inv .inv-names {
  margin: 0 0 16px;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 34px;
  line-height: 1.2;
}

.inv .inv-date {
  margin: 0 auto 32px;
  max-width: 22em;
  color: var(--inv-ink);
  font-size: 18px;
}

.inv .inv-date::before,
.inv .inv-date::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 16px auto;
  background: var(--inv-line);
}

.inv .inv-to {
  margin: 0;
  color: var(--inv-muted);
  font-size: 16px;
}

.inv .inv-to-name {
  display: block;
  margin-top: 8px;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 21px;
}

/* Bagian umum */

.inv .inv-section {
  padding: 48px 24px;
  border-top: 1px solid var(--inv-line);
}

.inv .inv-section-title {
  margin: 0 0 24px;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
}

/* Hitung mundur */

.inv .inv-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 auto;
  max-width: 480px;
}

.inv .inv-cd-unit {
  padding: 12px 4px;
  border: 1px solid var(--inv-line);
  border-radius: var(--inv-radius);
  background: var(--inv-surface);
  text-align: center;
}

.inv .inv-cd-num {
  display: block;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 26px;
  line-height: 1.2;
}

.inv .inv-cd-label {
  display: block;
  margin-top: 4px;
  color: var(--inv-muted);
  font-size: 16px;
}

/* Mempelai, anak atau tuan rumah */

.inv .inv-people {
  display: grid;
  gap: 32px;
  margin: 0 auto;
  max-width: 640px;
}

.inv .inv-person {
  text-align: center;
}

.inv .inv-person-name {
  margin: 0 0 8px;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 26px;
  line-height: 1.2;
}

.inv .inv-person-parents {
  margin: 0;
  color: var(--inv-muted);
  font-size: 16px;
}

/* Acara */

.inv .inv-events {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 640px;
}

.inv .inv-event {
  padding: 24px;
  border: 1px solid var(--inv-line);
  border-radius: var(--inv-radius);
  background: var(--inv-surface);
  text-align: center;
}

.inv .inv-event-name {
  margin: 0 0 12px;
  color: var(--inv-deep);
  font-family: var(--inv-font-display);
  font-size: 21px;
  line-height: 1.2;
}

.inv .inv-event-time {
  margin: 0 0 8px;
  color: var(--inv-ink);
  font-size: 16px;
}

.inv .inv-event-venue {
  margin: 0 0 16px;
  color: var(--inv-muted);
  font-size: 16px;
}

/* Tombol */

.inv .inv-btn,
.inv .inv-event-map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 10px 24px;
  border: 1px solid var(--inv-accent);
  border-radius: var(--inv-radius);
  background: var(--inv-accent);
  color: #FFFFFF;
  font-family: var(--inv-font-body);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.inv .inv-btn:hover,
.inv .inv-event-map:hover {
  background: var(--inv-deep);
  border-color: var(--inv-deep);
}

/* Cincin fokus datang dari `:focus-visible` global di invite.css, memakai --inv-accent tema ini. */

/* Galeri */

.inv .inv-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 auto;
  max-width: 720px;
}

/* Hook ini adalah <button> pembungkus <img>; rasio gambar diatur invite.css (4 / 3). */
.inv .inv-gallery-item {
  display: block;
  width: 100%;
  border: 1px solid var(--inv-line);
  border-radius: var(--inv-radius);
  background: var(--inv-surface);
}

/* RSVP */

.inv .inv-rsvp {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 480px;
}

/* `.inv-field` adalah <div> pembungkus <label> dan kontrol, jadi yang diberi gaya kontrolnya. */
.inv .inv-field input,
.inv .inv-field select,
.inv .inv-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--inv-line);
  border-radius: var(--inv-radius);
  background: var(--inv-surface);
  color: var(--inv-ink);
  font-family: var(--inv-font-body);
  font-size: 16px;
  line-height: 1.55;
}

.inv .inv-field input::placeholder,
.inv .inv-field textarea::placeholder {
  color: var(--inv-muted);
  opacity: 1;
}

/* Amplop */

.inv .inv-gift {
  margin: 0 auto;
  max-width: 480px;
  padding: 24px;
  border: 1px solid var(--inv-line);
  border-radius: var(--inv-radius);
  background: var(--inv-surface);
  color: var(--inv-ink);
  text-align: center;
}

.inv .inv-gift-warning {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--inv-accent);
  border-radius: var(--inv-radius);
  color: var(--inv-deep);
  font-size: 16px;
}

/* Bagikan, tanda air, kaki halaman */

.inv .inv-wm,
.inv .inv-footer {
  padding: 24px;
  border-top: 1px solid var(--inv-line);
  color: var(--inv-muted);
  font-size: 16px;
  text-align: center;
}

.inv .inv-wm a,
.inv .inv-footer a {
  color: var(--inv-accent);
}

@media (min-width: 720px) {
  .inv .inv-cover {
    padding: 96px 32px 64px;
  }

  .inv .inv-names {
    font-size: 42px;
  }

  .inv .inv-people {
    grid-template-columns: repeat(2, 1fr);
  }

  .inv .inv-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inv *,
  .inv *::before,
  .inv *::after {
    animation: none !important;
    transition: none !important;
  }
}