/* =====================================================================
   mobile.css — additive mobile-first enhancement layer
   ---------------------------------------------------------------------
   Loaded AFTER style.css so it wins on equal specificity. Every rule is
   either GLOBAL-but-low-risk (focus, reduced-motion, scroll-padding) or
   wrapped in a max-width query so it can ONLY affect phones/tablets.
   The desktop layout in style.css is untouched. Safe to delete to revert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   GLOBAL (low-risk, improve every device)
   --------------------------------------------------------------------- */

/* In-page anchor jumps (packages/FAQ) clear the sticky navbar. */
html { scroll-padding-top: 72px; }

/* Visible keyboard focus — inputs previously used outline:none with only a
   colour change, which is invisible to keyboard users. */
.form-control:focus,
.qb-field input:focus,
.qb-field select:focus,
.qb-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(253, 119, 146, .35) !important;
}

/* Respect users who ask for less motion: neutralise the decorative
   sparkle / page-in / scroll animations site-wide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   PHONES + TABLETS  (<= 991.98px) — breathing room
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Inner-page title banner was locked to 30–35vh (~253px on a phone) just
     to show a heading — it dominated the screen and shoved content down.
     Switch to a compact, padding-based height. */
  .hero-wrap.hero-wrap-2 {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}

/* ---------------------------------------------------------------------
   PHONES  (<= 767.98px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

  /* Breathing room: the home quick-book card was almost touching the hero
     CTA buttons (~8px). Give it a clear gap so the hero doesn't feel packed. */
  .quick-book-card { margin-top: 28px !important; }


  /* Forms: 16px font stops iOS auto-zoom-on-focus; 44px = thumb-friendly.
     Covers the home quick-book card, the booking form and the contact
     form. Desktop is unaffected (this is inside the phone query).
     Selectors match the existing high-specificity !important rules in
     style.css so they actually win on mobile. */
  .form-control,
  .enquiry-form .form-control,
  .contact-wrap .form-control,
  .quick-book-card .qb-field input,
  .quick-book-card .qb-field select,
  .quick-book-card .qb-field textarea {
    font-size: 16px !important;
    min-height: 44px;
    height: auto !important;
  }
  textarea.form-control,
  .quick-book-card .qb-field textarea {
    min-height: 120px;
  }

  /* Tap targets: guarantee a 44px floor on buttons and the nav toggler. */
  .btn { min-height: 44px; }
  .navbar-toggler {
    padding: .55rem .85rem;
    min-height: 44px;
  }

  /* Review-carousel arrows back up to a 44px tap size (were ~38px). */
  .carousel-testimony .owl-nav button.owl-prev,
  .carousel-testimony .owl-nav button.owl-next {
    width: 44px !important;
    height: 44px !important;
  }

  /* Hero CTA buttons: full-width stacked across all phone widths for
     consistent, easy thumb targets (no awkward side-by-side wrap).
     Matches style.css's `.hero-wrap .col-md-7 .btn !important` rule. */
  .hero-wrap .col-md-7 .btn,
  .hero-wrap .slider-text .btn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px 0 !important;
  }

  /* Even, calmer vertical rhythm between the home sections on phones
     (reviews was 40/30, CTA 60/60 — now all consistent). Desktop untouched. */
  .ftco-section.ftco-services,
  .ftco-section.about-intro,
  #reviews.ftco-section,
  .ftco-section.ig-section,
  .ftco-section.ftco-intro {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

/* ---------------------------------------------------------------------
   SMALL PHONES  (<= 575.98px)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Let the "Ready to create something magical?" heading wrap instead of
     forcing one nowrap line that can overflow narrow screens. */
  .cta-magical-heading,
  .cta-magical-heading .cta-pre,
  .cta-magical-heading em {
    white-space: normal !important;
  }
}