/*
Theme Name: gmii-proyek-ezra-classic
Theme URI: https://example.com/
Author: GMII
Description: Proyek Ezra theme (classic) with donors table + confirmation form — styled
Version: 1.0.2
*/

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --accent:#4f46e5;
  --accent-2:#111827;
  --radius:16px;
  --shadow:0 10px 20px -10px rgba(2,6,23,.15), 0 4px 10px -6px rgba(2,6,23,.1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  margin:0;
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:28px 20px}

h1{font-weight:800;font-size:32px;letter-spacing:-.02em;margin:0 0 18px}
h2{font-weight:800;font-size:22px;letter-spacing:-.01em;margin:0 0 12px}
h3{font-weight:700;font-size:18px;margin:16px 0 8px}

a{color:var(--accent-2);text-decoration:none}
a:hover{opacity:.9}

/* Header */
.site-header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px}
.brand a{color:var(--text);font-weight:800}
.nav{display:flex;gap:14px;align-items:center}
.nav .menu{display:flex;gap:16px;align-items:center;margin:0;padding:0;list-style:none}
.nav .menu > li{list-style:none}
.nav .menu > li > a{display:block;padding:8px 10px;border-radius:10px;font-weight:600;color:var(--text)}
.nav .menu > li > a:hover{background:#f1f5f9}
@media (max-width:720px){ .nav .menu{flex-wrap:wrap;gap:8px} }

/* Cards & buttons */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.section{margin:18px 0;padding:18px}
.cta{background:var(--accent-2);color:#fff;border:none;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn-ghost{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;color:var(--text)}

/* Forms */
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="search"], select, textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none
}
input::placeholder{color:#94a3b8}

/* Donors table */
table{border-collapse:collapse;width:100%}
th, td{border:1px solid var(--line);padding:10px}
thead th{background:#f8fafc;font-weight:700}
tbody tr:nth-child(even){background:#fafbff}

/* Footer */
.site-footer{color:var(--muted);padding:20px 0;margin-top:24px}



/* === GMII Header Skin === */
:root{
  --line:#e5e7eb;
  --text:#0f172a;
}

.container{max-width:1100px;margin:0 auto;padding:28px 20px}
.site-header{background:#ffffff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand-link{color:var(--text);font-weight:800;text-decoration:none}
.nav .menu{display:flex;gap:16px;align-items:center;margin:0;padding:0;list-style:none}
.nav .menu > li{list-style:none}
.nav .menu > li > a{display:block;padding:8px 10px;border-radius:10px;font-weight:600;color:var(--text);text-decoration:none}
.nav .menu > li > a:hover{background:#f1f5f9}
@media (max-width:720px){ .nav .menu{flex-wrap:wrap;gap:8px} }
/* === /GMII Header Skin === */


/* Ukuran & alignment logo */
.custom-logo {
  height: 40px;     /* atur sesuai selera (30–60px biasanya pas) */
  width: auto;
  display: block;
}
.site-header .brand { display: flex; align-items: center; gap: 10px; }

.brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; }
.brand-name { line-height:1; }



/* === Typography: fluid responsive with fallback for very small phones === */
html { -webkit-text-size-adjust: 100%; }

/* Fluid scaling: desktop → tablet → mobile */
body { font-size: clamp(14px, 1.6vw, 16px); }
h1   { font-size: clamp(22px, 4.2vw, 32px); font-weight: 800; }
h2   { font-size: clamp(18px, 3.0vw, 22px); font-weight: 800; }
h3   { font-size: clamp(16px, 2.2vw, 18px); font-weight: 700; }

/* Extra small devices (≤360px wide) */
@media (max-width: 360px) {
  h1 { font-size: 22px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
  body { font-size: 13px; }
}




/* ========== KOMISI – Grid & Kartu ========== */
.org-grid.komisi-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr)); /* 5 kolom rapi */
  gap:16px;
  align-items:stretch;
}

/* Pastikan semua kartu tingginya seragam */
.org-grid.komisi-grid .org-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  padding:16px;
  height:100%;
  min-height:220px;           /* samakan tinggi baris 1 & 2 */
  box-sizing:border-box;
}

/* Foto bulat tetap konsisten */
.org-grid.komisi-grid .org-card .photo{
  width:96px; height:96px;
  border-radius:50%;
  background-size:cover; background-position:center;
  margin:0 auto 8px;
  flex:0 0 auto;
}

/* Typo & hierarchy */
.org-grid.komisi-grid .commission{ 
  font-weight:800; text-align:center; 
}
.org-grid.komisi-grid .people{
  text-align:center; opacity:.9;
}
.org-grid.komisi-grid .people span{ font-weight:700; }

/* === Penempatan baris kedua di bawah kolom yang diinginkan === */
/* Nancy (bawah kolom 1 – Ibadah) */
.org-grid.komisi-grid .kom-nancy{ grid-column: 1; }
/* Endang (bawah kolom 3 – Perempuan & Diakonia / Rosemary) */
.org-grid.komisi-grid .kom-endang{ grid-column: 3; }
/* Oscar (bawah kolom 4 – Pemuda & Remaja / Gerard) */
.org-grid.komisi-grid .kom-oscar{ grid-column: 4; }

/* ===== Responsif supaya tidak melebar keluar ===== */
@media (max-width: 1200px){
  .org-grid.komisi-grid{ grid-template-columns: repeat(4, minmax(180px,1fr)); }
  /* fallback posisi saat kolom turun */
  .org-grid.komisi-grid .kom-nancy{ grid-column:auto; }
  .org-grid.komisi-grid .kom-endang{ grid-column:auto; }
  .org-grid.komisi-grid .kom-oscar{ grid-column:auto; }
}
@media (max-width: 992px){
  .org-grid.komisi-grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); }
}
@media (max-width: 768px){
  .org-grid.komisi-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
}
@media (max-width: 480px){
  .org-grid.komisi-grid{ grid-template-columns: 1fr; }
}



/* === THEME GELAP: kartu dan tata letak About Us (sesuai Home) === */
.page-id-65 {
  --gmii-card-bg:    #0f172a;  /* gelap elegan */
  --gmii-card-edge:  #1f2937;  /* garis pinggir */
  --gmii-card-text:  #e5e7eb;  /* teks utama */
  --gmii-card-dim:   #9ca3af;  /* teks sekunder */
  --gmii-chip-bg:    #111827;  /* node/org chip */
  --gmii-chip-edge:  #334155;
}

/* Kartu gelap serbaguna */
.page-id-65 .gmii-card,
.page-id-65 .gmii-card--dark {
  background: var(--gmii-card-bg);
  color: var(--gmii-card-text);
  border: 1px solid var(--gmii-card-edge);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  padding: 16px;
}

/* Spasi antarblok konsisten */
.page-id-65 .gmii-block {
  margin: 16px 0;
}

/* Judul di dalam kartu */
.page-id-65 .gmii-card h2,
.page-id-65 .gmii-card h3,
.page-id-65 .gmii-card h4 {
  color: var(--gmii-card-text);
  margin-top: 0;
}

/* ====== STRUKTUR ORGANISASI (org chart) ====== */
.page-id-65 .gmii-oc .oc-node,
.page-id-65 .org-grid .org-card {
  background: var(--gmii-chip-bg);
  color: var(--gmii-card-text);
  border: 1px solid var(--gmii-chip-edge);
  border-radius: 12px;
  padding: 10px;
}

.page-id-65 .gmii-oc .name { color: #f3f4f6; font-weight: 700; }
.page-id-65 .gmii-oc .role,
.page-id-65 .org-grid .role { color: var(--gmii-card-dim); }

/* Hilangkan “kotak pembungkus” abu-abu lama bila ada */
.page-id-65 .gmii-oc .oc-wrap,
.page-id-65 .org-grid { background: transparent; border: 0; }

/* ====== KOMISI grid (kartu-kartu) ====== */
.page-id-65 .komisi-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px;
}
.page-id-65 .komisi-grid .org-card { /* sudah di-style di atas */ }

/* ====== LOKASI & KONTAK + MAP: dua kolom rata ====== */
.page-id-65 .gmii-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  .page-id-65 .gmii-row-2 { grid-template-columns: 1fr 1fr; }
}

/* Kartu Lokasi & Kontak */
.page-id-65 .gmii-contact .item {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  padding: 6px 0;
  color: var(--gmii-card-text);
}
.page-id-65 .gmii-contact .item small { color: var(--gmii-card-dim); }

/* Ikon (inline SVG) mengikuti warna teks */
.page-id-65 .gmii-contact svg { width: 18px; height: 18px; display:block; fill: currentColor; }

/* Kartu Google Maps */
.page-id-65 .gmii-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 12px;
  display: block;
  filter: brightness(.98) contrast(1.03);
}




/* ============================================================
   GMII About Us (page-id-61) – Final CSS Bundle
   ============================================================ */

/* ===== Variabel warna tema ===== */
.page-id-61 {
  --gmii-card-bg:   #0f172a;
  --gmii-card-edge: #1f2937;
  --gmii-card-text: #e5e7eb;
  --gmii-card-dim:  #9ca3af;
  --gmii-chip-bg:   #111827;
  --gmii-chip-edge: #334155;
}

/* ===== Kartu gelap serbaguna ===== */
.page-id-61 .gmii-card,
.page-id-61 .gmii-card--dark {
  background: var(--gmii-card-bg);
  color: var(--gmii-card-text);
  border: 1px solid var(--gmii-card-edge);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  padding: 16px;
}
.page-id-61 .gmii-block { margin:16px 0; }
.page-id-61 .gmii-card h2,
.page-id-61 .gmii-card h3,
.page-id-61 .gmii-card h4 {
  color: var(--gmii-card-text);
  margin-top: 0;
}

/* ===== Org Chart ===== */
.page-id-61 .gmii-oc .oc-node,
.page-id-61 .org-grid .org-card {
  background: var(--gmii-chip-bg);
  color: var(--gmii-card-text);
  border: 1px solid var(--gmii-chip-edge);
  border-radius: 12px;
  padding: 10px;
}
.page-id-61 .gmii-oc .name { color:#f3f4f6; font-weight:700; }
.page-id-61 .gmii-oc .role,
.page-id-61 .org-grid .role { color: var(--gmii-card-dim); }
.page-id-61 .gmii-oc .oc-wrap,
.page-id-61 .org-grid { background:transparent; border:0; }

/* ===== Komisi (grid) ===== */
.page-id-61 .komisi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px;
}

/* ===== Lokasi & Kontak + Maps (2 kolom) ===== */
.page-id-61 .gmii-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  .page-id-61 .gmii-row-2 { grid-template-columns: 1fr 1fr; }
}

.page-id-61 .gmii-contact .item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  color: var(--gmii-card-text);
}
.page-id-61 .gmii-contact .item * { margin: 0; }

.page-id-61 .gmii-contact svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: block;
  fill: currentColor;
}
.page-id-61 .gmii-contact a {
  color: #cbd5e1;
  text-decoration: underline;
}

.page-id-61 .gmii-map iframe {
  width: 100% !important;
  height: 300px !important;
  border: 0 !important;
  border-radius: 12px;
  display: block;
  max-width: 100%;
}

/* ===== Foto / Placeholder di Org Chart & Komisi ===== */
.page-id-61 .gmii-oc .photo,
.page-id-61 .org-grid .photo,
.page-id-61 .komisi-grid .photo {
  width: 96px;        /* ubah ke 128px kalau ingin lebih besar */
  height: 96px;
  border-radius: 50%;
  background: #111 center/cover no-repeat;
  margin: 0 auto 10px;
  display: block;
}

/* ===== Hero (GMII Jemaat Imanuel Jakarta) ===== */
.page-id-61 .wp-block-media-text:first-of-type .wp-block-media-text__content .wp-block-group {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.page-id-61 .wp-block-media-text:first-of-type .wp-block-media-text__content .wp-block-group 
  :is(h1,h2,h3,h4,h5,h6,p) {
  color: #fff !important;
}



/* ==== Donasi: grid 2 kolom yang rapi dalam card gelap ==== */
.gmii-card .gmii-donasi-wrap { margin: 0; }
.gmii-card .gmii-donasi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  align-items:start;
}
@media (min-width: 900px){
  .gmii-card .gmii-donasi-grid{ grid-template-columns:1fr 1fr; }
}
.gmii-card .donasi-box{
  width:100%;
  background:#1f2937;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.gmii-card .donasi-box h3{ margin:0 0 10px; }
.gmii-card .qris-code img{
  max-width:180px; height:auto; display:block; border-radius:8px; margin-bottom:12px;
}
.gmii-card .note{ font-size:.85em; color:#9ca3af; margin-top:10px; }

/* Tombol salin sederhana */
.salin-btn{
  background:#60a5fa; color:#fff; border:none; border-radius:8px;
  padding:6px 12px; font-weight:600; cursor:pointer;
}
.salin-btn:hover{ filter:brightness(.92); }

/* Reset hitam (tetap berlaku) */
.gmii-card form button[type="reset"],
.gmii-card form input[type="reset"]{
  background:#000 !important; color:#fff !important; border:1px solid #000 !important;
  box-shadow:none !important; border-radius:12px; padding:10px 16px; font-weight:600;
}



/* === Ezra Progress (match Home look; kelas unik) === */
.ezra-progress-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .ezra-progress-grid{ grid-template-columns:1fr; } }

.ezra-progress-card,.ezra-donors-card{
  background:#0f172a; border-radius:14px; padding:18px 20px;
  box-shadow:0 6px 20px rgba(0,0,0,.22); color:#e5e7eb;
}
.ezra-progress-title,.ezra-donors-title{ margin:0 0 10px; font-size:22px; font-weight:800; color:#e5f2ff; }

.ezra-row{ display:flex; align-items:center; gap:12px; margin:8px 0 6px; }
.ezra-badge{
  display:inline-block; font-size:13px; font-weight:700;
  padding:6px 10px; border-radius:8px; color:#cbd5e1;
  background:#1f2937; border:1px solid #334155;
}
.ezra-amount{
  display:inline-block; font-size:24px; font-weight:900;
  padding:8px 12px; border-radius:10px; background:#1d4ed8; color:#fff;
}

.ezra-bar{ position:relative; height:10px; border-radius:8px; background:#334155; overflow:hidden; margin-top:4px; }
.ezra-bar .fill{ height:100%; width:0; border-radius:8px; background:#22c55e; transition:width .6s ease; }
.ezra-bar-foot{ display:flex; justify-content:flex-end; margin-top:6px; }
.ezra-percent-chip{ font-weight:800; font-size:14px; color:#f8fafc; }

.ezra-cta{ margin-top:14px; }
.ezra-cta .btn-ezra-donate{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; font-weight:800; font-size:16px;
  background:#06c982; color:#0B3B2E; box-shadow:0 8px 22px rgba(6,201,130,.25); text-decoration:none;
}
.ezra-cta .btn-ezra-donate:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Tabel donor tema gelap */
.ezra-donors-card .gmii-table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:10px; background:#0b1220; color:#e5e7eb; }
.ezra-donors-card .gmii-table thead th{ text-align:left; padding:10px 12px; font-weight:800; border-bottom:1px solid #233049; }
.ezra-donors-card .gmii-table tbody td{ padding:10px 12px; border-bottom:1px solid #182033; }
.ezra-donors-card .gmii-table tbody tr:nth-child(odd){ background:#0e1627; }