/* MDIX Hotel Sentosa — audit fixes (auditor 4). */

/* Indonesian menu labels are longer: keep all six items on one line inside the nav panel. */
.header-main .main-menu ul li {
  margin-inline-end: 30px;
}
.header-main .main-menu > nav > ul > li > a {
  white-space: nowrap;
}

/* Header phone and "Pesan Sekarang" button: no wrapping, background art stretched to fit. */
.header-main .header-right .call-item h6 a,
.header-main .header-right .header-button .theme-btn {
  white-space: nowrap;
}
.header-main .header-right .header-button .theme-btn {
  padding: 19px 26px;
}
.header-main .header-right .header-button .theme-btn img,
.header-main .header-right .call-item .shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-main .header-right .call-item .shape {
  top: 0;
  bottom: 0;
}

/* Hero copy sits on a bright building photo: give the white text a soft shadow. */
.hero-section-1 .hero-content p,
.hero-section-1 .hero-wrapper h1 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Theme placeholder strip (168x60 "avatars") next to the review count. */
.testimonial-section .client-item .group-image {
  display: none;
}

/* ===== Design-QA 2026-10-12 (mdix-hotel-sentosa) ===== */

/* Brand gold darkened for AA text/buttons (#AA8453 + white = 3.4:1 → #86643A = 5.4:1, D-20);
   lighter gold for gold text on the dark panels. */
:root {
  --theme: #86643A;
  --mdix-gold-light: #C9A271;
}
.service-wrapper .service-main-item .service-item .service-content .btn,
.testimonial-section .sub-title,
.testimonial-section .client-item h6 b,
.testimonial-section .client-item h6 span,
.footer-section .footer-bottom p span,
.footer-section .contact-item i,
.room-section .sub-title {
  color: var(--mdix-gold-light) !important;
}

/* Header: phone menu toggle is a real 44px target. */
.header__hamburger .sidebar__toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-1 .header-main .header-left .header-logo {
  display: inline-block;
  padding: 12px 0;
}
.header-1 .header-main .header-left .header-logo-2 {
  padding: 12px 0;
}
/* Glass header panels (image backgrounds): solid fallback colour behind the white text. */
.header-1 .header-main .main-menu,
.header-main .header-right .call-item,
.header-main .header-right .header-button .theme-btn {
  background-color: rgba(28, 28, 28, 0.92);
  border-radius: 10px;
}

/* Hero: soft dark wash on the bright building so white copy stays readable. */
.hero-section-1 {
  position: relative;
}
.hero-section-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.25) 55%, rgba(20, 20, 20, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-section-1 > * {
  position: relative;
  z-index: 1;
}
.hero-section-1 .signature-image {
  position: absolute;
}
.hero-1 .hero-content .theme-btn img {
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* "Fasilitas & Layanan": phone + button backgrounds were fixed-size images narrower than the text. */
.feature-wrapper .feature-content .feature-contact-item .call-item {
  min-height: 56px;
  box-shadow: inset 0 0 0 1px rgba(134, 100, 58, 0.3);
}
.feature-wrapper .feature-content .feature-contact-item .call-item .shape {
  top: 0;
  bottom: 0;
}
.feature-wrapper .feature-content .feature-contact-item .call-item .shape img {
  width: 100%;
  height: 100%;
}
.feature-wrapper .feature-content .feature-contact-item .theme-btn {
  background-color: var(--theme);
  color: var(--white);
}
.feature-wrapper .feature-content .feature-contact-item .theme-btn img {
  display: none;
}
.feature-wrapper .feature-content .feature-contact-item .theme-btn::before {
  background-color: var(--header);
}

/* "dan banyak lagi" glass box on a photo: solid fallback behind white text. */
.aminities-wrapper .aminities-items .aminities-image .content-box .shape {
  top: 0;
  background-image: linear-gradient(rgba(28, 28, 28, 0.45), rgba(28, 28, 28, 0.45));
  border-radius: 10px;
}
.aminities-wrapper .aminities-items .aminities-image .content-box .view-btn {
  padding: 4px 0;
}

/* Special offers: below 1400px the theme hides the expanded card and leaves 210px strips with
   sideways text and a tall black block. Show every offer as a normal photo card instead. */
.service-wrapper .service-main-item .service-item .service-image img {
  aspect-ratio: 210 / 135;
  object-fit: cover;
}
@media (max-width: 1399px) {
  .service-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
  .service-wrapper .service-main-item,
  .service-wrapper .service-main-item.active {
    display: block;
    width: auto;
    height: auto;
  }
  .service-wrapper .service-main-item .service-item {
    display: none;
  }
  .service-wrapper .service-main-item .service-card-item,
  .service-wrapper .service-main-item.active .service-card-item {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    height: auto;
  }
  .service-wrapper .service-main-item .service-card-item .services-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}
@media (max-width: 991px) {
  .service-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .service-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Swiper dots: 24px hit area, the visible dot stays 8px. */
.swiper-dot-1 .swiper-pagination-bullet,
.swiper-dot-2 .swiper-pagination-bullet,
.swiper-dot-1 .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  height: 24px;
  border: 8px solid transparent;
  background-clip: padding-box;
}
.swiper-dot-1 .swiper-pagination-bullet:not(:last-child),
.swiper-dot-2 .swiper-pagination-bullet:not(:last-child) {
  margin-right: 0;
}
.swiper-dot-1 .swiper-pagination-bullet.swiper-pagination-bullet-active::before,
.swiper-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  display: none;
}

/* Footer: headings already Title Case in HTML; check-in rows as aligned columns; 44px social icons. */
.footer-section .footer-widget-wrapper .single-footer-widget .date-list li {
  display: grid;
  grid-template-columns: minmax(84px, max-content) auto;
  column-gap: 14px;
  align-items: baseline;
}
.footer-section .footer-widget-wrapper .single-footer-widget .date-list li span {
  margin-left: 0 !important;
  white-space: nowrap;
}
.footer-bottom .social-icon a,
.header-top-section-3 .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* About page: theme badge with a hotel-chain logo ("SHERATON") over the photo. */
.about-wrapper .about-image .shape {
  display: none;
}

/* Blog pagination links to nothing (only one page of posts in the demo). */
.page-nav-wrap {
  display: none;
}

/* Indonesian sentences in package/room lists: no Title Case. */
.service-details-wrapper .details-content .details-list-item ul li,
.service-details-wrapper .details-content .details-list-item ul li span {
  text-transform: none;
}

/* Dark fallback under decorative image layers (shown only if the image fails; lets text be judged as text-on-photo). */
.room-section .bg-image {
  background-image: linear-gradient(#1C1C1C, #1C1C1C);
}
.room-section .bg-image img {
  object-fit: cover;
}
.hotel-dining-wrapper .hotel-dining-content {
  background-color: var(--theme);
}
.header-main .header-right .call-item .shape img,
.header-main .header-right .header-button .theme-btn img,
.hero-1 .hero-content .theme-btn img,
.feature-wrapper .feature-content .feature-contact-item .call-item .shape img,
.aminities-wrapper .aminities-items .aminities-image .content-box .shape img {
  object-fit: cover;
}

/* Theme button hover fill: keep the rotated layer flat while idle (it otherwise overflows the button box). */
.theme-btn:not(:hover)::before {
  transform: none !important;
}

/* Touch targets >= 24px for small text links (WCAG 2.5.8). */
.footer-widget-wrapper .single-footer-widget .list li a,
.footer-bottom .footer-list li a,
.breadcrumb-items li a,
.feature-contact-item .call-item h6 a,
.service-wrapper .service-main-item .service-card-item .services-image .content h3 a {
  display: inline-block;
  padding-block: 3px;
}
.aminities-wrapper .aminities-items .aminities-image > a:first-child {
  display: block;
}

/* Newsletter on phones: the button covered the end of the placeholder. */
@media (max-width: 575px) {
  .footer-newsletter form .form-clt .theme-btn {
    padding: 14px 16px;
    font-size: 14px;
  }
}

/* Hero: reserve thumbnail height so the hero does not jump when images load (CLS). */
.hero-1 .hero-content .hero-wrapper .hero-box .hero-item .hero-image img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.hero-1 .signature-image img {
  aspect-ratio: 762 / 293;
}
.hero-1 .hero-content .theme-btn {
  height: auto;
  min-height: 55px;
  padding-block: 16px;
}

/* Blog sidebar links: >= 24px targets. */
.category-list li a,
.recent-content h5 a,
.tagcloud a {
  display: inline-block;
  padding-block: 4px;
}

/* Hero slider before Swiper starts: lay the slides out as Swiper will (3 per row from 767px, 1 below),
   so the hero keeps its height when the script runs (was a 0.17 layout shift). */
.hero-slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 20px;
  overflow: hidden;
}
.hero-slider:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 100%;
}
@media (min-width: 767px) {
  .hero-slider:not(.swiper-initialized) .swiper-slide {
    flex-basis: calc((100% - 40px) / 3);
  }
}

/* About "Kenali kami" bar: glass texture keeps its proportions when the bar stacks on phones. */
.about-wrapper .about-content .hero-button-item .top-shape img {
  object-fit: cover;
}
.details-content .list li a {
  display: inline-block;
  padding-block: 3px;
}

/* Sticky (scrolled) header is light: drop the dark fallback panel there. */
.sticky.header-1.header-3 .header-main .main-menu,
.sticky.header-1.header-3 .header-main .header-right .call-item {
  background-color: transparent;
}

/* Custom cursor ring sits in the top-left corner on touch screens / tablets (no mouse to follow). */
@media (hover: none), (max-width: 1199px) {
  .mouseCursor {
    display: none !important;
  }
}