/*
 * Bedales Fixes
 * Loaded before custom-YB.css, so rules that override it use !important.
 */

/* ------------------------------------------------------------------
 * 0. Mobile menu
 *    After scrolling, the header gets a blur (backdrop-filter, in
 *    custom-YB.css). A blur traps the fixed menu panel inside the 100px
 *    header, so the menu opened empty / off-screen. Drop the blur while
 *    the menu is open (the open menu covers the page anyway).
 * ------------------------------------------------------------------ */
body.mobile-menu-visible #headerwrap,
body.mobile-menu-visible #headerwrap.fixed-header {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ------------------------------------------------------------------
 * 0b. Footer
 *     The footer is fixed at 375px (custom-YB.css) but its content is
 *     taller, so "Created by CROSS WORKS" spilled below it onto the white
 *     page background. Let it grow to fit; 375px stays the minimum.
 * ------------------------------------------------------------------ */
#FOOTER.module_row {
	height: auto !important;
	min-height: 375px;
	padding-bottom: 15px !important;
}

/* ------------------------------------------------------------------
 * 1. Short screens (e.g. 1920x1080 at 125% Windows scaling)
 *    Sections that are taller than the screen are grown by
 *    bedales-fixes.js (it adds .bf-grown and --bf-row-h).
 * ------------------------------------------------------------------ */

/* Top banner on short screens: keep the big title clear of the menu, and
   pull the "Discover more" arrow / social icons up so they are not cut off. */
@media (min-width: 681px) and (max-height: 800px) {
	#Home-Section .homepage-text-button {
		padding-top: max(10vh, 135px) !important;
	}
}
@media (min-width: 681px) {
	/* 0 on screens 1150px+ tall, so those are unchanged */
	#Home-Section .homepage-bottom-section {
		margin-top: min(0px, calc(10vh - 115px)) !important;
	}
}

/* Small, short phones (e.g. iPhone SE): the big "Borough Market" /
   "Leadenhall Market" links on the Locations banner fill the whole screen
   and push the page title into the logo / menu icon. Make them a bit smaller. */
@media (max-width: 480px) and (max-height: 760px) {
	#Home-Section .home-section-text h2 a {
		font-size: 1.5em !important;
	}
}

/* Phone held sideways: no room for the "Follow us on" label next to the
   banner text (portrait phones already hide it); the icons stay. */
@media (max-width: 1024px) and (max-height: 500px), (hover: none) and (max-height: 500px) {
	#Home-Section .homepage-bottom-column .module-text {
		display: none !important;
	}
}

/* Vouchers: each column's text box has a fixed height (35vh, or 48vh / 50vh
   on tablets), so on short screens the text runs into "Buy Now".
   Let it grow; the original height stays the minimum. */
#Vouchers-Bedales .vouchers-category .vouchers-category-column-text {
	height: auto !important;
	min-height: 35vh;
}
@media (max-width: 1024px) {
	#Vouchers-Bedales .vouchers-category .vouchers-category-column-text { min-height: 48vh; }
}
@media (max-width: 920px) {
	#Vouchers-Bedales .vouchers-category .vouchers-category-column-text { min-height: 50vh; }
}
@media (max-width: 780px) {
	#Vouchers-Bedales .vouchers-category .vouchers-category-column-text { min-height: 0; }
}

/* Events + Vouchers on phones: the title, sub-title, divider, list and
   Enquiries link are floating layers placed at fixed pixel offsets, so they
   collide when text renders a little taller (seen on iPhone Safari).
   Stack them in normal order instead; the sketch image stays behind. */
@media (max-width: 780px) {
	.themify_builder_content #Events-Bedales,
	.themify_builder_content #Vouchers-Bedales {
		height: auto !important;
		min-height: 100vh;
		align-items: flex-start;
	}
	.themify_builder_content #Events-Bedales .events-2-section .bg-image,
	.themify_builder_content #Vouchers-Bedales .events-2-section .bg-image {
		position: absolute !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		overflow: hidden;
	}
	.themify_builder_content #Events-Bedales .events-2-section .bg-image .image-wrap,
	.themify_builder_content #Vouchers-Bedales .events-2-section .bg-image .image-wrap {
		height: 100%;
	}
	.themify_builder_content #Events-Bedales .events-2-section .bg-image img,
	.themify_builder_content #Vouchers-Bedales .events-2-section .bg-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
	/* keep "Enquiries" on one line */
	.themify_builder_content #Events-Bedales .events-enquiry p {
		white-space: nowrap;
		padding: 0 10px;
	}
	.themify_builder_content #Events-Bedales .events-bedales-text,
	.themify_builder_content #Events-Bedales .events-column-title,
	.themify_builder_content #Events-Bedales .divider,
	.themify_builder_content #Events-Bedales .events-category,
	.themify_builder_content #Events-Bedales .events-enquiry,
	.themify_builder_content #Vouchers-Bedales .vouchers-bedales-text,
	.themify_builder_content #Vouchers-Bedales .vouchers-column-title,
	.themify_builder_content #Vouchers-Bedales .divider,
	.themify_builder_content #Vouchers-Bedales .vouchers-category {
		position: relative !important;
		padding-top: 0 !important;
		margin-top: 0;
	}
	.themify_builder_content #Events-Bedales .events-bedales-text,
	.themify_builder_content #Vouchers-Bedales .vouchers-bedales-text {
		padding-top: 50px !important;
	}
	.themify_builder_content #Events-Bedales .events-column-title,
	.themify_builder_content #Vouchers-Bedales .vouchers-column-title {
		margin-top: 30px;
	}
	.themify_builder_content #Events-Bedales .events-category,
	.themify_builder_content #Vouchers-Bedales .vouchers-category {
		margin-top: 30px;
	}
	.themify_builder_content #Events-Bedales .events-enquiry {
		margin-top: 10px;
		margin-bottom: 50px;
	}
	.themify_builder_content #Vouchers-Bedales .vouchers-category {
		margin-bottom: 40px;
	}
}

/* Faded sketch background images: stretch to the grown section height
   instead of stopping at one screen height. */
.bf-grown .hide-column img,
.bf-grown .about-us-section img,
.bf-grown .bg-image img {
	height: var(--bf-row-h, 100vh) !important;
}

/* ------------------------------------------------------------------
 * 2. Phones and tablets (no mouse hover)
 *    Text that only appeared on mouse hover is shown all the time,
 *    on a dark overlay over the background image / video.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px), (hover: none) {

	/* dark overlay always on */
	#experience-wine-food .experience-wine::before,
	#experience-wine-food .experience-food::before,
	#wine-tasting .wine-discover::before,
	#wine-tasting .great-classics::before,
	#wine-tasting-2 .wine-cheese::before,
	#wine-tasting-2 .london-epicurean::before,
	#wine-tasting-bottom::before {
		background-color: rgba(0, 0, 0, 0.6) !important;
	}

	/* text always visible */
	#experience-wine-food .experience-wine .wine-text,
	#experience-wine-food .experience-food .food-text,
	#wine-tasting .wine-discover .wine-text,
	#wine-tasting .great-classics .classics-text,
	#wine-tasting-2 .wine-cheese .wine-text,
	#wine-tasting-2 .london-epicurean .london-text,
	#wine-tasting-bottom .wine-tasting-text {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translate(-50%, -50%) scale(1) !important;
	}

	/* Enquiries / See menu buttons always visible */
	#experience-wine-food .enquiry-button,
	#wine-tasting .enquiry-button,
	#wine-tasting-2 .enquiry-button {
		opacity: 1 !important;
		visibility: visible !important;
		transform: scale(1) !important;
	}
}

/* Short touch screens (e.g. a phone held sideways): the text does not fit
   inside a one-screen-tall block, so put it in the normal flow and let the
   block grow to fit it. */
@media (max-width: 1024px) and (max-height: 600px), (hover: none) and (max-height: 600px) {
	#experience-wine-food .experience-wine,
	#experience-wine-food .experience-food,
	#wine-tasting .wine-discover,
	#wine-tasting .great-classics,
	#wine-tasting-2 .wine-cheese,
	#wine-tasting-2 .london-epicurean {
		height: auto !important;
		min-height: 100vh;
		flex-direction: column;
		justify-content: center;
		padding-top: 90px !important;
		padding-bottom: 40px !important;
	}

	#experience-wine-food .experience-wine .wine-text,
	#experience-wine-food .experience-food .food-text,
	#wine-tasting .wine-discover .wine-text,
	#wine-tasting .great-classics .classics-text,
	#wine-tasting-2 .wine-cheese .wine-text,
	#wine-tasting-2 .london-epicurean .london-text {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
	}

	#experience-wine-food .enquiry-button,
	#wine-tasting .enquiry-button,
	#wine-tasting-2 .enquiry-button {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		align-self: flex-end;
		margin-top: 20px;
	}
}