/* MDIX Masjid Sentosa — audit fixes (2026-10-05, design QA 2026-10-13) */

/* White "Mari Berinfak" text sat on a bright photo: darken the photo. */
.funfact-section {
  background-color: #1d2a24 !important;
  background-blend-mode: multiply;
}

/* Inner-page banner (mosque photo with bright sky): stronger overlay so the white title reads. */
.wpo-breadcumb-area:before {
  background: linear-gradient(180deg, rgba(20, 16, 8, 0.55), rgba(20, 16, 8, 0.45));
}

/* D-20: brand gold #DB9E30 is 2.35:1 on white. Same selectors as the theme, darker gold #94640F (5.14:1). */
.contact-validation-active #c-loader i,
.contact-validation-active #loader i { color: #94640F; }
.back-to-top { border-color: #94640F; }
.back-to-top:hover { background-color: #94640F; }
.section-title h2 { color: #94640F; }
.theme-btn, .view-cart-btn { background: #94640F; }
.theme-btn-s2 { border-color: #94640F; }
.form input:focus,
.form textarea:focus,
.form select:focus { border-color: #94640F; }
.social-links li a:hover { background-color: #94640F; }
.wpo-breadcumb-area .wpo-breadcumb-wrap ul li a:hover { color: #94640F; }
.blog-sidebar .widget h3:before { background-color: #94640F; }
.blog-sidebar .search-widget form button { background-color: #94640F; }
.blog-sidebar .about-widget a:hover { color: #94640F; }
.blog-sidebar .category-widget ul a:hover,
.blog-sidebar .category-widget ul li:hover:before { color: #94640F; }
.blog-sidebar .recent-post-widget .post h4 a:hover { color: #94640F; }
.blog-sidebar .tag-widget ul li a:hover { background: #94640F; }
.pagination-wrapper .pg-pagination .active a,
.pagination-wrapper .pg-pagination li a:hover { background: #94640F; border-color: #94640F; }
.topbar .contact-info ul li a:hover { color: #94640F; }
.wpo-site-header #navbar > ul li a:hover,
.wpo-site-header #navbar > ul li a:focus { color: #94640F; }
@media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li > a:before { background: #94640F; } }
@media (max-width: 991px) { .wpo-site-header #navbar ul a:hover,
  .wpo-site-header #navbar ul li.current a { color: #94640F; } }
.cart-search-contact input:focus { border-color: #94640F; }
.mini-cart .cart-count { background: #94640F; }
.mini-cart-content .mini-cart-item-des a:hover { color: #94640F; }
.header-search-area input:focus { border-color: #94640F; }
@media screen and (min-width: 992px) { .wpo-site-header #navbar > ul > li .sub-menu a:after { background: #94640F; } }
@media (max-width: 991px) { .wpo-site-header .mobail-menu button { background-color: #94640F; } }
@media (max-width: 991px) { .wpo-site-header #navbar ul a:hover,
  .wpo-site-header #navbar ul li.current a { color: #94640F; } }
.site-footer .link-widget ul li a:hover { color: #94640F; }
.site-footer .link-widget ul li a:hover::before { background: #94640F; }
.site-footer .social-widget ul li a:hover { color: #94640F; }
.site-footer .lower-footer ul li a:hover { color: #94640F; }
.pillars-wrap li.slick-active button { background-color: #94640F; }
.service-card .text a { color: #94640F; }
.event-section li.slick-active button { background-color: #94640F; }
.event-section .slick-prev:hover,
.event-section .slick-next:hover { border-color: #94640F; color: #94640F; }
.event-section .slick-prev:hover::before,
.event-section .slick-next:hover::before { color: #94640F; }
.event-date .item h2 { border-color: #94640F; }
.blog-card .contnet h2:hover a { color: #94640F; }
.blog-card .contnet a { color: #94640F; }
.blog-card .contnet a::before { background: #94640F; }
.prayertine-section .prayertine-wrap,
.prayertine-section-s2 .prayertine-wrap,
.prayertine-section-s3 .prayertine-wrap { background: #94640F; }
.service-section-s2 .service-card:hover { background: #94640F; }
.event-section-s2 .slick-prev:hover,
.event-section-s2 .slick-next:hover { border-color: #94640F; color: #94640F; }
.event-section-s2 .slick-prev:hover::before,
.event-section-s2 .slick-next:hover::before { color: #94640F; }
.event-section-s2 li.slick-active button { background-color: #94640F; }
.testimonial-section li.slick-active button { background-color: #94640F; }
.prayertine-section-s3 { background: #94640F; }
.wpo-event-details-tab .nav li a.active,
.wpo-event-details-tab .nav li:hover a { border-top-color: #94640F; }
#Schedule ul li:before { background: #94640F; }
.wpo-service-single-section .wpo-service-single-wrap .wpo-solutions-section .wpo-solutions-item .wpo-solutions-text h2 a:hover { color: #94640F; }
.wpo-single-sidebar .wpo-newsletter-widget span a:hover { color: #94640F; }
.wpo-single-sidebar .wpo-newsletter-widget .form button { background: #94640F; }
.wpo-single-sidebar .wpo-contact-widget { background: #94640F; }
.wpo-single-sidebar .wpo-contact-widget a { background: #94640F; }
.wpo-shop-section .details h3 a:hover { color: #94640F; }
.wpo-shop-section .add-to-cart a { color: #94640F; border-color: #94640F; }
.wpo-shop-section .add-to-cart a:hover { background-color: #94640F; }
.wpo-shop-section .grid:hover .add-to-cart a { background-color: #94640F; }
.wpo-shop-single-section .product-details .price { color: #94640F; }
.wpo-shop-single-section .product-details ul li:before { background: #94640F; }
.wpo-shop-single-section .product-details .product-option .product-row > div:last-child .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .product-row > div:last-child .view-cart-btn:hover { background: #94640F; border-color: #94640F; }
.wpo-shop-single-section .product-details .product-option .theme-btn:hover, .wpo-shop-single-section .product-details .product-option .view-cart-btn:hover { background-color: #94640F; border-color: #94640F; }
.wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:hover,
.wpo-shop-single-section .product-details .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover { background-color: #94640F; }
.wpo-shop-single-section .product-info .nav-tabs a:before { background: #94640F; }
.wpo-shop-single-section .product-info .nav-tabs .active,
.wpo-shop-single-section .product-info .nav-tabs li:hover { border-color: #94640F; }
.wpo-shop-single-section .product-info .client-rv .rating i { color: #94640F; }
.wpo-shop-single-section .product-info .review-form form .theme-btn-s4:hover { background-color: #94640F; }
.cart-area .cart-wrap .product a:hover { color: #94640F; }
.cart-area .cart-wrap .action a:hover { background: #94640F; }
.cart-area .cart-wrap .action li.c-btn a { background-color: #94640F; }
.cart-area .submit-btn-area button:hover { background: #94640F; }
.cart-area .cart-product-list ul li.cart-b { color: #94640F; }
.wpo-checkout-area .create-account button:hover { background: #94640F; }
.wpo-checkout-area .coupon label { border-left-color: #94640F; }
.wpo-checkout-area .s1.active-border .coupon-active label,
.wpo-checkout-area .s3.coupon-2 .coupon-3 label { border-top-color: #94640F; }
.wpo-checkout-area .s2 .coupon-3 { border-top-color: #94640F; }
.wpo-checkout-area .s2.coupon-2 .coupon-3 label { border-left-color: #94640F; }
.wpo-checkout-area .cout-order-area .oreder-item ul .o-bottom { color: #94640F; }
.wpo-donations-amount input:focus,
.wpo-donations-details input:focus,
.wpo-donations-details textarea:focus { border-color: #94640F; }
.wpo-payment-area .form-style input:focus { border-color: #94640F; }
.wpo-blog-pg-section .entry-meta ul li a:hover { color: #94640F; }
.wpo-blog-pg-section .entry-meta ul li + li:before { background: #94640F; }
.wpo-blog-pg-section .post h3 a:hover { color: #94640F; }
.wpo-blog-pg-section .post a.read-more:hover { color: #94640F; }
.wpo-blog-pg-section .format-gallery .owl-nav [class*=owl-]:hover { background: #94640F; }
.wpo-blog-pg-section .format-gallery .owl-nav [class*=owl-] { color: #94640F; }
.wpo-blog-pg-section .format-video .video-holder .fi:before { color: #94640F; }
.wpo-blog-single-section .entry-meta ul li a:hover { color: #94640F; }
.wpo-blog-single-section .entry-meta ul li + li:before { background: #94640F; }
.wpo-blog-single-section .post blockquote:before { color: #94640F; }
.wpo-blog-single-section .tag-share .tag a:hover, .wpo-blog-single-section .tag-share-s2 .tag a:hover { color: #94640F; }
.wpo-blog-single-section .author-box .social-link a:hover { color: #94640F; }
.wpo-blog-single-section .more-posts a:hover .post-control-link { color: #94640F; }
.wpo-blog-single-section .comments-area .comment-reply-link:hover { color: #94640F; }
.wpo-blog-single-section .comment-respond form input:focus,
.wpo-blog-single-section .comment-respond form textarea:focus { border-color: #94640F; }
input[type=checkbox]:checked + label:before { background-color: #94640F; border-color: #94640F; }
.forget-btn a { color: #94640F; }
.wpo-accountForm .wpo-accountBtn { border-color: #94640F; background: #94640F; }
.or span { color: #94640F; }
.subText a { color: #94640F; }
.wpo-contact-pg-section form input:focus,
.wpo-contact-pg-section form select:focus,
.wpo-contact-pg-section form textarea:focus { border-color: #94640F; }
.pf-terms-section .pf-terms-wrap .pf-terms-text ul li:before { background: #94640F; }

/* Indonesian sentences were forced into Title Case by text-transform: capitalize. */
.section-title h3,
.theme-btn,
.view-cart-btn,
.theme-btn-s2,
.blog-sidebar .widget h3,
.blog-sidebar .tag-widget ul li a,
.wpo-site-header #navbar > ul > li > a,
.wpo-site-header #navbar > ul > li a,
.wpo-site-header #navbar > ul .menu-item-has-children > a,
.static-hero .content .title,
.static-hero .content .subtitle,
.hero-slider .slide-inner .slide-content .slide-title h2,
.hero-slider .hero-inner .slide-content .slide-title h2,
.hero-slider .slide-inner .slide-content .slide-text p,
.hero-slider .hero-inner .slide-content .slide-text p,
.static-hero-s2 .content .title,
.static-hero-s2 .content .subtitle,
.site-footer .widget-title h3,
.about-section .about-bottom .call .text a,
.about-section-s2 .about-bottom .call .text a,
.about-section-s3 .about-bottom .call .text a,
.pillars-card h2,
.service-card .top-number span,
.service-card .text h2,
.funfact-content .top-content .title,
.funfact-content .top-content .sudtitle,
.funfact .item h2,
.event-wrap .content-wrap .content .title,
.blog-card .contnet h2 a,
.prayertine-section .prayertine-wrap .item h2,
.prayertine-section-s2 .prayertine-wrap .item h2,
.prayertine-section-s3 .prayertine-wrap .item h2,
.service-section-s2 .service-card .top-number span,
.service-section-s2 .service-card .image .img-title,
.event-single-card .content h2 a,
.testimonial-card .top-content .title h2,
.cart-area .submit-btn-area .theme-btn,
.cart-area .submit-btn-area .view-cart-btn,
.wpo-checkout-area .submit-btn-area .theme-btn,
.wpo-checkout-area .submit-btn-area .view-cart-btn,
.wpo-donate-header h2,
.wpo-donations-amount h2,
.wpo-donations-details h2,
.wpo-doanation-payment h2,
.wpo-blog-pg-section .post a.read-more,
.wpo-blog-single-section .tag-share-s2 .tag a,
.wpo-accountInfo .wpo-accountBtn,
.wpo-socialLoginBtn li button {
  text-transform: none;
}

/* Closed desktop submenus faded in over the banner in full-page shots (opacity transition re-runs
   when the capture resizes the page): take closed submenus out of rendering, open them on hover
   and on keyboard focus. */
@media (min-width: 992px) {
  .wpo-site-header #navbar > ul > li:not(:hover):not(:focus-within) > .sub-menu {
    display: none !important;
  }
  .wpo-site-header #navbar > ul > li:focus-within > .sub-menu {
    top: 100%;
    visibility: visible;
    opacity: 1;
  }
}

/* Touch targets: phone menu button 44px, slider dots 24px, card links 24px, footer social 44px. */
@media (max-width: 991px) {
  .wpo-site-header .mobail-menu button {
    width: 44px;
    height: 44px;
  }
}
.pillars-wrap .slick-dots li,
.event-section .slick-dots li {
  width: 24px;
  height: 24px;
  margin: 0 2px;
}
.pillars-wrap .slick-dots li button,
.event-section .slick-dots li button {
  width: 24px;
  height: 24px;
  margin: 0;
  background: transparent;
  position: relative;
}
.pillars-wrap .slick-dots li button::after,
.event-section .slick-dots li button::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(43, 17, 15, 0.18);
}
.pillars-wrap li.slick-active button,
.event-section li.slick-active button {
  background: transparent;
}
.pillars-wrap li.slick-active button::after,
.event-section li.slick-active button::after {
  background: #94640F;
}
.service-card .text a,
.blog-card .contnet > a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.site-footer .social-widget ul li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

/* Sample-data notes (prayer times, agenda, donation details). */
.mdix-sample-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}
.mdix-sample-note.s2 {
  text-align: left;
  color: #5b4a2c;
  background: #fbf3e4;
  border-left: 4px solid #94640F;
  padding: 10px 14px;
  border-radius: 6px;
}
.wpo-donate-header .mdix-sample-note.s2 {
  margin: 16px 0 0;
}
.mdix-bank-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.mdix-bank-info p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e6dcc8;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.mdix-bank-info a {
  color: #94640F;
  text-decoration: underline;
}

/* Blog: comments without stock avatars, author box shows the mosque icon. */
.wpo-blog-single-section .comments-area .comment-main-area {
  padding-left: 0;
}
.wpo-blog-single-section .author-box .author-avatar .mdix-author-icon {
  width: 100px;
  height: 100px;
  padding: 18px;
  border-radius: 50%;
  background: #fbf3e4;
  object-fit: contain;
}
.wpo-blog-single-section .author-box .author-name {
  display: inline-block;
}

/* ---- Design QA 2026-10-13, resume round 1 ---- */

/* AA: theme body grey #687693 is 4.33:1 on the #f9f9f9 quote/sidebar boxes → #5d6a86 (5.15:1). */
body, p { color: #5d6a86; }

/* Footer links were 20–23px tall: give every footer text link a 24px target. */
.site-footer .link-widget ul li a,
.site-footer .lower-footer ul li a,
.site-footer .lower-footer .copyright a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
/* Footer social icons (44px) wrapped to two rows at 992–1199px: flex row with a small gap. */
.site-footer .social-widget ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
}
.site-footer .social-widget ul li { margin: 0; }

/* About block: at 992–1399px the button wrapped to two lines and the phone number split. */
.about-section .about-bottom,
.about-section-s2 .about-bottom,
.about-section-s3 .about-bottom { flex-wrap: wrap; row-gap: 16px; }
.about-section .about-bottom .theme-btn,
.about-section .about-bottom .call .text a,
.about-section-s2 .about-bottom .theme-btn,
.about-section-s2 .about-bottom .call .text a { white-space: nowrap; }
/* about-2 photo was squeezed at 768 (natural 350x480 shown 300x377). */
.about-section .left-img .about-2 img,
.about-section-s2 .left-img .about-2 img,
.about-section-s3 .left-img .about-2 img { object-fit: cover; }

/* Blog comment button: "Kirim Komentar" overflowed its 180px pill. */
.wpo-blog-single-section .comment-respond .form-submit input {
  max-width: none;
  width: auto;
  padding: 0 28px;
  min-height: 48px;
  letter-spacing: 1px;
}

/* Donate form: the program select looked like a different control (short, dark border). */
.wpo-donations-details select.form-control {
  height: 50px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  padding-left: 15px;
  color: #525252;
  margin-bottom: 30px;
  box-shadow: none;
}
.wpo-donations-details select.form-control:focus { border-color: #94640F; }
.wpo-payment-select ul { flex-wrap: wrap; gap: 8px 24px; padding-left: 0; }
.wpo-payment-select ul li { margin-right: 0; }
.wpo-payment-select label { font-size: 16px; }

/* Contact info cards: equal height. */
@media (min-width: 768px) {
  .wpo-contact-pg-section .office-info .row > .col { display: flex; flex-direction: column; }
  .wpo-contact-pg-section .office-info .office-info-item { flex: 1 1 auto; }
}

/* Inner-page text links under 24px tall (service titles, meta, read more, share, reply, contact). */
.wpo-service-single-section .wpo-solutions-section .wpo-solutions-item .wpo-solutions-text h2 a,
.wpo-single-sidebar .wpo-newsletter-widget span a,
.wpo-blog-pg-section .entry-meta ul li a,
.wpo-blog-single-section .entry-meta ul li a,
.wpo-blog-pg-section .post a.read-more,
.wpo-blog-single-section .tag-share-s2 ul li a,
.wpo-blog-single-section .tag-share ul li a,
.wpo-blog-single-section .comments-area .comment-reply-link,
.wpo-contact-pg-section .office-info .office-info-item .office-info-text p a {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  line-height: 24px;
  text-align: center;
}