/* MDIX audit — template-specific fixes (mdix-donasi-prima). */

/* On narrow screens the hero text sits over the dark part of the background photo;
   give it a light panel so the navy heading and body copy stay readable. */
@media (max-width: 991px) {
  .banner-section .banner-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
  }
}

/* ---------- design-qa 2026-10-13 ---------- */
:root {
  --mdix-red: #cc3328;   /* theme red #ee463b darkened for AA with white text (D-20) */
  --mdix-teal: #2a7678;  /* theme teal #6abcbe as text on light backgrounds */
  --mdix-gold: #8a6a00;  /* theme yellow #ffc600 as text on light backgrounds */
  --mdix-navy: #0e2c53;
}

/* Phone/tablet menu: every item reachable (theme fixed it at 250px tall),
   closed menu hidden from keyboard and screen readers, 44px toggles. */
@media (max-width: 991px) {
  .menu { height: auto; max-height: calc(100vh - 140px); overflow-y: auto; }
  .menu:not(.active) { visibility: hidden; }
  .menu.active { visibility: visible; }
  .header-bar { width: 44px; height: 44px; flex: 0 0 44px; }
  .header-bar span { left: 10px !important; width: 24px !important; height: 2px !important; bottom: auto !important; }
  .header-bar span:first-child { top: 14px !important; }
  .header-bar span:nth-child(2) { top: 21px !important; transform: none !important; }
  .header-bar span:last-child { top: 28px !important; }
  .header-bar.active span:first-child { top: 21px !important; transform: rotate(45deg) !important; }
  .header-bar.active span:last-child { top: 21px !important; transform: rotate(-45deg) !important; }
  .header-wrapper .menu-area .ellepsis-bar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; cursor: pointer; }
  /* Home page: the logo sat behind the "..." button on phones. Keep the logo bar
     visible; the contact list is repeated in the footer. */
  header.header-1:not(.header-fixed) .header-top { display: block !important; height: auto !important; padding: 10px 0; }
  header.header-1 .header-top .ht-left { display: none; }
  header.header-1 .header-bottom .ellepsis-bar { display: none !important; }
  header.header-1 .header-top .logo img { width: auto; max-width: 220px; }
}

/* Contrast (AA): home header contact lines on white */
header.header-1 .header-top .ht-left ul li:nth-of-type(3n+1) .ht-add-content span:last-child { color: var(--mdix-red); }
header.header-1 .header-top .ht-left ul li:nth-of-type(3n+2) .ht-add-content span:last-child { color: var(--mdix-teal); }
header.header-1 .header-top .ht-left ul li:nth-of-type(3n+3) .ht-add-content span:last-child { color: var(--mdix-gold); }
/* service labels (one has an inline yellow colour) */
.feature-item .feature-inner .feature-content .cate { color: var(--mdix-gold) !important; }
div[class*=col]:nth-of-type(4n + 2) .feature-item .feature-inner .feature-content .cate { color: var(--mdix-teal) !important; }
div[class*=col]:nth-of-type(4n + 3) .feature-item .feature-inner .feature-content .cate { color: #92278f !important; }
div[class*=col]:nth-of-type(4n + 4) .feature-item .feature-inner .feature-content .cate { color: var(--mdix-red) !important; }
/* light-background text in the secondary brand colours */
.theme-three { color: var(--mdix-teal) !important; }
.theme-four { color: var(--mdix-gold) !important; }
.theme-five { color: #5a7516 !important; }
/* yellow / teal / green buttons keep their colour, text turns navy */
.theme-three-bg, .theme-four-bg, .theme-five-bg,
.theme-three-bg span, .theme-four-bg span, .theme-five-bg span,
.theme-three-bg i, .theme-four-bg i, .theme-five-bg i { color: var(--mdix-navy) !important; }

/* "Data contoh" badge on donation cards (D-22: totals are sample data) */
.causes-thumb { position: relative; }
.mdix-sample {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(14, 44, 83, 0.88); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  padding: 6px 10px; border-radius: 3px; pointer-events: none;
}
.mdix-sample-caption { margin: 30px 0 0; text-align: center; color: #fff; font-size: 14px; opacity: .9; }
.mdix-pay-note { font-size: 14px; color: var(--mdix-navy); font-weight: 500; }

/* events detail: photo fills its column */
.event-thumb img { width: 100%; height: auto; }

/* ---- theme red #ee463b -> #cc3328 (generated from main.css selectors) ---- */
.theme-two{color:#cc3328 !important}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{color:#cc3328}
.section-header .cate{color:#cc3328}
@media (min-width: 992px){.section-header.style-2 .sh-bottom .custom-button{color:#cc3328}}
.default-pagination li a:hover, .default-pagination li a.active{background:#cc3328}
.footer-bottom p a{color:#cc3328}
.footer-form button{background:#cc3328}
@media (min-width: 992px){header.header-1, header.header-3{background:#cc3328}}
header.header-1 .header-top .ht-left ul li:nth-of-type(3n+1) .ht-add-content span:last-child{color:#cc3328}
header.header-1 .header-bottom{background:#cc3328}
.header-top{background:#cc3328}
.header-wrapper .menu-area .cart-button a .cart-amount{background:#cc3328}
@media (min-width: 992px){.menu li .submenu li a:hover, .menu li .submenu li a.active{background:#cc3328}}
@media (max-width: 991px){.menu li .submenu li a.active{background:#cc3328}}
.header-form .bg-lay .cross{background:#cc3328}
.header-form .form-container button{background:#cc3328}
.banner-content{background:#cc3328}
.widget.widget-post ul li .content a:hover{color:#cc3328}
.widget.widget-category ul li a:hover, .widget.widget-archive ul li a:hover{color:#cc3328}
.widget.widget-category ul li a:hover{color:#cc3328}
.widget.widget-category ul li a:hover span:last-child{background:#cc3328}
.widget.widget-product .widget-body ul li:hover .product-content h6 a{color:#cc3328}
.gallery-item .gallery-content .title{color:#cc3328}
.filter-2 li.active::after{background:#cc3328}
.filter-2 li.active .category{color:#cc3328}
.gallery-item-3 .gallery-content .img-pop{background:#cc3328}
.meta-post li a:hover{color:#cc3328}
.single-quote{background:#cc3328}
.tags li a:hover, .tags li a.active{background:#cc3328;border-color:#cc3328}
.filter li{color:#cc3328}
.filter li.active{color:#cc3328}
.about-section .about-content-part .acp-content .cate{color:#cc3328}
.volunteer-item .volunteer-inner .volunteer-thumb::before{background:#cc3328}
.schedule-item-2 li .title.painting{color:#cc3328}
.side-sidebar-close-btn{color:#cc3328}
.single-product-item .content .price{color:#cc3328}
.single-product-item .content .remove-cart{background-color:#cc3328}
div[class*=col]:nth-of-type(3n + 2) .volunteer-item-2 .vol-pro{color:#cc3328}
.feature-section.style-3 .feature-item .feature-inner .feature-content .text-btn{color:#cc3328}
div[class*=col]:nth-of-type(4n + 4) .feature-item .feature-inner .feature-content .cate{color:#cc3328}
.contact-wrapper .contact-item a:hover{color:#cc3328}
.right-icon{background:#cc3328}
.faq-item.open .title{color:#cc3328}
.page-header-content .breadcrumb li a:hover{color:#cc3328}
.event-item .event-inner .event-content .ec-left ul.eventdate li:first-child{background:#cc3328}
.event-item .event-inner .event-content .ec-left ul.eventdate li:first-child::after{background:#cc3328}
.countdown li:nth-of-type(4n + 2)::after{background:#cc3328}
.or{background:#cc3328}
.or::before, .or::after{background:#cc3328}
.cart-top table thead tr th{background:#cc3328}
.product-item-2 .p-content a:hover{color:#cc3328}
.coupon-area .coupon input[type=submit]{background:#cc3328}
.cart-overview ul li .pull-right{color:#cc3328}
.cart-plus-minus .qtybutton:hover{background:#cc3328}
.shop-title .product-view-mode a.active{color:#cc3328}
.shop-item:hover .product-content .title a, .product-list-item:hover .product-content .title a{color:#cc3328}
.shop-item .product-thumb .product-action-link a, .product-list-item .product-thumb .product-action-link a{background:#cc3328}
.product-details .product-single-content .size-form .cart-plus-minus .qtybutton:hover{background:#cc3328;border-color:#cc3328}
.review-nav li{background:#cc3328}
.coming-countdown li .days_text, .coming-countdown li .days{color:#cc3328}
.causes-section.style-2 .section-header .causes-nav:hover, .causes-section.style-2 .section-header .causes-nav.active{background:#cc3328}
.causes-item .causes-inner .causes-content .causes-catagiry{color:#cc3328}
.causes-item .causes-inner .causes-content blockquote::after{background:#cc3328}
.causes-item .causes-inner .causes-content blockquote span{color:#cc3328}
.causes-item .causes-inner .causes-content .con-thumb .left-part h4{color:#cc3328}
.causes-progress .causes-pro-left h6 span{color:#cc3328}
.causes-progress .causes-pro-right h6 span{color:#cc3328}
.donate-amount .custom-donate span span{background:#cc3328}
.donate-amount ul li:hover{color:#cc3328;border-color:#cc3328}
.donate-amount ul li:hover:after{background:#cc3328}
.donate-amount ul li:hover:before{border-color:#cc3328}
.donate-amount ul li.active{background:#cc3328;border-color:#cc3328}
.donate-amount .amount-notifications p span{background:#cc3328}
.donate-amount .personal-info .total-donate{color:#cc3328}
.clients-section .section-wrapper .clents-left{background:#cc3328}
.clients-section .section-wrapper .clents-left .cl-content-area .cl-content .custom-button{color:#cc3328}
.clients-section .section-wrapper .clents-right .cr-head .clients-prev, .clients-section .section-wrapper .clents-right .cr-head .clients-next{background:#cc3328}
.clients-section .section-wrapper .clents-right .cr-head .clients-prev.active:hover, .clients-section .section-wrapper .clents-right .cr-head .clients-next.active:hover{background:#cc3328}
.clients-section.volunteer .section-wrapper .clents-left .cl-content-area .cl-content .cate{color:#cc3328}
.clients-section.volunteer .section-wrapper .clents-left .cl-content-area .cl-content .custom-button{background:#cc3328}
.clients-section.causes .cr-body .causes-item .causes-inner .causes-thumb .campaign-item ul li span{color:#cc3328}
.clients-item .clients-inner .clients-review .cr-top{background:#cc3328}
.project-item .project-inner .project-content .project-icon{background:#cc3328}
.project-item.style-2 .project-inner .project-content{background:#cc3328}
.project-item.style-2 .project-inner .project-content .project-icon{background:#cc3328}
.urgent-campaign-section .section-header .cate{color:#cc3328}
.campaign-item .campaign .campaign-bar{background:#cc3328}
.campaign-item .campaign .campaign-bar-percent{background:#cc3328}
.campaign-item .campaign .campaign-bar-percent:after{background:#cc3328}
.post-item .post-content .post-top .post-by{color:#cc3328}
.post-item .post-content .post-top .post-meta a i{color:#cc3328}
.post-item .post-content .post-bottom .read:hover{color:#cc3328}
.post-item .post-content .post-bottom .comments .comment-number:hover{color:#cc3328}
.double-cost{background:#cc3328}
.post-next.active, .post-next:hover, .post-prev.active, .post-prev:hover{background:#cc3328}
.comment-item .comment-content .comment-header .reply{color:#cc3328}
.video-button{color:#cc3328}
.overlayer{background:#cc3328}
.scrollToTop{background:#cc3328}
.custom-button{background:#cc3328}
.theme-two{color:#cc3328 !important}
.theme-two-bg{background:#cc3328 !important}

/* ---- secondary colours in repeated cards/countdowns, darkened to AA (generated) ---- */
div[class*=col]:nth-of-type(6n + 3) .gallery-item .gallery-content .title{color:#477d7f}
div[class*=col]:nth-of-type(6n + 4) .gallery-item .gallery-content .title{color:#8e6e00}
div[class*=col]:nth-of-type(6n + 5) .gallery-item .gallery-content .title{color:#637d1d}
.filter li:nth-of-type(6n + 3){color:#477d7f}
.filter li:nth-of-type(6n + 4){color:#8e6e00}
.filter li:nth-of-type(6n + 5){color:#637d1d}
div[class*=col]:nth-of-type(3n + 2) .volunteer-item-2 .vol-pro{color:#d33e34}
div[class*=col]:nth-of-type(3n + 3) .volunteer-item-2 .vol-pro{color:#477d7f}
.events-section div[class*=col]:nth-of-type(6n + 3) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child, .events-section div[class*=col]:nth-of-type(6n + 3) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child::after, .events-section div[class*=col]:nth-of-type(6n + 3) .custom-button{background:#477d7f}
.events-section div[class*=col]:nth-of-type(6n + 4) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child, .events-section div[class*=col]:nth-of-type(6n + 4) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child::after, .events-section div[class*=col]:nth-of-type(6n + 4) .custom-button{background:#8e6e00}
.events-section div[class*=col]:nth-of-type(6n + 5) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child, .events-section div[class*=col]:nth-of-type(6n + 5) .event-item .event-inner .event-content .ec-left ul.eventdate li:first-child::after, .events-section div[class*=col]:nth-of-type(6n + 5) .custom-button{background:#637d1d}
.event-item .event-inner .event-content .ec-left ul.eventdate li:first-child{background:#d33e34}
.event-item .event-inner .event-content .ec-left ul.eventdate li:first-child::after{background:#d33e34}
.coming-countdown li .days_text, .coming-countdown li .days{color:#d33e34}
.coming-countdown li .seco_text, .coming-countdown li .seconds{color:#8e6e00}
.causes-section div[class*=col]:nth-of-type(9n + 3) .custom-button{background:#477d7f}
.causes-section div[class*=col]:nth-of-type(9n + 3) .causes-item .causes-inner .causes-content .causes-catagiry, .causes-section div[class*=col]:nth-of-type(9n + 3) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-left h6 span, .causes-section div[class*=col]:nth-of-type(9n + 3) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-right h6 span{color:#477d7f}
.causes-section div[class*=col]:nth-of-type(9n + 4) .custom-button{background:#8e6e00}
.causes-section div[class*=col]:nth-of-type(9n + 4) .causes-item .causes-inner .causes-content .causes-catagiry, .causes-section div[class*=col]:nth-of-type(9n + 4) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-left h6 span, .causes-section div[class*=col]:nth-of-type(9n + 4) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-right h6 span{color:#8e6e00}
.causes-section div[class*=col]:nth-of-type(9n + 5) .custom-button{background:#637d1d}
.causes-section div[class*=col]:nth-of-type(9n + 5) .causes-item .causes-inner .causes-content .causes-catagiry, .causes-section div[class*=col]:nth-of-type(9n + 5) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-left h6 span, .causes-section div[class*=col]:nth-of-type(9n + 5) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-right h6 span{color:#637d1d}
.causes-section div[class*=col]:nth-of-type(9n + 8) .custom-button{background:#008284}
.causes-section div[class*=col]:nth-of-type(9n + 8) .causes-item .causes-inner .causes-content .causes-catagiry, .causes-section div[class*=col]:nth-of-type(9n + 8) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-left h6 span, .causes-section div[class*=col]:nth-of-type(9n + 8) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-right h6 span{color:#008284}
.causes-section div[class*=col]:nth-of-type(9n + 9) .custom-button{background:#c54c39}
.causes-section div[class*=col]:nth-of-type(9n + 9) .causes-item .causes-inner .causes-content .causes-catagiry, .causes-section div[class*=col]:nth-of-type(9n + 9) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-left h6 span, .causes-section div[class*=col]:nth-of-type(9n + 9) .causes-item .causes-inner .causes-thumb .causes-progress .causes-pro-right h6 span{color:#c54c39}
div[class*=col]:nth-of-type(3n+3) .post-top .post-by{color:#477d7f}
/* text links */
.account-form a, .account-section a.d-inline-block, .d-block a { color: #0056b3; }
.clients-section .section-wrapper .clents-right .cr-head p { color: #5c5c5c; }
/* coming soon: theme turns the title white below 1200px although the page stays light */
.coming-wrapper .coming-soon-title { color: #1b3099; }
.coming-countdown li .days_text, .coming-countdown li .days { color: #c4302a; }
/* counters: keep white numbers readable over the light rice-field photo */
.counter-section.bg_img { box-shadow: inset 0 0 0 4000px rgba(14, 44, 83, 0.55); }

/* touch targets (24px minimum, WCAG 2.5.8) */
.clients-slider2 .slick-dots li { width: 24px; height: 24px; margin: 0; }
.clients-slider2 .slick-dots li button { width: 24px; height: 24px; padding: 0; font-size: 0; background: transparent !important; border-radius: 0; position: relative; }
.clients-slider2 .slick-dots li button::after { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.clients-slider2 .slick-dots li.slick-active button::after { background: #ffc600; }
.volunteer-social li a { display: inline-block; min-width: 24px; min-height: 24px; text-align: center; }
header.header-1 .header-bottom .header-wrapper .menu-area .search-button button { width: 32px; height: 32px; right: 6px; }
.single-product-item .content .remove-cart { font-size: 12px; }

/* events detail countdown: real background colours (white text needs AA) */
.countdown li { background: #92278f; }
.countdown li:nth-of-type(4n + 2), .countdown li:nth-of-type(4n + 2)::after { background: #cc3328; }
.countdown li:nth-of-type(4n + 3), .countdown li:nth-of-type(4n + 3)::after { background: #2a7678; }
.countdown li:nth-of-type(4n + 4), .countdown li:nth-of-type(4n + 4)::after { background: #8a6a00; }

/* decorative faded background: keep proportions */
img[src$="bg-shape2.png"] { object-fit: cover; }

/* about block on the home/about page: white text sits on the red photo panel
   (theme .bg-shape image); red fallback if the photo does not load */
.feature-section.style-2 .bg-shape { background-color: #cc3328; }
@media (min-width: 992px) {
  .feature-section.style-2 .section-header.style-2 { background-image: linear-gradient(transparent, transparent); }
}
.header-wrapper .menu-area .search-button > a,
.header-wrapper .menu-area .cart-button > a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.shop-item .product-content .title a, .product-list-item .product-content .title a,
.widget-product .product-content h6 a, .comment-item .title a { display: inline-block; padding: 2px 0; }
.shop-title .product-view-mode a { display: inline-block; min-width: 24px; text-align: center; }
.profile-details .social-icons a, .volunteer-single-section .social-icons a, ul.social-icons li a { display: inline-block; min-width: 24px; text-align: center; }
ul.list-attr li a { display: inline-block; min-width: 24px; text-align: center; }
.widget h6 a { display: inline-block; padding: 2px 0; }

/* Indonesian sentences: no Title Case from the theme (keep capital first letter) */
.section-header .cate, .section-header .title, .volunteer-wrapper .subtitle,
.volunteer-single-item .volunteer-single-content .title, .widget .widget-header .title,
.account-wrapper .title, .shiping-box .title, .product-details .product-single-content .subtitle,
.client-review .review-title .title { text-transform: none; }
.section-header .cate::first-letter, .section-header .title::first-letter, .volunteer-wrapper .subtitle::first-letter,
.widget .widget-header .title::first-letter, .account-wrapper .title::first-letter { text-transform: uppercase; }

/* home: the news block pulls up 120px, but phone/tablet padding is only 80px,
   so it covered the bottom of the volunteer cards */
@media (max-width: 991px) {
  .clients-section.blog { margin-top: -50px; }
}

/* Final re-verification 2026-10-13: teal testimonial card (white title 2.2:1) darkened to AA */
.clients-item .clients-inner .clients-review .cr-top.theme-three-bg { background: #3d7a7c !important; }
.clients-item .clients-inner .clients-review .cr-top.theme-three-bg,
.clients-item .clients-inner .clients-review .cr-top.theme-three-bg * { color: #fff !important; }