/* ===== MOTHERLY LOVE DESKTOP HEADER ===== */
@media only screen and (min-width: 560px) {
	/* Arrange the whole header */
	.site-header {
		grid-template-areas: "site-logo site-title main-navigation" "site-logo site-description main-navigation";
		grid-template-columns: 150px minmax(360px, 1.4fr) minmax(500px, 1.6fr);
		column-gap: 25px;
		align-items: center;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	/* Large logo on far left */
	.site-header .site-logo {
		grid-area: site-logo;
		margin: 0;
		align-self: center;
	}
	
	.site-header .site-logo img,
			.site-header .custom-logo {
		width: 150px !important;
		max-width: 150px !important;
		height: auto !important;
	}
	
	/* Motherly Love title beside logo */
	.site-header .site-title {
		grid-area: site-title;
		margin: 0;
		align-self: end;
		white-space: nowrap;
	}
	
	/* Tagline directly below title */
	.site-header .site-description {
		grid-area: site-description;
		margin: 5px 0 0;
		align-self: start;
		white-space: nowrap;
		font-size: 15px;
	}
	
	/* Navigation on right */
	.site-header .main-navigation {
		grid-area: main-navigation;
		justify-self: start;
		align-self: center;
		margin: 0;
		width: auto;
	}
	
	/* Keep top-level menu items on ONE line */
	.site-header .main-navigation > div > ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		white-space: nowrap;
	}
	
	/* Keep individual menu labels from wrapping */
	.site-header .main-navigation > div > ul > li {
		white-space: nowrap;
	}
	
	/* Slightly tighten spacing between menu items */
	.site-header .main-navigation > div > ul > li > a {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ===== TABLET / MOBILE ===== */
@media only screen and (max-width: 559px) {
	.site-header .site-logo img,
			.site-header .custom-logo {
		width: 100px !important;
		max-width: 100px !important;
		height: auto !important;
	}
}

/* Hide theme-generated page titles on all pages */
.page .entry-header {
	display: none;
}

/* ===== MOBILE HEADER FIXES ===== */
@media only screen and (max-width: 559px) {
	/* Hide theme-generated page title on mobile */
	.page .entry-header,
		.page .entry-title {
		display: none !important;
	}
	
	/* Let the mobile header stack naturally */
	.site-header {
		display: block !important;
		padding: 15px 20px !important;
	}
	
	/* Center logo */
	.site-header .site-logo {
		text-align: center;
		margin: 0 auto 8px !important;
	}
	
	.site-header .site-logo img,
		.site-header .custom-logo {
		width: 100px !important;
		max-width: 100px !important;
		height: auto !important;
	}
	
	/* Center site name and tagline */
	.site-header .site-title,
		.site-header .site-description {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	.site-header .site-description {
		white-space: normal !important;
	}
	
	/* Make sure mobile navigation has its own row */
	.site-header .main-navigation {
		display: block !important;
		width: 100% !important;
		margin-top: 12px !important;
		text-align: center;
	}
	
	/* Make sure the theme's mobile menu button is visible */
	.main-navigation .menu-toggle,
		button.menu-toggle {
		display: inline-block !important;
		margin: 0 auto !important;
	}
}