/* MDIX Masjid Prima — audit fixes (2026-10-05, design QA 2026-10-13) */

/* Preloader: fade out instead of sliding down (the slide caused layout-shift on every load). */
.preloader {
  transition: opacity .45s ease, visibility 0s linear .45s !important;
}
.page-loaded .preloader {
  bottom: 0 !important;
  opacity: 0;
  visibility: hidden;
}

/* Owl sliders are display:none until the script runs, then pop in and push the page down (CLS ~0.6).
   Show the first slide in its final place right away and hide the rest until init. */
.slider-home-1.owl-carousel:not(.owl-loaded),
.slider-ayat.owl-carousel:not(.owl-loaded) {
  display: block;
}
.slider-home-1:not(.owl-loaded) > .item:not(:first-child),
.slider-ayat:not(.owl-loaded) > .item:not(:first-child) {
  display: none;
}

/* Slider dots: keep the 3px bar look, but give the button a 24px tall touch area. */
.slider-ayat button.owl-dot,
.slider-home-1 button.owl-dot,
.slider-ayat button.owl-dot.active,
.slider-home-1 button.owl-dot.active {
  height: 24px;
  background: linear-gradient(var(--theme-colour), var(--theme-colour)) center / 100% 3px no-repeat;
  background-color: transparent;
}

/* Phone menu: closed panel is parked off-screen; hide it so its links are not focusable,
   and give the hamburger a 44px target. */
.mobile-nav {
  visibility: hidden;
  transition: transform .45s ease-in-out, visibility 0s linear .45s;
}
.mobile-nav.open {
  visibility: visible;
  transition: transform .45s ease-in-out;
}
.bar-menu {
  cursor: pointer;
}
.bar-menu i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.mobile-nav a#res-cross {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 44px;
  height: 44px;
}
.mobile-nav a#res-cross:before {
  top: 4px;
  right: 4px;
}

/* Prayer times are sample data: say so under the cards. */
.mdix-sample-note {
  margin: 24px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: #555;
}

/* Event date/location were 10px. */
.navigating-life .location span {
  font-size: 14px;
}

/* Footer and card text links: at least 24px tall touch targets. */
footer .widget-title ul li a,
.wpo-lower-footer a,
.blog-man h6 a,
.logo a,
.breadcrumb-item a,
.opening-time-text a,
.contact-us a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* Course cards: equal heights in a row, so the yellow weeks/santri bars line up. */
.our-courses .row > [class*="col-"]:has(> .courses),
.our-courses-section .row > [class*="col-"]:has(> .courses) {
  display: flex;
}
.our-courses .courses,
.our-courses-section .courses {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.courses-text {
  flex: 1 0 auto;
}

/* Google Podcasts shut down in 2024: keep only the platforms that still exist. */
.logos li:has(img[src$="logos-1.png"]) {
  display: none;
}

/* Verse images (Arabic) never wider than their card. */
.slider-ayat .ayat img {
  width: 412px;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* 404: white text over a photo needs the same dark veil as the page banners. */
.error-404 {
  position: relative;
}
.error-404:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .45);
}
.error-404 > .container {
  position: relative;
  z-index: 1;
}

/* Indonesian sentences are not Title Case: the theme capitalised every word of buttons and headings. */
.btn,
.accordion-item .heading,
.error h3 {
  text-transform: none;
}
.btn::first-letter,
.accordion-item .heading .title::first-letter,
.error h3::first-letter {
  text-transform: uppercase;
}

/* ---- design QA 2026-10-13, round 1 (resumed) ---- */

/* Hero: photo keeps its proportions at every width (was squashed to 0.87 at 994-1199px),
   and the theme's dark veil now sits ABOVE the photo (it was painted underneath it), so the
   white text stays readable over the white mosque on phones. */
.hero-section img.hero-img-style {
  width: 100% !important;
  object-fit: cover;
}
.hero-section:before {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .15) 100%);
}
.hero-section > .container {
  position: relative;
  z-index: 2;
}
.hero-text h1,
.hero-text p {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
@media (max-width: 991px) {
  .hero-section:before {
    background: rgba(0, 0, 0, .45);
  }
}

/* Five pillars: the name is a label (no link) on its own line, the meaning below it,
   as the theme intended — no more "( Persaksian )" breaking across lines. */
.pillars-name a {
  display: block;
  cursor: default;
}
.pillars-name a:hover {
  color: inherit;
}
.pillars-name span {
  display: block;
  white-space: nowrap;
}

/* "Al-Qur'an" never splits at its hyphen. */
.nowrap {
  white-space: nowrap;
}

/* Footer bottom: space between the copyright and the legal links when they share a row
   (768px), and room under them so the back-to-top button never covers "Kebijakan Privasi". */
.wpo-lower-footer {
  gap: 8px 24px;
}
@media (max-width: 991px) {
  .wpo-lower-footer {
    padding-bottom: 96px;
  }
}
@media (min-width: 577px) and (max-width: 768px) {
  .Information.widget-title {
    margin-top: 0;
  }
}

/* Paket page: heading and infak sentence ran over the mosque picture at 1401-1700px
   (the picture is drawn at full size there and its first minaret sits ~880px from the right). */
@media (min-width: 1401px) and (max-width: 1700px) {
  .masjid-text h3 {
    font-size: 52px;
    width: auto;
    max-width: 470px;
  }
}
@media (min-width: 992px) and (max-width: 1700px) {
  .masjid-text p {
    max-width: 430px;
  }
}

/* Audio player: the round play/volume buttons are the controls (keyboard focusable via JS). */
.audioplayer-playpause:focus-visible,
.audioplayer-volume-button:focus-visible {
  outline: 3px solid #fbc50b;
  outline-offset: 2px;
}

/* Five pillars on tablets/phones: an odd last card (Haji) sits centred, not stranded on the left. */
@media (max-width: 993px) {
  .pillars {
    justify-content: center;
  }
}

/* Buttons: the theme parks its hover layer (a 167px circle) below the button, so every button
   "overflowed" its own box. Same effect — a darker fill rising from the bottom — kept inside it. */
.btn:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.66, 0, .34, 1);
}
.btn:hover:after {
  top: 0;
  transform: scaleY(1);
}

/* Ayat section 994-1199px: only a thin sliver of the big background photo was left beside the
   collage — hide it there, as the theme already does below 994px. */
@media (min-width: 994px) and (max-width: 1199px) {
  .islamic-ayat img.ayat-with-img {
    display: none;
  }
}

/* Murattal player replaced by a kajian card (the theme's Quran recording has unknown rights, D-25). */
.wrapper.mdix-kajian {
  padding: 26px 30px 30px;
}
.wrapper.mdix-kajian h4,
.wrapper.mdix-kajian h5 {
  padding-left: 0;
}
.wrapper.mdix-kajian h4 {
  font-size: 20px;
  text-transform: none;
}
.wrapper.mdix-kajian h5 {
  font-weight: 400;
  padding-bottom: 18px;
}