/**
 * Elibrary Test — Taxonomy / Category Navigation Stylesheet (Premium UI Pass)
 * Namespace: .eltax-* (SENGAJA berbeda dari .eltest-* milik shortcode
 * [elibrary_test] yang lama, supaya mustahil terjadi selector collision
 * meski keduanya dimuat di halaman yang sama). Tanpa dependency eksternal.
 *
 * Spacing system: HANYA memakai skala 4/8/12/16/24/32/40/48px di seluruh
 * file ini (lihat komentar per-aturan untuk skala mana yang dipakai).
 * Warna badge/teks di bawah sudah dihitung ulang agar >=4.5:1 (WCAG AA
 * teks normal) -- lihat catatan kontras di tiap variabel.
 */

.eltax-app {
	--eltax-primary: #2563eb;        /* CTA/link teks, kontras 5.17:1 di atas putih */
	--eltax-primary-dark: #1e3a8a;   /* Judul, kontras 10.36:1 di atas putih */
	--eltax-bg: #f4f7fc;
	--eltax-card: #ffffff;
	--eltax-text: #0f172a;           /* Body utama, kontras 17.85:1 di atas putih */
	--eltax-muted: #475569;          /* DIPERBAIKI dari #64748b (4.43:1, gagal AA di atas --eltax-bg)
	                                     -> #475569 = 7.06:1 di atas --eltax-bg, 7.58:1 di atas putih */
	--eltax-border: #e2e8f0;
	--eltax-success-text: #166534;   /* DIPERBAIKI dari #16a34a (3.13:1, gagal AA untuk teks kecil)
	                                     -> #166534 = 6.77:1 di atas #ecfdf5 */
	--eltax-success-bg: #ecfdf5;
	--eltax-success-border: #86efac;
	--eltax-warning-text: #92400e;   /* DIPERBAIKI dari #d97706 (3.07:1, gagal AA untuk teks kecil)
	                                     -> #92400e = 6.84:1 di atas #fffbeb */
	--eltax-warning-bg: #fffbeb;
	--eltax-warning-border: #fde68a;
	--eltax-radius: 16px;

	box-sizing: border-box;
	max-width: 1180px; /* dalam target 1100-1280px (A2) */
	margin: 0 auto;
	padding: 0 16px 32px; /* skala: 16 / 32 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--eltax-text);
	width: 100%;
	line-height: 1.5; /* baseline body line-height, dalam target 1.4-1.7 (D2) */
}

.eltax-app *,
.eltax-app *::before,
.eltax-app *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   GRID KATEGORI -- mobile 1 kolom, tablet 2, desktop 4 (A3)
   4 kategori pas dalam satu baris di desktop -- tidak perlu 3 kolom
   yang akan menyisakan baris timpang untuk tepat 4 item.
--------------------------------------------------------------------- */

.eltax-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px; /* card-to-card gap >=16px (I) */
	align-items: stretch; /* equal-height cards per baris (C4) */
}

@media (min-width: 640px) {
	.eltax-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.eltax-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px; /* section/grid spacing lebih lega di desktop */
	}
}

/* ---------------------------------------------------------------------
   CATEGORY BOX
--------------------------------------------------------------------- */

.eltax-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 12px; /* skala 12 -- jarak antar elemen internal card */
	width: 100%;
	height: 100%; /* equal height dalam grid row (C4) */
	background: var(--eltax-card);
	border: 1.5px solid var(--eltax-border);
	border-radius: var(--eltax-radius); /* konsisten di seluruh card sejenis (C2) */
	padding: 24px; /* skala 24, >=16px di mobile (I) */
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; /* durasi dalam target 150-300ms (K) */
}

.eltax-box:hover {
	border-color: var(--eltax-primary);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08); /* subtle, tidak glowing (J) */
}

.eltax-box:active {
	transform: scale(0.995);
}

.eltax-box:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.45);
	outline-offset: 2px;
}

.eltax-box.is-coming-soon {
	background: var(--eltax-bg);
}

.eltax-box-icon {
	width: 44px; /* selaras dengan target minimum interactive/visual area 44px (F) */
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--eltax-primary), var(--eltax-primary-dark));
	color: #ffffff;
	padding: 8px;
	flex-shrink: 0;
}

.eltax-box.is-coming-soon .eltax-box-icon {
	background: #94a3b8;
}

.eltax-box-icon svg {
	width: 100%;
	height: 100%;
}

/* HIERARKI VISUAL (C3, D3): TITLE -> DESCRIPTION -> STATUS/CTA,
   dibedakan lewat ukuran DAN bobot huruf, bukan warna saja. */

.eltax-box-title {
	font-size: 1.15rem; /* ~18.4px */
	font-weight: 800;
	line-height: 1.25; /* target heading 1.1-1.3 (D2) */
	letter-spacing: -0.01em;
	color: var(--eltax-primary-dark);
}

.eltax-box.is-coming-soon .eltax-box-title {
	color: var(--eltax-text);
}

.eltax-box-desc {
	font-size: 0.95rem; /* ~15.2px, memenuhi target minimum 15px (D1) */
	font-weight: 400;
	line-height: 1.6; /* target body 1.4-1.7 (D2) */
	color: var(--eltax-muted);
	flex-grow: 1; /* dorong meta+CTA ke bawah card supaya sejajar antar card (C4) */
}

.eltax-box-meta {
	display: flex;
	align-items: center;
	gap: 8px; /* skala 8 */
	flex-wrap: wrap;
	margin-top: 4px; /* skala 4 */
}

.eltax-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem; /* ~13px -- dinaikkan dari versi sebelumnya (~12px) agar metadata tidak terlalu kecil (D1) */
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
}

.eltax-badge-active {
	background: var(--eltax-success-bg);
	color: var(--eltax-success-text);
	border: 1px solid var(--eltax-success-border);
}

.eltax-badge-active::before {
	content: "●"; /* penanda non-warna tambahan (E3, G3) selain teks "Aktif" */
	font-size: 0.7em;
}

.eltax-badge-soon {
	background: var(--eltax-warning-bg);
	color: var(--eltax-warning-text);
	border: 1px solid var(--eltax-warning-border);
}

.eltax-badge-soon::before {
	content: "◷"; /* bentuk berbeda dari badge aktif -- bukan sekadar warna berbeda (E3, G3) */
	font-size: 0.75em;
}

.eltax-box-count {
	font-size: 0.8125rem; /* selaras dengan .eltax-badge, >=13px (D1) */
	color: var(--eltax-muted);
	font-weight: 600;
}

.eltax-box-cta {
	margin-top: 8px; /* skala 8 */
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--eltax-primary);
	line-height: 1.4;
}

.eltax-box.is-coming-soon .eltax-box-cta {
	color: var(--eltax-muted);
}

.eltax-box.is-active .eltax-box-cta::after {
	content: " ›";
}

/* ---------------------------------------------------------------------
   SUBCATEGORY PANEL
--------------------------------------------------------------------- */

.eltax-panel {
	margin-top: 24px; /* skala 24, section spacing >=24px (I) */
	background: var(--eltax-card);
	border: 1.5px solid var(--eltax-border);
	border-radius: var(--eltax-radius);
	padding: 24px; /* konsisten dengan .eltax-box (C1) */
}

.eltax-panel[hidden] {
	display: none;
}

.eltax-panel-title {
	margin: 0 0 16px; /* skala 16 */
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--eltax-primary-dark);
}

.eltax-panel-empty {
	color: var(--eltax-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

.eltax-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px; /* skala 12 */
}

.eltax-subitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px; /* skala 8/12 */
	padding: 12px 16px; /* tinggi baris >=44px total (F) */
	min-height: 44px;
	border-radius: 12px;
	border: 1.5px solid var(--eltax-border);
	background: var(--eltax-bg);
	text-decoration: none;
	color: inherit;
}

a.eltax-subitem.is-active {
	background: #ffffff;
	border-color: var(--eltax-primary);
}

a.eltax-subitem.is-active:hover {
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.10); /* subtle (J) */
}

a.eltax-subitem.is-active:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.45);
	outline-offset: 2px;
}

.eltax-subitem-name {
	font-weight: 600;
	font-size: 0.95rem; /* >=15px (D1) */
	line-height: 1.5;
	flex: 1 1 160px;
}

.eltax-subitem-badge {
	font-size: 0.8125rem; /* >=13px, selaras dengan .eltax-badge (D1) */
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.eltax-subitem-cta {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--eltax-primary);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   RESPONSIVE FINE-TUNING (B) -- 375-390px mobile kecil
--------------------------------------------------------------------- */

@media (max-width: 359px) {
	.eltax-app {
		padding: 0 12px 24px; /* tetap dalam skala 12/24, sedikit lebih rapat di layar sangat sempit */
	}

	.eltax-box {
		padding: 16px; /* tetap memenuhi minimum 16px mobile (I) */
	}

	.eltax-box-title {
		font-size: 1.05rem;
	}

	.eltax-subitem-name {
		flex-basis: 100%;
	}
}