/* MDIX Hukum Harmoni — per-template audit fixes */

/* The logo's dark wordmark disappears on the navy header: sit it on a light plate. */
.logo.logo-1 img {
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
}

/* home-video.html: the theme demo's <source src="addYourVideoHere"> was a literal,
   un-filled placeholder (404 on every load) — swapped for the poster still image;
   .video-container video} crops/centres via absolute position + transform, this
   gives the replacement <img> the same full-bleed cover treatment. */
.video-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CLS fix (D desktop 0.303). .owl-carousel is display:none until owl-carousel.js
   adds .owl-loaded, so the hero collapses to 0 height on first paint and then
   jumps to full height once the slider initialises, shoving the whole page down.
   The slide images are a fixed 2.4:1 crop at every breakpoint (measured 360->360x150,
   1440->1440x600, 1920->1920x800), so reserving that ratio on the wrapper (which is
   never display:none) keeps the layout stable before and after init. */
.slider-container {
  aspect-ratio: 12 / 5;
}

/* Touch targets: checker wajib >=24px, sasaran 44px for the menu toggle (D-11).
   Verified by hand (Playwright) that button.nav-button already opens/closes the
   off-canvas menu correctly — the audit script just doesn't recognise this theme's
   selector, so it under-reports it as "tombol menu HP tidak ditemukan" instead of
   flagging the 25x25 size. Enlarging it anyway since 25px < the 44px target. */
.nav-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

/* Off-canvas menu links/sub-links were ~18-22px tall (line-height only, no padding) —
   under the 24px floor once the panel is actually opened (closed by default, so the
   checker never measures them). */
.menu-mobile li a {
  padding: 4px 0;
}

/* Off-canvas social icons (menu-contact) were ~8-13px wide (bare icon glyph, no
   hit-box) — same "checker can't see it closed" gap as the links above. */
.menu-contact .social-media li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* Footer "Tautan Cepat" links were plain inline text (22-37px tall depending on
   label) — pad them to clear 24px without changing their look. */
.foo-block .custom-html-widget ul li a {
  display: inline-block;
  padding: 4px 0;
}

/* Footer social icons: Facebook/LinkedIn glyphs are 15-21px wide, under 24px;
   Twitter/X already passes. Give all three an even, invisible hit box. */
.footer-social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
}

/* Owl Carousel pagination dots are a 7x7 visual dot with no padding (hit area ==
   visual size). Keep the dot small, grow the invisible tap area around it. */
.owl-theme .owl-dots .owl-dot {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Attorney photo links are inline <a> wrapping an inline-block <img>: the box the
   checker measures collapses to one text line (360x22) even though the whole photo
   is clickable in a real browser (verified: click anywhere on the image navigates).
   display:inline-block keeps the same centred look but makes the anchor's own box
   match the photo, so future measurements are accurate too. */
.lawyer-holder > a {
  display: inline-block;
}

/* AA contrast (E): #ff6666 on white is 2.86:1, fails both large-text (3:1) and
   small-text (4.5:1) AA. Darken to #d93636 (4.63:1) for the three failing spots;
   kept it as a background-color override for the already-button-styled "Lihat
   Lainnya" CTA (not a new background on a plain text link, per the earlier-round
   lesson), and gave its :hover state a visible text colour instead of disappearing
   white-on-white. */
.heading-subtitle {
  color: #d93636;
  border-bottom-color: #d93636;
}

.intro-big-italic {
  color: #d93636;
}

.lawyer-position {
  color: #d93636;
}

/* Blog card date (#a5a5a5 on white = 2.46:1) — reuse the body's own text grey
   (#707070, 4.95:1), already used everywhere else for secondary copy. */
.blog-date li {
  color: #707070;
}

/* Blog card category tag: white text on the same #ff6666 pill background. */
.meta-categ a {
  background-color: #d93636;
  border-color: #d93636;
}

.meta-categ a:hover {
  color: #d93636;
}

.view-more:not(.view-more-white) a {
  background-color: #d93636;
  border-color: #d93636;
}

.view-more:not(.view-more-white) a:hover {
  background: none;
  color: #d93636;
}

/* B: "Ketenagakerjaan" (no spaces to wrap on) is forced to break mid-word in the
   4-col practice grid between 992-1199px, where each card is only ~210px wide
   (narrower than at >=1200px). Shrinking just this range lets every title fit the
   column without a mid-word break. */
@media (min-width: 992px) and (max-width: 1199px) {
  .practice-item-4cols .practice-title {
    font-size: 19px;
  }
}

/* Final re-verification 2026-10-13: Rupiah prices are longer than the theme's "$20"; keep the
   amount on one line and size it to the column. */
.pricing-col .price-title { white-space: nowrap; font-size: clamp(26px, 2.7vw, 40px); }
@media (max-width: 767px) { .pricing-col .price-title { font-size: clamp(28px, 9vw, 40px); } }
.pricing-col .price-title sup { white-space: nowrap; }