/*
	Theme Name:   Minimal Lite Pro Child
	Description:  Minimal Lite Pro Child
	Author:       ZUI (originally, Kevin Pan)
	Template:     minimal-lite-pro
	Version:      1.0.1
	Text Domain:  minimalliteprochild
*/

/* #region standard links */
/* TODO: can we do this via the theme config, or is code the only way? */

body.single article.post a {
	color: #c84fa3;
}
body.single article.post a:hover {
	color: #0a58ca;
}

/* #endregion standard links */

/* #region header */

.site-header-secondary .main-header {
	padding-top: 0;
}

.main-header .container-fluid {
	display: flex;
	align-items: flex-end;
}

.site-header-secondary .thememattic-navigation {
	float: initial;
	margin-left: auto;
	width: 100%;
	max-width: 750px;
}

.main-navigation .menu ul {
	display: flex;
	justify-content: space-between;
}

.main-navigation .menu ul li a {
	text-transform: none;
}

/* color the last menu item; unfortunately, this isn't easily doable from within WP */
.main-navigation .menu ul li:last-of-type a {
	color: #059dc1;
}

.site-header .header-theme-mode {
	display: none;
}

/* TODO: we really only want search on MW? */
@media only screen and (min-width: 992px) {
	.main-navigation .icon-search {
		display: none;
	}
}

/* #endregion header */

.section-title {
	text-transform: none;
}

/* #region carousel fixes */

/* Avoid every slide being rendered before the JS has run, and causing tons of CLS */
.banner-slider:not(.banner-initialized) > .slide:not(:first-child) {
	display: none;
}
/*
 * The parent theme does a stupid thing where it hides the img tag and then instead adds a CSS
 * background image way later when the JS has initialized. Let's just show the img tag right away
 * since it will greatly improve LCP, and it now has alt and srcset attributes.
 */
.banner-slider .bg-image {
	background: none !important;
}
.banner-slider img {
	display: block !important;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* #endregion carousel fixes */

/* #region you may have missed */

.home-full-grid-cat-section {
	padding: 0;
}
@media (min-width: 576px) {
	.home-full-grid-cat-section {
		display: flex;
		flex-wrap: wrap;
	}
}
.home-full-grid-cat-section > article {
	padding: 0 15px;
}

/* #endregion you may have missed */

/* #region home page grid fixes */
/* TODO: why doesn't this "just work" sans overrides? */

@media (min-width: 768px) {
	.home-full-grid-cat-section > article,
	.section-featured .featured-item {
		width: 50%;
	}
}
@media (min-width: 992px) {
	.home-full-grid-cat-section > article,
	.section-featured .featured-item {
		width: 25%;
	}
}

/* #endregion home page grid fixes */