/*
 * Bedales Fixes – Safari / iPad / Mac
 * Loaded after bedales-fixes.css (and before custom-YB.css).
 */

/* ------------------------------------------------------------------
 * 1. Floating text layers with no set position
 *    These layers are position:absolute but never say where they sit.
 *    Chrome places them at the top-left corner of their section;
 *    Safari places them differently, so the title, sub-title, divider
 *    and list collide. Pin them to the top-left corner explicitly:
 *    identical to Chrome, and nothing left for Safari to guess.
 *    (Phones up to 780px use the stacked layout in bedales-fixes.css.)
 * ------------------------------------------------------------------ */
@media (min-width: 781px) {
	#Events-Bedales .events-bedales-text,
	#Events-Bedales .events-column-title,
	#Events-Bedales .divider,
	#Events-Bedales .events-category,
	#Events-Bedales .events-enquiry,
	#Vouchers-Bedales .vouchers-bedales-text,
	#Vouchers-Bedales .vouchers-column-title,
	#Vouchers-Bedales .divider,
	#Vouchers-Bedales .vouchers-category,
	#About-Bedales .about-bedales-text {
		top: 0;
		left: 0;
	}
}

/* Hover colour sketch (Home, Locations): left/right are already set. */
.sketch-color {
	top: 0;
}

/* ------------------------------------------------------------------
 * 2. "Drinks Menu" / "Food Menu" switch button on the menu pages
 *    On laptop widths (1201-1699px) the 36px text is wider than its
 *    column, so it spilled outside the button. Let the button be as
 *    wide as its text and keep it centred over its column. Below
 *    1201px the text is 16px and fits; from 1700px it already fits.
 * ------------------------------------------------------------------ */
@media (min-width: 1201px) and (max-width: 1699px) {
	#Home-Section .homepage-food-button .module-buttons-item {
		justify-content: center;
	}
	#Home-Section .homepage-food-button .module-buttons a.builder_button {
		flex: none;
		min-width: max-content !important;
	}
}