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

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

/* Article/topic imagery comes in mixed sizes and orientations (source
   photos are portrait, landscape, whatever the article batch used).
   Every thumbnail and hero gets cropped into the same 16:9 "HD" frame
   instead of stretching or leaving letterboxed gaps. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	/* Many source images have white backgrounds, which vanish into the
	   white page. A grey backdrop plus slightly transparent images tints
	   the white to a light grey so every thumbnail keeps a visible edge. */
	background-color: #b0b0b0;
}

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

/* Percentage heights on a plain block child of an aspect-ratio box are
   inconsistently resolved across browsers — absolute-position the iframe
   against the box's own relative positioning instead (same approach
   Bootstrap's .ratio uses), rather than trusting height:100% alone. */
.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Articles without an ImageURL yet: a navy tile with a gold icon, filling
   the same .ratio-hd frame a real photo would. */
.ratio-hd-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cnvs-themecolor), rgba(var(--cnvs-themecolor-rgb), 0.78));
	color: var(--cnvs-secondary-color);
	font-size: 3rem;
}

/* Bootstrap's accordion paints its open state and focus ring in default
   blue via these variables — two separate states (open background, and
   the :focus glow) — so both are re-pointed at the navy/gold palette. */
.accordion {
	--bs-accordion-active-bg: var(--cnvs-themecolor);
	--bs-accordion-active-color: #fff;
	--bs-accordion-btn-focus-border-color: var(--cnvs-secondary-color);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cnvs-secondary-color-rgb), 0.35);
}

.accordion-button:not(.collapsed) {
	background-color: var(--cnvs-themecolor);
	color: #fff;
	box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
	filter: brightness(0) invert(1);
}

/* The image link sits between .ratio-hd and its <img>/placeholder; without
   an explicit block+height it's an inline box and percentage heights inside
   it don't resolve. */
.ratio-hd > a {
	display: block;
	width: 100%;
	height: 100%;
}