/* ==========================================================================
   ort-der-schoenheit.de — display fixes (manifest §72 P4, 2026-10-07)
   Loaded by mu-plugins/ods-display.php. Delete both files to revert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Logo with an explicit size.
   The theme sizes the SVG logo with `width:50%` inside a shrink-to-fit link;
   Chrome resolves that to 150 × 157 px, Safari/WebKit to a different size.
   Values below reproduce the Chrome result in every engine.
   -------------------------------------------------------------------------- */
.header .logo.retina-logo .logo-link {
	width: 300px;
}
.mobile-header .logo.retina-logo .logo-link {
	width: 100%;
	max-width: 300px;
}
.header .logo.retina-logo .logo-link img,
.mobile-header .logo.retina-logo .logo-link img {
	width: 150px;
	height: auto;
	aspect-ratio: 445 / 467;
}
.mobile-header .logo.retina-logo .logo-link img {
	width: min(150px, calc((100vw - 112px) / 2));
}

/* --------------------------------------------------------------------------
   2 · Hero headline (front page slider): the theme renders it as <div>;
   ods-display.php turns it into the page's <h1>. Reset the theme's h1
   styles so it looks exactly as before.
   -------------------------------------------------------------------------- */
h1.content-slider-item-heading-content.ods-hero-h1 {
	margin: 0;
	padding: 0;
	letter-spacing: inherit;
	word-spacing: inherit;
	font-style: inherit;
}

/* Headline size scales between 1024 px (57 px) and 1440 px (80 px) instead of
   jumping to 80 px at 1024 px. Mobile/tablet sizes stay as set in Elementor. */
@media (min-width: 1024px) {
	body .elementor-element.elementor-element-c156177 .content-item .content-slider-item-heading .content-slider-item-heading-content {
		font-size: clamp(56px, 5.56vw, 80px);
		line-height: 1.1;
	}
}

/* --------------------------------------------------------------------------
   3 · Mobile header (shown below 1365 px) transparent over the homepage hero.
   Front page only (body.ods-hero-overlay). Inner pages keep the normal header:
   their title banners are only ~135 px tall and a white logo would cover the
   page title.
   -------------------------------------------------------------------------- */
@media (max-width: 1364px) {
	body.ods-hero-overlay {
		/* = height of the mobile header: logo height + 2 × 18 px margin */
		--ods-mh: calc(min(150px, (100vw - 112px) / 2) * 1.0494 + 36px);
	}
	body.ods-hero-overlay .mobile-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		background: linear-gradient(to bottom, rgba(23, 20, 18, 0.45) 0%, rgba(23, 20, 18, 0.2) 55%, rgba(23, 20, 18, 0) 100%);
	}
	/* logo white */
	body.ods-hero-overlay .mobile-header .logo img {
		filter: brightness(0) invert(1);
	}
	/* burger: larger, white, 44 px tap area */
	body.ods-hero-overlay .mobile-header .menu-trigger {
		width: 44px;
		height: 44px;
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .hamburger {
		width: 30px;
		height: 20px;
		margin: -10px 0 0 -15px;
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .hamburger span {
		width: 30px;
		height: 2px;
		background-color: #fff;
		box-shadow: 0 0 6px rgba(23, 20, 18, 0.25);
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .hamburger span:first-child {
		margin-bottom: 7px;
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .hamburger span:last-child {
		margin-top: 7px;
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .menu-trigger-icon.active .hamburger span:first-child {
		transform: rotate(-45deg) translate(-6px, 6px);
	}
	body.ods-hero-overlay .mobile-header .menu-trigger .menu-trigger-icon.active .hamburger span:last-child {
		transform: rotate(45deg) translate(-6px, -6px);
	}
	/* the hero grows upwards under the header; its content stays where it was */
	body.ods-hero-overlay .elementor-element-c156177 .content-item {
		box-sizing: content-box;
		padding-top: var(--ods-mh);
	}
}

/* --------------------------------------------------------------------------
   4 · Footer "Social Links" block (Ig / Fb / Pin / In): newer Elementor
   versions no longer suppress WordPress's block styles, which turn the list
   into a row of 24 px icon pills. Keep the vertical text list as before.
   -------------------------------------------------------------------------- */
.footer ul.wp-block-social-links {
	display: block;
	flex-wrap: nowrap;
	font-size: inherit;
	align-items: normal;
}
.footer ul.wp-block-social-links .wp-block-social-link {
	display: list-item;
	font-size: inherit;
	width: auto;
	border-radius: 0;
}
.footer ul.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	width: auto;
	height: auto;
	align-items: normal;
}
.footer ul.wp-block-social-links .wp-block-social-link svg {
	font-size: inherit;
	line-height: inherit;
}