/* ==========================================================================
   Events page (597) — Modern Events Calendar archive.
   MEC takes over this page via template_include (renders <section
   class="mec-container"> inside the theme header/footer, NOT page.php), so
   there is no .page-title-bar here — which matches the Divi baseline (bold
   "Events" heading + toolbar, no teal band). We only re-skin MEC's archive
   title to the site type scale; MEC's own CSS already matches the List skin.
   ========================================================================== */

/* Layout: MEC's native container width/centering is what generated the Divi
   baseline (D19), so we do NOT override it — adding our own max-width/padding
   only pushes the content off MEC's left edge. Leave MEC's layout alone and
   skin only what the theme regresses. */

/* Archive title — match baseline (Inter 700, ~36px, dark teal).
   MEC's default title renders small under our theme's global h1 rule; the Divi
   baseline uses a bold display size. */
.mec-container > h1 {
	font-family: Inter, sans-serif;
	font-weight: 600;      /* live: 600, not 700 */
	font-size: 30px;       /* live: 30px, not 36 */
	line-height: 1.2;
	color: #333333;        /* live: #333 near-black, not brand teal */
	margin: 30px 0 24px;
}
/* Scale the archive title down on mobile to match live's responsive title. */
@media (max-width: 767px) {
	.mec-container > h1 { font-size: 28px; margin: 20px 0 16px; }
}

/* --------------------------------------------------------------------------
   Interactive hover (President ask) — match home's ~.25s ease. MEC ships the
   base list styling; we add page-level feedback on rows, the VIEW DETAIL
   button, event titles, and the Yearly/…/List view toggle. Global scroll-reveal
   + default button hover are handled site-wide (creda.js/creda.css) — not here.
   -------------------------------------------------------------------------- */

/* Event row (list card) — subtle lift + shadow. */
.mec-container .mec-event-article {
	transition: transform .25s ease, box-shadow .25s ease;
}
.mec-container .mec-event-article:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(1, 58, 73, .14);
	position: relative;
	z-index: 1;
}

/* Event title link. */
.mec-container .mec-event-title a { transition: color .2s ease; }
.mec-container .mec-event-title a:hover { color: #039CA2; }

/* VIEW DETAIL button (<a class="mec-booking-button">) — fill + lift on hover. */
.mec-container .mec-booking-button {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.mec-container .mec-booking-button:hover {
	background-color: #013A49;
	border-color: #013A49;
	color: #fff;
	transform: translateY(-2px);
}

/* Yearly / Monthly / Weekly / Daily / List view toggle (span items). */
.mec-container .mec-totalcal-view span {
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.mec-container .mec-totalcal-view span:not(.mec-totalcalview-selected):hover {
	background-color: #039CA2;
	color: #fff;
}