/*
 * clone-fixes.css — the ONLY intentional deviation from the reference site.
 *
 * Loaded last so it wins the cascade. Everything here fixes a defect that exists on
 * the reference site itself; nothing here restyles or redesigns anything. Keep this
 * file minimal and document every rule with the defect it addresses.
 */

/* ---------------------------------------------------------------------------
 * 1. Contact form overflows horizontally on mobile.
 *
 * The theme sets a width on `input` (which fits its container) but never on
 * `textarea`. The exported markup carries cols="45", giving the textarea an
 * intrinsic ~406px, which overflows a 375px viewport and forces the whole page
 * to scroll sideways. Reproduced from the reference, but it breaks the
 * "fully responsive on mobile" requirement, so it is constrained here.
 * ------------------------------------------------------------------------- */
.wpcf7-form textarea,
.wpcf7-form input,
.wpcf7-form select {
  max-width: 100%;
}

.wpcf7-form textarea {
  width: 100%;
}

/* The generated markup wraps controls in a bare inline-block <label>, which
   inherits the control's intrinsic width. Constrain it to the column. */
.wpcf7-form label {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. Carousels overflow the page before JS initialises them.
 *
 * The theme markup uses the Swiper v5 class `.swiper-container`, but the bundled
 * stylesheet is Swiper v8, which only defines `.swiper`. Nothing therefore clipped
 * the flex track, and 8-10 side-by-side slides pushed pages to ~3000px wide.
 * useSwipers.ts adds the `swiper` class on init; this guards the first paint.
 * ------------------------------------------------------------------------- */
.swiper-container {
  overflow: hidden;
  position: relative;
}

/* ---------------------------------------------------------------------------
 * 3. Mobile menu button vs desktop nav.
 *
 * On the reference site the slicknav plugin only *created* the hamburger at mobile
 * widths, so the theme CSS never needed a rule to hide it — it positions
 * #slicknav_menu in media queries but never sets `display`. MobileMenu.tsx renders
 * that element at all widths, so the breakpoint is made explicit here. 992px is the
 * width at which the theme's own responsive.css switches to the mobile header.
 * ------------------------------------------------------------------------- */
/* slicknav.css hides .slicknav_menu by default — the plugin revealed it at init.
   With the plugin gone, the breakpoint must state both sides explicitly. */
@media (min-width: 992px) {
  .slicknav_menu {
    display: none;
  }
}

@media (max-width: 991px) {
  .main-navigation {
    display: none;
  }

  .slicknav_menu {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Feature-box text bursts out of its flex parent at tablet widths.
 *
 * `.feature-box` is a flex row (icon + text). A flex item defaults to
 * `min-width: auto`, so it refuses to shrink below its content's min-content
 * width — at ~753px the text measured 183px inside a 187px box starting at
 * x=581, ending 10px past the viewport and pushing the page wider than the
 * screen. `min-width: 0` lets it shrink and wrap normally; at wider viewports
 * there is spare room, so nothing changes.
 * ------------------------------------------------------------------------- */
.feature-box .feature-info {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Same intrinsic-size issue on the comment form textarea. */
#commentform textarea,
.comment-form textarea {
  max-width: 100%;
  width: 100%;
}