/*
Theme Name: Hueman Child Munkaha
Theme URI: https://munkaha.com/
Description: Tema anak Hueman untuk Munkaha Islamic Study. Palet hijau zamrud dan emas antik sesuai logo resmi, tata letak teks bersih tanpa gambar utama kosong, borderless card modern.
Author: InerServe
Template: hueman
Version: 1.7.3
Text Domain: hueman-child-munkaha
*/

:root {
  --mk-green-dark: #0A4725;
  --mk-green: #0F4C29;
  --mk-green-light: #185E35;
  --mk-gold-dark: #BE8D22;
  --mk-gold: #C89629;
  --mk-gold-light: #D1AD59;
  --mk-bg: #F4F6F3;
  --mk-surface: #FFFFFF;
  --mk-text: #1A241E;
  --mk-text-muted: #526357;
  --mk-gold-gradient: linear-gradient(135deg, #BE8D22 0%, #D1AD59 50%, #C89629 100%);
  --mk-green-gradient: linear-gradient(135deg, #0A4725 0%, #0F4C29 60%, #185E35 100%);
}

body {
  background-color: var(--mk-bg) !important;
  color: var(--mk-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

#header {
  background: #FFFFFF !important;
  border-bottom: 3px solid transparent !important;
  border-image: var(--mk-gold-gradient) 1 !important;
  box-shadow: 0 4px 16px rgba(15, 76, 41, 0.05) !important;
}

#nav-topbar.nav-container, 
#nav-header.nav-container {
  background: var(--mk-green-gradient) !important;
}

.nav-wrap .nav li a {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.nav-wrap .nav li a:hover,
.nav-wrap .nav li.current-menu-item > a {
  color: var(--mk-gold-light) !important;
  background: rgba(0, 0, 0, 0.15) !important;
}

/* 1. Sembunyikan Featured / Hero Post besar */
.featured,
.featured article,
.featured .post-inner {
  display: none !important;
}

/* 2. Sembunyikan semua thumbnail/placeholder gambar di beranda dan arsip */
.post-thumbnail,
.featured-img-thumb-xlarge,
.hu-svg-placeholder,
.hu-img-placeholder,
.thumb-medium-empty {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* 3. Page Title / Kategori Header */
.page-title {
  border-left: 4px solid var(--mk-gold) !important;
  background: transparent !important;
  padding: 0.5rem 0 0.5rem 0.75rem !important;
  margin-bottom: 1rem !important;
}

.page-title h2,
.page-title h1 {
  color: var(--mk-green-dark) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}

.page-title span {
  color: var(--mk-gold-dark) !important;
}

/* 4. Grid Beranda & Arsip: Card Bersih Tanpa Garis (Borderless) */
.post-list .post-row {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 14px !important;
  border: none !important;
  display: flex !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.archive .post, 
.blog .post, 
.search .grid-item, 
.search .post,
.post-list .grid-item,
.post-list .post {
  margin-bottom: 0 !important;
  width: calc(50% - 7px) !important;
  float: none !important;
  box-sizing: border-box !important;
  display: flex !important;
}

/* Kartu Tanpa Garis: Soft Shadow + Radius Halus */
.post-list .post-inner {
  margin-right: 0 !important;
  width: 100% !important;
  background: var(--mk-surface) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 76, 41, 0.05) !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
}

.post-list .post-inner:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(15, 76, 41, 0.1) !important;
}

@media (max-width: 768px) {
  .post-list .post-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .archive .post, 
  .blog .post, 
  .post-list .grid-item,
  .post-list .post {
    width: 100% !important;
  }
}

/* 5. Typography */
.post-title {
  margin: 0 0 6px 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

.post-title a {
  color: var(--mk-green-dark) !important;
  text-decoration: none !important;
}

.post-title a:hover {
  color: var(--mk-gold) !important;
}

.post-meta {
  font-size: 0.75rem !important;
  margin-bottom: 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

.post-category a {
  color: var(--mk-gold-dark) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.post-date time {
  color: var(--mk-text-muted) !important;
}

.entry.excerpt {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mk-text-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

.entry.excerpt p {
  margin-bottom: 0 !important;
}

/* 6. Sidebar & Widget (Tanpa Border Kaku) */
.sidebar .sidebar-top {
  background: var(--mk-green) !important;
}

.sidebar .widget {
  background: var(--mk-surface) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 76, 41, 0.04) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}

.widget-title {
  border-left: 4px solid var(--mk-gold) !important;
  color: var(--mk-green-dark) !important;
  font-weight: 700 !important;
  padding-left: 6px !important;
  margin-bottom: 10px !important;
  font-size: 0.95rem !important;
}

/* 7. Kutipan Bahasa Arab */
.arab, [lang="ar"], [dir="rtl"] {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif !important;
  font-size: 1.5rem !important;
  line-height: 2 !important;
  direction: rtl !important;
  text-align: right !important;
  color: var(--mk-green-dark) !important;
  background: #F4F8F5 !important;
  border-right: 4px solid var(--mk-gold) !important;
  border-left: none !important;
  padding: 10px 14px !important;
  border-radius: 6px 0 0 6px !important;
  display: block !important;
  margin: 1rem 0 !important;
}

/* 8. Tombol & Footer */
button, input[type="submit"], .themeform button, .search-form input[type="submit"], #searchsubmit {
  background: var(--mk-green-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
}

button:hover, input[type="submit"]:hover {
  background: var(--mk-gold-gradient) !important;
  color: var(--mk-green-dark) !important;
}

#footer, #footer-bottom {
  background: var(--mk-green-gradient) !important;
  color: #E2EFE7 !important;
  border-top: 3px solid var(--mk-gold) !important;
}

#footer a, #footer-bottom a {
  color: var(--mk-gold-light) !important;
}

/* ===== v1.6.0 ===== */
/* Badge kategori */
.post-category a {
  display: inline-block !important;
  background: #EAF2EC !important;
  color: var(--mk-green) !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
}
.post-category a:hover { background: var(--mk-gold) !important; color: #fff !important; }
.post-meta { font-size: 0.8rem !important; }

/* Cuplikan 3 baris, kartu rata tinggi */
.entry.excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
.entry.excerpt a.mk-more { display: none !important; }
.post-list .post-inner { position: relative !important; }
.post-list .post-inner::after {
  content: "Baca \2192";
  margin-top: auto;
  padding-top: 10px;
  color: var(--mk-gold-dark);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Navbar: garis emas pada menu aktif/hover */
.nav-wrap .nav > li > a { border-bottom: 3px solid transparent !important; }
.nav-wrap .nav > li > a:hover,
.nav-wrap .nav > li.current-menu-item > a,
.nav-wrap .nav > li.current-menu-ancestor > a { border-bottom-color: var(--mk-gold-light) !important; }

/* Tagline beranda */
body.home .page-title h2::after {
  content: "Kajian tafsir dan ilmu keislaman";
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mk-text-muted);
}

/* Sidebar: pencarian dan kategori di atas, bendera dirapatkan, widget Meta (login) disembunyikan */
.sidebar-top, .sidebar-content { display: flex; flex-direction: column; }
.sidebar .widget_search { order: -3; }
.sidebar .widget_categories { order: -2; }
.sidebar .widget_text { order: -1; }
.sidebar .widget_glt_widget { order: 5; }
.sidebar .widget_meta { display: none !important; }
#flags ul { display: flex !important; flex-wrap: wrap; gap: 4px; float: none !important; margin: 0; padding: 0; }
#flags ul li { float: none !important; }

/* ===== v1.6.1 ===== */
/* Seluruh kartu bisa diklik (stretched link), "Baca ->" ikut menjadi area klik */
.post-list .post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-list .post-inner:hover::after { text-decoration: underline; }
.post-list .post-category a { position: relative; z-index: 2; }
.post-list .post-inner { cursor: pointer; }

/* Translate di header kanan atas */
#header .central-header-zone { position: relative; }
#mk-translate {
  position: absolute; top: 8px; right: 20px; z-index: 50;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; max-width: 340px;
}
#mk-translate .widget-title { display: none !important; }
#mk-translate #flags ul { justify-content: flex-end; gap: 3px; }
#mk-translate #flags { margin: 0; }
#mk-translate .goog-te-gadget, #mk-translate #google_language_translator { display: none; }

/* ===== v1.6.2 ===== */
@media (max-width: 719px) { #mk-translate { position: static !important; max-width: none; } }

/* ===== v1.6.3 ===== */
/* Kategori: daftar 54 item dibatasi tinggi, scroll internal */
.sidebar .widget_categories ul { max-height: 300px; overflow-y: auto; margin: 0; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--mk-gold) transparent; }
.sidebar .widget_categories li { padding: 3px 0 !important; }
@media (max-width: 719px) { .sidebar .widget_categories ul { max-height: 220px; } }

/* Kartu lebih rapat di dasar */
.post-list .post-inner { padding: 14px 18px 12px !important; }
.post-list .post-inner::after { padding-top: 6px !important; }
.post-meta { margin-bottom: 4px !important; }

/* ===== v1.6.4: widget Ikuti ===== */
.sidebar .sidebar-top {
  order: -5 !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  background: var(--mk-green-gradient) !important;
  border-bottom: 3px solid var(--mk-gold) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important; margin: 0 0 14px 0 !important;
  min-height: 0 !important; height: auto !important;
  box-shadow: 0 2px 8px rgba(15, 76, 41, 0.12) !important;
}
.sidebar .sidebar-top p {
  float: none !important; margin: 0 !important; padding: 0 !important;
  line-height: 1.2 !important; color: #FFFFFF !important;
  font-weight: 700 !important; font-size: 0.95rem !important; letter-spacing: 0.3px;
}
.sidebar .sidebar-top .social-links { float: none !important; display: flex !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.sidebar .sidebar-top .social-links li { float: none !important; margin: 0 !important; padding: 0 !important; }
.sidebar .sidebar-top .social-links a {
  width: 34px !important; height: 34px !important; line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; background: rgba(255,255,255,0.14) !important;
  color: #FFFFFF !important; font-size: 1rem !important; opacity: 1 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.sidebar .sidebar-top .social-links a:hover { background: var(--mk-gold) !important; transform: translateY(-2px); }
.sidebar .sidebar-top .social-links a:focus-visible { outline: 2px solid var(--mk-gold-light); outline-offset: 2px; }

/* ===== v1.6.7: Header kompak & proporsional + cegah #page menimpa widget Ikuti ===== */
#header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  border-image: none !important;
}
#header > .container,
#header .container-inner {
  padding: 0 !important;
}
#page {
  margin-top: 0 !important;
  padding-top: 16px !important;
}
#nav-header.nav-container {
  border-bottom: 3px solid var(--mk-gold) !important;
}
#glt-translate-trigger {
  display: none !important;
}
@media (min-width: 720px) {
  #header .central-header-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 24px !important;
    min-height: 0 !important;
  }
  #header .central-header-zone::before,
  #header .central-header-zone::after {
    display: none !important;
    content: none !important;
  }
  #header .logo-tagline-group {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .site-description {
    display: none !important;
  }
  #header .site-title {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    line-height: 1 !important;
  }
  #header .site-title a {
    display: inline-flex !important;
    align-items: center !important;
  }
  #header .site-title a img {
    max-height: 56px !important;
    width: auto !important;
    margin: 0 !important;
  }
  #mk-translate {
    position: static !important;
    margin: 0 0 0 auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    background: #F4F6F3 !important;
    border: 1px solid rgba(15, 76, 41, 0.12) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
  }
  #mk-translate #flags {
    width: auto !important;
    margin: 0 !important;
  }
  #mk-translate #flags ul {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mk-translate #flags ul li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }
  #mk-translate #flags a {
    display: inline-block !important;
    line-height: 0 !important;
    margin: 0 !important;
  }
  #nav-header .nav {
    display: flex !important;
    align-items: center !important;
  }
  #nav-header .nav > li {
    float: none !important;
  }
}

/* Widget Jadwal Shalat: lebih tinggi secara vertikal dan penuh proporsional */
#custom_html-2 .custom-html-widget {
  display: flex !important;
  justify-content: center !important;
}
#custom_html-2 iframe {
  width: 100% !important;
  max-width: 280px !important;
  height: 280px !important;
  min-height: 280px !important;
  border: none !important;
  display: block !important;
}

/* ===== v1.7.2: Tombol LOGIN di kanan atas semua header (desktop, sticky navbar, & mobile) ===== */
#mk-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
.mk-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: var(--mk-green-gradient) !important;
  color: #FFFFFF !important;
  font-family: var(--mk-font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--mk-gold) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 6px rgba(15, 76, 41, 0.18) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  white-space: nowrap !important;
}
.mk-login-btn:hover {
  background: var(--mk-gold) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.mk-login-btn i {
  font-size: 0.8rem !important;
  color: var(--mk-gold-light) !important;
}
.mk-login-btn:hover i {
  color: #FFFFFF !important;
}
/* Di header mobile (#nav-mobile): tampil di sebelah kiri ikon hamburger di kanan atas */
#nav-mobile #mk-mobile-login {
  position: absolute !important;
  top: 50% !important;
  right: 58px !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  background: var(--mk-gold) !important;
  border: 1.5px solid #FFFFFF !important;
  padding: 4px 11px !important;
  font-size: 0.72rem !important;
}
#nav-mobile #mk-mobile-login i {
  color: #FFFFFF !important;
}