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

/*
 * FAQ accordion — one brand design site-wide.
 *
 * The theme's FAQ widget shipped its own look (Playfair heading, Manrope
 * question at 1.25rem, #333 answer, 5% side padding, 900px cap). Restyle it to
 * match the approved venue-sample FAQ: Cormorant question, brass +/- marker,
 * Jost Light answer, hairline dividers, full content width. This replaces the
 * old mobile-only font-size bump, which the clamp below now covers.
 */

/* Span the section's content width instead of a 900px, 5%-inset column. */
.ybw-faq-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.ybw-faq-header,
.ybw-faq-wrap {
  max-width: none !important;
}

/* Section heading + intro */
.ybw-faq-header h2 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  line-height: 1.12 !important;
  color: #0d1014 !important;
}
.ybw-faq-header p {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #545454 !important;
}

/* Hairline dividers, including a rule above the first item. */
.ybw-faq-item {
  border-bottom: 1px solid #ece2db !important;
}
.ybw-faq-item:first-child {
  border-top: 1px solid #ece2db !important;
}

/* Question */
.ybw-faq-btn {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(20px, 2.2vw, 25px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #0d1014 !important;
  padding: 26px 0 !important;
  gap: 24px;
}

/* Marker: "+" closed, "–" open (the theme rotated a single "+" into a cross). */
.ybw-faq-btn::after {
  content: '+' !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: #b08a5d !important;
  transform: none !important;
}
.ybw-faq-item.active .ybw-faq-btn::after {
  content: '–' !important;
  transform: none !important;
}

/* Answer */
.ybw-faq-body p {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: #545454 !important;
  padding-bottom: 28px !important;
  padding-right: 44px;
}

/*
 * 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;
  }
}

/* =====================================================================
   GLOBAL BRAND HEADER & FOOTER (applied site-wide)
   The approved new header/footer styling, scoped to the Elementor header/
   footer locations so page content is not affected. The homepage carries its
   own copy inline; this makes every other page match.
   ===================================================================== */

/* ---- Header: nav -> Jost, logo sizing, Dusty-Rose button, Blush burger ---- */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-item,
.elementor-location-header .sub-menu a {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400 !important;
}
.elementor-location-header img[src*="ybw-rebrand-logo"] {
  width: auto !important; height: 54px !important; max-width: none !important;
}
.elementor-location-header .elementor-button {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px;
  font-family: 'Jost', sans-serif !important; font-weight: 400 !important; font-size: 11.5px !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 13px 30px !important;
  border-radius: 2px !important; border: 1px solid #e8c7c2 !important;
  background-color: #e8c7c2 !important; color: #0d1014 !important;
}
.elementor-location-header .elementor-button:hover { background-color: #ddb2ab !important; border-color: #ddb2ab !important; }
.elementor-location-header .elementor-button .elementor-button-text {
  color: #0d1014 !important; font-family: 'Jost', sans-serif !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important;
}
.elementor-menu-toggle { color: #f9dfda !important; }
.elementor-menu-toggle svg { fill: #f9dfda !important; }

/* ---- Footer: Graphite surface, Blush text, new light logo ---- */
.elementor-location-footer,
.elementor-location-footer [data-element_type="container"],
.elementor-location-footer .elementor-widget-container { background-color: #545454 !important; }
.elementor-location-footer :is(p, a, span, li, h1, h2, h3, h4, h5, h6, i, .elementor-heading-title) { color: #fcedea !important; }
.elementor-location-footer svg, .elementor-location-footer path { fill: #fcedea !important; }
.elementor-location-footer .elementor-widget-text-editor a { color: #fcedea !important; text-decoration: none !important; }
.elementor-location-footer img[src*="ybw-rebrand-logo"] {
  width: auto !important; height: 60px !important; max-width: none !important; filter: none !important;
}

/* ---- Fixed mobile WhatsApp / Email bar: Dusty-Rose strip, Ink text/icon ---- */
.elementor-location-footer .elementor-element-6aaa8db :is(.elementor-icon-box-title, a, span, div),
.elementor-location-footer .elementor-element-670a0b0 :is(.elementor-icon-box-title, a, span, div) { color: #0d1014 !important; }
.elementor-location-footer .elementor-element-6aaa8db :is(.elementor-icon, svg, svg *, path),
.elementor-location-footer .elementor-element-670a0b0 :is(.elementor-icon, svg, svg *, path) {
  fill: #0d1014 !important; stroke: #0d1014 !important; color: #0d1014 !important;
}
@media (max-width: 767px) {
  .elementor-location-footer .elementor-element-7bdadbc.e-con,
  .elementor-location-footer .elementor-element-7bdadbc .e-con,
  .elementor-location-footer .elementor-element-7bdadbc .elementor-widget-container {
    background-color: #e8c7c2 !important;
  }
  /* header logo vertical centring on mobile (row has 10px top / 0 bottom) */
  .elementor-element-4ea96f3c > .e-con-inner { padding-bottom: 10px !important; }
}

/* ---------------------------------------------------------------------------
 * TEMPORARY: hide the Voiceflow chatbot launcher/UI site-wide. The widget
 * script still loads (window.voiceflow stays active — backend untouched); this
 * only hides its rendered container. Delete this block to bring the icon back.
 * ------------------------------------------------------------------------- */
#voiceflow-chat { display: none !important; }