/* Custom CSS.
   Colours, fonts and spacing belong in Elementor Site Settings (driven by
   build/brand.json). Only put here what Elementor cannot express — clip-path,
   pseudo-elements, and the odd responsive override. */

/* Long uppercase headings can out-measure a narrow viewport. Scope this to
   heading widgets: applying it to every h1-h3 also hits icon-box titles, where
   it breaks words mid-syllable. */
.elementor-widget-heading .elementor-heading-title {
	overflow-wrap: break-word;
}

/* --- 44px touch targets at and below the tablet breakpoint ---------------
   A tablet is as much a finger target as a phone, so these are gated at 1024
   rather than at the mobile breakpoint. Each of these three is a control
   Elementor does not expose padding for, which is why they are here rather
   than in build/header_footer.py. */

@media (max-width: 1024px) {
	/* Burger toggle renders 36x36 from toggle_size alone. */
	.elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Header CTA pills measure 36px tall; the text_padding control is tuned
	   for desktop, so raise the floor rather than re-tune it per breakpoint. */
	.elementor-widget-button .elementor-button {
		min-height: 44px;
	}

	/* Footer phone and email are icon-list rows: the <a> wraps inline text and
	   is 20px tall however far apart the rows sit. Make the link itself the
	   target. */
	.elementor-widget-icon-list .elementor-icon-list-item > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* --- footer contact column spill -----------------------------------------
   info@thesupportedlivinghub.co.uk is a single 32-character token. In the
   footer's 22% column it needs 242px of a 215px box at ~1025px wide, just
   above the breakpoint where the columns stack. It never shows as page
   overflow because the column clips it, so it only surfaces as a
   scrollWidth-vs-clientWidth spill -- the check that catches content bursting
   its own box rather than the viewport.

   A flex item will not shrink below its content without min-width: 0, so both
   declarations are needed. */
footer .elementor-icon-list-item,
footer .elementor-icon-list-text {
	min-width: 0;
	overflow-wrap: anywhere;
}