/* ==========================================================================
   Modern Theme — Font Overrides
   Replaces Ubuntu/Poppins with Inter (body) + Plus Jakarta Sans (headings)
   ========================================================================== */

/* Body — Lato */
body {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500 !important;
  color: #111111 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body p,
.rich-text,
.rich-text p,
.kode_pray_text p,
.kode_service_text p,
.kode_blog_text p {
  color: #111111 !important;
  font-weight: 500 !important;
}

/* Headings — Plus Jakarta Sans */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Navigation links */
.kode_navigation > ul > li > a,
.kode_navigation ul li a,
.dl-menuwrapper li a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}

/* Section headings */
.section_hdg h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

/* Buttons */
.medium_btn,
.small_btn,
.large_btn,
button,
input[type="submit"] {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}

/* Widget titles */
.widget_hdg h6,
.widget_hdg h5,
.widget_hdg h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

/* Banner text */
.kode_banner_text h2,
.kode_banner_text h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

/* Prayer / intro section */
.kode_pray_text h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

.kode_pray_text p {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

/* ==========================================================================
   Modern Theme — Sitewide Visual Overhaul
   CSS custom properties + section-by-section overrides
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --mt-green: #2e7d32;
  --mt-green-dark: #1b5e20;
  --mt-green-light: #4caf50;
  --mt-text: #111827;
  --mt-text-muted: #374151;
  --mt-bg-light: #f8fafc;
  --mt-bg-dark: #1a2332;
  --mt-white: #ffffff;
  --mt-border: #e2e8f0;
  --mt-radius: 10px;
  --mt-radius-sm: 6px;
  --mt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --mt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --mt-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --mt-transition: 0.3s ease;
}

/* ---------- Header top bar ---------- */
.kode_top_wrap {
  background: var(--mt-bg-dark);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.kode_top_wrap,
.kode_top_wrap a,
.kode_top_wrap li,
.kode_top_wrap p,
.kode_top_wrap span {
  color: #f1f5f9;
}

.kode_top_wrap a:hover {
  color: var(--mt-white);
}

/* ---------- Navigation ---------- */
.kode_navigation_wrap {
  border-bottom: 3px solid var(--mt-green);
  box-shadow: var(--mt-shadow-sm);
}

.kode_navigation > ul > li > a {
  letter-spacing: 0.3px;
  text-transform: none;
  font-size: 14px;
}

.kode_navigation > ul > li > a:hover,
.kode_navigation > ul > li.active > a {
  color: var(--mt-green);
}

/* Drop-down refinements */
.kode_navigation ul li ul {
  border-top: 2px solid var(--mt-green);
  border-radius: 0 0 var(--mt-radius-sm) var(--mt-radius-sm);
  box-shadow: var(--mt-shadow-md);
}

/* ---------- Section headings ---------- */
.section_hdg {
  margin-bottom: 40px;
}

/* Hide ornamental images */
.section_hdg > a > img,
.section_hdg > a:first-child {
  display: none;
}

.section_hdg h3 {
  color: var(--mt-text);
  font-size: 28px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.section_hdg h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: var(--mt-green);
  border-radius: 2px;
}

.section_hdg span {
  display: none;
}

/* ---------- Service / programme cards ---------- */
.kode_service_des {
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-sm);
  transition: transform var(--mt-transition), box-shadow var(--mt-transition);
  border: 1px solid var(--mt-border);
  background: var(--mt-white);
}

.kode_service_des figure {
  overflow: hidden;
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
}

.kode_service_des:hover {
  transform: translateY(-4px);
  box-shadow: var(--mt-shadow-lg);
}

/* Service cards without a figure — place the icon in normal flow
   so the card grows to fit it instead of it overflowing upward. */
.kode_service_des > .kode_service_text:first-child {
  padding-top: 24px;
}

.kode_service_des > .kode_service_text:first-child > span {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
}

.kode_service_text h4 {
  font-weight: 600;
  font-size: 18px;
  color: var(--mt-text);
}

.kode_service_text h4 a {
  color: var(--mt-text);
}

.kode_service_text h4 a:hover {
  color: var(--mt-green);
}

/* ---------- Prayer / intro section ---------- */
.kode_pray_wrap {
  background: var(--mt-bg-light);
}

.kode_pray_text h2 {
  font-size: 30px;
  color: var(--mt-text);
  line-height: 1.3;
}

.kode_pray_text p,
.kode_pray_text .rich-text,
.kode_pray_text .rich-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #111111;
}

/* ---------- Inner page banners ---------- */
.kode_sab_banner_wrap h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.3px;
}

/* ---------- Buttons ---------- */
.medium_btn {
  border-radius: var(--mt-radius-sm);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 12px 28px;
  transition: background var(--mt-transition), transform var(--mt-transition);
}

.medium_btn:hover {
  transform: translateY(-1px);
}

.medium_btn.background-bg-dark {
  background: var(--mt-green);
}

.medium_btn.background-bg-dark:hover {
  background: var(--mt-green-dark);
}

/* ---------- Blog / news cards ---------- */
.kode_blog_madium_wrap:not(.donations-index-page) > .container > .row {
  display: flex;
  flex-wrap: wrap;
}

.kode_blog_madium_wrap:not(.donations-index-page) > .container > .row > [class*="col-"] {
  display: flex;
}

.kode_blog_des {
  display: flex;
  flex-direction: column;
}

.kode_blog_des .kode_blog_text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kode_blog_des .kode_blog_text .medium_btn {
  margin-top: auto;
  align-self: flex-start;
}

.kode_blog_fig {
  border-radius: var(--mt-radius);
  overflow: hidden;
  border: 1px solid var(--mt-border);
}

.kode_blog_text h5 {
  font-weight: 600;
}

.kode_blog_text h5 a {
  color: var(--mt-text);
}

.kode_blog_text h5 a:hover {
  color: var(--mt-green);
}

/* ---------- Event cards ---------- */
.kode_event_des {
  border-radius: var(--mt-radius-sm);
  overflow: hidden;
  transition: box-shadow var(--mt-transition);
}

.kode_event_des:hover {
  box-shadow: var(--mt-shadow-md);
}

/* ---------- Footer ---------- */
.widget_wrap {
  background: var(--mt-bg-dark);
}

.widget_wrap .widget_hdg h6,
.widget_wrap .widget_hdg h5 {
  color: var(--mt-white);
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}

.widget_wrap .widget_hdg h6::after,
.widget_wrap .widget_hdg h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--mt-green);
}

.widget_wrap,
.widget_wrap p,
.widget_wrap li,
.widget_wrap a {
  color: #94a3b8 !important;
}

.widget_wrap a:hover {
  color: var(--mt-white) !important;
}

.widget_wrap .widget_title {
  color: var(--mt-white) !important;
}

.widget_copyright,
.widget_copyright .copyright_text p {
  color: var(--mt-white) !important;
}

/* Footer bottom / copyright */
.kode_copyright_wrap {
  background: #111827;
}

/* ---------- Pillars of Islam section ---------- */
.kode_pillars_wrap {
  background: var(--mt-bg-light);
}

.kode_pillars_item > li > a {
  transition: background var(--mt-transition), color var(--mt-transition);
}

/* ---------- Responsive overrides ---------- */

/* Tablet — 991px */
@media (max-width: 991px) {
  .section_hdg h3 {
    font-size: 24px;
  }

  .kode_pray_text h2 {
    font-size: 26px;
  }

  .kode_sab_banner_wrap h2 {
    font-size: 26px;
  }
}

/* Mobile landscape — 767px */
@media (max-width: 767px) {
  .section_hdg {
    margin-bottom: 28px;
  }

  .section_hdg h3 {
    font-size: 22px;
  }

  .kode_pray_text h2 {
    font-size: 22px;
  }

  .kode_service_des {
    margin-bottom: 20px;
  }

  .medium_btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Modern Theme — Carousel (crossfade)
   ========================================================================== */

/* Container */
.modern-carousel {
  position: relative;
  overflow: hidden;
}

.modern-carousel .carousel-slides {
  position: relative;
  width: 100%;
}

/* Each slide — stacked via absolute positioning, opacity crossfade */
.modern-carousel .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

/* First slide takes up space so the container has height */
.modern-carousel .carousel-slide:first-child {
  position: relative;
}

.modern-carousel .carousel-slide.active {
  opacity: 1;
  z-index: 1;
}

.modern-carousel .carousel-slide figure {
  margin: 0;
}

.modern-carousel .carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Arrow buttons ---------- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mt-transition), background var(--mt-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-carousel:hover .carousel-arrow {
  opacity: 1;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }

/* ---------- Bar indicators ---------- */
.carousel-indicators {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 6px;
}

.carousel-bar {
  display: block;
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background var(--mt-transition), width var(--mt-transition);
}

.carousel-bar.active {
  background: #fff;
  width: 40px;
}

/* Carousel responsive */
@media (max-width: 767px) {
  .carousel-arrow {
    opacity: 1;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }

  .carousel-bar {
    width: 22px;
    height: 3px;
  }

  .carousel-bar.active {
    width: 30px;
  }
}

/* ==========================================================================
   Modern Theme — Homepage Donation Cards
   ========================================================================== */

.donations-section {
  padding: 60px 0;
}

/* Row — equal-height cards */
.donations-section .row {
  display: flex;
  flex-wrap: wrap;
}

/* Card container */
.donation-card {
  background: var(--mt-white);
  border-radius: var(--mt-radius);
  overflow: hidden;
  box-shadow: var(--mt-shadow-sm);
  border: 1px solid var(--mt-border);
  transition: transform var(--mt-transition), box-shadow var(--mt-transition);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.donation-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mt-shadow-lg);
}

/* Card image */
.donation-card__image {
  overflow: hidden;
  line-height: 0;
}

.donation-card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.donation-card:hover .donation-card__image img {
  transform: scale(1.05);
}

/* Card body */
.donation-card__body {
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.donation-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 14px;
  color: var(--mt-text);
}

.donation-card__title a {
  color: var(--mt-text);
}

.donation-card__title a:hover {
  color: var(--mt-green);
}

/* Progress bar */
.donation-card__progress {
  margin-bottom: 16px;
}

.donation-card__progress-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.donation-card__progress-fill {
  height: 100%;
  background: var(--mt-green-light);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.donation-card__progress-text {
  font-size: 13px;
  color: var(--mt-text-muted);
  font-weight: 500;
}

/* Donate button */
.donation-card__btn {
  display: inline-block;
  padding: 10px 32px;
  font-size: 14px;
}

/* Powered by Stripe badge */
.donations-stripe-badge {
  text-align: center;
  margin-bottom: 30px;
}

.donations-stripe-badge__secure {
  font-size: 15px;
  font-weight: 500;
  color: var(--mt-text-muted);
  margin: 0;
  letter-spacing: 0.1px;
}

.donations-stripe-badge .fa-lock {
  color: var(--mt-green);
  margin-right: 6px;
}

.donations-stripe-badge .stripe-logo {
  height: 20px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Donation cards responsive — mobile */
@media (max-width: 767px) {
  .donation-card {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   Modern Theme — Mobile Responsiveness Overrides
   ========================================================================== */

/* ---------- Contact form ---------- */
.contact-form-row {
  width: 70%;
  margin: 0 auto;
}

/* ---------- Footer map ---------- */
.footer-map-container {
  max-width: 350px;
  width: 100%;
  height: 300px;
  list-style: none;
  transition: none;
  overflow: hidden;
}

/* ---------- Events list ---------- */
.kode_event_detail .kode_event_text {
  width: 420px;
}

.kode_event_detail .event_studium {
  width: 300px;
}

/* ---------- Events detail — label spans ---------- */
.event_detail_list li a span {
  width: 50%;
}

/* ---------- Services detail image ---------- */
.service-detail-img {
  float: right;
  margin: 5px 0 10px 15px;
}

/* ---------- Audio player ---------- */
.example,
.example2 {
  max-width: 100%;
  width: 100%;
}

/* ---------- Responsive — Tablet (991px) ---------- */
@media (max-width: 991px) {
  .contact-form-row {
    width: 90%;
  }
}

/* ---------- Responsive — Mobile landscape (767px) ---------- */
@media (max-width: 767px) {
  .contact-form-row {
    width: 100%;
  }

  .footer-map-container {
    max-width: 100%;
  }

  .kode_event_detail .kode_event_text {
    width: 100%;
  }

  .kode_event_detail .event_studium {
    width: 100%;
  }

  .event_detail_list li a span {
    width: auto;
    display: block;
    margin-bottom: 4px;
  }

  .service-detail-img {
    float: none;
    display: block;
    margin: 0 auto 15px;
  }

  /* Service cards — full width, bigger icons, centred */
  .kode_services_wrap .col-sm-6 {
    width: 100%;
  }

  .kode_service_des {
    text-align: center;
  }

  .kode_service_text {
    padding: 30px 20px 24px;
    text-align: center;
  }

  .kode_service_text span {
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: 0 auto 12px;
  }

  .kode_service_text span img {
    width: 100px;
    height: 100px;
  }

  .kode_service_text h4 {
    font-size: 18px;
  }

  .kode_service_text .right_arrow {
    position: static;
    display: inline-block;
    margin-top: 10px;
  }
}

/* Mobile portrait — 480px */
@media (max-width: 480px) {
  .section_hdg h3 {
    font-size: 20px;
  }

  .kode_pray_text h2 {
    font-size: 20px;
  }

  .kode_pray_text p {
    font-size: 14px;
  }

  .kode_sab_banner_wrap h2 {
    font-size: 22px;
  }
}