/* ===================================================================
   BLOOM · the header band
   Site-wide. The top of the header is a single full-width banner
   picture - the logo lives inside it, so there is no separate logo
   above or on top of it. The menu sits underneath, unchanged, with
   the "לטיולים הקרובים" button still in its row.

   The banner is never cropped and never stretched: it is drawn on the
   same cream as the header, so when the screen is wider or narrower
   than its own proportions the extra space is simply more of that
   cream and the join is invisible.
   =================================================================== */

/* --- the band runs the full width of the screen ---
   The header's wrapper carries 40px of side padding, which is what kept
   the picture short of the edges. The padding moves off the wrapper and
   onto the menu row, which is the only thing that needed it. */
html body .xpro-theme-builder-header .elementor-element.elementor-element-8b02291 {
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
}

html body .xpro-theme-builder-header .elementor-element.elementor-element-a2menu > .e-con-inner {
	padding-inline-start: 40px;
	padding-inline-end: 40px;
}

html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: #FDFAF7;
}

html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo > .e-con-inner {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* the widget wrapper and the link around the picture */
html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo .elementor-widget-container,
html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo a {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo img {
	display: block;
	width: 100% !important;
	height: auto !important;
	/* The height follows the picture's own proportions - about 360px on a
	   1920px screen - and is capped so it never takes over a very wide
	   one. Where the screen's proportions differ from the picture's,
	   `contain` adds cream at the edges rather than cutting anything off. */
	max-height: 380px !important;
	max-width: none !important;
	object-fit: contain;
	object-position: center;
	background: #FDFAF7;
	margin: 0 !important;
}

/* --- the menu row, close underneath --- */
html body .xpro-theme-builder-header .elementor-element.elementor-element-a2menu > .e-con-inner {
	padding-top: 12px;
	padding-bottom: 10px;
}

@media (max-width: 1024px) {
	html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo img {
		max-height: 300px !important;
	}
}

/* --- phones get their own crop of the banner, so the wording stays
       readable instead of shrinking to nothing --- */
@media (max-width: 767px) {
	html body .xpro-theme-builder-header .elementor-element.elementor-element-a1logo img {
		content: url("bloom-banner-b-mobile.jpg");
		max-height: 260px !important;
	}
	html body .xpro-theme-builder-header .elementor-element.elementor-element-a2menu > .e-con-inner {
		padding-top: 4px;
		padding-bottom: 8px;
	}
}