/**
 * Appearance module: logo placement, hero darkening, overlay piping.
 *
 * Every value here comes from a custom property printed by inc/appearance.php,
 * with a fallback matching the theme's previous hardcoded behaviour so the
 * stylesheet still renders sensibly if the module is removed.
 */

/* ----- logo size and alignment ----- */
.site-logo img,
.site-logo .custom-logo {
	max-height: var(--smr-logo-height, 104px);
}

.smr-logo-left .site-logo-band {
	text-align: left;
}

.smr-logo-right .site-logo-band {
	text-align: right;
}

.smr-logo-left .site-logo img,
.smr-logo-left .site-logo .custom-logo {
	margin-left: 0;
	margin-right: auto;
}

.smr-logo-right .site-logo img,
.smr-logo-right .site-logo .custom-logo {
	margin-left: auto;
	margin-right: 0;
}

.smr-logo-left .site-tagline {
	margin-left: 0;
	text-align: left;
}

.smr-logo-right .site-tagline {
	margin-right: 0;
	text-align: right;
}

/* ----- hero darkening, 0 = untouched photo ----- */
.hero-slide::before {
	background: rgba(0, 0, 0, var(--smr-hero-overlay, .45));
}

/* ----- panel behind the hero text, so the photo can stay full colour ----- */
.smr-hero-panel .hero-content {
	padding: clamp(26px, 4vw, 48px) clamp(22px, 4vw, 54px);
	background: rgba(16, 16, 26, .52);
	backdrop-filter: blur(2px);
	border-radius: 6px;
}

/* ----- piping: a clean edge on anything laid over an image ----- */
.smr-piping.smr-hero-panel .hero-content,
.smr-piping .site-logo-band--overlay .site-logo {
	border: var(--smr-piping-width, 3px) solid var(--smr-piping-color, rgba(255, 255, 255, 1));
}

/* ----- overlay header: the logo band lifted onto the hero ----- */
.site-logo-band--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding: clamp(18px, 3vw, 34px) 0;
	background: transparent;
	pointer-events: none;
}

.site-logo-band--overlay .site-logo {
	display: inline-block;
	pointer-events: auto;
	padding: clamp(8px, 1.4vw, 16px) clamp(12px, 2vw, 22px);
	background: rgba(255, 255, 255, .06);
	border-radius: 4px;
}

.site-logo-band--overlay .site-logo a {
	color: var(--white);
}

.site-logo-band--overlay .site-tagline {
	color: rgba(255, 255, 255, .82);
}

/* The hero needs headroom for the overlaid logo, and the content wrapper is the
   positioning context the band is absolute against. */
.smr-header-overlay .site-content {
	position: relative;
}

.smr-header-overlay .hero-slider .hero-content {
	margin-top: calc(var(--smr-logo-height, 104px) / 2);
}

@media (max-width: 768px) {
	.site-logo-band--overlay {
		padding: 14px 0;
	}

	.smr-header-overlay .hero-slider .hero-content {
		margin-top: 0;
	}
}

/* style.css shrinks the logo at these widths, but this file loads later and would
   win at equal specificity — so the caps are restated here against the setting. */
@media (max-width: 1200px) {
	.site-logo img,
	.site-logo .custom-logo {
		max-height: min(var(--smr-logo-height, 104px), 88px);
	}
}

@media (max-width: 768px) {
	.site-logo img,
	.site-logo .custom-logo {
		max-height: min(var(--smr-logo-height, 104px), 62px);
	}
}