/*
 * Preview-scoped overrides. Values are pulled from the LIVE site's computed
 * styles (dubaihousekeeping.com) so the preview matches pixel-for-pixel.
 *
 * Tailwind's Preflight resets h1-h6 to inherit their parent's font-size /
 * font-weight and adds `margin: 0`. Because Next.js emits Tailwind styles
 * before the theme <link>s we inject in HomeView, Tailwind wins by cascade
 * order on any theme rule with the same specificity. Bumping the theme rules
 * to !important restores the intended look without editing globals.css or the
 * imported theme source.
 */

/* "Eyebrow" italic-green sub-heading above each major section title. */
.abtContent h3 {
  font-size: 20px !important;
  line-height: 28px !important;
  text-transform: capitalize !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--light-green, #1EA242) !important;
  margin-bottom: 8px !important;
}

/* Section title (h2 inside .abtContent). LIGHT BLUE - not dark blue. */
/* :not(.text-white) so titles on dark backgrounds (schedule CTA, blue CTA
 * bar) still show white when the JSX marks them with Bootstrap's text-white. */
.abtContent h2:not(.text-white) {
  font-size: 36px !important;
  line-height: normal !important;
  font-weight: 600 !important;
  color: var(--light-blue, #156CBB) !important;
  font-style: normal !important;
  text-transform: none !important;
}
.abtContent h2.text-white {
  font-size: 36px !important;
  line-height: normal !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Body copy inside .abtContent. Same exclusion for .text-white paragraphs. */
.abtContent p:not(.text-white) {
  font-size: 18px !important;
  line-height: 28px !important;
  color: var(--light-grey, #747474) !important;
}
#offering .abtContent p:not(.text-white) {
  padding: 0px 150px;
}
.abtContent p.text-white {
  font-size: 18px !important;
  line-height: 28px !important;
  color: #fff !important;
}

/* Service card title inside the offering slider. */
.offeringBox h2 {
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  text-align: center;
}
.offeringBox h2 a {
  font-size: 18px;
  line-height: 28px;
  text-align: center !important;
  color: #134779 !important;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: capitalize !important;
}
.offeringBox h2 a:hover {
  color: var(--light-blue, #156CBB) !important;
}

/* FAQ accordion button - button element inherits Tailwind's <button> reset
 * unless overridden here. */
#faqs .accordion-button {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--light-blue, #156CBB) !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────
 * Values captured live from dubaihousekeeping.com so the preview matches
 * the production footer typography and colour palette.
 */
footer {
  background: linear-gradient(0deg, rgb(10, 30, 59) 0%, rgb(10, 30, 59) 0%, rgb(15, 60, 116) 100%) !important;
  color: #fff !important;
}
footer .footer {
  padding: 48px 0 !important;
}
footer .footer h3 {
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 24px !important;
}
footer .footer p,
footer .footer li,
footer .footer span {
  color: #fff !important;
}
footer .footer a {
  color: #fff !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
footer .footer a:hover {
  color: var(--light-green, #1EA242) !important;
}

/* Contact column - "Office Number", "To make A Booking" etc. sub-headings */
footer .addContent h3 {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}
footer .addContent p {
  margin-bottom: 0 !important;
}

/* Contact column list: icon on the left, text next to it. Tailwind's reset
 * strips <li> back to display:list-item, so re-assert flex here. */
footer .footer-4 ul,
footer .footerContent ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
footer .footer-4 > ul > li,
footer .footerContent > ul > li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  list-style: none !important;
}
footer .footer-4 > ul > li > div:first-child,
footer .footerContent > ul > li > div:first-child {
  flex: 0 0 auto;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .footer-4 > ul > li > .addContent,
footer .footer-4 > ul > li > p,
footer .footerContent > ul > li > .addContent,
footer .footerContent > ul > li > p {
  flex: 1 1 auto;
  margin: 0;
}
footer .footer-4 > ul > li > p a,
footer .footerContent > ul > li > p a {
  color: #fff !important;
}

/* The icon image itself */
footer .f-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
}

/* Social icons row */
footer .social-links ul {
  gap: 12px !important;
}
footer .social-links li a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px !important;
}
footer .social-links img {
  max-width: 22px;
  max-height: 22px;
}

/* Google + Facebook reviews bar sits just above the dark gradient */
.Google-fb-reviews img {
  max-height: 90px;
  height: auto;
  width: auto;
}

/* ── Video testimonial cards ────────────────────────────────────────── */
/* Swiper handles the coverflow rotation on the slide itself. The card
 * inside fills the slide so 3D depth reads correctly. */
#testimonial-section .swiper-slide {
  height: auto;
}
#testimonial-section .testimonial-listing {
  position: relative;
  width: 100%;
}
#testimonial-section .testimonial-listing img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
/* Non-active slides sit behind - nudge their z-index so the pagination arrows
 * still show above cards but cards don't fight the active one for click. */
#testimonial-section .swiper-slide-active {
  z-index: 2;
}
/* Pagination dots below the arc */
#testimonial-section .swiper-pagination {
  position: relative;
  margin-top: 12px;
}
#testimonial-section .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--light-blue, #156CBB);
  opacity: 0.35;
  transition: opacity 0.2s;
}
#testimonial-section .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ── Mobile (≤ 480px) ────────────────────────────────────────────────
 * Legacy WordPress theme was built desktop-first; these rules make the
 * preview readable and stack layouts cleanly on phones. Typography drops
 * one step, flex rows collapse to columns, and buttons go full-width.
 * Values chosen to match the LIVE mobile site's computed styles.
 */
/* Mobile action bar - visible only ≤ 991px (has d-md-none in JSX).
 * Sits between the top-nav (logo + hamburger) and the primary nav, matching
 * the live site's mobile pattern: blue strip with phone on the left, green
 * Book Now on the right.
 */
.mobileActionBar {
  display: none;
}
@media (max-width: 991px) {
  .mobileActionBar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #134779;
    padding: 12px 16px;
  }
  .mobileActionBar .mobileCall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 18px;
    font-weight: 600;
  }
  .mobileActionBar .mobileCallIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
  }
  .mobileActionBar .mobileCallIcon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
  }
  .mobileActionBar .mobileBookBtn {
    display: inline-block;
    background: var(--light-green, #1EA242);
    color: #fff !important;
    padding: 8px 22px;
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
  }
  .mobileActionBar .mobileBookBtn:hover {
    background: #17862f;
  }
}

/* ── Mobile header (≤ 991px) ─────────────────────────────────────────
 * Below the navbar-expand-md breakpoint, the primary nav collapses behind
 * the hamburger. The .RightNav wrapper only reveals when React sets the
 * .is-open class (state-driven, no Bootstrap JS dependency). The top-nav
 * right side (call-us + app-download blocks) hides on phones since the
 * hamburger drawer covers the same actions.
 */
@media (max-width: 991px) {
  header .topNavRightSide {
    display: none !important;
  }
  header .topNavLeftSide {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
  }
  header .top-nav {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  header .navbar-brand img {
    max-height: 34px !important;
    width: auto !important;
  }
  header .navbar-toggler {
    display: block !important;
    /* Legacy WP theme parks the toggler at position:absolute; top:-50px.
     * Reset it back into the flex row so it sits next to the logo. */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    padding: 6px 10px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  header .navbar-toggler-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(19,71,121,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  header nav.navbar-expand-md {
    background: transparent;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  header nav.navbar-expand-md .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  header nav.navbar-expand-md .leftNav {
    display: none !important;
  }
  header .RightNav {
    display: none;
    width: 100%;
  }
  header .RightNav.is-open {
    display: block;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
  header .RightNav .navbar-nav {
    flex-direction: column !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  header .RightNav .navbar-nav .nav-item {
    width: 100%;
  }
  header .RightNav .navbar-nav .nav-link {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    color: #134779 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  header .RightNav .navbar-nav .nav-link:hover {
    background: rgba(19,71,121,0.05);
  }
  header .RightNav .navbar-nav .book-now-btn {
    margin: 12px 20px !important;
  }
  header .RightNav .navbar-nav .book-now-btn .nav-link {
    background: var(--light-green, #1EA242);
    color: #fff !important;
    border-radius: 8px;
    text-align: center;
    border: none;
  }
}

@media (max-width: 480px) {
  /* Section typography */
  .abtContent h2:not(.text-white),
  .abtContent h2.text-white {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .abtContent h3 {
    font-size: 16px !important;
    line-height: 22px !important;
  }
  .abtContent p:not(.text-white),
  .abtContent p.text-white {
    font-size: 15px !important;
    line-height: 24px !important;
  }
  #offering .abtContent p:not(.text-white) {
    padding: 0 !important;
  }

  /* Hero */
  .hero-banner {
    border-radius: 20px !important;
  }
  .hero-banner::before {
    border-radius: 20px !important;
  }
  .heroBannerText h2.fw-bold {
    font-size: 22px !important;
    line-height: 1.3 !important;
    padding: 0 10px;
  }
  .heroBannerText p {
    font-size: 14px !important;
    line-height: 22px !important;
    padding: 0 12px;
  }
  .google-review-img h6 {
    font-size: 13px !important;
  }

  /* Buttons - full-width and comfortable tap target */
  .custom-btn {
    display: inline-block;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* Blue CTA bar (#cta) - the two columns stack, centre on mobile */
  #cta .row.cta-row {
    padding: 20px 16px !important;
    text-align: center;
  }
  #cta .row.cta-row .col-md-8 > .d-flex,
  #cta .row.cta-row .col-md-4 > div {
    justify-content: center !important;
    text-align: center;
  }
  #cta .row.cta-row .col-md-4 {
    justify-content: center !important;
    margin-top: 16px;
  }
  #cta .phone-number,
  #cta .phone-number a {
    font-size: 18px !important;
  }
  /* Legacy style.css hides the phone icon / label in #cta and #schedule
   * below md. Restore them - the new "Call Us" block is designed with them. */
  #cta .topNavRightIcon,
  #schedule .topNavRightIcon {
    display: flex !important;
  }
  #cta .topNavRightIcon img,
  #schedule .topNavRightIcon img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }
  #cta .topNavRightText > span,
  #schedule .topNavRightText > span {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    opacity: 0.85;
  }

  /* Subscription / Schedule CTA - button + Call Us should stack cleanly */
  #schedule .cta-btns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  #schedule .cta-btns .phone-number {
    font-size: 16px !important;
    white-space: nowrap;
  }
  #schedule .col-md-6.left_animate {
    margin-bottom: 24px;
  }

  /* Offering (service) cards */
  .offeringBox h2 {
    font-size: 20px !important;
  }
  .offeringBox h2 a {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /* FAQ "Call any time" floating box */
  .callAnyTime {
    padding: 10px !important;
  }
  .callAnyTime .phone-number a {
    font-size: 16px !important;
  }

  /* Specialities grid - cards were 3 wide, stack to 1 wide */
  .keepingServices .keepingServicesList.col-md-4 {
    margin-bottom: 20px;
  }

  /* Section padding - trim vertical rhythm on tiny screens */
  section.pt-5,
  section.pb-5 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Prevent numeric strings breaking inside a phone link */
  .phone-number,
  .phone-number a {
    white-space: nowrap;
  }
}

/* Booking form - the legacy theme paints an empty grey square via
 * `.form-control::before` as a fallback icon placeholder. When the input has a
 * proper background-image id (#name, #mobileNumber, #emailId, #serviceDate),
 * that square sits *on top* of the icon and shows as a broken chip. Kill it. */
.bookingFormSection .form-control::before {
  display: none !important;
  content: none !important;
}
#bookingForms .form-control::before { display: none !important; }

/* Mobile input - flag + dial code button sits next to the number field, both
 * inside the .w-22 column so widths stay percentage-based like the live site.
 * The legacy stylesheet adds border-right to EVERY input in the form, so the
 * dial-code button uses that same divider treatment and the phone input drops
 * its own border to avoid a double line. */
#bookingForms .mobileInputRow {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-right: 1px solid #eeeeee;
}
#bookingForms .dialCodeToggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--dark-blue, #134779);
  white-space: nowrap;
}
#bookingForms .dialCodeToggle img {
  width: 22px;
  height: 15px;
  border-radius: 2px;
}
#bookingForms .dialCodeChevron {
  font-size: 10px;
  color: var(--dark-blue, #134779);
}
#bookingForms .mobileNumberInput {
  border: none !important;
  outline: none;
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  /* Legacy CSS also draws a phone icon as background on #mobileNumber - that
   * duplicates the flag next to it. Suppress it. */
  background-image: none !important;
}

/* Submit cell - the legacy layout wrapped the submit in a percentage-width
 * column, which forced "Book Now" to wrap onto two lines when the label was
 * longer. Let the button size itself and stop text-wrapping. */
#bookingForms .bookingSubmitCell {
  display: inline-flex;
  align-items: center;
  padding-left: 12px;
}
#bookingForms .bookingSubmitBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  min-height: 44px;
  line-height: 1;
}
#bookingForms .bookingSubmitBtn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
#bookingForms .bookingSubmitBtn span {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

/* Copyright strip */
footer .copyright {
  padding: 24px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.15);
}
footer .copyright,
footer .copyright a,
footer .copyright li,
footer .copyright span {
  color: #fff !important;
  font-size: 14px !important;
}
footer .copyright a {
  text-decoration: none !important;
}
footer .copyright .separator {
  opacity: 0.5;
}

/* Mobile: QR + app badge should sit side-by-side inside each app link,
 * not stacked. Overrides the mobile rule in style.css that gives
 * .App-QR-img a bottom margin and lets the images wrap to two rows. */
@media (max-width: 767px) {
  ul.list-unstyled.d-flex.application li a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  ul.list-unstyled.d-flex.application .App-QR-img {
    width: 110px !important;
    margin-bottom: 0 !important;
  }
  ul.list-unstyled.d-flex.application li img:not(.App-QR-img) {
    width: 140px !important;
  }
}

/* Footer accordion. Desktop shows everything, mobile collapses each section. */
.footer-accordion .footer-accordion-toggle { display: none; }
.footer-accordion .footer-heading { cursor: default; }

/* Legal and Policy shows on mobile only. */
@media (min-width: 768px) {
  .footer-legal-mobile { display: none !important; }
}

/* Desktop stacking inside the triple column: Blog on top, then Quick Links,
 * then Legal and Policy. Space them so the stack reads as three sections. */
@media (min-width: 768px) {
  footer .footer-triple-col .footer-accordion + .footer-accordion .footer-heading {
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  /* Kill grid gutters + wrapper padding on mobile so every accordion row
   * is exactly the height of its own heading. */
  footer .footer .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
  footer .footer-triple-col,
  footer .footer-accordion {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }
  footer .footer-accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  footer .footer-accordion .footerContent,
  footer .footer-accordion > div,
  footer .footer-accordion .footer-1,
  footer .footer-accordion .footer-2,
  footer .footer-accordion .footer-3 {
    padding: 0 !important;
    margin: 0 !important;
  }
  footer .footer-accordion .footer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 18px 4px;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    cursor: pointer;
  }
  footer .footer-accordion .footer-heading a {
    color: #fff !important;
    text-decoration: none !important;
    pointer-events: none;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
  }
  footer .footer-accordion .footer-accordion-toggle {
    display: inline-block;
    font-size: 24px;
    line-height: 1;
    font-weight: 300;
    margin-left: 12px;
  }
  footer .footer-accordion .footer-body {
    display: none;
    padding: 0 4px 18px;
  }
  footer .footer-accordion.is-open .footer-body {
    display: block;
  }
}

/* Related blogs section on single blog page, matches live site */
.related-blog-sec .single-page-realted-blog .subtitle,
.related-blog-sec h6.subtitle {
  font-family: Outfit, sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-style: italic;
  color: #1EA242;
  line-height: 28px;
  text-transform: capitalize;
  margin: 0 0 8px;
}
.related-blog-sec .abtContent.single-page-realted-blog h2 {
  font-family: Outfit, sans-serif;
  font-size: 40px !important;
  font-weight: 600 !important;
  color: #156CBB !important;
  margin: 0 0 8px !important;
  line-height: 1.26 !important;
}
.related-blog-sec .related-post-card.shadow {
  height: 280px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  background: #fff;
}
.related-blog-sec .related-post-thumbnail,
.related-blog-sec .related-post-thumbnail img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
}
.related-blog-sec h3.related-post-title {
  font-size: 18px;
  padding: 22px 15px;
  margin: 0;
  margin-top: 22px;
}
.related-blog-sec h3.related-post-title a {
  color: #212121;
  text-decoration: none;
}
@media (max-width: 767px) {
  .related-blog-sec .abtContent.single-page-realted-blog h2 {
    font-size: 26px !important;
    line-height: 1.26 !important;
  }
  .related-blog-sec .single-page-realted-blog .subtitle { font-size: 18px; }
}

/* -------- Single blog post: mobile polish -------- */
@media (max-width: 767px) {
  /* Content should read first on mobile, TOC after (theme flipped it with
   * column-reverse for a desktop split view). */
  .single-post .row.tabel-of-content-area-blog {
    flex-direction: column;
  }
  /* Hero band: less vertical space, breadcrumbs wrap cleanly. */
  .single-hero-section .blog-bg-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .single-post .breadcrumbs {
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
  }
  .single-post h1,
  .single-post h1.Blog-heading {
    font-size: 24px !important;
    line-height: 32px !important;
    margin-top: 12px !important;
  }
  .single-post h2 { font-size: 22px; line-height: 1.3; margin-top: 22px; }
  .single-post h3 { font-size: 19px; line-height: 1.35; margin-top: 18px; }
  .single-post p,
  .single-post li { font-size: 16px; line-height: 1.65; }
  .single-post img { max-width: 100%; height: auto; }

  /* Table of contents is hidden on mobile — the post is short enough to
   * scroll and the sidebar takes too much vertical space up front. */
  .single-post .toc-sidebar,
  .single-post aside.toc-sidebar {
    display: none !important;
  }

  /* Author box: stack avatar over text on narrow screens. */
  .single-post .author-box,
  .single-post .authorBox {
    flex-direction: column;
  }

  /* FAQ accordion on mobile: light-blue question band with blue chevron,
   * rounded card per item, matches the design in the mobile mock. */
  #faq-single .accordion-item {
    border: 1px solid #d6e8f7;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    background: #fff;
  }
  #faq-single .accordion-item + .accordion-item {
    margin-top: 0;
    border-top: 0;
  }
  #faq-single .accordion-item:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  #faq-single .accordion-item:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  #faq-single .accordion-header { margin: 0; }
  #faq-single .accordion-button {
    background-color: #ffffff !important;
    color: #212121 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    padding: 16px 20px;
    border: 0;
    box-shadow: none !important;
  }
  #faq-single .accordion-button:not(.collapsed) {
    background-color: #e7f1fc !important;
    color: #156cbb !important;
  }
  #faq-single .accordion-button::after {
    filter: invert(37%) sepia(69%) saturate(1287%) hue-rotate(184deg) brightness(94%) contrast(90%);
    width: 16px;
    height: 16px;
    background-size: 16px;
  }
  #faq-single .accordion-body {
    padding: 16px 20px 20px;
    color: #212121;
    font-size: 15px;
    line-height: 1.6;
    background: #fff;
  }
  #faq-single .accordion-body p { margin: 0 0 10px; font-size: 15px; }
  #faq-single .accordion-body p:last-child { margin-bottom: 0; }

  /* Call/book CTA strip: the WP theme sets padding: 41px !important, which
   * cramps content on a phone. Stack vertically, add breathing room. */
  .cta-call-book.d-flex.align-items-center.justify-content-between.p-3.rounded {
    padding: 20px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    flex-direction: column !important;
    gap: 16px;
    align-items: flex-start !important;
  }
  .cta-call-book .cta-book-btn,
  .cta-call-book .cta-book-btn a { width: 100%; text-align: center; }
  .cta-call-book .cta-book-btn a { padding: 12px 24px !important; display: block; }
  .cta-call-book .cta-phone-numbers.fw-bold { font-size: 19px; }

  /* Related-blogs section: one card per row, natural gap. */
  .related-blog-sec { margin: 32px 0 !important; }
  .related-blog-sec .single-page-realted-blog { margin-top: 40px !important; }
  .related-blog-sec .related-post-card.shadow { height: auto; }
  .related-blog-sec .related-post-thumbnail img { height: auto; max-height: 180px; }

  /* Share bar: wrap nicely instead of overflowing. */
  .single-post .share-bar,
  .single-post .share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 16px 0;
  }

  /* Tables on mobile — mirror the live-site behavior: table has a fixed
   * min-width (~500px, same as WP), wrapper (or the table itself for admin
   * inserts) scrolls horizontally. Text inside cells wraps at column widths
   * determined by the fixed 500px table width, so the table never balloons
   * to fit a long paragraph on one line. */
  .single-post .simple-table-wrapper .table-responsive,
  .single-post .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Admin-inserted tables have no `.table-responsive` wrapper — make the
   * <table> itself the scroll container. Scroll-snap on the x-axis so a
   * swipe always lands with a column edge flush to the viewport — no more
   * half-cut columns like "Wh dri" or "oung families". */
  .single-post table.simple-acf-table {
    display: block;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
  }
  .single-post .table-responsive {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
  }
  .single-post table.simple-acf-table th,
  .single-post table.simple-acf-table td {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Inside, thead/tbody act as real tables at exactly 500px — matches the WP
   * theme's `.simple-table-wrapper table { min-width: 500px }` rule. Content
   * wraps within column widths derived from that 500px, not the other way
   * around. */
  /* Older approach removed: `display: table` on thead/tbody forces them into
   * independent layouts with different column widths. The scroll wrapper at
   * the bottom of this file now handles overflow while the <table> itself
   * stays a single-flow table (thead + tbody share one column layout). */
  .single-post table.simple-acf-table th,
  .single-post table.simple-acf-table td {
    /* Match live: tighter padding + smaller font so cells fit more text at
     * the 500px table width, which reduces mid-cell clipping when scrolling. */
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 0;
  }
  .single-post table.simple-acf-table th {
    font-size: 14px;
  }
  /* Long URLs still need to be breakable so they don't blow past the table
   * width — scope the aggressive rule to <a> only. */
  .single-post table.simple-acf-table a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* Blog tables. Unify admin-inserted tables (bare <table class="simple-acf-table">)
 * with imported ones (wrapped in `.simple-table-wrapper > .table-responsive`)
 * so both render as the FAQ callout: rounded light-blue outer frame, full-width
 * blue banner header, white body, no visible inner cell borders. The wrapped-
 * table rules use `.simple-table-wrapper` prefix so they beat the WP theme's
 * `style.css` at equal-or-higher specificity without needing `!important`.
 */
table.simple-acf-table,
.simple-table-wrapper table.simple-acf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #c8dcf0;
  border-radius: 8px;
  overflow: hidden;
  /* No extra vertical margin — the WP theme's `.simple-table-wrapper` gets its
   * own `margin-bottom: 2rem` and imported tables sit inside `.mb-5` which
   * adds 3rem !important. Stacking another 24px here left a huge gap between
   * the table and the next section. */
  margin: 0;
  background: #fff;
  table-layout: auto;
  min-width: 0;
}
/* Trim the `.mb-5` bottom margin the WP import put on every table wrapper —
 * 3rem below every callout was way too much and left a huge blank gap
 * before the next section. */
.simple-post .simple-table-wrapper.mb-5,
.single-post .simple-table-wrapper.mb-5,
.single-post section.simple-table-wrapper.mb-5 {
  margin-bottom: 1.5rem !important;
}
table.simple-acf-table th,
table.simple-acf-table td,
.simple-table-wrapper table.simple-acf-table th,
.simple-table-wrapper table.simple-acf-table td {
  padding: 18px 24px;
  vertical-align: top;
  border: 0;
  background: transparent;
}
/* Row separators for multi-row data tables. A single-body-row FAQ callout
 * only has one <tr> under the header, so no separator shows there. */
table.simple-acf-table tbody tr + tr td,
.simple-table-wrapper table.simple-acf-table tbody tr + tr td {
  border-top: 1px solid #e6eef7;
}
/* Column separators. Applied on every cell after the first in a row for both
 * header and body, so single-column FAQ callouts still show no vertical line
 * while multi-column data tables get clean dividers. */
table.simple-acf-table tr > th + th,
table.simple-acf-table tr > td + td,
.simple-table-wrapper table.simple-acf-table tr > th + th,
.simple-table-wrapper table.simple-acf-table tr > td + td {
  border-left: 1px solid #e6eef7;
}
/* Header row keeps a slightly stronger divider so column names stay legible
 * against the blue banner. */
table.simple-acf-table tr > th + th,
.simple-table-wrapper table.simple-acf-table tr > th + th {
  border-left-color: rgba(255, 255, 255, 0.25);
}
table.simple-acf-table th,
.simple-table-wrapper table.simple-acf-table th,
.simple-table-wrapper table.simple-acf-table thead tr th {
  background-color: #1a6fbb;
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  font-size: 17px;
}
table.simple-acf-table td { color: #212121; }
table.simple-acf-table td p { margin: 0 0 10px; }
table.simple-acf-table td p:last-child { margin-bottom: 0; }
table.simple-acf-table td ul,
table.simple-acf-table td ol { margin: 0; padding-left: 20px; }
table.simple-acf-table td ul li,
table.simple-acf-table td ol li { margin-bottom: 6px; }
table.simple-acf-table td ul li::marker { color: #1a6fbb; }
/* Kill the zebra stripe the WP theme applies to imported tables so both
 * styles look the same. */
.simple-table-wrapper table.simple-acf-table tbody tr:nth-child(even) {
  background: transparent;
}
/* The imported WP theme adds `border="1"` inline on the <table>; suppress it. */
table.simple-acf-table[border] { border: 1px solid #c8dcf0; }
table.simple-acf-table[border] td,
table.simple-acf-table[border] th { border: 0; }

/* MOBILE table overrides. TableMobileLabels wraps every simple-acf-table in
 * `<div class="table-scroll">` at render time — that wrapper is the scroll
 * container so the <table> itself stays a normal single-flow table, and
 * <thead>+<tbody> share one column-width computation (they wouldn't if
 * either were forced to `display: table` independently). */
@media (max-width: 767px) {
  /* Side padding on the post container so content isn't flush to the phone
   * edge. Applies to text paragraphs, tables, callouts, everything inside. */
  .container.single-post {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .single-post .col-md-8,
  .single-post .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
  .single-post .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 20px 0;
    border-radius: 8px;
    border: 1px solid #c8dcf0;
  }
  .single-post .table-scroll > table.simple-acf-table {
    display: table;
    width: 500px;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  .single-post .table-scroll > table.simple-acf-table th,
  .single-post .table-scroll > table.simple-acf-table td {
    padding: 18px;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    min-width: 0;
  }
  .single-post .table-scroll > table.simple-acf-table th {
    background-color: #1a6fbb;
    color: #fff;
    font-weight: 600;
    text-align: left;
  }
  /* Inner <p> tags are what actually paint the cell text; force their size. */
  .single-post .table-scroll > table.simple-acf-table th p,
  .single-post .table-scroll > table.simple-acf-table td p {
    font-size: 14px !important;
    line-height: 1.45;
    margin: 0 0 6px;
  }
  .single-post .table-scroll > table.simple-acf-table th p:last-child,
  .single-post .table-scroll > table.simple-acf-table td p:last-child {
    margin-bottom: 0;
  }
  .single-post .table-scroll > table.simple-acf-table a {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}