/* ============================================================================
   qa-fixes.css — pre-launch corrections layered over the Elementor export.
   Loaded LAST so it wins on equal specificity; selectors deliberately mirror
   the generated post-*.css ones rather than reaching for !important.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0. UTILITIES
   meet-dr-snyman and meet-the-team open straight into body copy with no page
   title of any kind. Adding a visible <h1> is a design decision for the client,
   so they carry a screen-reader-only one instead — it closes the SEO and
   accessibility gap without changing the layout.
   ------------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   1. CONTACT / ENQUIRY FORM
   The fields are already designed by an inline <style> block on each page:
   55px tall, uppercase, letter-spaced, transparent, dark #191B1D button. Two
   things were missing:
     a) 12px type — below the legibility floor for a form a patient has to fill
        in, and under 16px iOS Safari zooms the viewport whenever a field is
        tapped;
     b) no focus, error or busy states at all.

   Scoped with a leading `form` (0,1,1) so these beat the page-level
   `.form-control` (0,1,0) regardless of source order. NOTE: the form is not
   inside .ekit-wid-con — do not scope on that, it will not match.
   ------------------------------------------------------------------------ */
form .form-control {
  font-size: 14px;
}

@media (max-width: 767px) {
  form .form-control {
    font-size: 16px;
  }
}

form .form-control::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

form .form-control:focus {
  outline: none;
  border-color: #191b1d !important;
}

/* Applied by js/ContactUs.js — not :invalid, which the browser sets before the
   visitor has typed anything. */
form .form-control.is-invalid {
  border-color: #c0392b !important;
  background-color: #fdf3f2;
}

/* .form-control carries margin-bottom: 20px, so pull the message up under it. */
form .field-error {
  display: block;
  margin: -14px 0 16px;
  font-family: "Montserrat", Sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: #c0392b;
}

form .form-status {
  margin: 0 0 20px;
  padding: 12px 16px;
  font-family: "Montserrat", Sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid #c0392b;
  background: #fdf3f2;
  color: #a5281b;
}

form .btn.btn-color:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   2. MOBILE NAVIGATION
   post-31.css sets `height:70px` on the menu container with no media query. At
   <=1024px that element becomes the full-height off-canvas panel, so the panel
   was clipped to 70px and only the first item was reachable. The stylesheet's
   own rescue rule is scoped to `.ekit-sticky`, a class this site never emits
   (it uses Elementor Pro sticky), so it never applied.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .elementor-31 .elementor-element.elementor-element-11277f0e .elementskit-menu-container {
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Primary navigation should not be the smallest text on the page. */
  .elementor-31 .elementor-element.elementor-element-11277f0e .elementskit-navbar-nav > li > a {
    font-size: 16px;
    padding: 14px 5px 14px 20px;
  }
}

/* The mobile override inflated the logo to 996px (desktop is 230px), which made
   the sticky header eat roughly a third of a phone screen. */
@media (max-width: 767px) {
  .elementor-31 .elementor-element.elementor-element-6080e214 img {
    width: 150px;
  }
}

/* ---------------------------------------------------------------------------
   3. SERVICE PAGE HEADINGS
   All five service pages ship a 44px section title with no mobile step-down —
   the only heading on the site that never shrinks.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .elementor-18 .elementor-element.elementor-element-2aa8da9 .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-22 .elementor-element.elementor-element-3252c9e .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-24 .elementor-element.elementor-element-4f12757 .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-26 .elementor-element.elementor-element-9755c3f .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-28 .elementor-element.elementor-element-04c75c9 .elementskit-section-title-wraper .elementskit-section-title {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .elementor-18 .elementor-element.elementor-element-2aa8da9 .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-22 .elementor-element.elementor-element-3252c9e .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-24 .elementor-element.elementor-element-4f12757 .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-26 .elementor-element.elementor-element-9755c3f .elementskit-section-title-wraper .elementskit-section-title,
  .elementor-28 .elementor-element.elementor-element-04c75c9 .elementskit-section-title-wraper .elementskit-section-title {
    font-size: 26px;
    line-height: 1.25;
  }
}

/* ---------------------------------------------------------------------------
   4. CONTACT PAGE
   post-20.css pinned the three info boxes to a rigid 315px (width AND max-width)
   below 767px, which overflows a 320px-class viewport, and capped them at 200px
   on tablet. It also *increased* the form column's padding at mobile (50px) vs
   tablet (40px).
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .elementor-20 .elementor-element.elementor-element-cdce567,
  .elementor-20 .elementor-element.elementor-element-04868df,
  .elementor-20 .elementor-element.elementor-element-3516776 {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .elementor-20 .elementor-element.elementor-element-92613dc > .elementor-element-populated {
    padding: 30px 20px 30px 20px;
  }
}

/* ---------------------------------------------------------------------------
   5. LEGAL PAGES
   post-408.css contains no media queries at all, so a 36px heading and 70px
   vertical margins were served unchanged to phones.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-408 .elementor-element.elementor-element-a893f73 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .elementor-408 .elementor-element.elementor-element-2950625 .elementor-heading-title {
    font-size: 24px;
    line-height: 1.3;
  }
}

/* ---------------------------------------------------------------------------
   6. TEAM GRID
   Hayley-1.jpg is portrait (504x519) while the other three team photos are
   landscape (~328x229). With width:100% and no object-fit, her card rendered
   ~1.5x taller than the rest.
   ------------------------------------------------------------------------ */
.elementor-14 .elementor-image-box-wrapper .elementor-image-box-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 328 / 229;
  object-fit: cover;
  object-position: center top;
}

/* Team descriptions dropped to 13px from tablet down and were never raised. */
@media (max-width: 1024px) {
  .elementor-14 .elementor-widget-image-box .elementor-image-box-description {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ---------------------------------------------------------------------------
   7. FOOTER + MISC TYPOGRAPHY
   Footer links sat at 12px; carousel captions at 12px.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-56 .elementor-element.elementor-element-e717729 .elementskit-section-title,
  .elementor-56 .elementor-element.elementor-element-aa78f57 .elementskit-section-title {
    font-size: 14px;
    line-height: 1.7;
  }
}

.elementor-12 .elementor-element.elementor-element-51037cb .elementor-image-carousel-caption {
  font-size: 14px;
}

/* `max-width: auto` is not a valid value and is dropped by every browser; the
   intended cap simply did not exist. */
.elementor-56 .elementor-element.elementor-element-e717729,
.elementor-56 .elementor-element.elementor-element-aa78f57,
.elementor-56 .elementor-element.elementor-element-9fb40b0,
.elementor-14 .elementor-element.elementor-element-53f3d38 {
  max-width: 100%;
}

/* The Avily credit line and its logo now sit inside links — keep them aligned
   and stop the logo inheriting the link underline. */
.elementor-56 .elementor-element.elementor-element-9fb40b0 a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   8. HOME PAGE SERVICE CARDS
   One of four sibling cards carried a 90px bottom margin (the others 57px) to
   bottom-align the CTA in an equal-height desktop row. Once the cards stack on
   mobile that just leaves one card with a larger dead gap.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-8 .elementor-element.elementor-element-941e93c > .elementor-widget-container,
  .elementor-8 .elementor-element.elementor-element-b8899cf > .elementor-widget-container,
  .elementor-8 .elementor-element.elementor-element-c5b539e > .elementor-widget-container,
  .elementor-8 .elementor-element.elementor-element-44c5fd5 > .elementor-widget-container {
    margin: 0 0 32px 0;
  }
}

/* ---------------------------------------------------------------------------
   10. HOME HERO — LCP
   post-8.css serves the full 1920px hero (259 KB WebP / 279 KB JPEG) to every
   device, even though optimize-images already produced 480/800/1200 variants
   that nothing referenced. Serve the right one per breakpoint.
   Same selector as post-8.css, and this file loads later, so it wins on equal
   specificity. Ordered widest → narrowest: a phone matches all three, and the
   last matching rule is the one that applies.
   ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .elementor-8 .elementor-element.elementor-element-d6b894b:not(.elementor-motion-effects-element-type-background),
  .elementor-8 .elementor-element.elementor-element-d6b894b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("../images/optimized/vineyards-slide-1200.webp");
    background-image: image-set(
      url("../images/optimized/vineyards-slide-1200.webp") type("image/webp"),
      url("../images/optimized/vineyards-slide.jpg") type("image/jpeg")
    );
  }
}

@media (max-width: 800px) {
  .elementor-8 .elementor-element.elementor-element-d6b894b:not(.elementor-motion-effects-element-type-background),
  .elementor-8 .elementor-element.elementor-element-d6b894b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("../images/optimized/vineyards-slide-800.webp");
    background-image: image-set(
      url("../images/optimized/vineyards-slide-800.webp") type("image/webp"),
      url("../images/optimized/vineyards-slide.jpg") type("image/jpeg")
    );
  }
}

@media (max-width: 480px) {
  .elementor-8 .elementor-element.elementor-element-d6b894b:not(.elementor-motion-effects-element-type-background),
  .elementor-8 .elementor-element.elementor-element-d6b894b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("../images/optimized/vineyards-slide-480.webp");
    background-image: image-set(
      url("../images/optimized/vineyards-slide-480.webp") type("image/webp"),
      url("../images/optimized/vineyards-slide.jpg") type("image/jpeg")
    );
  }
}

/* ---------------------------------------------------------------------------
   9. MEET DR SNYMAN — page spacing never stepped down for phones.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .elementor-12 .elementor-element.elementor-element-4648c2a {
    padding: 24px 0 0 0;
  }

  .elementor-12 .elementor-element.elementor-element-ef3d099 {
    margin-top: 16px;
    margin-bottom: 32px;
  }
}