/* MDIX Furniture Harmoni — template-specific fixes (design QA 2026-10-12). Loaded last. */

/* Parallax sections: the absolute overlay must stay inside its section before
   jarallax runs, otherwise it first covers the whole viewport (CLS ≈ 1.0). */
.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* Phone/tablet header is fixed by the theme only after its script runs; fix it
   from the first paint so the page does not jump up by the header height. */
@media (max-width: 993px) {
  header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
  }
  header:not(.menu-open) #mainmenu {
    visibility: hidden;
  }
}

/* Project photos come in different ratios; show them all as 16:9 cards. */
img.mdix-169 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ---------- Header / phone menu ---------- */
#menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 44px;
}
#menu-btn:before {
  font-size: 22px;
}
/* Closed phone menu: hidden, not only clipped (links were still focusable). */
header.header-mobile:not(.menu-open) #mainmenu {
  visibility: hidden;
}
/* Open phone menu scrolls when it is taller than the screen. */
header.header-mobile.menu-open {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
header.header-mobile.menu-open #mainmenu {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 40px;
}
header.header-mobile #mainmenu li ul li a {
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Touch targets ---------- */
/* Carousel dots: 24px hit area, small visible dot. */
.owl-dot,
.dark-scheme .owl-dot,
.text-light .owl-dot,
.text-light .owl-dot.active,
.owl-dot.active {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  background: transparent !important;
}
.owl-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #c9c0b8;
}
.text-light .owl-dot::after {
  background: rgba(255, 255, 255, 0.35);
}
.owl-dot.active::after {
  background: var(--primary-color);
}
.text-light .owl-dot.active::after {
  background: #fff;
}

/* Footer and side-panel links: at least 28px tall. */
footer .widget ul li a,
#extra-content ul li a {
  display: inline-block;
  padding: 4px 0;
}
/* Social icons: 44px squares. */
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  vertical-align: middle;
}
.social-icons a i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 2px;
}

/* ---------- Headings: no words split mid-word ---------- */
h2.fs-36 {
  font-size: clamp(20px, 2.3vw, 36px);
  line-height: 1.1;
}
.owl-4-cols-center h2.fs-40,
.row > [class*="col-lg-4"] h2.fs-40 {
  font-size: clamp(22px, 2.4vw, 40px);
  line-height: 1.1;
}
/* Project cards: the title box was half the card wide. */
@media (max-width: 1199.98px) {
  .owl-2-cols .abs.w-50,
  #projects-carousel .abs.w-50,
  .row .abs.w-50 {
    width: 80% !important;
  }
}
@media (max-width: 575.98px) {
  h2.fs-36 {
    font-size: 22px;
  }
  .owl-2-cols .abs.w-50,
  #projects-carousel .abs.w-50,
  .row .abs.w-50 {
    width: 100% !important;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .col-md-4 > h2 {
    font-size: 28px;
  }
}

/* Card links wrapping a full-width photo: the whole photo is the target. */
a:has(> img.w-100) {
  display: block;
}
#logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crumb li a,
.c_reply a,
.widget-post a,
section a[href^="https://wa.me"] {
  display: inline-block;
  min-height: 24px;
  padding: 3px 0;
}
.c_reply a {
  padding: 3px 6px;
}

/* Hero captions sit on a photo: a soft shadow keeps them readable on the light floor. */
#section-intro h1,
#section-intro p,
#section-intro .wow {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
  h2.fs-40.col-lg-6 {
    width: 100%;
  }
}

/* Project tags wrap instead of running off the card on narrow cards. */
.extra-text.d-flex {
  flex-wrap: wrap;
  gap: 6px;
  left: 0;
  right: 0;
}
.extra-text.d-flex > .bg-blur {
  margin: 0 !important;
}
@media (max-width: 575.98px) {
  .extra-text.d-flex > .bg-blur {
    font-size: 13px;
    padding: 6px !important;
  }
}

/* Inner-page title band: start below the fixed phone/tablet header (66px). */
@media (max-width: 993px) {
  main > section.bg-dark.jarallax:first-of-type {
    padding-top: 110px;
  }
}

/* White menu over the top of a photo: a soft dark fade behind the transparent
   header keeps it readable on light walls; dark fallback under the hero photo. */
header.transparent:not(.smaller):not(.header-mobile) {
  background-image: linear-gradient(to bottom, rgba(30, 18, 12, 0.45), rgba(30, 18, 12, 0));
}
#section-intro .mh-800 {
  background-color: var(--heading-font-color);
}

/* Tablet / small laptop: the theme's full-width container had 12px side gutters. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Final re-verification 2026-10-13: header wordmark shown at 130px (text ~11px). */
#logo img.logo-main, #logo img.logo-scroll, #logo img.logo-mobile { width: 190px !important; height: auto !important; max-height: none !important; }
@media (max-width: 767px) { #logo img.logo-main, #logo img.logo-scroll, #logo img.logo-mobile { width: 160px !important; } }
footer img.w-170px { width: 200px; }
/* the theme caps the logo with max-width: var(--logo-width) (130px) — lift the cap so the sizes above apply. */
.logo-main, div#logo img { max-width: none !important; }