/* ----------------------------------------------------------------
	Custom CSS — site-specific overrides, kept separate from the
	template's own stylesheet so it stays easy to diff/update later.
-----------------------------------------------------------------*/

/* Article imagery comes in mixed sizes and orientations — crop everything
   into the same 16:9 "HD" frame instead of stretching or leaving gaps.
   Article photos are often white/light-background illustration-style
   shots, which nearly disappear against the page's own white background.
   Since object-fit:cover always fills 100% of this box, the background
   color alone is never visible behind it — the image itself needs real
   opacity so the gray tints through, giving light-background images a
   visible edge (same technique as the other sites' .ratio-hd). */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9.45;
	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;
}

/* Video thumbnails' "Watch" badge — the bookkeeping demo has no .play-icon
   rule at all (that's a different Canvas niche's component, not shared
   core CSS); the data-lightbox behavior itself works fine without it
   (confirmed in functions.bundle.js), but the raw text needs its own
   styling or it just sits unstyled on top of the thumbnail. */
.entry-image .play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(20, 83, 45, 0.85);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 50px;
	z-index: 2;
	pointer-events: none;
}

.entry-image .play-icon i {
	font-size: 1.1rem;
}

/* FAQ accordion's open-item highlight defaults to Bootstrap's own light
   blue/dark-blue-text combo — doesn't match the site's green. White text
   reads fine against this green (contrast checked), so no need to keep
   the original dark text color at all. filter: invert on the chevron
   turns it white too without having to touch the icon's baked-in SVG
   data-URI color. */
#faqAccordion .accordion-button:not(.collapsed) {
	background-color: #16a34a;
	color: #ffffff;
	box-shadow: none;
}
#faqAccordion .accordion-button:not(.collapsed)::after {
	filter: brightness(0) invert(1);
}
/* Bootstrap's own focus ring (a separate rule from the collapsed-state
   background above) is a blue glow regardless of open/closed state —
   recolor rather than remove it, so keyboard-focus visibility is kept. */
#faqAccordion .accordion-button:focus {
	box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.25);
}

/* Logo: safety cap regardless of the source file's own aspect ratio — the
   header forces logo images to a fixed height (100px by default) with
   width scaling proportionally, so a wide/short source file renders very
   wide. Capping height lower keeps it sane no matter what gets uploaded. */
#logo img {
	max-height: 50px;
}