/**
 * CorneaNews static site — header layout fixes (loads after theme CSS).
 * Mobile: center logo; keep hamburger on the left.
 * Desktop: remove theme’s large left padding so the logo centers.
 */

/* High-res header graphic (e.g. keratoconus-heading-new.png): cap height, fluid width */
.site-header .custom-logo-link img.custom-logo {
	height: auto;
	max-width: 100%;
	max-height: 170px;
	width: auto;
}

/* ---------- Mobile / tablet (theme shows .mobile-header ≤1024px) ---------- */
@media screen and (max-width: 1024px) {
	.mobile-header .menu-bar-wrap {
		position: relative;
		display: flex !important;
		justify-content: center !important;
		align-items: center;
		flex-wrap: nowrap;
		min-height: 80px;
	}

	.mobile-header .mobile-nav {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.site-header .mobile-logo {
		width: auto !important;
		max-width: calc(100% - 3.5rem) !important;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.mobile-header .site-branding {
		text-align: center;
		width: 100%;
	}

	.mobile-header .custom-logo-link {
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: inline-block;
	}

	.mobile-header .custom-logo-link img {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	.mobile-header .site-title-logo {
		margin: 0;
	}
}

/*
 * Desktop header logo: align with Bootstrap md (992px) so narrow “desktop”
 * windows (e.g. iPad landscape, half-screen) are not stuck between breakpoints.
 * Do not set float:none on .col-* — it breaks Bootstrap 3’s .row clearfix/grid.
 */
@media screen and (min-width: 992px) {
	.header-logo .custom-logo-link,
	.header-logo a.custom-logo-link {
		padding-left: 0 !important;
		padding-right: 0 !important;
		display: inline-block;
	}

	.header-logo .site-branding {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.header-logo .desktop-logo {
		text-align: center;
	}

	.header-logo .site-title-logo {
		margin: 0;
	}

	.header-logo .custom-logo-link img {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
}