/**
 * Shared theme customizations.
 *
 * @package RBGNews
 */

/* Explore Categories becomes a clipped horizontal track only when the
 * shortcode returns more than six category items. */
.explore-categories__slider {
	overflow: hidden;
	width: 100%;
}

.explore-categories__row--slider {
	flex-wrap: nowrap;
	width: 100%;
	will-change: transform;
}

.explore-categories__row--slider > [class*="col-"] {
	flex-shrink: 0;
}

/* Keep every Latest Blog 6 card image aligned while preserving its aspect
 * ratio through cover cropping. */
.latest-blog-6__active .latest-blog-5__thumb {
	height: 300px;
}

.latest-blog-6__active .latest-blog-5__thumb > img,
.latest-blog-6__active .latest-blog-5__thumb a > img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* Keep Popular Blog Posts images aligned with the reference card dimensions. */
.blog-slider__thumb {
	height: 100% !important;
	overflow: hidden;
}

.blog-slider__thumb > img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* The menu stylesheet uses the Pro font variable, while the theme enqueues
 * the CDN's free Font Awesome build. Keep the existing dropdown glyph and
 * make sure it renders with the loaded font family. */
.header__menu__wrapper .main-menu ul li.has-dropdown::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

/* Keep archive and category archive card images aligned without distortion. */
.news-page-3__wrap .latest-updates-3__thumb {
	width: 100%;
	height: 280px;
	overflow: hidden;
}

.news-page-3__wrap .latest-updates-3__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

/* Keep the sidebar control compact and consistent with the existing design. */
.blog-sidebar__categories-load-more {
	display: block;
	margin: 14px auto 0;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: transparent;
	color: var(--secondary);
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.blog-sidebar__categories-load-more:hover,
.blog-sidebar__categories-load-more:focus-visible {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--white);
}

/* Match the reference Most Recent cards: compact circular thumbnails beside
 * the post content rather than large images forcing the content below. */
.blog-sidebar__post-item > .blog-sidebar__post-thumb {
	width: 100px;
	height: 100px;
	min-width: 100px;
	min-height: 100px;
	flex: 0 0 100px;
	overflow: hidden;
}

.blog-sidebar__post-item > .blog-sidebar__post-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}