/**
 * Kadence overlapping header logo
 * Desktop overlap only.
 * Tablet and mobile use the normal Kadence header layout.
 *
 * Kadence logo widths:
 * Desktop: 250px
 * Tablet: 150px
 * Mobile: 100px
 */

/* Keep the desktop header above the page content */
#masthead,
#main-header {
	position: relative;
	z-index: 100;
	overflow: visible;
}

/* Prevent desktop header containers from clipping the logo */
#main-header .site-header-row-container,
#main-header .site-header-row-container-inner,
#main-header .site-header-main-section-left,
#main-header .site-header-item,
#main-header .site-branding {
	overflow: visible;
}

/* Desktop overlapping logo */
@media screen and (min-width: 1025px) {

	#main-header .site-header-main-section-left {
		position: relative;
		min-width: 270px;
		height: 140px;
	}

	#main-header .site-branding {
		position: absolute;
		top: 100%;
		left: 0;
		transform: translateY(-49%);
		z-index: 110;
		margin: 0;
	}
}

/* Tablet and mobile: restore normal Kadence positioning */
@media screen and (max-width: 1024px) {

	#mobile-header,
	#mobile-header .site-header-row-container,
	#mobile-header .site-header-row-container-inner,
	#mobile-header .site-header-main-section-left,
	#mobile-header .site-header-item,
	#mobile-header .site-branding {
		overflow: visible;
	}

	#mobile-header .site-header-main-section-left {
		position: static;
		min-width: 0;
		height: auto;
	}

	#mobile-header .site-branding {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin: 0;
	}
}