/*
 * a11y-contrast.css
 * ==================================================================
 * Sửa lỗi PageSpeed / Lighthouse "Độ tương phản màu thấp"
 * (WCAG AA yêu cầu tỷ lệ tương phản >= 4.5:1 cho chữ thường).
 *
 * NGUYÊN TẮC: CHỈ chỉnh MÀU CHỮ cho đủ tương phản. KHÔNG đổi bố cục,
 * KHÔNG đổi màu nền, giữ tối đa nhận diện thương hiệu (vàng #ffcc05).
 *
 * Vì các màu lỗi được set INLINE trong nội dung (WPBakery, lưu ở DB)
 * nên KHÔNG sửa được từ file theme -> bắt buộc dùng !important mới
 * đè được inline style. Đây là lý do phải override thay vì sửa gốc.
 *
 * Số liệu đo trên live (puluongexcursions.com) tháng 2026-08.
 * Nạp qua functions.php, handle 'puluong-a11y-contrast'.
 * ================================================================== */


/* 1) CHỮ THÂN BÀI XÁM NHẠT -----------------------------------------
 * Hiện trạng: chữ xám #818181 (rgb 129,129,129) trên nền trắng
 *   -> tương phản 3.90:1 = KHÔNG ĐẠT (cần >= 4.5).
 * Sửa: đổi sang #5f5f5f (~6.3:1 trên trắng, ~5.2:1 trên nền xám nhạt
 *   #ebebeb) - vẫn là màu xám, chỉ đậm hơn một chút nên gần như không
 *   thấy khác biệt thẩm mỹ, nhưng đạt chuẩn.
 *
 * CHỈ nhắm phần tử có INLINE color #818181. Lưu ý: chữ TRẮNG đặt trên
 * ảnh / nền tối cũng dùng class .mkdf-st-text nhưng inline là color:#fff
 * (hiển thị đúng) -> selector theo #818181 sẽ KHÔNG đụng tới chúng. */
[style*="color: #818181"],
[style*="color:#818181"],
[style*="color: rgb(129, 129, 129)"],
[style*="color:rgb(129, 129, 129)"] {
	color: #5f5f5f !important;
}


/* 2) NÚT VÀNG SOLID (.mkdf-btn.mkdf-btn-solid) ---------------------
 * Hiện trạng: mặc định theme nền vàng #ffcc05 + CHỮ TRẮNG
 *   -> tương phản 1.51:1 = KHÔNG ĐẠT (fail nặng).
 * Lưu ý HOVER: theme đổi nền sang xám đậm #303030 nhưng giữ chữ trắng
 *   (trạng thái hover ĐẠT chuẩn ~12:1, không cần đụng).
 *
 * Sá»­a:
 *   - Trạng thái THƯỜNG: chữ tối #1c1c1c trên nền vàng (~11:1 = đạt).
 *   - Trạng thái HOVER: trả lại chữ trắng cho nền tối #303030 (đạt).
 *
 * CHỈ áp cho nút VÀNG, tránh làm hỏng nút màu khác:
 *   - nút solid KHÔNG có background-color inline (mặc định = vàng), HOẶC
 *   - nút solid có background-color inline chứa "ffcc05" / "255, 204, 5".
 * Nút solid đặt nền màu khác (vd xanh) vẫn giữ chữ trắng như cũ. */
.mkdf-btn.mkdf-btn-solid:not([style*="background-color"]),
.mkdf-btn.mkdf-btn-solid:not([style*="background-color"]) .mkdf-btn-text,
.mkdf-btn.mkdf-btn-solid[style*="ffcc05"],
.mkdf-btn.mkdf-btn-solid[style*="ffcc05"] .mkdf-btn-text,
.mkdf-btn.mkdf-btn-solid[style*="255, 204, 5"],
.mkdf-btn.mkdf-btn-solid[style*="255, 204, 5"] .mkdf-btn-text {
	color: #1c1c1c !important;
}
.mkdf-btn.mkdf-btn-solid:not([style*="background-color"]):hover,
.mkdf-btn.mkdf-btn-solid:not([style*="background-color"]):hover .mkdf-btn-text,
.mkdf-btn.mkdf-btn-solid[style*="ffcc05"]:hover,
.mkdf-btn.mkdf-btn-solid[style*="ffcc05"]:hover .mkdf-btn-text,
.mkdf-btn.mkdf-btn-solid[style*="255, 204, 5"]:hover,
.mkdf-btn.mkdf-btn-solid[style*="255, 204, 5"]:hover .mkdf-btn-text {
	color: #ffffff !important;
}


/* 3) CHá»® TRONG HOVERBOX (WPBakery vc-hoverbox) --------------------
 * Theme đặt mặc định TOÀN CỤC: p { color:#818181 } (style_dynamic.css).
 * Mặt sau hoverbox (.vc-hoverbox-back) LUÔN có nền xám nhạt cố định
 *   -> chữ #818181 trên nền đó = 3.27:1 = KHÔNG ĐẠT.
 * Panel này luôn sáng (không như .wpb_text_column dùng ở cả section
 * nền tối) nên darken ở đây AN TOÀN, không đụng chữ trên nền tối.
 * KHÔNG dùng rule `p{}` toàn cục vì sẽ làm hỏng ~12 đoạn chữ xám
 * đang nằm trên nền tối (section xanh #0a6e50, footer #1c1c1c). */
.vc-hoverbox-block.vc-hoverbox-back p,
.vc-hoverbox-back-inner p {
	color: #5f5f5f !important;
}
/* 4) CH? / ICON VÀNG TRÊN N?N SÁNG ---------------------------------
 * Lighthouse v?n b?t các ph?n t? màu thuong hi?u #ffcc05 dùng nhu màu ch?/icon
 * trên n?n tr?ng ho?c xám sáng: custom heading "Since 2014", trust stars,
 * popup contact text, tour icons/labels. #ffcc05 trên tr?ng ch? ~1.5:1.
 * Gi? n?n vàng cho button; ch? d?i ch?/icon vàng trên n?n sáng sang xanh brand
 * d?m #0a6e50 (~6.3:1 trên tr?ng).
 */
.left-popup--content,
.pe-trip-star,
.mkdf-custom-font-holder[style*="ffcc05"],
.mkdf-title-holder.mkdf-has-bg-image .mkdf-page-title,
.mf-tour-hightlight__item .icon-box-img i,
.mkdf-tour-info-icon,
.mf-tour-information__included-item > p:hover,
.star-rating,
.star-rating span,
.mkdf-ratings-stars-holder,
.mkdf-ratings-stars-holder span,
.mkdf-tours-tour-categories-item:before,
.mkdf-tours-single-info-item__icon i,
.mf-tour-cover__action :is(.icon_group, .icon_clock)::before,
.icon_menu:before,
.icon_search:before {
	color: #0a6e50 !important;
}

/* Inline WPBakery text colors using #ffcc05 as foreground inside light content areas. */
.mkdf-content [style*="color: #ffcc05"],
.mkdf-content [style*="color:#ffcc05"],
.mkdf-content [style*="color: rgb(255, 204, 5)"],
.mkdf-content [style*="color:rgb(255, 204, 5)"] {
	color: #0a6e50 !important;
}
/* 5) MKDF Tours secondary text on light cards/pages. */
.mkdf-tours-price-with-discount .mkdf-tours-price-old.mkdf-tours-item-price,
.mkdf-tours-standard-item .mkdf-tours-item-price-additional-text,
.mkdf-tours-standard-item .mkdf-tour-item-rating,
.mkdf-tours-standard-item .mkdf-tours-standard-item-bottom-content,
.mkdf-tours-list-item .mkdf-reviews-summary,
.mkdf-tours-list-item .mkdf-tours-item-price.mkdf-tours-price-old,
.mkdf-tours-list-item .mkdf-tours-list-price-label,
.mkdf-tours-list-item .mkdf-tours-list-item-bottom-content,
.single-tour-item .mkdf-tour-item-price-text,
.single-tour-item .mkdf-reviews-summary,
.single-tour-item .mkdf-tour-item-short-info .mkdf-tours-single-info-item,
.single-tour-item .mkdf-tour-item-short-info .mkdf-tours-tour-categories-holder,
.single-tour-item .mkdf-tour-item-short-info .mkdf-tours-tour-categories-item,
.single-tour-item .mkdf-tour-item-short-info .mkdf-tour-destination-holder,
.single-tour-item .mkdf-tour-item-short-info a,
.single-tour-item .mkdf-review-date,
.tt-hint {
	color: #5f5f5f !important;
}

/* Tour option buttons can override the yellow-button contrast rule. */
.mf-tour-options__item .mkdf-btn.mkdf-btn-solid,
.mf-tour-options__item .mkdf-btn.mkdf-btn-solid .mkdf-btn-text {
	color: #1c1c1c !important;
}
.mf-tour-options__item .mkdf-btn.mkdf-btn-solid:hover,
.mf-tour-options__item .mkdf-btn.mkdf-btn-solid:hover .mkdf-btn-text {
	color: #ffffff !important;
}
/* Keep the inline brand-yellow CTA text in "Our Way of Doing Things". */
.mkdf-content .vc_cta3-container .vc_cta3-content a span[style*="ffcc05"],
.mkdf-content .vc_cta3-container .vc_cta3-content a span[style*="color: #ffcc05"],
.mkdf-content .vc_cta3-container .vc_cta3-content a span[style*="color:#ffcc05"],
.mkdf-content .vc_cta3-container .vc_cta3-content a span[style*="color: rgb(255, 204, 5)"],
.mkdf-content .vc_cta3-container .vc_cta3-content a span[style*="color:rgb(255, 204, 5)"] {
	color: #ffcc05 !important;
}