/* Bohnito CSS hotfixes — managed by mu-plugin/bohnito-fixes.php */

/* ---------------------------------------------------------------------------
 * 1. Hide empty BeTheme Subheader site-wide
 *    The Subheader bar is configured in BeTheme but no breadcrumbs/title set,
 *    so it's just a 310px-tall empty box on every page wasting above-fold space.
 * ------------------------------------------------------------------------- */
#Subheader {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. Homepage hero — fix overlap + clipping
 *
 *    BeTheme generated inline styles for what it considered "desktop":
 *      - column position: absolute; top: -200px (H1 column)
 *      - column-inner margin-top: -130px (subtitle column)
 *      - wrap-inner margin-left: -96px (the entire hero text wrap)
 *
 *    All three are auto-tuned for the editor's preview width but break at
 *    real common laptop widths (1024, 1280, 1366) — text gets clipped on
 *    the left because of the -96px wrap shift, and on mobile the columns
 *    overlap because of the absolute positioning.
 *
 *    Fix strategy:
 *      a) Always reset the wrap-inner negative margin (safe at every width
 *         — the offset was decorative and caused clipping below 1440px).
 *      b) Below 1240px, also reset column positioning, suppress the bg
 *         image (which competes with the text at narrow widths), and
 *         stack columns with a small gap.
 * ------------------------------------------------------------------------- */

/* (a) — unconditional: kill the negative left margin on the wrap (was -96px,
   caused left-clipping at every viewport below ~1440px). */
body.home #Content section:first-of-type .mcb-wrap-inner {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

/* (b) — sub-desktop: stack + suppress bg image + reset wrap padding.
   The wrap-inner also has padding-left: 128px baked in, which works at
   1440+ but eats too much of the column at narrower widths. */
@media (max-width: 1239px) {
	body.home #Content section:first-of-type .mcb-wrap-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.home #Content section:first-of-type .mcb-column {
		position: static !important;
		top: auto !important;
	}
	body.home #Content section:first-of-type .mcb-column .mcb-column-inner {
		margin-top: 0 !important;
		top: auto !important;
	}
	body.home #Content section:first-of-type .mcb-column + .mcb-column {
		margin-top: 1rem !important;
	}
	body.home #Content section:first-of-type {
		background-image: none !important;
		background-color: #d4cac6 !important;
		min-height: 0 !important;
		padding-bottom: 2rem !important;
	}
}

/* Homepage hero subtitle is white in original design (assumed dark bg). With
   bg image suppressed on mobile and partly transparent on desktop, white fails
   contrast on the beige base. Force dark gray site-wide for the subtitle. */
body.home #Content section:first-of-type .mcb-column.column_column strong {
	color: #454545 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Services page hero contrast
 *    H1 "Individuelle Kaffeeausstattung..." is rendered in tan (#84592c) over a
 *    busy dark espresso-machine photo — contrast fails WCAG AA. Add a dark
 *    scrim via the existing .mcb-background-overlay layer.
 * ------------------------------------------------------------------------- */
body.page-id-121 #Content .section.mcb-section:first-of-type .mcb-background-overlay {
	background: rgba(0, 0, 0, 0.45) !important;
}
/* Also lighten the H1 color so it pops on the dark scrim */
body.page-id-121 #Content .section.mcb-section:first-of-type h1.title {
	color: #f5e6c8 !important;
}