/* MDIX Konstruksi Utama — audit fixes */

/* Client logo strip only holds the seller's size-label placeholder boxes. */
#clients {
  display: none !important;
}

/* Header cart widget is shop demo tooling for a contractor site. */
#topbar .cart-info,
.header-cart,
.cart-dropdown {
  display: none !important;
}

/* Hero captions sat on a bright sky: add a shadow so they stay readable. */
.construct-banner-wrapper .tp-caption,
.construct-banner-wrapper h2,
.construct-banner-wrapper p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

/* Service tab text ran under the tall photo on the right (the original copy used manual line breaks). */
#service-we-provide .service-tab-content p {
  max-width: 440px;
}
@media (max-width: 991px) {
  #service-we-provide .service-tab-content p {
    max-width: none;
  }
}

/* ===== Design QA 2026-10-12 ===== */

/* Team section background: the 1.9 MB PNG is an 8% photo layer over #272E39 → identical JPG twin (25 KB). */
#our-team-construct {
  background-image: url('img/resources/team-section-bg.jpg');
}

/* "Kami siap 24/7" list: table-cell columns squeezed the items into two lines at 992–1440px. */
#welcome-to-construct .col-lg-7 .list-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
#welcome-to-construct .col-lg-7 .list-box::before,
#welcome-to-construct .col-lg-7 .list-box::after {
  display: none; /* clearfix pseudo-elements would become grid cells */
}
#welcome-to-construct .col-lg-7 .list-box ul {
  display: block;
  padding-right: 0;
}
#welcome-to-construct .col-lg-7 ul li {
  text-transform: uppercase;
  line-height: 1.5;
  padding: 8px 0;
}
@media (max-width: 575px) {
  #welcome-to-construct .col-lg-7 .list-box {
    grid-template-columns: 1fr;
  }
}

/* Featured project block: the old video link is gone (video no longer exists) → no play icon, full-strength photo,
   and a light veil over the excavator background so the heading and text stay readable. */
#video-section-construction {
  position: relative;
}
#video-section-construction::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
}
#video-section-construction > .container {
  position: relative;
}
#video-section-construction .video-preview a.mdix-no-play::before {
  display: none;
}
#video-section-construction .video-preview a.mdix-no-play img {
  opacity: 1;
}
#video-section-construction .video-text p {
  color: #555;
}

/* Service tabs: the tall decorative photo is absolutely positioned and covered the tab list below 992px. */
@media (max-width: 991px) {
  #service-we-provide .service-tab-content .col-lg-4 {
    display: none;
  }
}

/* Footer on phones: Bootstrap col-xs-6 kept the columns at 82% width with the photo glued to the left edge. */
@media (max-width: 767px) {
  footer.construct .widget {
    width: 100%;
    float: none;
  }
  footer.construct .widget:first-child {
    display: none;
  }
}

/* Hero below 1200px: Revolution Slider scales its 1170px caption grid down (≈5px text on phones) and clips the
   right-aligned captions at 768–1199px. There the scaled captions are hidden and one static, readable caption
   is shown over the slides instead. */
.mdix-hero-mobile {
  display: none;
}
@media (max-width: 1199px) {
  .construct-banner-wrapper {
    position: relative;
  }
  .construct-banner-wrapper .tp-caption {
    display: none !important;
  }
  .mdix-hero-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    position: absolute;
    inset: 0;
    z-index: 30;
    padding: 0 max(16px, calc((100vw - 940px) / 2));
    background: linear-gradient(90deg, rgba(16, 33, 50, 0.72) 0%, rgba(16, 33, 50, 0.25) 100%);
  }
  .mdix-hero-mobile h2 {
    margin: 0;
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 600;
  }
  .mdix-hero-mobile h2 b {
    color: #f69c00;
    display: block;
  }
  .mdix-hero-mobile p {
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.45;
    max-width: 520px;
  }
  .mdix-hero-mobile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
  }
}
@media (max-width: 767px) {
  .construct-banner-wrapper .tparrows {
    display: none !important;
  }
  .mdix-hero-mobile {
    gap: 10px;
  }
  .mdix-hero-mobile h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  .mdix-hero-mobile p {
    font-size: 14px;
    max-width: 320px;
  }
  .mdix-hero-mobile a {
    padding: 0 18px;
  }
}
/* "Selamat datang" block sat centred in a half column at 768–991px, leaving a gap on the left. */
@media (min-width: 768px) and (max-width: 991px) {
  #construction-welcome .single-construction-welcome:nth-child(3) {
    width: 100%;
    margin-left: 0;
  }
}

/* Project grid on phones: ten full-width 280px photos in one column → two columns. */
@media (max-width: 767px) {
  #project-version-one .gallery-v4 .single-project-item {
    width: 50% !important;
    float: left;
  }
}

/* Services: heading added above the progress circles. */
#our-expertize .mdix-expertize-title {
  color: #fff !important;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 40px;
}

/* Pricing: Rupiah per m² prices need a smaller figure and the unit on its own line (boxes are 205px wide at 992–1199px). */
#pricing-content .price-table-wrap .price-table .price-box {
  line-height: 1.2;
  padding: 14px 8px;
  text-transform: none;
}
#pricing-content .price-table-wrap .price-table .price-box span {
  font-size: 30px;
  white-space: nowrap;
}
#pricing-content .price-table-wrap .price-table .price-box small {
  display: block;
  font-size: 13px;
  opacity: 0.9;
}
#pricing-content .price-table-wrap .price-table .price-info li {
  line-height: 1.4;
  padding: 14px 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  #pricing-content .price-table-wrap .price-table .price-box span {
    font-size: 24px;
  }
}

/* Footer: phone/e-mail are links now; keep them in the footer text colour. */
footer.construct .contact-info a {
  color: inherit;
}
footer.construct .contact-info a:hover,
footer.construct .contact-info a:focus-visible {
  color: #f69c00;
}

/* Team page: floated cards of unequal height left holes in the grid → flex rows, equal-height cards. */
#our-team-construct.style-two .row {
  display: flex;
  flex-wrap: wrap;
}
#our-team-construct.style-two .row::before,
#our-team-construct.style-two .row::after {
  display: none;
}
#our-team-construct.style-two .row > [class*="col-"] {
  display: flex;
  float: none;
}
#our-team-construct.style-two .single-construct-member {
  width: 100%;
  display: flex;
  flex-direction: column;
}
#our-team-construct.style-two .single-construct-member .content {
  flex: 1;
}
/* Team carousel (home/about): same height for every card. */
#our-team-construct .owl-stage {
  display: flex;
}
#our-team-construct .owl-item {
  display: flex;
}
#our-team-construct .owl-item .item,
#our-team-construct .owl-item .single-construct-member {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#our-team-construct .owl-item .single-construct-member .content {
  flex: 1;
}

/* Title Case (text-transform: capitalize) on Indonesian sentences → sentence case from the HTML. */
.section-title h1,
#our-projects .masonary-item .img-wrap .content-wrap span,
#blog-post .sidebar-widget h4,
#blog-post .sidebar-widget .tag-cloud a,
#blog-post article .expert_quote_area .col-lg-12 .expert_quote span,
#blog-post article .comments_area .single_comment .comment_text p span,
#blog-post.faq .faq-content .faq-title h2,
#blog-post article .popular-question h2,
.cart-page .bottom-box .cupon-box button,
.single-construction-welcome h2,
#great-construct-team h2,
footer.construct .widget .our-services li a,
.construct-banner-wrapper .construct-banner-caption h2,
.service-two-tab-content h2,
.service-two-tab-title ul li a,
.single-sidebar.call-to-action-box .img-box .img-caption a,
.single-sidebar > h4,
#blog-post article h2,
#blog-post article .meta li a,
.blog-content article.search-result .content h3,
.single-testimonial .content h2,
#project-version-one .two-col-gallery .single-project-item .content span {
  text-transform: none;
}

/* Inputs switched to type=email/tel/number get the same look as the theme's text inputs. */
#blog-post article .comment-box .comment-box-field .comment-box-half input[type=email] {
  background: #f9f9f9;
  border: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding: 10px 0 10px 10px;
  width: 100%;
}
#blog-post article .comment-box .comment-box-field .comment-box-half input[type=text] {
  padding-left: 10px;
}
#checkout-content input[type="email"],
#checkout-content input[type="tel"] {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #E2E2E2;
  outline: none;
  padding: 0 20px;
  font-family: 'Open Sans';
}

/* Blog titles became links: keep the heading colour, accent on hover. */
#blog-post article h2 a,
.blog-content article.search-result .content h3 a,
#blog-post .single-shop-item h4 a,
.single-shop-item .meta h4 a {
  color: inherit;
}
#blog-post article h2 a:hover,
.blog-content article.search-result .content h3 a:hover,
.single-shop-item .meta h4 a:hover {
  color: #c27d00;
}

/* ===== Contrast (WCAG AA) — D-20 ===== */
/* Text on dark sections stays light after the grey darkening in style.css. */
footer.construct p,
footer.construct .widget p,
footer.construct .our-services li a,
footer.construct .contact-info li,
footer.construct .contact-info .text,
#bottom-bar p,
#our-expertize p {
  color: #b5b5b5;
}
/* Brand orange used as TEXT on light backgrounds (2.1:1) → darker orange #9A5B00 (5.4:1). Backgrounds keep the brand orange. */
#blog-post .sidebar-widget .popular-post li .content-wrap span,
#blog-post .sidebar-widget .category-list li a.active,
#blog-post .sidebar-widget .category-list li a:hover,
.service-tab-title ul li.active,
.service-tab-title ul li:hover,
.gallery-filter li.active span,
#project-version-one .gallery-filter li.active span,
.return-customer a,
#checkout-content .return-customer p a,
#blog-post.faq .panel_body_up h2,
.general-question .panel_body_up h2,
#contact-content .contact-info .text-box p a {
  color: #9A5B00;
}
/* White text on the orange name labels / date badges (2.1:1) → near-black text on the same brand orange (9:1). */
#testimonials-construct-home .single-testimonial-construct h3,
#blog-construct .single-blog-post .img-holder .date,
#blog-construct .single-blog-post .img-holder .date b,
#blog-post .blog-content .img-holder .date-holder,
#blog-post .blog-content .img-holder .date-holder b,
#blog.version-two .blog-wrap .img-wrap .date-holder h2,
#blog.version-two .blog-wrap .img-wrap .date-holder h2 b {
  color: #1b1b1b;
}
/* About "Siapa kami" box: white text on brand orange → near-black text. */
#our-mission .image-caption .content h2,
#our-mission .image-caption .content p {
  color: #1b1b1b;
}

/* ===== Header on phones/tablets ===== */
/* Menu button 38×33 → 44×44 (primary control). */
button.mainmenu-toggler {
  width: 44px;
  height: 44px;
  line-height: 1;
  font-size: 18px;
}
@media (max-width: 767px) {
  /* Address/e-mail/phone rows pushed the menu button ~240px down; they are repeated in the footer and on Hubungi Kami. */
  #topbar .contact-info {
    display: none;
  }
  #topbar .social {
    float: none !important;
    text-align: center;
  }
  header.construct.header-curvy .logo {
    padding: 14px 16px 14px 0;
  }
  header.construct.header-curvy .logo img {
    max-width: 100%;
    height: auto;
  }
  .mainmenu-container {
    padding: 16px 0;
  }
}
@media (max-width: 991px) {
  /* Phone/tablet menu links were #767474 on the dark header (3:1). */
  header .mainmenu-container ul.mainmenu li a {
    color: #d6d6d6;
    text-transform: none;
    line-height: 44px;
  }
  .mainmenu-container ul li.dropdown .fa {
    width: 44px;
    height: 36px;
    line-height: 34px;
    top: 4px;
  }
}

/* Hero: Revolution Slider grows from 0 to its grid height after init (CLS 0.43 at ≥1024px) → reserve the
   height it will take (gridheight 740 / gridwidth 1170, capped at 740px). */
.rev_slider_wrapper.construct-banner-wrapper {
  min-height: min(740px, 63.25vw);
}

/* ===== Touch targets ≥ 24px (D-11) ===== */
header .logo a {
  display: inline-block;
}
#blog-construct .single-blog-post > a {
  display: block;
}
#blog-construct .single-blog-post ul li a,
footer.construct .read-more,
footer.construct .contact-info a,
#blog-post .sidebar-widget .popular-post li .content-wrap a,
#blog-post article ul.meta li a,
.blog-content article.search-result .content > a,
#blog.version-two .blog-wrap .content-wrap ul li a,
#blog-post article > a,
.single-shop-item .meta h4 a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
/* Team social icons were 11–17 × 26px. */
.single-construct-member .content ul li a {
  display: inline-block;
  min-width: 28px;
  min-height: 28px;
  line-height: 28px;
  text-align: center;
}
/* Owl carousel dots/arrows */
.owl-theme .owl-nav [class*=owl-] {
  min-width: 28px;
  min-height: 28px;
}

/* Services progress circles: four 25% columns on phones split the project names mid-word. */
@media (max-width: 767px) {
  #our-expertize .single-expertize {
    width: 50%;
    margin-bottom: 30px;
  }
}
@media (max-width: 420px) {
  #our-expertize .single-expertize {
    width: 100%;
  }
}

/* ===== Contrast round 2 ===== */
footer.construct .widget .our-services li a,
footer.construct .widget p,
footer.construct .widget .contact-info li,
footer.construct .widget .contact-info li .text {
  color: #b5b5b5 !important;
}
footer.construct .widget .contact-info li a:hover,
footer.construct .widget .our-services li a:hover {
  color: #f69c00 !important;
}
#bottom-bar p,
#bottom-bar.construct p {
  color: #9e9e9e !important;
}
#blog-post article ul.meta li a,
#blog.version-two .blog-wrap .content-wrap ul li span,
#blog-post .why-choose-us-facts li .content p,
#why-choose-us .why-choose-us-facts li .content p,
.accrodion .accrodion-content p,
.single-shop-item .meta span,
.single-shop-item .meta p,
.gallery-v5 .single-project-item .meta span,
.blog-content article.search-result .content span,
#contact-content .contact-info .text-box p,
.return-customer p,
#checkout-content .return-customer p {
  color: #5f5f5f;
}
.single-shop-item .meta span b,
.product-details-box span b {
  color: #b52d1f;
}
#blog-post article ul.highlight li,
#blog-post .panel_body_up h2,
.panel_body_up h2 {
  color: #9A5B00 !important;
}
.accrodion.active .accrodion-header h4,
.accrodion .accrodion-header:hover h4 {
  color: #1b1b1b;
}
#pricing-content .price-table-wrap .price-table .price-box small {
  opacity: 1;
}
.service-two-tab-title ul li.active a {
  color: #fff;
  background: #1b2533;
}

/* ===== Touch targets round 2 ===== */
.page-breadcumb a,
#blog-post .sidebar-widget p a,
.single-sidebar .img-caption a,
.cart-table td.product a,
#contact-content .contact-info a,
.blog-content article.search-result .content h3 a,
.panel-title a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.panel-title a {
  display: block;
}
#blog-construct .single-blog-post > a {
  padding: 3px 0;
}
/* Team page cards are light grey (#E1E1E6): role text was #9A9999 (2.2:1). */
#our-team-construct.style-two .single-construct-member .content p {
  color: #4a4a4a;
}
/* Pricing: white on the coral "gold" box was 3.8:1. */
#pricing-content .price-table-wrap .price-table.gold .price-box {
  background: #C2412D;
}
/* Blog: quote author and "Bagikan" button (orange on white / white on orange). */
#blog-post article .expert_quote_area .col-lg-12 .expert_quote span {
  color: #9A5B00;
}
#blog-post article .shear_area .shear a {
  color: #1b1b1b;
}
/* Project page filters: active item was orange text on white. */
#project-version-one .gallery-filter li.active span,
#project-version-one .gallery-filter li:hover span,
#project-version-two .gallery-filter li.active span,
#project-version-two .gallery-filter li:hover span {
  color: #9A5B00;
}
#project-version-one.construct.home .gallery-filter li.active span,
#project-version-one.construct.home .gallery-filter li:hover span {
  color: #000;
}
#blog-construct .single-blog-post > a {
  padding: 4px 0;
}
#blog-post article .comments_area .single_comment .comment_text p span:not(.c_date) {
  color: #b52d1f;
}
/* Team social row: 28px targets + the theme's 14px side margins wrapped onto two lines. */
#our-team-construct .single-construct-member ul li a {
  margin: 0 4px;
  min-width: 32px;
  min-height: 32px;
  line-height: 32px;
}
#our-team-construct.style-two .single-construct-member .img-holder {
  align-self: center;
}
#our-team-construct .owl-item .item > .single-construct-member {
  flex: 1;
}
/* Team carousel on phones: the 165px portrait was blown up to a 340px circle (soft). Cap it near its real size. */
@media (max-width: 767px) {
  #our-team-construct .owl-item .single-construct-member .img-holder {
    align-self: center;
    width: 220px;
    max-width: 70%;
  }
  #our-team-construct .owl-item .single-construct-member .img-holder img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  #bottom-bar .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Sidebar "Artikel populer": table cells let the 120px image cell grow and squeezed the titles. */
#blog-post .sidebar-widget .popular-post li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
#blog-post .sidebar-widget .popular-post li .image-box {
  display: block;
  flex: 0 0 120px;
}
#blog-post .sidebar-widget .popular-post li .content-wrap {
  display: block;
  padding-left: 0;
}
/* Shop & product page on phones/tablets: products came after the long sidebar and the floated sidebar
   overlapped the "Produk Pilihan" title box → content first, sidebar after. */
@media (max-width: 991px) {
  .row:has(> .shop-page-content),
  .row:has(> .product-details-page-content) {
    display: flex;
    flex-direction: column;
  }
  .row > .shop-page-content,
  .row > .product-details-page-content {
    order: -1;
    width: 100%;
    clear: both;
  }
  .row:has(> .shop-page-content) > .sidebar,
  .row:has(> .product-details-page-content) > .sidebar {
    margin-top: 40px;
  }
}
/* Third-level menu links and submenu arrows sit on the dark dropdown: keep them light. */
.mainmenu-container ul > li > ul > li > ul > li > a,
header nav.mainmenu-container ul > li > ul > li > a:after,
.mainmenu-container ul > li > ul > li.dropdown:after {
  color: #c9c9c9;
}
/* Nested flyout was forced visibility:visible under an invisible (opacity 0 / hidden) dropdown, so its links stayed
   clickable/focusable while unseen → inherit the parent's visibility. */
header.construct.header-curvy .mainmenu-container ul > li > ul > li > ul {
  visibility: inherit;
}