/*
 * Warna merek untuk formulir Cek Nama (inc/bagian-cek-nama.php), dimuat hanya
 * di halaman cek nama. Ada karena output.css tidak punya varian state
 * primary-* (hover:, focus:, focus-within:) dan sumber Tailwind-nya tidak ada.
 * Hanya token theme.json; teks gelap di atas cyan supaya lolos WCAG AA.
 */

/* Aksen halaman PT (CV memakai kelas violet Tailwind). */
.izinin-cn-badge {
	border-color: var(--wp--preset--color--primary-200);
	background: var(--wp--preset--color--primary-50);
	color: var(--wp--preset--color--primary-800);
}

.izinin-cn-nomor {
	background: var(--wp--preset--color--primary-100);
	color: var(--wp--preset--color--primary-800);
}

/*
 * Banner hasil formulir (cek-nama-form.js). output.css tanpa preflight, jadi
 * h4 kena margin bawaan browser (±24px) dan turun dari ikon. Line-height 2rem
 * = tinggi ikon (w-8 h-8), sehingga baris pertama judul sejajar ikon.
 * h4.… (0,1,1) mengalahkan line-height dari utilitas text-lg (0,1,0).
 */
h4.izinin-cn-alert__judul {
	margin: 0;
	line-height: 2rem;
}

.izinin-cn-alert__pesan {
	margin: 0.25rem 0 0;
	line-height: 1.6;
}

.izinin-cn-alert__daftar {
	display: grid;
	gap: 0.375rem;
	margin: 0.375rem 0 0;
	padding-left: 1.125rem;
	list-style: disc;
	line-height: 1.5;
}

/* Elemen bersama PT dan CV. */
.izinin-cn-ikon {
	background: var(--wp--preset--color--primary-50);
	color: var(--wp--preset--color--primary-700);
}

.izinin-cn-tombol {
	border: 0;
	background: var(--wp--preset--color--primary-600);
	color: var(--wp--preset--color--contrast);
}

.izinin-cn-tombol:hover {
	background: var(--wp--preset--color--primary-500);
}

.izinin-cn-tombol:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-700);
	outline-offset: 2px;
}

/* Fokus field: garis tepi menebal + cincin menempel, tanpa outline-offset. */
.izinin-cn-field:focus,
.izinin-cn-field-grup:focus-within {
	outline: none;
	border-color: var(--wp--preset--color--primary-700);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-200);
}

/* ---------- Halaman /pencarian/ (pola izinin/pencarian-hub) ---------- */

/* Tombol KBLI dan WhatsApp: emerald-700, putih di atasnya 5,37:1 (600 hanya 3,67:1). */
.izinin-cn-tombol-hijau {
	background: var(--color-emerald-700);
	color: #fff;
}

.izinin-cn-tombol-hijau:hover {
	background: var(--color-emerald-800);
	color: #fff;
}

.izinin-cn-tombol-hijau:focus-visible {
	outline: 3px solid var(--color-emerald-800);
	outline-offset: 2px;
}

/*
 * Kepala kartu: di tiga kolom, rujukan hukum kartu CV turun ke baris kedua.
 * Tinggi minimum yang sama membuat judul ketiga kartu tetap sejajar.
 */
@media (min-width: 64rem) {
	.izinin-hub-kepala {
		flex-wrap: wrap;
		align-content: flex-start;
		row-gap: 0.375rem;
		min-height: 3.25rem;
	}
}

/*
 * ---- Perbaikan audit antislop 001 (2026-10-09) ----
 * Kelas Tailwind yang dibutuhkan (sr-only, line-clamp, emerald-700, amber-800 …)
 * tidak ada di output.css statis, jadi ditulis di sini. Selektor ID mengalahkan
 * utilitas Tailwind tanpa !important. Tidak ada aturan display pada elemen yang
 * disembunyikan lewat kelas .hidden, supaya tidak menimpanya.
 */
.izinin-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* #5 Teks penghitung kata (12px): amber-600/emerald-600 hanya ±3,3–3,9:1 di atas putih. */
.izinin-cn-penghitung--kurang {
	color: var(--color-amber-900);
}

.izinin-cn-penghitung--cukup {
	color: var(--color-emerald-700);
}

/* #2 Target sentuh minimal 44px (WCAG 2.5.5 / antislop R-03). */
#iz-kbli-app [data-filter-keyword] {
	min-height: 44px;
	padding: 0.5rem 0.875rem;
}

#iz-kbli-length,
#iz-kbli-search {
	min-height: 44px;
}

/* Ruang untuk tombol hapus 44px di kanan kolom cari. */
#iz-kbli-search {
	padding-right: 2.75rem;
}

#iz-kbli-pagination .iz-page-btn {
	min-width: 44px;
	min-height: 44px;
}

#iz-kbli-tbody .iz-kbli-konsultasi,
#iz-kbli-app .iz-kbli-aksi {
	min-height: 44px;
	box-sizing: border-box;
}

/* #5 Elipsis paginasi (dekoratif, tetap harus terbaca). */
#iz-kbli-pagination .iz-page-elipsis {
	color: var(--color-slate-600);
}

/* #3 Tombol salin: selalu terlihat (layar sentuh tak punya hover), area 44px, tanpa gaya bawaan browser. */
#iz-kbli-tbody .iz-copy-kbli-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--color-slate-600);
	cursor: pointer;
}

#iz-kbli-tbody .iz-copy-kbli-btn:hover {
	background: var(--color-slate-100);
	color: var(--color-emerald-700);
}

/* #7 Tombol hapus pencarian: tanpa kotak abu-abu bawaan browser (output.css tanpa preflight). */
#iz-kbli-clear {
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-slate-600);
}

#iz-kbli-clear:hover {
	color: var(--color-slate-900);
}

/* #10 Judul kolom: huruf kalimat, tanpa tracking lebar. */
#iz-kbli-table-wrapper thead tr {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
}

/* #1 Blok galat pemuatan. */
.iz-kbli-galat {
	padding: 3rem 1rem;
	text-align: center;
}

.iz-kbli-galat__judul {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-slate-900);
}

.iz-kbli-galat__teks {
	max-width: 28rem;
	margin: 0.25rem auto 1rem;
	font-size: 0.875rem;
	color: var(--color-slate-600);
}

.iz-kbli-galat__ulang {
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--color-slate-300);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
	color: var(--color-slate-900);
	font-weight: 600;
	cursor: pointer;
}

.iz-kbli-galat__ulang:hover {
	background: var(--color-slate-50);
}

/* Tombol "Selengkapnya" uraian hanya muncul di ponsel dan bila uraian memang terpotong. */
.iz-kbli-lebih {
	display: none;
}

/* #4 Ponsel: tiap baris jadi blok bertumpuk, bukan tabel 4 kolom yang harus digeser. */
@media (max-width: 39.9375rem) {
	#iz-kbli-table-wrapper table {
		min-width: 0;
	}

	#iz-kbli-table-wrapper thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	#iz-kbli-tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
		padding: 1rem 0;
	}

	#iz-kbli-tbody td {
		display: block;
		padding: 0;
		white-space: normal;
		text-align: left;
	}

	#iz-kbli-tbody .iz-kbli-konsultasi {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	#iz-kbli-tbody .iz-kbli-uraian:not(.is-buka) {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	#iz-kbli-tbody .iz-kbli-lebih.is-perlu {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-emerald-700);
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
	}
}

/*
 * #17 Kontrol formulir mewarisi font situs. Tanpa preflight, <button>/<input>
 * memakai font sistem (Arial). Sengaja font-family saja: shorthand `font` ikut
 * mereset ukuran & ketebalan, dan selektor ID ini akan menimpa text-sm/font-bold.
 */
#iz-kbli-app button,
#iz-kbli-app input,
#iz-kbli-app select,
#cek-nama-form button,
#cek-nama-form input,
#cek-nama-form select,
#cek-nama-form textarea {
	font-family: inherit;
}