/*
Theme Name: Hello Elementor Child
Theme URI: https://matrixexecutions.com
Description: Child theme of Hello Elementor for MatrixExecutions.com. ALL theme customizations (PHP, CSS, template overrides) live here — never edit the stock hello-elementor parent. Maintained by WhiteboardIT.
Author: WhiteboardIT
Author URI: https://whiteboardit.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Add custom CSS below this line. */

/* ==========================================================================
   News & Press Center — /news/ archive and the homepage Latest News block.

   The archive is an Elementor Loop Grid rendering the "News card (loop item)"
   template. Structure and dynamic data live in Elementor so the team can edit
   them visually; the card's visual treatment lives here so it stays in one
   readable place instead of spread across a few hundred Elementor control keys.
   ========================================================================== */

.mx-news__heading .elementor-heading-title {
	font-size: 2.35rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #1d2530;
}

.mx-news__intro {
	max-width: 46rem;
	margin: 0.85rem auto 2.5rem;
	font-size: 1.06rem;
	line-height: 1.6;
	color: #4a545f;
}

/* --- the grid ---------------------------------------------------------- */

.mx-news-grid .elementor-loop-container {
	align-items: stretch;
}

/* --- the card ---------------------------------------------------------- */

.mx-news-card {
	height: 100%;
	overflow: hidden;
	border: 1px solid #e4eaf1;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 35, 60, 0.05);
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.mx-news-card:hover {
	transform: translateY(-2px);
	border-color: #cfe0f0;
	box-shadow: 0 10px 26px rgba(20, 35, 60, 0.11);
}

/* Media. A fixed ratio keeps every card's text starting on the same line,
   whatever shape the publication's own artwork happens to be. */
.mx-news-card__media {
	width: 100%;
}

.mx-news-card__media .elementor-widget-container,
.mx-news-card__media a {
	display: block;
}

.mx-news-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: #f4f7fa;
}

/* Body. Grows to fill the card so the READ MORE button sits on the baseline
   of every card in a row rather than floating under short summaries. */
/* Elementor's own `.e-con.e-flex` sets `flex: var(--flex-grow) ...` with `--flex-grow: 0`, at
   specificity (0,0,2,0). A plain `.mx-news-card__body` (0,0,1,0) loses that, which left the body
   not growing and `margin-top: auto` on the source line resolving to 0, so the READ MORE buttons
   floated at different heights instead of sitting on one baseline. Setting Elementor's own custom
   property from a higher-specificity selector works with the cascade rather than against it. */
.mx-news-card__body.e-con.e-flex {
	--flex-grow: 1;
	flex-grow: 1;
}

.mx-news-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.35rem 1.4rem 1.5rem;
}

.mx-news-card__date .elementor-heading-title {
	display: inline-block;
	padding: 0.28em 0.7em;
	border-radius: 3px;
	background: #e8f1fa;
	color: #2a72b5;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mx-news-card__title {
	margin-top: 0.85rem;
}

.mx-news-card__title .elementor-heading-title {
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.36;
	color: #1c4e8c;

	/* The theme uppercases every h3. Headlines here run long and are far easier to scan in
	   sentence case, which is also how they read on the source publication. */
	text-transform: none;
}

.mx-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.mx-news-card__title a:hover {
	color: #2a72b5;
	text-decoration: underline;
}

.mx-news-card__excerpt {
	margin-top: 0.6rem;
	color: #69727d;
	font-size: 0.875rem;
	line-height: 1.62;
}

.mx-news-card__excerpt p:last-child {
	margin-bottom: 0;
}

/* Pushes the source line and button to the bottom of the card. */
.mx-news-card__source {
	margin-top: auto;
	padding-top: 1.1rem;
}

.mx-news-card__source .elementor-heading-title {
	color: #98a2ae;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.mx-news-card__cta {
	margin-top: 0.85rem;
}

.mx-news-card__cta .elementor-button {
	padding: 0.62em 1.35em;
	border-radius: 3px;
	background: #2a5d96;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	fill: #fff;
}

.mx-news-card__cta .elementor-button:hover,
.mx-news-card__cta .elementor-button:focus {
	background: #1c4e8c;
	color: #fff;
}

/* --- pagination -------------------------------------------------------- */

.mx-news-grid .elementor-pagination {
	margin-top: 2.6rem;
	font-size: 0.9rem;
}

.mx-news-grid .elementor-pagination .page-numbers {
	padding: 0.3em 0.7em;
	border-radius: 3px;
	color: #4a545f;
	text-decoration: none;
}

.mx-news-grid .elementor-pagination .page-numbers.current {
	background: #2a5d96;
	color: #fff;
}

.mx-news-grid .elementor-pagination a.page-numbers:hover {
	background: #e8f1fa;
	color: #1c4e8c;
}

/* --- small screens ----------------------------------------------------- */

@media (max-width: 767px) {

	.mx-news__heading .elementor-heading-title {
		font-size: 1.8rem;
	}

	.mx-news__intro {
		margin-bottom: 1.9rem;
		font-size: 1rem;
	}

	.mx-news-card__body {
		padding: 1.15rem 1.2rem 1.3rem;
	}
}

/* --- article body ------------------------------------------------------- */

/* Lists in post content carry margin-bottom: 0, so the paragraph after a bulleted
   list butts straight up against it while every other block gets 14.4px. Match the
   paragraph rhythm. Scoped to the post body so nav and footer lists are unaffected. */
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
	margin-bottom: 14.4px;
}

/* --- search ------------------------------------------------------------- */

/* Sized like a search field, not like a page-width banner: it takes a word or two, so a
   ~26rem box centred under the intro reads as an affordance rather than a form to fill in.
   Spacing lives here and on the summary line, not on the Elementor widget wrappers, because
   the container zeroes widget margins and the theme zeroes the summary paragraph's. */
.mx-news-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 26rem;
	margin: 1.7rem auto 1.9rem;
}

.mx-news-search__icon {
	position: absolute;
	left: 0.95rem;
	display: flex;
	align-items: center;
	color: #8b97a4;
	pointer-events: none;
}

input[type="search"].mx-news-search__field {
	width: 100%;
	padding: 0.72rem 1rem 0.72rem 2.75rem;
	border: 1px solid #dfe6ee;
	border-radius: 6px;
	background: #fff;
	color: #2a323c;
	font-size: 0.95rem;
	line-height: 1.4;
	appearance: none;
}

input[type="search"].mx-news-search__field::placeholder {
	color: #98a2ae;
}

input[type="search"].mx-news-search__field:focus {
	border-color: #2a72b5;
	outline: 2px solid rgba(42, 114, 181, 0.22);
	outline-offset: 1px;
}

/* Sits inside the field, on the right, only while a search is active. */
.mx-news-search__clear {
	position: absolute;
	right: 0.85rem;
	color: #69727d;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
}

.mx-news-search__clear:hover,
.mx-news-search__clear:focus {
	color: #1c4e8c;
	text-decoration: underline;
}

.mx-news-search__summary {
	margin: -0.9rem 0 0;
	padding-bottom: 1.5rem;
	color: #4a545f;
	font-size: 0.92rem;
	text-align: center;
}

@media (max-width: 767px) {

	.mx-news-search {
		margin: 1.3rem auto 1.4rem;
	}

	input[type="search"].mx-news-search__field {
		font-size: 1rem; /* 16px keeps iOS Safari from zooming the page on focus. */
	}
}

/* --- breadcrumb --------------------------------------------------------- */

.mx-breadcrumb {
	margin-bottom: 0.9rem;
	font-size: 0.82rem;
	line-height: 1.5;
}

.mx-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #8b97a4;
}

.mx-breadcrumb__item {
	display: flex;
	align-items: baseline;
}

/* Separator drawn in CSS so it is not read out as content by a screen reader. */
.mx-breadcrumb__item + .mx-breadcrumb__item::before {
	margin: 0 0.5em;
	color: #b8c1cb;
	content: "\203A";
}

.mx-breadcrumb__link {
	color: #2a72b5;
	text-decoration: none;
}

.mx-breadcrumb__link:hover,
.mx-breadcrumb__link:focus {
	color: #1c4e8c;
	text-decoration: underline;
}

/* The article's own title. Long headlines are truncated so the trail stays on one line
   on desktop; the full title is right underneath as the page heading anyway. */
.mx-breadcrumb__current {
	display: inline-block;
	max-width: 34rem;
	overflow: hidden;
	color: #8b97a4;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@media (max-width: 767px) {

	.mx-breadcrumb {
		font-size: 0.78rem;
	}

	.mx-breadcrumb__current {
		max-width: 14rem;
	}
}