/* ============================================================================
 * MPH EVENTS -- FRONTEND STYLES
 * ============================================================================
 * Palette (MPH brand, updated Jul 2026):
 *   --mphe-orange   #FAA61C   primary accent (badges, buttons)
 *   --mphe-navy     #353F51   charcoal blue (headings, dark text)
 *   --mphe-blue     #465DAA   dusk blue (links, accents)
 *   --mphe-powder   #A8B6DE   powder blue (borders, subtle fills)
 * Fonts: Poppins (headings) + Glacial Indifference (body) -- loaded by the
 * site; declared here with safe fallbacks only.
 * Class prefix: mphe-
 * ============================================================================ */

:root {
	--mphe-orange: #faa61c;
	--mphe-orange-deep: #de8c05;
	--mphe-navy: #353f51;
	--mphe-navy-deep: #262f3c;
	--mphe-blue: #465daa;
	--mphe-powder: #a8b6de;
	--mphe-powder-soft: rgba(168, 182, 222, 0.22);
	--mphe-white: #ffffff;
	--mphe-body: 'Glacial Indifference', 'Poppins', -apple-system, sans-serif;
	--mphe-head: 'Poppins', -apple-system, sans-serif;
	--mphe-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--mphe-shadow-sm: 0 2px 10px rgba(53, 63, 81, 0.08);
	--mphe-shadow-md: 0 12px 32px rgba(53, 63, 81, 0.14);
}

.mphe-wrap {
	font-family: var(--mphe-body);
	color: var(--mphe-navy);
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.mphe-empty {
	text-align: center;
	font-size: 17px;
	color: var(--mphe-navy);
	background: var(--mphe-powder-soft);
	border: 1px solid var(--mphe-powder);
	border-radius: 8px;
	padding: 26px 20px;
}

/* ============================================================
 * EVENT CARD (shared by list + grid views)
 * ============================================================ */

.mphe-card {
	position: relative;
	background: var(--mphe-white);
	border: 1px solid var(--mphe-powder);
	border-radius: 10px;
	padding: 26px 26px 22px;
	box-shadow: var(--mphe-shadow-sm);
	transition: transform 0.35s var(--mphe-ease), box-shadow 0.35s var(--mphe-ease);
}
.mphe-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mphe-shadow-md);
}
.mphe-card-past {
	opacity: 0.78;
}
.mphe-card-head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.mphe-badge {
	flex: 0 0 auto;
	width: 62px;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow: var(--mphe-shadow-sm);
}
.mphe-badge-month {
	display: block;
	background: var(--mphe-navy);
	color: var(--mphe-white);
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 4px 0 3px;
}
.mphe-badge-day {
	display: block;
	background: var(--mphe-orange);
	color: var(--mphe-navy-deep);
	font-family: var(--mphe-head);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	padding: 5px 0 6px;
}
.mphe-card-headings {
	min-width: 0;
}
.mphe-card-title {
	margin: 2px 0 8px;
	font-family: var(--mphe-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.3px;
}
.mphe-card-title a {
	color: var(--mphe-navy);
	text-decoration: none;
	transition: color 0.25s ease;
}
.mphe-card-title a:hover {
	color: var(--mphe-blue);
}
.mphe-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 15px;
	color: var(--mphe-blue);
}
.mphe-card-meta .mphe-meta-loc::before {
	content: "\2022";
	color: var(--mphe-powder);
	margin-right: 18px;
}
.mphe-card-excerpt {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(53, 63, 81, 0.8);
}
.mphe-card-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--mphe-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--mphe-blue);
	text-decoration: none;
}
.mphe-card-more .mphe-arrow {
	transition: transform 0.3s var(--mphe-ease);
}
.mphe-card-more:hover {
	color: var(--mphe-navy);
}
.mphe-card-more:hover .mphe-arrow {
	transform: translateX(5px);
}

/* ---- List view: stacked rows ---- */
.mphe-list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 860px;
}

/* ---- Grid view: 3-up cards ---- */
.mphe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.mphe-grid .mphe-card {
	display: flex;
	flex-direction: column;
}
.mphe-grid .mphe-card-more {
	margin-top: auto;
	padding-top: 16px;
}
.mphe-card-thumb {
	display: block;
	margin: -26px -26px 20px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}
.mphe-card-thumb img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform 0.5s var(--mphe-ease);
}
.mphe-card:hover .mphe-card-thumb img {
	transform: scale(1.045);
}

@media (max-width: 1024px) {
	.mphe-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.mphe-grid {
		grid-template-columns: 1fr;
	}
	.mphe-card {
		padding: 20px 18px 18px;
	}
	.mphe-card-thumb {
		margin: -20px -18px 16px;
	}
	.mphe-card-title {
		font-size: 19px;
	}
}

/* ============================================================
 * CALENDAR
 * ============================================================ */

.mphe-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.mphe-cal-title {
	margin: 0;
	font-family: var(--mphe-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--mphe-navy);
	text-align: center;
}
.mphe-cal-nav-btn {
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mphe-blue);
	background: var(--mphe-white);
	border: 1px solid var(--mphe-powder);
	border-radius: 100px;
	padding: 9px 18px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	white-space: nowrap;
}
.mphe-cal-nav-btn:hover {
	background: var(--mphe-navy);
	border-color: var(--mphe-navy);
	color: var(--mphe-white);
}

.mphe-cal-head {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 6px;
}
.mphe-cal-dow {
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--mphe-blue);
	padding: 6px 0;
}
.mphe-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: minmax(108px, auto);
	gap: 6px;
}
.mphe-cal-cell {
	min-height: 108px;
	background: var(--mphe-white);
	border: 1px solid var(--mphe-powder);
	border-radius: 8px;
	padding: 8px 8px 10px;
	box-sizing: border-box;
}

/* Empty months render at the same full cell size as months with events;
   the wrap width fix above keeps the grid from shrink-wrapping in flex
   parents (Elementor centers children, which collapsed width-less blocks
   to their intrinsic width). */
.mphe-cal-pad {
	background: var(--mphe-powder-soft);
	border-color: transparent;
}
.mphe-cal-today {
	border-color: var(--mphe-orange);
	box-shadow: inset 0 0 0 1px var(--mphe-orange);
}
.mphe-cal-daynum {
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	color: rgba(53, 63, 81, 0.65);
	margin-bottom: 6px;
}
.mphe-cal-today .mphe-cal-daynum {
	color: var(--mphe-orange-deep);
}
.mphe-cal-daynum-full {
	display: none;
}
.mphe-cal-ev {
	display: block;
	background: var(--mphe-powder-soft);
	border-left: 3px solid var(--mphe-orange);
	border-radius: 4px;
	padding: 5px 7px;
	margin-bottom: 5px;
	text-decoration: none;
	transition: background 0.25s ease;
}
.mphe-cal-ev:hover {
	background: var(--mphe-powder);
}
.mphe-cal-ev-time {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--mphe-blue);
	margin-bottom: 1px;
}
.mphe-cal-ev-title {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--mphe-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mphe-cal-empty {
	margin-top: 16px;
}

/* Calendar on small screens: agenda list of days that have events. */
@media (max-width: 700px) {
	.mphe-cal-head {
		display: none;
	}
	.mphe-cal-grid {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.mphe-cal-pad,
	.mphe-cal-cell:not(.mphe-cal-has) {
		display: none;
	}
	.mphe-cal-cell {
		min-height: 0;
	}
	.mphe-cal-daynum-short {
		display: none;
	}
	.mphe-cal-daynum-full {
		display: inline;
	}
	.mphe-cal-title {
		font-size: 21px;
	}
}

/* ============================================================
 * SINGLE EVENT DETAIL BAND
 * ============================================================ */

.mphe-single-card {
	font-family: var(--mphe-body);
	background: var(--mphe-white);
	border: 1px solid var(--mphe-powder);
	border-left: 5px solid var(--mphe-orange);
	border-radius: 10px;
	box-shadow: var(--mphe-shadow-sm);
	padding: 24px 26px;
	margin: 0 0 32px;
}
.mphe-single-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}
.mphe-single-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.mphe-single-label {
	flex: 0 0 auto;
	min-width: 64px;
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mphe-blue);
}
.mphe-single-value {
	font-size: 17px;
	color: var(--mphe-navy);
}
.mphe-single-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mphe-btn {
	display: inline-block;
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 100px;
	padding: 12px 24px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
		transform 0.2s ease;
}
.mphe-btn:hover {
	transform: translateY(-2px);
}
.mphe-btn-primary {
	background: var(--mphe-orange);
	color: var(--mphe-navy-deep);
	border: 1px solid var(--mphe-orange);
}
.mphe-btn-primary:hover {
	background: var(--mphe-orange-deep);
	border-color: var(--mphe-orange-deep);
	color: var(--mphe-navy-deep);
}
.mphe-btn-ghost {
	background: transparent;
	color: var(--mphe-blue);
	border: 1px solid var(--mphe-powder);
}
.mphe-btn-ghost:hover {
	background: var(--mphe-navy);
	border-color: var(--mphe-navy);
	color: var(--mphe-white);
}

@media (max-width: 640px) {
	.mphe-single-card {
		padding: 18px 18px;
	}
	.mphe-single-row {
		flex-direction: column;
		gap: 2px;
	}
	.mphe-btn {
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
 * SINGLE EVENT PAGE (plugin template, MPH interior-page layout)
 * ============================================================ */

/* ---- Hero: matches the MPH interior hero treatment ---- */
.mphe-hero {
	position: relative;
	background-color: var(--mphe-navy-deep);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.mphe-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(38, 47, 60, 0.9) 0%, rgba(53, 63, 81, 0.82) 55%, rgba(70, 93, 170, 0.55) 130%);
}
.mphe-hero-nobg {
	background-image: linear-gradient(150deg, var(--mphe-navy-deep) 0%, var(--mphe-navy) 55%, var(--mphe-blue) 145%);
}
.mphe-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 132px 24px 56px;
	font-family: var(--mphe-body);
}
.mphe-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}
.mphe-hero-eyebrow-line {
	display: inline-block;
	width: 36px;
	height: 2px;
	background: var(--mphe-orange);
}
.mphe-hero-eyebrow-text {
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--mphe-orange);
}
.mphe-hero-title {
	margin: 0 0 16px;
	font-family: var(--mphe-head);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--mphe-white);
	max-width: 820px;
}
.mphe-hero-meta {
	margin: 0 0 34px;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}
.mphe-hero-crumbs {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}
.mphe-hero-crumbs a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color 0.25s ease;
}
.mphe-hero-crumbs a:hover {
	color: var(--mphe-orange);
}
.mphe-hero-crumbs-sep {
	margin: 0 9px;
	color: rgba(255, 255, 255, 0.4);
}
.mphe-hero-crumbs-current {
	color: rgba(255, 255, 255, 0.9);
}

/* ---- Body layout: content + sticky details aside ---- */
.mphe-single-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 60px 24px 72px;
	font-family: var(--mphe-body);
}
.mphe-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 48px;
	align-items: start;
}
.mphe-single-aside {
	position: sticky;
	top: 110px;
}
.mphe-single-aside .mphe-single-card {
	margin: 0;
}
.mphe-single-aside .mphe-single-actions {
	flex-direction: column;
}
.mphe-single-aside .mphe-btn {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}
.mphe-directions {
	display: block;
	margin-top: 6px;
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--mphe-blue);
	text-decoration: none;
}
.mphe-directions:hover {
	color: var(--mphe-navy);
}

/* ---- Main column ---- */
.mphe-single-h2 {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 14px;
	font-family: var(--mphe-head);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--mphe-navy);
}
.mphe-single-h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: var(--mphe-orange);
}
.mphe-single-content {
	font-size: 17px;
	line-height: 1.75;
	color: rgba(53, 63, 81, 0.88);
}
.mphe-single-content p {
	margin: 0 0 18px;
}
.mphe-single-content h2,
.mphe-single-content h3 {
	font-family: var(--mphe-head);
	color: var(--mphe-navy);
	letter-spacing: -0.3px;
	margin: 30px 0 12px;
}
.mphe-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
.mphe-single-content a {
	color: var(--mphe-blue);
}

/* ---- Share row ---- */
.mphe-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--mphe-powder);
}
.mphe-share-label {
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mphe-blue);
	margin-right: 4px;
}
.mphe-share-link {
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--mphe-navy);
	background: var(--mphe-powder-soft);
	border: 1px solid var(--mphe-powder);
	border-radius: 100px;
	padding: 7px 16px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.mphe-share-link:hover {
	background: var(--mphe-navy);
	border-color: var(--mphe-navy);
	color: var(--mphe-white);
}

/* ---- More upcoming events band ---- */
.mphe-related {
	background: var(--mphe-powder-soft);
	border-top: 1px solid var(--mphe-powder);
	padding: 56px 24px 64px;
}
.mphe-related-inner {
	max-width: 1240px;
	margin: 0 auto;
}
.mphe-related-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.mphe-related-head .mphe-single-h2 {
	margin-bottom: 0;
}
.mphe-related-all {
	font-family: var(--mphe-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mphe-blue);
	white-space: nowrap;
}
.mphe-related-all:hover {
	color: var(--mphe-navy);
}
.mphe-related .mphe-card {
	border-color: rgba(168, 182, 222, 0.7);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.mphe-single-layout {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.mphe-single-aside {
		position: static;
		order: -1; /* details first on small screens */
	}
	.mphe-hero-title {
		font-size: 38px;
	}
	.mphe-hero-inner {
		padding: 116px 24px 46px;
	}
}
@media (max-width: 640px) {
	.mphe-hero-title {
		font-size: 30px;
	}
	.mphe-hero-meta {
		font-size: 16px;
	}
	.mphe-single-wrap {
		padding: 40px 18px 52px;
	}
	.mphe-single-h2 {
		font-size: 23px;
	}
}

/* ============================================================
 * NEWS & STORIES GRID ([mph_news])
 * ============================================================
 * The homepage section was hand-built in Elementor, so part of its look
 * came from Elementor's generated per-widget CSS (typography, padding)
 * rather than mph-site.css. This block supplies exactly those pieces for
 * the shortcode's plain markup. Everything else -- card frame, hover lift,
 * image zoom, badge, link arrow, responsive stacking at 1023px and the
 * reduced-motion rules -- still comes from mph-site.css, because the
 * shortcode emits the same class names and card nesting.
 * ============================================================ */

.mph-stories-grid-dynamic {
	display: flex;
	flex-wrap: wrap;
}

/* Card: Elementor container defaults (column flow, equal heights). */
.mph-stories-grid-dynamic > .mph-story-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Photo wrap is a link here; keep it a block so the frame is unchanged. */
.mph-stories-grid-dynamic .mph-story-card-photo-wrap {
	display: block;
	text-decoration: none;
}

/* Fallback tile when a post or event has no featured image. */
.mph-story-card-img-empty {
	display: block;
	width: 100%;
	aspect-ratio: 20 / 13;
	background: linear-gradient(135deg, #262f3c 0%, #353f51 55%, #465daa 140%);
}

/* Body: Elementor padding 24 / 26 / 26 / 26. */
.mph-stories-grid-dynamic .mph-story-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	padding: 24px 26px 26px;
}

/* Title: Elementor heading settings (Poppins 700, 21px, 1.3em). */
.mph-stories-grid-dynamic .mph-story-card-title {
	margin: 0 0 10px;
	font-family: "Poppins", sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3em;
	color: #353f51;
}
.mph-stories-grid-dynamic .mph-story-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}
.mph-stories-grid-dynamic .mph-story-card:hover .mph-story-card-title,
.mph-stories-grid-dynamic .mph-story-card-title a:hover {
	color: #e08c10;
}

/* Excerpt: Elementor text settings (Glacial Indifference, 15px, 1.6em). */
.mph-stories-grid-dynamic .mph-story-card-excerpt {
	margin: 0 0 16px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	line-height: 1.6em;
	color: rgba(44, 44, 44, 0.7);
}

/* Date line on event cards. */
.mph-story-card-when {
	display: block;
	margin-bottom: 4px;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #465daa;
}

/* Keep the read-more row aligned across cards of differing text length. */
.mph-stories-grid-dynamic .mph-story-card-link-wrap {
	margin-top: auto;
	padding-top: 2px;
}

@media (max-width: 767px) {
	.mph-stories-grid-dynamic .mph-story-card-title {
		font-size: 18px;
	}
	.mph-stories-grid-dynamic .mph-story-card-body {
		padding: 20px 20px 22px;
	}
}

/* ---- Full-width guarantee ------------------------------------------------
 * The shortcode is commonly dropped into an existing Elementor flex
 * container (e.g. a shortcode widget placed inside the .mph-stories-grid
 * container). Elementor widgets are flex items that size to their content,
 * so the grid renders narrower than its container and the width varies with
 * how long the post titles happen to be. Force the widget and the grid to
 * span the full container in every placement.
 * ------------------------------------------------------------------------ */

.mph-stories-grid-dynamic {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	box-sizing: border-box;
}

/* Widget dropped directly inside the stories grid container (boxed or full). */
.mph-stories-grid > .elementor-element,
.mph-stories-grid > .e-con-inner > .elementor-element {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

/* Any placement: the widget wrapping our grid always spans its parent. */
.elementor-widget:has(.mph-stories-grid-dynamic),
.elementor-widget-shortcode:has(.mph-stories-grid-dynamic) {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}
.elementor-widget-container:has(> .mph-stories-grid-dynamic) {
	width: 100%;
}

/* ---- Full-width guarantee (all views) ------------------------------------
 * Elementor widgets are flex items inside container sections, and a flex
 * item sizes to its content. That made width:100% on .mphe-wrap resolve
 * against an indefinite parent (fit-content), so the calendar rendered as
 * wide as whatever it contained: narrow for an empty month, wider once an
 * event chip stretched a column. Force the widget wrapping any of our views
 * to span its container, in any placement.
 * ------------------------------------------------------------------------ */

.elementor-widget:has(.mphe-wrap),
.elementor-widget-shortcode:has(.mphe-wrap) {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}
.elementor-widget-container:has(> .mphe-wrap) {
	width: 100%;
}

/* Secondary safety net: even if the wrapper is content-sized for any reason,
   month columns keep a usable minimum instead of collapsing to the width of
   a day number. Reverted on narrow viewports so it can never overflow. */
.mphe-cal-grid {
	grid-template-columns: repeat(7, minmax(88px, 1fr));
}
@media (max-width: 900px) {
	.mphe-cal-grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

/* ============================================================
 * SINGLE BLOG POST (plugin template)
 * ============================================================
 * Reuses the event page's hero, two-column layout, sticky details card,
 * share row and related band. Only the post-specific pieces live here:
 * term chips and the richer typography a written article needs.
 * ============================================================ */

/* ---- No sidebar: article is a single centred column ---- */
.mphe-post-body {
	max-width: 820px;
	margin: 0 auto;
}

/* ---- Meta bar above the article (replaces the sidebar card) ---- */
.mphe-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 34px;
	align-items: center;
	margin: 0 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mphe-powder);
}
.mphe-post-meta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.mphe-post-meta-label {
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mphe-blue);
}

/* ---- Category / tag chips ---- */
.mphe-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mphe-post-term {
	display: inline-block;
	font-family: var(--mphe-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-decoration: none;
	color: var(--mphe-navy);
	background: var(--mphe-powder-soft);
	border: 1px solid var(--mphe-powder);
	border-radius: 100px;
	padding: 4px 11px;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.mphe-post-term:hover {
	background: var(--mphe-navy);
	border-color: var(--mphe-navy);
	color: var(--mphe-white);
}

/* ---- Article body ---- */
.mphe-post-content > *:first-child {
	margin-top: 0;
}
.mphe-post-content > *:last-child {
	margin-bottom: 0;
}
.mphe-post-content h2 {
	font-size: 27px;
}
.mphe-post-content h3 {
	font-size: 21px;
}
.mphe-post-content h4 {
	font-family: var(--mphe-head);
	font-size: 18px;
	color: var(--mphe-navy);
	letter-spacing: -0.2px;
	margin: 26px 0 10px;
}
.mphe-post-content ul,
.mphe-post-content ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.mphe-post-content li {
	margin-bottom: 8px;
}
.mphe-post-content li:last-child {
	margin-bottom: 0;
}
.mphe-post-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--mphe-orange);
	font-size: 19px;
	line-height: 1.6;
	color: var(--mphe-navy);
}
.mphe-post-content blockquote p:last-child {
	margin-bottom: 0;
}
.mphe-post-content blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--mphe-head);
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--mphe-blue);
}
.mphe-post-content figure {
	margin: 26px 0;
}
.mphe-post-content figcaption,
.mphe-post-content .wp-caption-text {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(53, 63, 81, 0.7);
}
.mphe-post-content hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--mphe-powder);
}
.mphe-post-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mphe-post-content .alignleft {
	float: left;
	margin: 4px 24px 16px 0;
	max-width: 50%;
}
.mphe-post-content .alignright {
	float: right;
	margin: 4px 0 16px 24px;
	max-width: 50%;
}
.mphe-post-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 640px) {
	.mphe-post-content h2 {
		font-size: 23px;
	}
	.mphe-post-content h3 {
		font-size: 19px;
	}
	.mphe-post-content blockquote {
		font-size: 17px;
		padding-left: 16px;
	}
	.mphe-post-content .alignleft,
	.mphe-post-content .alignright {
		float: none;
		margin: 16px 0;
		max-width: 100%;
	}
}

/* ============================================================
 * BLOG POST OVERRIDES
 * ============================================================ */

/* Post titles run at 45px; event heroes keep their own size. */
.mphe-hero-post .mphe-hero-title {
	font-size: 45px;
}
@media (max-width: 980px) {
	.mphe-hero-post .mphe-hero-title {
		font-size: 36px;
	}
}
@media (max-width: 640px) {
	.mphe-hero-post .mphe-hero-title {
		font-size: 29px;
	}
}

/* No breadcrumb on posts, so the hero needs its own bottom breathing room. */
.mphe-hero-post .mphe-hero-meta {
	margin-bottom: 0;
}

/* ---- Share row: icon buttons ---- */
.mphe-share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	color: var(--mphe-navy);
	background: var(--mphe-powder-soft);
	border: 1px solid var(--mphe-powder);
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
		transform 0.2s ease;
}
.mphe-share-link svg {
	width: 18px;
	height: 18px;
	display: block;
}
.mphe-share-link:hover {
	background: var(--mphe-navy);
	border-color: var(--mphe-navy);
	color: var(--mphe-white);
	transform: translateY(-2px);
}
.mphe-share-link:focus-visible {
	outline: 2px solid var(--mphe-orange);
	outline-offset: 2px;
}