/*
 * Post-migration layout fixes (loaded last, after the Elementor CSS).
 * Keep additions here small, targeted and commented.
 */

/*
 * FAQ accordion questions (.ybw-faq-btn) were 1.25rem — which is 12.5px given
 * the theme's 62.5% root font-size — on mobile. Bump to 14.5px for readability.
 */
@media (max-width: 767px) {
  .ybw-faq-btn {
    font-size: 14.5px !important;
  }
}

/*
 * Mobile (≤767px): consistent left/right content gutter across the whole site.
 * Some Elementor sections are full-width with no horizontal padding, so their
 * heading/text ran edge-to-edge; other text widgets carried percentage side
 * margins that over-indented the copy. Normalise both to the standard 20px
 * gutter so every page's content lines up on the left and right.
 */
@media (max-width: 767px) {
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    .e-con-full:has(
        > .elementor-widget-heading,
        > .elementor-widget-text-editor,
        > .elementor-widget-button
      ):not(.e-grid):not(:has(.e-con)):not(:where(.e-grid *, .e-con-inner *)) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Same gutter for boxed sections whose inner wrapper lost its horizontal
     padding, so their text no longer runs edge-to-edge (e.g. the "Best Elopement
     Locations" section). Only inners that hold text directly, with no nested
     containers, are touched. */
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    .e-con-boxed
    > .e-con-inner:has(
        > .elementor-widget-heading,
        > .elementor-widget-text-editor,
        > .elementor-widget-button
      ):not(:has(.e-con)):not(:where(.e-grid *, .e-con-inner *)) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    .elementor-widget-text-editor
    > .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Left-align content on mobile so every page's headings and copy read
     consistently, instead of some sections being centre-aligned. Narrow heading
     widgets that are centred by their flex parent are pulled left too. */
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    :is(.elementor-widget-heading, .elementor-widget-text-editor),
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    :is(.elementor-widget-heading, .elementor-widget-text-editor) * {
    text-align: left !important;
  }
  :where(
    [data-elementor-type='wp-page'],
    [data-elementor-type='single-page'],
    [data-elementor-type='single-post'],
    [data-elementor-type='archive']
  )
    > .e-con
    .elementor-widget-heading {
    align-self: flex-start !important;
  }

  /* Keep the homepage hero overlay centred. */
  .elementor-2 .elementor-element.elementor-element-b4bceb1,
  .elementor-2 .elementor-element.elementor-element-b4bceb1 * {
    text-align: center !important;
  }
}

/*
 * Homepage (Elementor id 2) — mobile-only (≤767px): left-align the section
 * headings and their body copy that were centre-aligned (Our Services intro,
 * How to Plan, Venues, Wedding Stories, the welcome intro and the "see more"
 * link). The hero overlay is intentionally left centred.
 */
@media (max-width: 767px) {
  /* Text alignment (widgets and their inner containers). */
  .elementor-2 .elementor-element.elementor-element-7934d0c,
  .elementor-2 .elementor-element.elementor-element-7934d0c .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-e8b030,
  .elementor-2 .elementor-element.elementor-element-e8b030 .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-2004981,
  .elementor-2 .elementor-element.elementor-element-2004981 .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-a61e285,
  .elementor-2 .elementor-element.elementor-element-a61e285 .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-406a777,
  .elementor-2 .elementor-element.elementor-element-406a777 .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-9c55e7c,
  .elementor-2 .elementor-element.elementor-element-9c55e7c .elementor-widget-container,
  .elementor-2 .elementor-element.elementor-element-4661f3a,
  .elementor-2 .elementor-element.elementor-element-4661f3a .elementor-widget-container {
    text-align: left !important;
  }
  /* Some of these widgets (e.g. the "Our Services" heading) are narrow boxes
     centred by their flex parent — pull the box itself to the left too. */
  .elementor-2 .elementor-element.elementor-element-7934d0c,
  .elementor-2 .elementor-element.elementor-element-a61e285,
  .elementor-2 .elementor-element.elementor-element-406a777,
  .elementor-2 .elementor-element.elementor-element-9c55e7c,
  .elementor-2 .elementor-element.elementor-element-4661f3a {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/*
 * Package-category pages (Elopement / Beach / Jungle / Villa …): an empty
 * Elementor "spacer" container sits between the "Popular … Wedding Packages"
 * heading and the package grid. Its min-height was set in viewport-height (vh)
 * units — and even differed between breakpoints — so the gap below the heading
 * scaled with each device's screen height and looked inconsistent.
 *
 * Give those empty spacers a small, fixed, device-consistent height instead.
 */
.elementor-element-0427428,
.elementor-element-252b7111,
.elementor-element-55ade1d0 {
  --min-height: 24px !important;
  min-height: 24px !important;
}

/*
 * Elopement package page (Elementor id 9825) — mobile-only (≤767px) fixes.
 */
@media (max-width: 767px) {
  /* "Why Our Elopement Packages in Bali Feel Different": the heading was
     centre-aligned while its body copy was left-aligned. Left-align it so the
     whole section reads consistently on mobile. */
  .elementor-9825 .elementor-element.elementor-element-5c46af0 {
    text-align: left !important;
  }

  /* "Why Choose Us for Your Bali Elopement Wedding Packages": this section's
     container is full-width with 0 horizontal padding, so on mobile its heading
     and text ran edge-to-edge (unlike the rest of the page). Add the same side
     gutter as the other sections and keep the content left-aligned. */
  .elementor-9825 .elementor-element.elementor-element-fae4990 {
    --padding-left: 20px !important;
    --padding-right: 20px !important;
  }
  /* Left-align this section's heading and body copy (the body text widget was
     centre-aligned). Targets the widgets inside so their own alignment is
     overridden. */
  .elementor-9825 .elementor-element.elementor-element-fae4990,
  .elementor-9825 .elementor-element.elementor-element-fae4990 .elementor-widget-heading,
  .elementor-9825 .elementor-element.elementor-element-fae4990 .elementor-widget-text-editor {
    text-align: left !important;
  }
  /* The body text widget also carried percentage side margins/padding (on its
     inner widget container), indenting it ~35px further than the heading. Reset
     those so it lines up with the same 20px gutter as the heading and the rest
     of the page. */
  .elementor-9825 .elementor-element.elementor-element-fae4990 .elementor-widget-text-editor,
  .elementor-9825 .elementor-element.elementor-element-fae4990 .elementor-widget-text-editor > .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}