/*
Theme Name: Xaxi Invitation
Theme URI: https://xaxiinvitation.my.id
Description: Tema undangan pernikahan digital: 31 desain dalam 19 lapisan tata letak (Soft, Aurora, Kanon, Aksara, Sagara, Kabut, Swiss, Art Deco, Brutal, Riso, Bento, Kinetik, Gelas, Organik, Teras, Minang, Batak, Bali, Betawi) plus ornamen bunga per lapisan. Termasuk ucapan & RSVP, galeri, hitung mundur, dan halaman daftar undangan. Sistem desainnya sama dengan aplikasi undangan xaxiinvitation.my.id.
Author: Xaxi Digital
Author URI: https://xaxicloud.com
Version: 1.2.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xaxi-invitation
Tags: wedding, invitation, digital, customizer, rtl-language-support, translation-ready
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
*/

/*
 * Berkas ini hanya berisi header tema + aturan netral.
 *
 * Tata letak halaman undangan sepenuhnya milik assets/css/invitation.css dan
 * assets/css/tpl-<lapisan>.css (disalin apa adanya dari aplikasi undangan), jadi
 * berkas ini sengaja TIDAK menata ulang apa pun dari halaman itu. Kalau aturan di
 * sini ikut menata .cover/.sec, dua sistem desain akan bertabrakan.
 */

html {
	-webkit-text-size-adjust: 100%;
}

/* Halaman daftar undangan (index.php): satu kartu per undangan, memakai foto sampul.
   Semua kelas di bawah berawalan .idx__ / .kartu__ yang tidak ada di
   invitation.css maupun tpl-*.css, jadi tidak ada aturan lapisan desain yang ditimpa. */
.idx__head {
	max-width: 60rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 7vw, 4.5rem) 1.25rem 0;
	text-align: center;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.idx__eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #6b6459;   /* diukur 5,85:1 di atas putih; #8a8377 hanya 3,75:1 (gagal AA) */
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.idx__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.9rem, 6vw, 2.8rem);
	margin: 0 0 0.4rem;
	color: #221f1a;
}

.idx__lead {
	color: #6f675c;
	margin: 0 0 0.5rem;
}

.idx__count {
	font-size: 0.85rem;
	color: #8a8377;
	margin: 0;
}

.idx {
	max-width: 74rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem 3rem;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.idx__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.kartu {
	margin: 0;
}

.kartu__tautan {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(34, 31, 26, 0.12);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(34, 31, 26, 0.06);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kartu__tautan:hover,
.kartu__tautan:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(34, 31, 26, 0.14);
	border-color: rgba(34, 31, 26, 0.28);
}

.kartu__media {
	display: block;
	aspect-ratio: 4 / 5;
	background: #f2efe9;
}

.kartu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kartu__kosong {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #efeae1, #ded6c8);
}

.kartu__isi {
	display: grid;
	gap: 0.25rem;
	padding: 0.9rem 1rem 1.05rem;
	flex: 1;
	align-content: start;
	min-height: 5.4rem;   /* tinggi blok teks dikunci supaya dasar kartu sejajar */
}

.kartu__nama {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.1rem;
	font-weight: 600;
}

.kartu__desain {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a6a3b;   /* 4,99:1 di atas putih */
	/* Nama lapisan panjang ("Lembut (bawaan)") tidak boleh membuat tinggi kartu berbeda. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kartu__tanggal {
	font-size: 0.85rem;
	color: #6f675c;
}

.idx__foot {
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
	color: #8a8377;
	font-size: 0.85rem;
	text-align: center;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.idx__kosong {
	text-align: center;
	color: #6f675c;
	padding: 3rem 0;
}

/* Baris tanggal kedua di sampul: tanggal angka (02.07.2027) bisa dibaca dua arah,
   jadi nama hari + bulan ditulis di bawahnya. Elemen baru, tidak menimpa aturan
   lapisan desain mana pun (kelas ini tidak ada di invitation.css/tpl-*.css). */
.cover__datelong {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: -0.45rem 0 1.25rem;
}

.cover.has-cover .cover__datelong {
	color: rgba(255, 255, 255, 0.88);
}

/* Keterbacaan di atas FOTO sampul. Warna teks tiap desain sudah diukur lolos
   WCAG AA di atas latar polos (rasio >= 4,5:1 pada 31 desain), tapi di atas foto
   apa pun bisa jatuh — bayangan tipis ini yang menyelamatkan, bukan mengubah warna. */
.cover.has-cover .cover__names,
.cover.has-cover .cover__kicker,
.cover.has-cover .cover__date,
.cover.has-cover .cover__datelong,
.cover.has-cover .cover__to,
.cover.has-cover .cover__guestname,
.cover.has-cover .eyebrow {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Tombol pembuka harus tetap terbaca di atas foto: bayangan pemisah, bukan warna baru. */
.cover.has-cover .btn--open {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Selubung sampul dipertegas sedikit di atas foto. invitation.css memakai 45%->65%;
   di atas foto gelap teks kecil masih jatuh di bawah 4,5:1. 55%->72% menaikkan
   kontras tanpa membuat foto hilang. Hanya berlaku kalau ada foto (has-cover). */
.cover.has-cover .cover__veil {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.72));
}