/* ============================================================
   ClearFire — MOBILE SYSTEM (authoritative mobile layer)

   Enqueued LAST on every page (after design-system, theme, and the
   service-* delta sheets) so its cross-cutting mobile / touch /
   accessibility rules win the cascade without needing !important on
   every line. Grounded in the existing brand tokens (--ember, --amber,
   --ink, …) — see design-system.css :root.

   The primary navigation + slide-in mobile menu are owned by theme.css
   and are deliberately NOT restyled here (that work is signed off).
   ============================================================ */

/* ---- 1. Global touch / rendering primitives (all viewports) ---- */

/* Don't let mobile browsers silently rescale type on orientation change. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Guard against accidental horizontal scroll on phones — off-canvas
   panels (the mobile menu, carousels) translate past the right edge by
   design and must not create a scrollbar. NB: `clip`, not `hidden` —
   `overflow-x: hidden` on the body turns it into a scroll container and
   breaks `position: sticky` (e.g. the contact-page sidebar). `clip`
   prevents the scroll without that side effect. */
html, body { overflow-x: clip; }

/* Kill the 300ms double-tap delay and the default grey tap flash;
   set an intentional, subtle ember highlight instead. */
a, button, [role="button"], input, select, textarea, summary, label[for] {
	-webkit-tap-highlight-color: rgba(217, 52, 43, .15); /* --ember @ 15% */
	touch-action: manipulation;
}

/* ---- 2. Visible keyboard focus (all viewports) ----
   A consistent amber focus ring for keyboard users. :focus-visible keeps
   it off mouse/touch interactions, so it never shows on tap. This also
   covers the bare `outline:none` that several form fields declare. */
:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 2px;
	border-radius: 3px;
}
/* input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 1px;
} */

/* ---- 3. Reduced motion (all viewports) ----
   Per the owner's direction, the design's animations are all gentle,
   intentional brand motion (the logo marquee, subtle hover zoom/lift, small
   pulses) and should play regardless of the OS reduce-motion setting — so we
   do NOT blanket-disable animation/transition here. The one concession that
   carries no visual-design cost is dropping smooth-scrolling, so anchor jumps
   are instant for reduce-motion users. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---- 4. Drawers / sheets ----
   Don't chain scroll to the page behind the booking drawer. */
.drawer { overscroll-behavior: contain; }

/* ============================================================
   5. MOBILE-ONLY ergonomics (≤768px)
   ============================================================ */
@media (max-width: 768px) {

	/* 5a. iOS-zoom guard — any focusable field must be ≥16px or Safari
	   zooms the page on focus. !important beats the Gravity Forms plugin
	   sheet (14px, higher specificity). Purely behavioural, not visual. */
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	select,
	textarea,
	.gform_wrapper input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	.gform_wrapper select,
	.gform_wrapper textarea,
	.cfield input, .cfield select, .cfield textarea,
	.drawer-field input, .drawer-field select, .drawer-field textarea,
	.ff input,
	.news-form input {
		font-size: 16px !important;
	}

	/* 5b. Touch targets — standalone controls get the 44×44 minimum. */
	.drawer-close { width: 44px; height: 44px; font-size: 26px; }
	.back-to-top  { width: 44px; height: 44px; }
	.news-form input,
	.news-form button { min-height: 44px; }
	.tc-btn { min-width: 44px; min-height: 44px; }
	.slider-btn { width: 44px; height: 44px; }

	/* Button-style links/CTAs (not inline prose links) get a tap-friendly
	   height. Scoped to the button classes so inline text links are left
	   as inline content. */
	.btn-light, .btn-ghost, .btn-white, .cta-link,
	.faq-aside .cta-link, .urgent-cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Static form controls: comfortable tap height. */
	.cfield input, .cfield select,
	.drawer-field input, .drawer-field select,
	.ff input {
		min-height: 44px;
	}

	/* Gravity Forms controls — !important to beat the plugin's own 38px
	   sizing (behavioural touch-target fix, not a visual override). */
	.gform_wrapper input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	.gform_wrapper select,
	.gform_wrapper .gform_footer input[type="submit"],
	.gform_wrapper .gform_footer button,
	.gform_wrapper button.gform_button {
		min-height: 44px !important;
	}

	/* 5c. "How it works" steps (.sec-how) — on desktop these are a clean
	   4-col row of bare text, but stacked on mobile they float on the white
	   section with nothing separating them. Give each step a cream card +
	   ember left-accent (echoing .what-key) so they read as distinct cards.
	   Desktop is untouched. */
	.how-grid { gap: 16px; }
	.how-grid .step {
		background: var(--cream);
		border: 1px solid var(--line);
		border-left: 3px solid var(--ember);
		border-radius: 8px;
		padding: 24px 22px;
	}
}