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

/* "Kami siap membantu" band: white text sat on a light photo. Darken the photo so the copy reads. */
.get-touch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 28, 52, 0.62);
}
.get-touch .container {
  position: relative;
  z-index: 1;
}

/* Mobile header: top-bar (phone/email/social, each its own centered row) plus the
   logo/CTA button (37px top+bottom padding, sized for a wide desktop bar) stacked to
   ~460px before the hero on phones, pushing the hamburger out of the first screen.
   Compact both so the menu button is reachable without scrolling. */
@media (max-width: 767px) {
  .top-bar .contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    padding: 6px 0;
  }
  .top-bar .contact-links li {
    display: inline-flex !important;
    align-items: center;
    margin-right: 0;
  }
  .top-bar .contact-links li i {
    height: auto;
    padding: 2px 4px 2px 0;
  }
  .top-bar .contact-links .social {
    position: static;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
  .header-area .logo {
    margin: 8px 0;
  }
  .header-area .batton {
    padding: 6px 0;
  }
  .header-area .batton a {
    padding: 6px 14px;
  }
}

/* Touch targets (D-11, mandatory in header/menu/CTA/footer): the logo link's own box
   collapses to line-height (16px) while the logo image inside it is 49px tall, so only
   a thin strip of the visible logo is actually clickable. */
.header-area .logo a {
  display: inline-block;
}

/* Same cause in the footer: plain inline text links report only their glyph-box height
   (~16px for 14px text) from getBoundingClientRect, not the inherited 26px line-height,
   so they measure under the 24px minimum even though they look like normal text. Making
   them inline-block lets the line-height apply to the link's own box. */
.footer-top .links-column .links a,
.footer-up .content-text a,
.footer-bottom .content-text a,
.footer-top .news-column .social-links a {
  display: inline-block;
}

/* Same inline-box issue in two body-content links (not mandatory per D-11, but cheap to
   fix alongside the rest): the team-card specialty link and the news "read more" links. */
.attorneys .single-box .content-text h4 a,
.news-section .link-btn,
.news-section figure a {
  display: inline-block;
}
.attorneys .single-box .content-text h4 a {
  line-height: 24px;
}

/* Top-bar phone/email/social links (768/844, header scope, mandatory): same inline-box
   issue as the footer links above. */
.top-bar .contact-links li a {
  display: inline-block;
}

/* Hero CTA buttons ("Konsultasi" / "Layanan"): Revolution Slider scales the caption
   proportionally to the viewport, so the 45px buttons shrink under 24px around tablet
   widths. Floor them so the primary CTA stays tappable at every width. */
.rev_slider_wrapper .thm-btn-one,
.rev_slider_wrapper .thm-btn-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

/* AA contrast: the theme's gold accent (#cc8800) is below 3:1 on its light and dark
   backgrounds. Darken it for text on light backgrounds, lighten it for text on dark
   backgrounds (ribbon captions, footer contact block); decorative-only uses are untouched. */
.fact-counter-area .content-text h3,
.gradient-overlay .default-form-area h5 {
  color: #996600;
}
.news-section h1,
.news-section .comment-list h5 {
  background: #996600;
}
.attorneys .single-box .content-text h4 span,
.footer-up span {
  color: #e0b866;
}

/* The consultation-form photo is stretched to a fixed 690px height regardless of its
   natural ratio ("gambar melar"); crop it instead, and keep it proportionate on phones. */
.gradient-overlay .img-box {
  overflow: hidden;
}
.gradient-overlay .img-box img {
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .gradient-overlay .img-box img {
    height: 320px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .gradient-overlay .img-box img {
    height: 450px;
  }
}

/* Hero slider: Revolution Slider sets its own height by JS once it initialises, so the
   wrapper collapses until then and the whole page jumps (CLS 0.32-0.68). Reserve the
   configured 1920x780 ratio in CSS so the layout does not move. */
.rev_slider_wrapper,
.rev_slider_wrapper .rev_slider,
.rev_slider_wrapper #slider1 {
  aspect-ratio: 1920 / 780;
  min-height: 220px;
}

/* "ADVOKAT BERPENGALAMAN" / "BIAYA TRANSPARAN" break mid-word in the 3-across feature
   strip: Bootstrap's col-xs-4 keeps 3 narrow (~100px) columns even on small phones.
   Stack them so each heading has the full width to wrap between words. */
@media (max-width: 479px) {
  .slider-bottom .item > .row {
    display: block;
  }
  .slider-bottom .item > .row > [class*="col-"] {
    width: 100%;
    float: none;
  }
  .slider-bottom .item-height {
    margin-bottom: 18px;
  }
  .slider-bottom .item > .row > [class*="col-"]:last-child .item-height {
    margin-bottom: 0;
  }
}

/* Final re-verification 2026-10-13: at phone width the "Konsultasi Gratis" button sat on top of
   the menu toggle (toggle is absolute, top:-15px). Button goes left, toggle stays right. */
@media (max-width: 767px) {
  .header-area .outer-box .batton { float: left !important; margin: 12px 0 0 !important; }
  .header-area .outer-box .main-menu .navbar-header .navbar-toggle { top: -44px !important; }
}

/* Final re-verification 2026-10-13 (news pages): date badge #cc8800 with white read 2.96:1,
   sidebar category/archive links 3.41:1 and only 20px tall. */
#blog_area .blog_section .item .blog_date { background: #996600; }
.catagori_list ul li a, .catagori_list ul li a span { color: #4a4a4a; }
.catagori_list ul li a { display: inline-block; padding: 4px 0; }
.content-link a.button { display: inline-block; min-height: 32px; line-height: 32px; }
.sidebar_text_date p, .keyword_list ul li a { color: #5e5e5e; }
.keyword_list ul li a { display: inline-block; min-height: 28px; }
.bread-crumb li a { display: inline-block; padding: 4px 0; }
.image-holder figure > a { display: block; }
.blogimg > a { display: block; }
.sidber_text > a { display: inline-block; padding: 2px 0; }
.date_details > a { display: inline-block; min-height: 24px; }