/* ==========================================================================
   Swahili Coast Villas - footer, phones only (max-width 767px).

   The footer stacks its three link columns under the logo block, so on a 390px
   screen each column got ~103px of the 350px content width. The CONTACT US
   column is lifted out of that row and set beside the logo block instead, which
   leaves Links and Our Social Media as the only two columns and lets them run
   at half the width each.

   The contact details are also allowed to break inside a word here (item 4):
   "info@swahilicoastvillas.co.tz" is one unbreakable token, and at 345px (a
   360px window with a scrollbar) and narrower it pushed its list item past the
   footer's right edge - 3px at 345px, 15px at 320px - growing the document's
   scroll width with it. The page never showed a horizontal scrollbar, because
   the body already carries overflow-x: clip, so what showed was the text itself
   running through the footer's edge; at 390px it fitted and looked fine, which
   is why it went unnoticed.
   ========================================================================== */

@media (max-width: 767px) {

	/* 1. Elementor gives every container position: relative, so the two containers
	      between the footer and the grid would be the containing block for the
	      lifted column and it would be placed against the grid halfway down the
	      footer instead of against the footer itself. Nothing inside them is
	      absolutely positioned, so they can safely go static. */
	.elementor-16 [data-id="fa9a4ad"],
	.elementor-16 [data-id="f590cb5"] {
		position: static !important;
	}

	/* 2. CONTACT US: out of the bottom grid, into the top right of the footer, so it
	      takes the right half of the top row and stops at the container's 20px
	      inner edge. It is centred on the logo block rather than hung from its
	      top: the top is the footer container's own 32px padding plus half of the
	      200px logo block, and the translate pulls the column's own half back up
	      so its centre lands on the block's centre. The logo block is a fixed
	      124px wide, so its height (and therefore 200px) is the same at every
	      phone width - measured 200px at 390, 600 and 767. */
	.elementor-16 [data-id="4b434ca"] {
		position: absolute !important;
		top: calc(32px + 100px) !important;
		transform: translateY(-50%) !important;
		left: 50% !important;
		right: 20px !important;
		width: auto !important;
		max-width: none !important;
	}

	/* 3. Links and Our Social Media: the only two children left in the grid, so
	      they share it evenly. minmax(0, 1fr) keeps a long line from forcing the
	      track wider than its share. */
	.elementor-16 [data-id="f590cb5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* 4. Contact details that cannot fit: the email address and the social handle
	      are single tokens with no space to wrap at, so on the narrowest phones
	      they stuck out past the right edge of the footer - and of the page.
	      Let the text break inside the word (it only ever does so when the word
	      genuinely does not fit, so wider phones are unaffected) and let the list
	      items shrink to the column instead of holding their content width. */
	.elementor-16 .elementor-icon-list-item,
	.elementor-16 .elementor-icon-list-item > a {
		min-width: 0;
		max-width: 100%;
	}

	.elementor-16 .elementor-icon-list-text {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}