/* ============================================================================
   csf-donation-portal.css — SKIN PORTAL OPERATOR (/portal-donation)
   ----------------------------------------------------------------------------
   APA YANG ADA DI SINI
     Hanya pengecatan ulang. Plugin CSF Donation mengirim portal dengan palet
     gelap netral supaya bisa berjalan di tema mana pun; berkas ini memetakan
     seluruh variabel --p-* miliknya ke token COCO Social Fund, sehingga portal
     memakai hijau hutan yang sama dengan <body> situs (--primary-bg #2b3524).

   YANG TIDAK ADA DI SINI
     Tata letak, jarak, dan titik potong responsif. Semuanya tetap milik
     assets/dist/portal.css di plugin — kalau disalin ke sini, keduanya akan
     berbeda diam-diam pada pembaruan plugin berikutnya.

   KENAPA HIJAU BUKAN HITAM
     Portal dirender di dalam halaman biasa, dan <body> situs ini sudah hijau
     hutan. Palet netral plugin (#141313, nyaris hitam) membuat setiap kartu
     tampak seperti lubang gelap di atas halaman — dua warna gelap yang berbeda
     tanpa alasan. Menyamakannya ke keluarga hijau yang sama membuat portal
     terbaca sebagai bagian dari situs.

   KONTRAS (terukur, WCAG AA teks normal = 4.5:1)
       ivory #f8f6f0 di atas latar   #2b3524 → 11.87:1
       ivory #f8f6f0 di atas surface #354227 →  9.91:1
       muted #d1d5cb di atas surface #354227 →  7.19:1
       sage  #d7e9be di atas surface #354227 →  8.31:1
       teks gelap #273417 di atas sage       → 10.25:1
     Semua teks utama lolos dengan margin lebar, termasuk micro-label 12px.

     Yang paling ketat adalah tag status di atas latar tint 16%-nya sendiri:
     ok 5.08:1, warn 5.00:1, err 4.52:1. Masih lolos, tetapi sisanya tipis —
     bila rona status di bawah diubah, ukur ulang dulu sebelum dipakai.
   ========================================================================== */

.csfdn-portal {
	/* Latar: hijau hutan yang sama dengan <body>. */
	--p-bg: var(--primary-bg, #2b3524);

	/* Permukaan kartu naik satu tingkat dari latar, bukan turun ke hitam —
	   itulah yang membuat kartu terlihat terangkat, bukan berlubang. */
	--p-surface: rgb(var(--color-forest-900-rgb, 53 66 39));
	--p-surface-2: rgb(var(--color-forest-800-rgb, 61 75 44));

	/* Field input justru turun satu tingkat, supaya "bisa diketik" terbaca
	   tanpa perlu garis tebal. */
	--p-sunken: rgb(var(--color-forest-950-rgb, 45 56 33));

	/* Ivory, bukan putih murni: putih penuh di atas hijau pekat berdengung
	   pada layar terang. */
	--p-ink: rgb(var(--color-ivory-rgb, 248 246 240));
	--p-on-ink: rgb(var(--color-on-secondary-fixed-rgb, 18 31 5));

	--p-muted: var(--hero-copy, #d1d5cb);

	--p-accent: rgb(var(--color-secondary-fixed-rgb, 215 233 190));
	--p-on-accent: rgb(var(--color-on-secondary-rgb, 39 52 23));

	--p-line: rgb(var(--color-ivory-rgb, 248 246 240) / 0.16);

	/* Status disetel ulang ke rona yang tetap terbaca di atas hijau; merah dan
	   kuning bawaan plugin dikalibrasi untuk latar netral dan tampak keruh di
	   sini. */
	--p-ok: #a7e8a0;
	--p-warn: #f4d26a;
	--p-err: #ffb3ab;
	--p-ok-bg: rgb(167 232 160 / 0.16);
	--p-warn-bg: rgb(244 210 106 / 0.16);
	--p-err-bg: rgb(255 179 171 / 0.16);
}

/* ---------------------------------------------------------------------------
   TIPOGRAFI
   Portal memakai keluarga huruf situs. Judul memakai Noto Serif seperti seksi
   lain, sedangkan angka dan tabel tetap Plus Jakarta Sans — serif pada deretan
   angka justru memperlambat pembacaan.
   ------------------------------------------------------------------------ */
.csfdn-portal {
	font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
	letter-spacing: 0.005em;
}

.csfdn-portal__gate-card h1,
.csfdn-portal__panel-head h2,
.csfdn-portal__reconcile h3 {
	font-family: var(--font-headline, 'Noto Serif', serif);
	color: var(--p-ink);
}

/* Nama portal memakai serif situs pada ukuran tenang — sama seperti judul
   seksi di halaman publik, tanpa tracking tambahan. Bobot 400: di Noto Serif,
   bold pada ukuran sekecil ini terbaca berteriak. */
.csfdn-portal__brand {
	font-family: var(--font-headline, 'Noto Serif', serif);
	font-weight: 400;
	letter-spacing: normal;
}

/* Identitas dan tautan keluar sengaja dibiarkan kecil dan tenang: keduanya
   informasi latar, bukan tindakan yang dicari orang saat membuka portal. */
.csfdn-portal__who { font-size: 13.5px; }

/* Micro-label memakai keluarga label situs dengan tracking yang sama seperti
   eyebrow di halaman publik. */
.csfdn-portal__card-label,
.csfdn-portal__grid dt,
.csfdn-portal__tag {
	font-family: var(--font-label, 'Plus Jakarta Sans', sans-serif);
}

/* Angka besar: serif situs memberi bobot yang sama dengan angka "terkumpul"
   pada halaman campaign, sehingga keduanya terbaca sebagai satu bahasa. */
.csfdn-portal__card-value,
.csfdn-portal__row-amount b {
	font-family: var(--font-headline, 'Noto Serif', serif);
	letter-spacing: -0.01em;
}

/* Tab aktif: ivory dengan teks hijau tergelap — bukan putih/hitam. */
.csfdn-portal__tab.is-active,
.csfdn-portal__toast {
	background: var(--p-ink);
	color: var(--p-on-ink);
}

/* Badge antrean memakai merah muda pucat di atas hijau tua, bukan merah pekat
   yang bergetar berdampingan dengan hijau. */
.csfdn-portal__badge {
	background: var(--p-err);
	color: rgb(var(--color-on-secondary-fixed-rgb, 18 31 5));
}

.csfdn-portal__btn--ok { background: var(--p-ok); color: rgb(var(--color-on-secondary-fixed-rgb, 18 31 5)); }
.csfdn-portal__btn--bad { background: var(--p-err); color: rgb(var(--color-on-secondary-fixed-rgb, 18 31 5)); }
.csfdn-portal__toast--bad { background: var(--p-err); color: rgb(var(--color-on-secondary-fixed-rgb, 18 31 5)); }

/* Tag netral: garis tipis ivory, bukan putih 12% yang nyaris tak terlihat di
   atas hijau. */
.csfdn-portal__tag--muted {
	background: rgb(var(--color-ivory-rgb, 248 246 240) / 0.1);
	color: var(--p-muted);
}

/* Batang grafik memakai gradasi sage → hijau situs. */
.csfdn-portal__chart-bar span {
	background: linear-gradient(180deg,
		rgb(var(--color-secondary-fixed-rgb, 215 233 190)),
		rgb(var(--color-secondary-container-rgb, 63 78 46)));
}

.csfdn-portal__mini-fill {
	background: linear-gradient(90deg,
		rgb(var(--color-secondary-fixed-rgb, 215 233 190)),
		rgb(var(--color-secondary-rgb, 187 205 163)));
}

/* ---------------------------------------------------------------------------
   MENAHAN GAYA ARTIKEL

   Portal dirender lewat the_content(), jadi ia berada di dalam
   `.coco-entry-content` dan ikut kena entry-content.css — stylesheet yang
   dimaksudkan untuk tulisan editor, bukan untuk antarmuka aplikasi.

   Ini bukan soal urutan muat: `.coco-entry-content a` bernilai (0,1,1)
   sedangkan `.csfdn-portal__signout` hanya (0,1,0), jadi gaya artikel menang
   berapa pun urutannya. Itulah yang membuat "Sign out" tergaris bawah dan
   setiap tautan di portal berwarna aksen.

   Dinetralkan di sini, bukan di plugin: yang bocor adalah gaya TEMA, dan
   plugin tidak semestinya tahu nama kelas milik tema mana pun.
   ------------------------------------------------------------------------ */
.coco-entry-content .csfdn-portal a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: auto;
	transition: none;
}

.coco-entry-content .csfdn-portal a:hover {
	color: inherit;
}

/* Setelah dinetralkan, niat portal dipasang ulang dengan spesifisitas yang
   cukup untuk menang. */
.coco-entry-content .csfdn-portal .csfdn-portal__signout {
	color: var(--p-muted);
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.coco-entry-content .csfdn-portal .csfdn-portal__signout:hover,
.coco-entry-content .csfdn-portal .csfdn-portal__signout:focus-visible {
	color: var(--p-accent);
	border-bottom-color: var(--p-accent);
}

/* Chip berbentuk <a> (mis. "Status page") harus tetap seperti tombol. */
.coco-entry-content .csfdn-portal a.csfdn-portal__chip {
	color: var(--p-muted);
}
.coco-entry-content .csfdn-portal a.csfdn-portal__chip:hover {
	color: var(--p-ink);
}
.coco-entry-content .csfdn-portal a.csfdn-portal__btn {
	color: var(--p-on-ink);
}

/* Judul, paragraf, strong, dan small di dalam portal memakai skala portal —
   bukan skala artikel yang jauh lebih besar dan berjarak lebar. */
.coco-entry-content .csfdn-portal h1,
.coco-entry-content .csfdn-portal h2,
.coco-entry-content .csfdn-portal h3,
.coco-entry-content .csfdn-portal p,
.coco-entry-content .csfdn-portal small,
.coco-entry-content .csfdn-portal strong {
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

/* Ukuran judul panel dikembalikan setelah reset di atas. */
.coco-entry-content .csfdn-portal .csfdn-portal__gate-card h1,
.coco-entry-content .csfdn-portal .csfdn-portal__panel-head h2,
.coco-entry-content .csfdn-portal .csfdn-portal__reconcile h3,
.coco-entry-content .csfdn-portal .csfdn-portal__brand {
	font-family: var(--font-headline, 'Noto Serif', serif);
	font-weight: 400;
	line-height: 1.2;
	color: var(--p-ink);
}
.coco-entry-content .csfdn-portal .csfdn-portal__gate-card h1 { font-size: clamp(24px, 5.5vw, 30px); margin-bottom: 8px; }
.coco-entry-content .csfdn-portal .csfdn-portal__panel-head h2 { font-size: clamp(22px, 4.5vw, 26px); }
.coco-entry-content .csfdn-portal .csfdn-portal__reconcile h3 { font-size: 19px; margin-bottom: 6px; }
.coco-entry-content .csfdn-portal .csfdn-portal__brand { font-size: clamp(19px, 4.5vw, 23px); }

/* Paragraf yang memang perlu jarak. */
.coco-entry-content .csfdn-portal .csfdn-portal__gate-sub { font-size: 15.5px; line-height: 1.6; margin-bottom: 26px; color: var(--p-muted); }
.coco-entry-content .csfdn-portal .csfdn-portal__hint,
.coco-entry-content .csfdn-portal .csfdn-portal__hint-inline { color: var(--p-muted); line-height: 1.6; }
.coco-entry-content .csfdn-portal .csfdn-portal__hint-inline { font-size: 14px; margin-bottom: 18px; }
.coco-entry-content .csfdn-portal .csfdn-portal__reconcile p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: var(--p-muted); }

/* Elemen kecil yang memang harus kecil. */
.coco-entry-content .csfdn-portal .csfdn-portal__card-sub,
.coco-entry-content .csfdn-portal .csfdn-portal__row-title small { font-size: 13.5px; color: var(--p-muted); }
.coco-entry-content .csfdn-portal .csfdn-portal__row-amount small { font-size: 12px; color: var(--p-muted); }
.coco-entry-content .csfdn-portal .csfdn-portal__chart-bar small { font-size: 10px; color: var(--p-muted); }
.coco-entry-content .csfdn-portal .csfdn-portal__row-title strong { font-size: 16px; line-height: 1.35; }
.coco-entry-content .csfdn-portal .csfdn-portal__row-amount b,
.coco-entry-content .csfdn-portal .csfdn-portal__card-value { color: var(--p-ink); }

/* Root portal adalah anak langsung .coco-entry-content dan mewarisi
   margin-bottom 1.75rem miliknya. Di halaman portal itu hanya ruang kosong. */
.coco-entry-content > .csfdn-portal { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   HALAMAN PORTAL
   Template page-portal-donation.php melewatkan mini-hero, jadi konten langsung
   menempel ke navbar. Beri jarak nafas, dan lebarkan area kerjanya di layar
   besar — portal ini menampilkan tabel, bukan artikel.
   ------------------------------------------------------------------------ */
.csfdn-portal { padding-top: 24px; }

@media (min-width: 1200px) {
	.csfdn-portal { max-width: 1120px; }
}