/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* This template already crops every card/hero image to a fixed aspect
   ratio via object-fit — but real article photos come in mixed sizes and
   some have white backgrounds that vanish into the page. A grey backdrop
   behind each image, plus a touch of transparency on the image itself,
   keeps every thumbnail readable regardless of source. */
.cb-hero-image,
.cb-card-image,
.cb-featured-image,
.cb-side-image {
	background-color: #b0b0b0;
}

.cb-hero-image img,
.cb-card-image img,
.cb-featured-image img,
.cb-side-image img {
	opacity: .85;
}

/* Generic aspect-ratio utility for anything built fresh (the video embed,
   article hero) that doesn't already have one of the template's own
   image-wrapper classes above. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: #b0b0b0;
}

.ratio-hd img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover !important;
	object-position: 50% 50%;
	opacity: .85;
}

.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ratio-hd > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* A handful of articles have no ImageURL — a themed tile fills the same
   frame a real photo would, instead of a broken <img>. */
.ratio-hd-empty,
.cb-card-image .ratio-hd-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 200px;
	background: linear-gradient(135deg, var(--cnvs-themecolor), var(--cb-rose-dark, var(--cnvs-themecolor)));
	color: #fff;
	font-size: 2.5rem;
}

/* A comfortable reading width for article/page body copy — independent of
   whatever grid column it sits in. */
.reading-width {
	max-width: 900px;
}

/* Bootstrap's accordion defaults the "open" state and its focus ring to
   blue (--bs-accordion-active-bg / --bs-accordion-btn-focus-box-shadow) —
   out of place on this warm palette. Use the site's own cream/peach tone
   instead, for both the open background and the focus glow. */
.accordion {
	--bs-accordion-active-bg: var(--cb-blush);
	--bs-accordion-active-color: var(--cb-charcoal);
	--bs-accordion-btn-focus-border-color: var(--cnvs-themecolor);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cnvs-themecolor-rgb), 0.25);
}

.accordion-button:not(.collapsed) {
	background-color: var(--cb-blush);
	color: var(--cb-charcoal);
	box-shadow: none;
}