/**
 * Layout compatibility fixes for the 1205 site.
 *
 * Kept separate from Hello Elementor core styles so these adjustments are
 * easy to audit/remove when upgrading the parent theme.
 */

/* Prevent media from overflowing narrow Elementor/container layouts. */
img,
svg,
video,
canvas {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/*
 * Header/logo resilience.
 * WordPress custom logos can carry explicit width/height attributes and the
 * header uses flexbox. These rules prevent the branding block from collapsing
 * or the image from being clipped on intermediate viewport widths.
 */
.site-header .header-inner {
	align-items: center;
	gap: 1rem;
}

.site-header .site-branding,
.site-header .site-logo,
.site-header .custom-logo-link {
	min-width: 0;
}

.site-header .site-branding {
	flex: 0 1 auto;
}

.site-header .custom-logo-link {
	line-height: 0;
	max-width: 100%;
}

.site-header .custom-logo,
.site-header .site-logo img {
	display: block;
	height: auto;
	max-height: 120px;
	max-width: min(100%, 350px);
	object-fit: contain;
	width: auto;
}

/* Let the navigation use the remaining width without forcing branding away. */
.site-header .site-navigation {
	min-width: 0;
}

.site-header .site-navigation ul.menu {
	margin-block: 0;
}

/* Long menu labels/titles should not create horizontal page scrolling. */
.site-header a,
.site-footer a,
.site-main {
	overflow-wrap: anywhere;
}

/* Keep embedded and user supplied content inside the viewport. */
.site-main iframe,
.elementor iframe {
	max-width: 100%;
}

/* Tablet: give branding and navigation predictable space. */
@media (max-width: 991px) {
	.site-header:not(.header-stacked) .header-inner {
		column-gap: .75rem;
	}

	.site-header .custom-logo,
	.site-header .site-logo img {
		max-height: 96px;
		max-width: min(100%, 300px);
	}
}

/* Phone: avoid a logo/menu collision and preserve a tappable menu control. */
@media (max-width: 575px) {
	.site-header .header-inner {
		align-items: center;
		flex-wrap: nowrap;
	}

	.site-header .site-branding {
		max-width: calc(100% - 60px);
	}

	.site-header .custom-logo,
	.site-header .site-logo img {
		max-height: 80px;
		max-width: min(100%, 240px);
	}

	.site-header .site-navigation-toggle-holder {
		flex: 0 0 auto;
		margin-inline-start: auto;
		padding-inline: 8px;
	}

	.site-navigation-dropdown {
		inset-inline: 0;
		width: 100%;
	}
}

/*
 * Elementor site-logo widgets: only normalize the image box. Visibility is
 * deliberately not forced, so Elementor responsive visibility controls keep
 * working as configured in the editor.
 */
.elementor-widget-theme-site-logo img,
.elementor-widget-image .elementor-widget-container > a > img {
	height: auto;
	max-width: 100%;
	object-fit: contain;
}