@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Roboto:wght@400;500&display=swap');

/* .ast-custom-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url('https://massage.education/wp-content/uploads/2025/05/Vector-2.png');
  background-repeat: no-repeat;
  background-size: contain;
} */


#primary-site-navigation-desktop > div a {
	font-family: "Noto Sans", Sans-serif;

}
#menu-1-9a7a333 a {
	font-family: "Noto Sans", Sans-serif;

}

/* ============================================================
   MassageMKE page layout
   Section padding / flex come from native Elementor container
   settings. This file styles WIDGET-level classes, because
   Elementor drops _css_classes on containers. Containers are
   reached with :has() on a child widget class, which survives
   rebuilds (element IDs and page IDs do not).
   ============================================================ */

/* Page-level rules keyed off the hero widget, not a page ID, so they
   follow the layout whichever page it ends up published on. */
body:has(.mke-hero-copy) .entry-title { display: none; }

/* Full-bleed break-out uses 100vw, which overflows by the scrollbar
   width. Contain it on this page only. */
body:has(.mke-hero-copy) { overflow-x: hidden; }

.e-con:has(> .mke-hero-copy),
.e-con:has(> .mke-close-copy) {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

/* --- S1 hero ---
   Photo and scrim are painted here rather than by Elementor's overlay,
   so the dark end of the gradient can be held across the full width of
   the 1200px text column on wide viewports. Without this the headline
   lands on the bright part of the photo and fails contrast. */
.e-con:has(> .mke-hero-copy) {
	background-image:
		linear-gradient(104deg, rgba(26,0,25,.95) 0%, rgba(26,0,25,.84) 45%, rgba(26,0,25,.38) 100%),
		url('https://massage.education/wp-content/uploads/2025/05/0734a7aaad01218524a4fa115ef61426a503c039.webp') !important;
	background-size: cover !important;
	background-position: center 30% !important;
	background-repeat: no-repeat !important;
}
.e-con:has(> .mke-hero-copy)::before,
.e-con:has(> .mke-hero-copy) > .elementor-background-overlay {
	background-image: none;
	opacity: 0;
}

.mke-hero-copy .mke-hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.mke-hero-copy .mke-h1 {
	font-family: "Noto Serif", Georgia, serif;
	color: #ffffff;
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	max-width: 17ch;
}
.mke-hero-copy .mke-lede {
	font-family: "Roboto", system-ui, sans-serif;
	color: rgba(255,255,255,.94);
	font-size: 17px;
	line-height: 1.6;
	max-width: 48ch;
	margin: 0;
}
.mke-hero-copy .mke-lede strong { color: #ffffff; font-weight: 500; }

/* --- shared type --- */
.mke-copy .mke-h2 {
	font-family: "Noto Serif", Georgia, serif;
	color: #1E1E1E;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.25;
	margin: 0 0 18px;
}
.mke-copy p {
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #4A4450;
	max-width: 54ch;
}
.mke-copy p:last-child { margin-bottom: 0; }

/* --- images --- */
.mke-media img {
	width: 100%;
	display: block;
	border-radius: 2px;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}
.mke-media, .mke-copy { flex: 1 1 0; min-width: 0; }
.mke-media-stretch, .mke-media-stretch .elementor-widget-container,
.mke-media-stretch figure, .mke-media-stretch img { height: 100%; }
.mke-media-stretch img { aspect-ratio: auto; }

/* --- S2 / S3 / S4 rhythm ---
   Tighter column gap and less air between these three rows, so the
   panel/photo pairs read as single units. Hero-to-S2 spacing is left
   alone so the page still breathes out of the hero. */
.e-con:has(> .mke-invite-copy),
.e-con:has(> .mke-book-copy),
.e-con:has(> .mke-marq-copy) { --gap: 20px; gap: 20px; }

.e-con:has(> .mke-book-copy),
.e-con:has(> .mke-marq-copy) { padding-top: 24px; }

/* --- S2 / S3 tinted copy panels ---
   The light counterpart to the Marquette plum panel. Panels set the row
   height and the photo stretches to match, so the copy no longer floats
   in an empty half-column. */
.e-con:has(> .mke-invite-copy),
.e-con:has(> .mke-book-copy) { align-items: stretch; }

.mke-invite-copy,
.mke-book-copy {
	background: #F7F2F6;
	padding: 44px 42px;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 300px;
}

.e-con:has(> .mke-invite-copy) .mke-media,
.e-con:has(> .mke-book-copy) .mke-media,
.e-con:has(> .mke-invite-copy) .mke-media .elementor-widget-container,
.e-con:has(> .mke-book-copy) .mke-media .elementor-widget-container,
.e-con:has(> .mke-invite-copy) .mke-media figure,
.e-con:has(> .mke-book-copy) .mke-media figure { height: 100%; }
.e-con:has(> .mke-invite-copy) .mke-media img,
.e-con:has(> .mke-book-copy) .mke-media img { height: 100%; aspect-ratio: auto; }

/* --- buttons --- */
.mke-copy .mke-btn {
	display: inline-block;
	align-self: flex-start;
	background: #B575A7;
	color: #ffffff;
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.mke-copy .mke-btn:hover,
.mke-copy .mke-btn:focus { background: #8E4C7D; color: #ffffff; text-decoration: none; }
.mke-copy .mke-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.mke-btn-wrap { margin: 24px 0 0; }

/* Ghost variant, used on the plum Marquette panel */
.mke-marq-copy .mke-btn-ghost {
	background: transparent;
	border: 1px solid rgba(255,255,255,.62);
	color: #ffffff;
}
.mke-marq-copy .mke-btn-ghost:hover,
.mke-marq-copy .mke-btn-ghost:focus {
	background: rgba(255,255,255,.12);
	border-color: #ffffff;
	color: #ffffff;
}

/* --- S4 Marquette plum panel --- */
.mke-marq-copy {
	background: #1A0019;
	padding: 48px 44px;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mke-marq-copy .mke-h2 { color: #ffffff; }
.mke-marq-copy p { color: rgba(255,255,255,.86); max-width: 44ch; }
.mke-marq-copy strong { color: #ffffff; font-weight: 500; }

/* --- S5 alumni ---
   The head is a nested container and picks up the Elementor kit's
   default container padding, which pushed the map right of the card
   grid below it. Zero it so the section has one left edge. */
.e-con:has(> .mke-map) { padding-left: 0; padding-right: 0; }

.mke-map { flex: 0 0 138px; max-width: 138px; }
.mke-map .elementor-widget-container,
.mke-map figure,
.mke-map img { margin: 0; padding: 0; }
.mke-map img { width: 100%; border: 1px solid #E4D9E2; border-radius: 2px; }
.mke-alumni-title { flex: 1 1 auto; }
.mke-alumni-title .mke-h2 { margin: 0; }

.mke-cards-wrap .mke-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mke-cards-wrap a.mke-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: #ffffff;
	border: 1px solid #E4D9E2;
	border-left: 3px solid #D39892;
	border-radius: 2px;
	text-decoration: none;
	box-shadow: none;
	transition: border-left-color .2s ease, box-shadow .2s ease;
}
.mke-cards-wrap a.mke-card:hover,
.mke-cards-wrap a.mke-card:focus {
	border-left-color: #B575A7;
	box-shadow: 0 6px 20px -14px rgba(26,0,25,.65);
	text-decoration: none;
}
/* Astra underlines content links; must win on the anchor AND its spans */
.mke-cards-wrap a.mke-card,
.mke-cards-wrap a.mke-card:hover,
.mke-cards-wrap a.mke-card:focus,
.mke-cards-wrap a.mke-card .mke-card-name,
.mke-cards-wrap a.mke-card .mke-card-city { text-decoration: none; border-bottom: 0; }

.mke-cards-wrap .mke-card-name {
	font-family: "Noto Serif", Georgia, serif;
	font-size: 18px;
	color: #1E1E1E;
	line-height: 1.25;
}
.mke-cards-wrap a.mke-card:hover .mke-card-name { color: #8E4C7D; }
.mke-cards-wrap .mke-card-city {
	font-family: "Roboto", system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #72705A;
}
.mke-cards-wrap .mke-card-wide { grid-column: span 2; }

/* --- S6 close --- */
.mke-close-copy .mke-close-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.mke-close-copy .mke-close-h2 { color: #ffffff; margin: 0; }

@media (max-width: 880px) {
	.mke-invite-copy, .mke-book-copy { padding: 32px 26px; min-height: 0; }
	.mke-marq-copy { padding: 34px 26px; }
	.mke-media-stretch, .mke-media-stretch .elementor-widget-container,
	.mke-media-stretch figure, .mke-media-stretch img { height: auto; }
	.e-con:has(> .mke-invite-copy) .mke-media,
	.e-con:has(> .mke-book-copy) .mke-media,
	.e-con:has(> .mke-invite-copy) .mke-media .elementor-widget-container,
	.e-con:has(> .mke-book-copy) .mke-media .elementor-widget-container,
	.e-con:has(> .mke-invite-copy) .mke-media figure,
	.e-con:has(> .mke-book-copy) .mke-media figure { height: auto; }
	.e-con:has(> .mke-invite-copy) .mke-media img,
	.e-con:has(> .mke-book-copy) .mke-media img { height: auto; aspect-ratio: 16 / 10; }
	.mke-map { flex: 0 0 auto; max-width: 118px; }
	.mke-cards-wrap .mke-cards { grid-template-columns: 1fr; }
	.mke-cards-wrap .mke-card-wide { grid-column: span 1; }
	.mke-hero-copy .mke-h1 { max-width: none; }
	.mke-close-copy .mke-close-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.mke-copy .mke-btn, .mke-cards-wrap a.mke-card { transition: none; }
}