/* Site-wide fixes on top of the exported Elementor/Astra CSS. Linked last in every page's <head>. */

/* Page titles were promoted from h2 to h1 for SEO; keep the original h2 look. */
#content h1.elementor-heading-title {
  font-size: 48px;
  font-size: 2.6666666666667rem;
  line-height: 1.3em;
}

/* Tablets (portrait iPad): two-column sections keep 70px padding, so 44px headings split words. */
@media (min-width: 768px) and (max-width: 1024px) {
  #content .e-con {
    padding-inline-start: min(var(--padding-left), 30px);
    padding-inline-end: min(var(--padding-right), 30px);
  }
  #content h1.elementor-heading-title,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 36px;
    line-height: 1.25em;
  }
}

/* Phones. The WordPress design kept desktop spacing on mobile: 50-70px side padding/margins
   and 44px headings squeezed text into ~150-280px columns and split words mid-word. */
@media (max-width: 767px) {
  /* Cap container side spacing (Elementor sets it through these variables). */
  #content .e-con {
    padding-inline-start: min(var(--padding-left), 20px);
    padding-inline-end: min(var(--padding-right), 20px);
    margin-inline-start: min(var(--margin-left), 0px);
    margin-inline-end: min(var(--margin-right), 0px);
  }

  /* Desktop zig-zag offsets on text widgets (e.g. margin: 0 70px 0 0). */
  #content :is(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-button, .elementor-widget-icon) > .elementor-widget-container {
    margin-inline: 0;
  }

  /* Project carousels: 30px inner padding inside an already padded card shrank the images. */
  #content .elementor-widget-image-carousel > .elementor-widget-container {
    padding-inline: 0;
  }

  /* Large headings: 44px -> 32px. Headings with their own size in Elementor keep it. */
  #content h1.elementor-heading-title,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 32px;
    line-height: 1.25em;
  }

  /* Right-aligned blocks from the desktop zig-zag layout read badly when stacked.
     Elementor reuses element ids across pages, so every rule is scoped to its page
     (.elementor-<page id>: 8 home, 1307 services, 220 about, 339 design, 1169 contact). */
  #content .elementor-8 .elementor-element-ba9252c {
    align-items: flex-start;
  }
  #content .elementor-8 .elementor-element-83a0801 .elementor-heading-title,
  #content .elementor-8 .elementor-element-d195c7d,
  #content .elementor-1307 :is(.elementor-element-bba193f, .elementor-element-83a0801, .elementor-element-bcb7138) .elementor-heading-title,
  #content .elementor-1307 :is(.elementor-element-045139e, .elementor-element-9286966),
  #content :is(.elementor-220, .elementor-339) .elementor-element-6d91102 .elementor-heading-title,
  #content :is(.elementor-220, .elementor-339) .elementor-element-69a2bb3 {
    text-align: left;
  }

  /* Icons pinned to the right edge above left-aligned text, and 200px wide on a 400px screen. */
  #content :is(.elementor-8, .elementor-1307) .elementor-element-e5c5170 .elementor-icon-wrapper,
  #content .elementor-1169 .elementor-element-59aea0d .elementor-icon-wrapper {
    text-align: left;
  }
  #content :is(.elementor-8, .elementor-1307) .elementor-element-e5c5170 .elementor-icon,
  #content .elementor-1169 .elementor-element-59aea0d .elementor-icon {
    font-size: 44px;
    padding: 22px;
  }
  #content :is(.elementor-8, .elementor-1307) .elementor-element-e5c5170 .elementor-icon svg,
  #content .elementor-1169 .elementor-element-59aea0d .elementor-icon svg {
    width: 44px;
    height: 44px;
  }

  /* Home/Services hero: the card is centred in a fixed 685px box, leaving ~120-200px of blank space below it.
     Keep the illustration visible above the card (same amount as before at 402px), drop the space below. */
  #content .elementor-8 .elementor-element-92b6fde {
    min-height: 0;
    padding-block-start: 29vw;
  }
  #content .elementor-1307 .elementor-element-92b6fde {
    min-height: 0;
    padding-block-start: 18vw;
  }

  /* "Book a Demo" in the open mobile menu: inset like the menu items and full width. */
  .ast-mobile-header-content .ast-header-button-1 {
    padding: 16px 15px 20px;
  }
  .ast-mobile-header-content .ast-header-button-1 .ast-builder-button-wrap,
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button-link {
    width: 100%;
  }
  .ast-mobile-header-content .ast-header-button-1 .ast-custom-button {
    text-align: center;
  }
}