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

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

/* Article imagery comes in mixed sizes and orientations. Crop everything
   into the same 16:9 "HD" frame instead of stretching or leaving gaps. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	/* Article photos are often white/light-background product-style shots,
	   which nearly disappear against the page's own white background. A
	   medium gray backdrop gives every thumbnail a visible edge — but since
	   the image uses object-fit:cover, it always fills 100% of this box, so
	   the background color alone is never actually visible behind it. The
	   image itself needs real opacity so the gray tints through; a subtle
	   opacity like .95 blends too little to notice. */
	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;
}

/* The header row's own default CSS is `flex-wrap: wrap`; harmless on its
   own, but kept as a backstop now that the real cause below is fixed. */
@media (min-width: 992px) {
	.header-row {
		flex-wrap: nowrap !important;
	}
}

/* The actual cause of the nav links stacking one-per-line on page load:
   verified live (devtools computed styles) that .large-device-menu a is
   `display: block` with every link forced to the same fixed width by
   default. Once the page scrolls, Canvas's JS adds a `sticky-header` class
   to #header, and CSS scoped to *that* class switches these same links to
   `display: inline-block` with a content-sized width — which is what
   actually makes them lay out horizontally. There's no non-JS-dependent
   rule providing that layout by default, so on load (before any scroll)
   they render broken. Apply the working styling unconditionally instead of
   only under .sticky-header.

   The template's own `.sticky-header .large-device-menu a` rule (in
   theme/demos/law-firm/law-firm.css) also sets `margin: 0 18px` — that's
   what actually spaces the links apart horizontally. Missing that here
   left the links correctly laid out (inline-block) but bunched with no
   gap between them until a real scroll added the sticky-header class. */
.large-device-menu a {
	display: inline-block !important;
	width: auto !important;
	margin: 0 18px !important;
}

/* Desktop-only fixed-height card, for the 3-wide "you might also like" row
   — long headlines used to push cards to different heights. Truncate the
   headline (see truncate_words() in functions.php) and clip here as a
   backstop. Mobile keeps its natural height. */
@media (min-width: 768px) {
	.card-fixed-height {
		height: 250px;
		overflow: hidden;
	}
}