/**
 * MM Webinar Template — Frontend Styles
 *
 * All classes are prefixed with `mm-` to avoid conflicts with the active theme.
 * Loaded on single webinar pages and on any page using the [mm_webinar]
 * shortcode (see mm-webinar.php enqueue + mm_webinar_load_styles).
 */

/* ─── Fonts ───────────────────────────────────────────── */
@font-face {
	font-family: 'IvyPrestoDisplay';
	src: url('fonts/IvyprestoDisplay-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'IvyPrestoDisplay';
	src: url('fonts/IvyprestoDisplay-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/* ─── Variables ───────────────────────────────────────── */
/*
 * Color variables are sourced from Brizy globals so changing a color in
 * Brizy → Site Styles automatically updates the webinar page. Hex values
 * are fallbacks if Brizy's :root variables aren't loaded for any reason.
 *
 * Brizy palette mapping:
 *   color1 = slate blue  #8AA3B6  (mm-blue)
 *   color2 = pale blue   #D1DAE4  (mm-lt-blue)
 *   color3 = orange      #F79322  (mm-orange)
 *   color4 = peach       #F7C98B
 *   color5 = warm gray   #E8E6E4  (mm-offwhite)
 *   color6 = near-black  #232323  (mm-black)
 *   color7 = dark gray   #4D4D4E  (mm-grey)
 *   color8 = white       #FFFFFF  (mm-white)
 */
.mm-webinar-page,
.mm-site-header,
.mm-site-footer,
.mm-media-zone,
.mm-sidebar-col,
.mm-other-webinars,
.mm-cta-sec,
.mm-webinar-card {
	--mm-blue:      rgb(var(--brz-global-color1, 138, 163, 182));
	--mm-lt-blue:   rgb(var(--brz-global-color2, 209, 218, 228));
	--mm-orange:    rgb(var(--brz-global-color3, 247, 147, 34));
	--mm-peach:     rgb(var(--brz-global-color4, 247, 201, 139));
	--mm-offwhite:  rgb(var(--brz-global-color5, 232, 230, 228));
	--mm-black:     rgb(var(--brz-global-color6, 35, 35, 35));
	--mm-grey:      rgb(var(--brz-global-color7, 77, 77, 78));
	--mm-white:     rgb(var(--brz-global-color8, 255, 255, 255));
}
.mm-webinar-page {
	color: var(--mm-black);
	line-height: 1.6;
}
.mm-webinar-page *, .mm-webinar-page *::before, .mm-webinar-page *::after {
	box-sizing: border-box;
}
.mm-serif { font-family: 'IvyPrestoDisplay', serif; font-weight: 300; line-height: 1.15; }
.mm-serif em { font-style: italic; }

/* ─── Typography (hardcoded, !important) ──────────────
 * Sizes are locked in per spec. To change a size, edit
 * the value here. Color variables continue to source from
 * Brizy globals.
 * ─────────────────────────────────────────────────── */

/* HEADINGS — IvyPresto Display ─────────────────────── */

/* Hero title (H1) — 69px */
.mm-hero-title {
	font-family: 'IvyPrestoDisplay', serif !important;
	font-size: 69px !important;
	font-weight: 300 !important;
	line-height: 1.1 !important;
	letter-spacing: -1px !important;
}

/* Section heads — 54px */
.mm-section-head h2 {
	font-family: 'IvyPrestoDisplay', serif !important;
	font-size: 54px !important;
	font-weight: 300 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.5px !important;
}

/* CTA title — 54px so "Ready to Strengthen" fits one line and the
   rest wraps to two, giving a 3-line title instead of 4. */
.mm-cta-title {
	font-family: 'IvyPrestoDisplay', serif !important;
	font-size: 54px !important;
	font-weight: 300 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.5px !important;
}

/* CLE panel title, Speaker name, Other Webinars card title — 36px */
.mm-cle-panel-title-text,
.mm-spk-name,
.mm-wc-title {
	font-family: 'IvyPrestoDisplay', serif !important;
	font-size: 36px !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.3px !important;
}

/* BODY — Roboto Light, 17px ────────────────────────── */
.mm-spk-bio,
.mm-ov-item,
.mm-cta-email,
.mm-cle-credit-text,
.mm-topic-list a,
.mm-overview-box,
.mm-transcript-box,
.mm-cta-body {
	font-family: 'Roboto', sans-serif !important;
	font-size: 17px !important;
	font-weight: 300 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.3px !important;
}

/* ABOVE TITLE / KICKERS — Montserrat Bold uppercase ─ */

/* Sidebar panel title, Speaker role — 18px */
.mm-sb-panel-title,
.mm-spk-role {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
}

/* Breadcrumbs + hero date — small body text, not uppercase */
.mm-breadcrumbs,
.mm-hero-date {
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.3px !important;
}

/* BUTTONS — Montserrat Bold 15px uppercase ─────────── */
.mm-btn-orange,
.mm-btn-outline-dark,
.mm-btn-cle-p,
.mm-btn-cle-s,
.mm-transcript-toggle {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}

/* TAG CHIPS + Other Webinars card category — 11px (smaller chips) */
.mm-tag,
.mm-wc-cat {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
}

/* ─── Shared Utilities ────────────────────────────────── */
.mm-kicker {
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--mm-orange);
	margin-bottom: 10px;
}
.mm-btn-orange {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--mm-orange);
	color: #fff !important;
	text-decoration: none;
	padding: 12px 28px;
	/* typography comes from the shared BUTTONS rule above (15px Montserrat) */
	border-radius: 50px;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}
.mm-btn-orange:hover { background: #d97e12; }
.mm-btn-outline-dark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	color: #fff !important;
	text-decoration: none;
	padding: 11px 28px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 50px;
	border: 1.5px solid rgba(255,255,255,0.4);
	cursor: pointer;
	transition: all 0.2s;
}
.mm-btn-outline-dark:hover { background: #fff; color: var(--mm-black) !important; border-color: #fff; }
.mm-tag {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	/* font sizing in typography section */
}
.mm-tag-o { background: #fff; color: var(--mm-black); }
.mm-tag-o:hover { background: var(--mm-orange); color: #fff; }
.mm-tag-g { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.mm-tag-b { background: var(--mm-blue); color: #fff; }

/* ─── Hero ────────────────────────────────────────────── */
.mm-hero {
	background: var(--mm-black);
	padding: 28px 150px 36px;
	position: relative;
}
.mm-hero-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin-bottom: 28px;
}
.mm-hero-date { color: rgba(255,255,255,0.7); white-space: nowrap; }
.mm-breadcrumbs { color: rgba(255,255,255,0.85); }
.mm-breadcrumbs a { color: rgba(255,255,255,0.85); text-decoration: none; }
.mm-breadcrumbs a:hover { color: var(--mm-orange); }
.mm-breadcrumbs span { color: rgba(255,255,255,0.4); margin: 0 6px; }
.mm-hero-title {
	color: #fff;
	margin: 0 0 24px 0;
	max-width: 1100px;
	/* font-size, weight, line-height, family come from brz-tp-lg-heading1 */
}
.mm-hero-title em { color: rgba(255,255,255,0.95); font-style: italic; }
.mm-tag-group { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }

/* ─── Two-column Layout ───────────────────────────────── */
.mm-content-wrap {
	display: grid;
	grid-template-columns: 1fr 310px;
	background: #fff;
}
.mm-main-col {
	background: #fff;
	color: var(--mm-black);
	padding: 0; /* children handle their own padding */
}
.mm-sidebar-col {
	padding: 0 60px 60px 32px;
	background: var(--mm-black); /* black all the way down */
	border-left: 1px solid rgba(255,255,255,0.18); /* thin white divider */
}

/* Dark media zone (video + downloads) — top of main column */
.mm-media-zone {
	background: var(--mm-black);
	padding: 0 60px 56px 150px;
}

/* Section padding for content sections (overview, transcript) — within main-col */
.mm-overview-sec,
.mm-transcript-sec {
	padding: 60px 60px 60px 150px;
	margin: 0;
}
.mm-speakers-sec {
	background: #EDEDEA;
	padding: 60px 60px 60px 150px;
	margin: 0;
}
.mm-transcript-sec { padding-bottom: 80px; }
.mm-sidebar-sticky {
	position: sticky;
	top: 60px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ─── Video ───────────────────────────────────────────── */
.mm-video-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #111;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
	position: relative;
}
.mm-video-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.mm-video-placeholder {
	display: flex; align-items: center; justify-content: center;
	height: 100%; color: rgba(255,255,255,0.4); font-size: 13px;
}

/* ─── Download Buttons ────────────────────────────────── */
.mm-dl-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* ─── Section Header ──────────────────────────────────── */
.mm-section-head { margin-bottom: 32px; }
.mm-section-head h2 { color: var(--mm-black); margin: 0; /* size from brz-tp-lg-heading2 */ }
.mm-section-head-center { text-align: center; }

/* ─── Overview ────────────────────────────────────────── */
.mm-overview-box {
	background: var(--mm-offwhite);
	padding: 36px 40px;
	border-radius: 12px;
}
.mm-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; }
.mm-ov-item {
	display: flex; gap: 12px; align-items: flex-start;
	color: var(--mm-black);
	/* size/family/lineheight from paragraph typography rule */
}
.mm-ov-item::before { content: '•'; color: var(--mm-black); font-weight: 700; flex-shrink: 0; margin-top: 2px; }

/* ─── Speakers ────────────────────────────────────────── */
.mm-speakers-sec { position: relative; overflow: visible; }
.mm-speakers-watermark {
	position: absolute; right: 24px; bottom: 24px;
	height: 240px; width: auto; max-width: 30%; object-fit: contain;
	opacity: 0.07; pointer-events: none;
}
.mm-speakers-grid {
	display: grid;
	/* +30px per card vs. before (240 → 270); minmax(0, …) lets them shrink to
	   fit the padded column on mid-size screens instead of overflowing. */
	grid-template-columns: repeat(3, minmax(0, 270px));
	gap: 32px;
	justify-content: center;
}
.mm-speakers-count-1 { grid-template-columns: minmax(0, 310px); }
.mm-speakers-count-2 { grid-template-columns: repeat(2, minmax(0, 270px)); }
/* 4 speakers stay narrower so the row fits. */
.mm-speakers-count-4 { grid-template-columns: repeat(4, minmax(0, 200px)); }
.mm-spk-card {
	background: transparent;
	display: flex;
	flex-direction: column;
	text-align: center;
	transition: transform 0.2s;
	position: relative;
}
.mm-spk-card:hover { transform: translateY(-4px); }
.mm-spk-photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: transparent;
	overflow: visible;
	flex-shrink: 0;
	position: relative;
	z-index: 2; /* sits on top of the card body */
}
.mm-spk-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* scale to fit, no cropping */
	display: block;
	border-radius: 12px;
}
.mm-spk-info {
	width: 100%;
	background: #fff;
	border-radius: 12px;
	position: relative;
	z-index: 1;
	/* Photo aspect-ratio is 3/4 → photo height = 133% of card width.
	 * To overlap top 50% of photo, info pulls UP by 50% of photo height
	 * = 66.67% of card width (because % margin is parent-width based).
	 * padding-top equals that pullback + a 24px gap so the name sits
	 * just below the photo bottom. */
	margin-top: -66.67%;
	padding: calc(66.67% + 24px) 22px 28px;
}
/* No photo → no overlap pull-up; the card is just the white info block. */
.mm-spk-card--no-photo .mm-spk-info {
	margin-top: 0;
	padding-top: 32px;
}
.mm-spk-name { margin-bottom: 4px; /* size/font from brz-tp-lg-heading4 */ }
.mm-spk-role {
	color: var(--mm-orange); margin-bottom: 14px;
	font-size: 16px !important; /* 2px smaller than the 18px kicker default */
	/* font/weight/spacing from above-title typography rule */
}
.mm-spk-bio {
	color: var(--mm-grey); margin-bottom: 18px;
	font-size: 15px !important; /* 2px smaller than the 17px body default */
}
.mm-spk-link {
	color: var(--mm-orange); text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.mm-spk-link:hover { text-decoration: underline; }

/* ─── Transcript ──────────────────────────────────────── */
.mm-transcript-box {
	background: var(--mm-offwhite);
	border-radius: 12px;
	padding: 26px 30px;
	position: relative;
	overflow: hidden;
	max-height: 220px;
	transition: max-height 0.4s ease;
}
.mm-transcript-box.open { max-height: 12000px; } /* generous cap — legal transcripts run long */
.mm-transcript-fade {
	position: absolute; bottom: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient(transparent, var(--mm-offwhite));
	pointer-events: none;
}
.mm-transcript-box.open .mm-transcript-fade { display: none; }
.mm-transcript-toggle {
	background: transparent !important;
	border: 1.5px solid var(--mm-orange) !important;
	color: var(--mm-orange) !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 10px 24px;
	border-radius: 50px;
	cursor: pointer;
	margin-top: 14px;
	transition: all 0.2s;
}
.mm-transcript-toggle:hover { background: var(--mm-orange) !important; color: #fff !important; }

/* ─── Sidebar Panels (on dark sidebar) ───────────────── */
.mm-sb-panel { background: transparent; border-radius: 0; overflow: hidden; }
.mm-sb-panel-hd {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mm-sb-panel-title {
	color: rgba(255,255,255,0.85);
	font-size: 15px !important; /* smaller than the 18px kicker default */
	/* font/weight/spacing from above-title typography rule */
}
.mm-sb-panel-body { padding: 14px 0; }

.mm-cle-panel { background: var(--mm-blue); border-radius: 12px; overflow: hidden; }
.mm-cle-panel-hd { background: var(--mm-blue); padding: 14px 16px; }
.mm-cle-panel-title-text { color: #fff; /* size from brz-tp-lg-heading3 */ }
.mm-cle-credit-row {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
}
.mm-cle-dot {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--mm-orange);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px; font-weight: 700; color: #fff;
	flex-shrink: 0;
}
.mm-cle-credit-text { color: rgba(255,255,255,0.85); /* size from .mm-cle-credit-text typography rule */ }
.mm-cle-credit-text strong { color: #fff; font-weight: 700; display: block; margin-bottom: 2px; }
.mm-cle-btns { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.mm-btn-cle-p {
	background: var(--mm-orange);
	color: #fff !important;
	text-align: center;
	padding: 11px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 50px;
	text-decoration: none;
	border: 0;          /* reset native <button> */
	width: 100%;
	cursor: pointer;
}
/* Revealed Activity ID block (toggled by the View Activity ID button) */
.mm-cle-activity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(0,0,0,0.18);
	text-align: center;
}
.mm-cle-activity-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}
.mm-cle-activity-id {
	font-family: 'Roboto', sans-serif;
	font-size: 17px; font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
	word-break: break-word;
}
.mm-btn-cle-s {
	background: transparent;
	color: rgba(255,255,255,0.55) !important;
	text-align: center;
	padding: 9px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 9px; font-weight: 600; letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 50px;
	border: 1px solid rgba(255,255,255,0.18);
	text-decoration: none;
	transition: all 0.2s;
}
.mm-btn-cle-s:hover { border-color: rgba(255,255,255,0.45); color: #fff !important; }

.mm-topic-list { list-style: none; padding: 0; margin: 0; }
.mm-topic-list li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mm-topic-list li:last-child { border-bottom: none; }
.mm-topic-list a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 9px 2px;
	text-decoration: none;
	color: rgba(255,255,255,0.85);
	font-size: 13px;
	transition: color 0.15s;
}
.mm-topic-list a:hover { color: var(--mm-orange); }

/* ─── Other Webinars ──────────────────────────────────── */
.mm-other-webinars {
	background: var(--mm-black);
	padding: 80px 150px;
}
.mm-other-webinars .mm-section-head { text-align: center; }
.mm-other-webinars .mm-section-head h2 { color: #fff; /* size from brz-tp-lg-heading2 */ }
.mm-webinar-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 36px;
}
.mm-wc {
	background: #2d2d2d;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	display: block;
}
.mm-wc:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
.mm-wc-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #1f1f1f;
	display: flex; align-items: center; justify-content: center;
	position: relative;
}
.mm-wc-play {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.4);
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.3);
}
.mm-wc-play::after {
	content: '';
	width: 0; height: 0;
	border-style: solid;
	border-width: 6px 0 6px 11px;
	border-color: transparent transparent transparent rgba(255,255,255,0.85);
	margin-left: 3px;
}
.mm-wc-body { padding: 14px 16px; }
.mm-wc-cat {
	color: var(--mm-orange); margin-bottom: 5px;
	/* family/size/weight/spacing from above-title typography rule */
}
.mm-wc-title { color: #fff; /* size from heading4 typography rule */ }
.mm-other-webinars-cta { text-align: center; }

/* ─── CTA ─────────────────────────────────────────────── */
.mm-cta-sec {
	background: var(--mm-offwhite);
	padding: 50px 150px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.mm-cta-title { margin-bottom: 16px; color: var(--mm-black); /* size from brz-tp-lg-heading2 */ }
.mm-cta-body { color: var(--mm-grey); margin-bottom: 24px; /* size from typography rule */ }
.mm-cta-email { color: var(--mm-grey); margin-top: 14px; }
.mm-cta-email a { color: var(--mm-orange); text-decoration: none; }
.mm-cta-deco { display: flex; align-items: center; justify-content: center; opacity: 0.13; pointer-events: none; }
.mm-cta-deco img { width: 100%; max-width: 315px; }

/* ─── RESPONSIVE: Tablet (≤ 1100px) ───────────────────── */
@media (max-width: 1100px) {
	.mm-hero { padding: 24px 48px 32px; }
	.mm-content-wrap { grid-template-columns: 1fr 260px; }
	.mm-main-col { padding: 0; }
	.mm-sidebar-col { padding: 24px 32px 32px 20px; }
	.mm-media-zone { padding: 0 32px 40px 48px; }
	.mm-overview-sec, .mm-transcript-sec { padding: 44px 32px 44px 48px; }
	.mm-speakers-sec { padding: 44px 32px 44px 48px; }
	.mm-transcript-sec { padding-bottom: 60px; }
	.mm-other-webinars { padding: 60px 48px; }
	.mm-cta-sec { padding: 36px 48px; gap: 40px; }
	.mm-speakers-grid,
	.mm-speakers-count-2,
	.mm-speakers-count-4 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.mm-speakers-count-1 { grid-template-columns: 240px; }
}

/* ─── RESPONSIVE: Mobile (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
	.mm-hero { padding: 20px 20px 28px; }
	.mm-tag-group { gap: 6px; }
	.mm-hero-top { flex-direction: column; align-items: flex-start; gap: 6px; }

	.mm-content-wrap { grid-template-columns: 1fr; }
	.mm-main-col { padding: 0; }
	.mm-sidebar-col { padding: 24px 20px 36px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.18); }
	.mm-media-zone { padding: 0 20px 28px; }
	.mm-overview-sec, .mm-transcript-sec { padding: 32px 20px 32px; }
	.mm-speakers-sec { padding: 32px 20px 32px; }
	.mm-transcript-sec { padding-bottom: 48px; }
	.mm-sidebar-sticky { position: static; }

	.mm-dl-btns { flex-direction: column; gap: 10px; margin-bottom: 36px; }
	.mm-btn-orange, .mm-btn-outline-dark { width: 100%; justify-content: center; }

	.mm-overview-grid { grid-template-columns: 1fr; gap: 8px; }

	.mm-speakers-grid,
	.mm-speakers-count-1,
	.mm-speakers-count-2,
	.mm-speakers-count-4 { grid-template-columns: 1fr; gap: 18px; max-width: 320px; margin: 0 auto; }
	.mm-spk-photo { aspect-ratio: 4/5; }

	.mm-webinar-cards { grid-template-columns: 1fr; gap: 14px; }

	.mm-cta-sec { grid-template-columns: 1fr; gap: 0; padding: 24px 20px; }
	.mm-cta-deco { display: none; }

	.mm-other-webinars { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════
 *  SITE HEADER + FOOTER — hardcoded so this page does not
 *  depend on the WordPress theme or Brizy.
 * ═══════════════════════════════════════════════════════════ */

.mm-webinar-body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: 'Roboto', sans-serif;
}

/* ─── Site Header ─────────────────────────────────────── */
.mm-site-header {
	/* Same color as the hero so the bar blends into the top section —
	   the live site's header is transparent over the hero background. */
	background: var(--mm-black);
	color: #fff;
	/* 32px top: live header row sits ~32px below the top edge.
	   Horizontal stays 150px to match the live logo position. */
	padding: 32px 150px 0;
}
.mm-site-header-inner {
	max-width: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 96px;
}
.mm-site-logo { display: inline-block; line-height: 0; }
.mm-site-logo img { height: 60px; width: auto; display: block; }

.mm-site-nav {
	display: flex;
	align-items: center;
}
.mm-site-nav a {
	color: #fff;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: color 0.2s;
}
.mm-site-nav a:hover { color: #F5A623; }

.mm-site-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}
.mm-site-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* ─── Site Header — Nav list + dropdowns ──────────────── */
.mm-nav-list {
	display: flex;
	align-items: center;
	gap: 20px; /* live computed: 5px li margin + 5px link padding per side */
	list-style: none;
	margin: 0;
	padding: 0;
}
.mm-nav-item {
	position: relative;
	margin: 0;
	padding: 0;
}
.mm-nav-link {
	display: inline-flex;
	align-items: center;
}
.mm-nav-item.mm-no-link > .mm-nav-link { cursor: default; }

/* Active / current-section state — orange text only, no underline. */
.mm-nav-link.active,
.mm-nav-item.mm-current > .mm-nav-link {
	color: #F5A623;
}

.mm-nav-dropdown {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: calc(100% + 12px); /* hangs just below the link text, like the live site */
	left: 0;
	min-width: 220px;
	background: rgba(51, 51, 51, 0.5);
	border: none;
	border-radius: 5px 15px 15px 15px; /* TL TR BR BL */
	box-shadow: -30px 30px 30px 0 rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: 100;
}
.mm-nav-item.mm-has-dropdown:hover > .mm-nav-dropdown,
.mm-nav-item.mm-has-dropdown:focus-within > .mm-nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
/* Invisible bridge over the 12px gap so hover isn't lost while the
   cursor travels from the link down into the panel. */
.mm-nav-dropdown::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.mm-nav-dropdown li { margin: 0; padding: 0; }
.mm-nav-dropdown a {
	display: block;
	padding: 12px 24px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 17px; /* same size as the top-level nav links */
	font-weight: 600; /* matches top-level nav weight, per live site */
	letter-spacing: 0;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	transition: color 0.15s ease;
}
.mm-nav-dropdown a:hover {
	color: #F5A623;
}

/* ─── Site Footer ─────────────────────────────────────── */
.mm-site-footer {
	background: #1a1a1a;
	color: #fff;
	padding: 100px 150px 40px; /* live computed: ~100px top, ~40px below the copyright row */
	position: relative;
	overflow: hidden;
}

.mm-site-footer-watermark {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'IvyPrestoDisplay', serif;
	font-weight: 300;
	font-size: clamp(64px, 9.8vw, 150px); /* live: 141px at 1441px viewport */
	color: rgba(77, 77, 78, 0.3); /* live computed — much more visible than before */
	white-space: nowrap;
	pointer-events: none;
	letter-spacing: -1px;
	z-index: 0;
}

.mm-site-footer-top,
.mm-site-footer-offices,
.mm-site-footer-bottom {
	position: relative;
	z-index: 1;
}

.mm-site-footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr 0.8fr;
	gap: 40px;
	padding-bottom: 80px;
}

.mm-sf-brand .mm-sf-logo img {
	width: 206px; /* live computed width; asset is 611x242 so ~82px tall */
	height: auto;
	display: block;
	margin-bottom: 28px;
}
.mm-sf-social {
	display: flex;
	gap: 10px;
}
.mm-sf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mm-grey); /* live: solid #4D4D4E circles */
	color: var(--mm-offwhite);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.mm-sf-social a svg { width: 18px; height: 18px; } /* live icons ~20px; svg attrs are 14 */
.mm-sf-social a:hover { background: #f7931f; color: #fff; }

.mm-sf-col-title {
	font-size: 26px; /* live computed */
	font-style: italic;
	line-height: 1.4;
	margin: 0 0 14px;
	color: var(--mm-offwhite);
}
.mm-sf-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mm-sf-col li { margin-bottom: 0; } /* live: links spaced by line-height alone (34px pitch) */
.mm-sf-col a {
	color: var(--mm-offwhite);
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 17px; /* live computed */
	font-weight: 300;
	line-height: 2; /* 34px */
	transition: color 0.2s;
}
.mm-sf-col a:hover { color: #f7931f; }

/* Offices row */
.mm-site-footer-offices {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 32px;
	padding: 90px 0 44px; /* live: ~174px between link columns and offices (watermark band fills it) */
}
.mm-sf-office h4 {
	font-size: 26px; /* live computed — same as the column titles */
	font-style: italic;
	line-height: 1.4;
	margin: 0 0 12px;
	color: var(--mm-offwhite);
	font-weight: 300;
}
.mm-sf-office address {
	font-style: normal;
	font-family: 'Roboto', sans-serif;
	font-size: 14px; /* live computed */
	font-weight: 300;
	line-height: 1.6;
	color: var(--mm-offwhite);
	margin-bottom: 10px;
}
.mm-sf-map {
	color: var(--mm-peach); /* live: #F7C98B, not orange */
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 300;
}
.mm-sf-map:hover { text-decoration: underline; }

/* Bottom bar — live: one left-aligned line, no divider above */
.mm-site-footer-bottom {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	padding-top: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: var(--mm-grey); /* live: copyright dimmer than the legal links */
}
.mm-sf-legal { display: flex; gap: 12px; align-items: center; }
.mm-sf-legal a {
	color: var(--mm-offwhite);
	text-decoration: none;
}
.mm-sf-legal a:hover { color: #f7931f; }
.mm-sf-legal span { color: rgba(255,255,255,0.3); }

/* ─── Responsive: Header condenses (≤1100px, matches content breakpoint) ── */
@media (max-width: 1100px) {
	.mm-site-header { padding: 20px 48px 0; }
	.mm-site-header-inner { min-height: 80px; }
	.mm-site-logo img { height: 52px; }
	.mm-nav-list { gap: 16px; }
	.mm-site-nav a { font-size: 15px; }
}

/* ─── Responsive: Tablet ──────────────────────────────── */
@media (max-width: 1024px) {
	.mm-site-footer { padding: 48px 48px 20px; }
	.mm-site-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
		padding-bottom: 40px;
	}
	.mm-sf-brand { grid-column: 1 / -1; }

	.mm-site-footer-offices {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
		padding: 40px 0 28px;
	}
}

/* ─── Responsive: Nav collapses to hamburger (≤900px) ─── */
/* 900px (not 700px) because 5 nav items + the logo overflow the
   bar at narrower widths before the old breakpoint fired. */
@media (max-width: 900px) {
	.mm-site-header { padding: 0 20px; position: relative; }
	.mm-site-header-inner { min-height: 76px; }
	.mm-site-logo img { height: 48px; }
	.mm-site-nav-toggle { display: inline-flex; }
	.mm-site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--mm-black); /* match the unified header/hero color */
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 18px 20px;
		border-top: 1px solid rgba(255,255,255,0.08);
		z-index: 200;
	}
	.mm-site-nav.open { display: flex; }

	/* Stack the nav list vertically (dropdowns always expanded) */
	.mm-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.mm-nav-item { display: block; width: 100%; }
	.mm-nav-link {
		display: flex;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255,255,255,0.06);
	}
	/* Non-link parents read as section headings, not tappable links */
	.mm-nav-item.mm-no-link > .mm-nav-link {
		color: rgba(255,255,255,0.72);
		font-weight: 500;
	}

	/* Dropdowns: flatten into the menu, indent children */
	.mm-nav-dropdown {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 4px 0 8px;
		transition: none;
	}
	.mm-nav-dropdown::before { display: none; } /* desktop hover bridge not needed here */
	.mm-nav-dropdown a {
		padding: 9px 0 9px 18px;
		font-size: 15px;
		border-bottom: 1px solid rgba(255,255,255,0.04);
		white-space: normal;
	}
}

/* ─── Responsive: Mobile ──────────────────────────────── */
@media (max-width: 700px) {
	.mm-site-footer { padding: 40px 20px 18px; }
	.mm-site-footer-top {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.mm-site-footer-offices {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	.mm-site-footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	.mm-sf-col-title { font-size: 22px; }
	.mm-sf-office h4 { font-size: 20px; }
}

@media (max-width: 480px) {
	.mm-site-footer-offices { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
 * WEBINAR PREVIEW CARD — for the [mm_webinar id="X"] shortcode
 * Rendered inside Brizy-built pages to embed a clickable
 * preview (thumbnail + title + watch button) of a webinar.
 * ═══════════════════════════════════════════════════════════ */
.mm-webinar-card,
.mm-webinar-card *,
.mm-webinar-card *::before,
.mm-webinar-card *::after {
	box-sizing: border-box;
}
.mm-webinar-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 480px;
	margin: 0 auto;
	padding: 16px;
	color: var(--mm-black);
	text-align: center;
}
.mm-wb-card-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #1a1a1a;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mm-wb-card-thumb:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.mm-wb-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mm-wb-card-thumb-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #232323 0%, #4d4d4e 100%);
}
.mm-wb-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(247, 147, 34, 0.92);
	transition: transform 0.2s ease, background 0.2s ease;
}
.mm-wb-card-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 56%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 18px;
	border-color: transparent transparent transparent #fff;
}
.mm-wb-card-thumb:hover .mm-wb-card-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(247, 147, 34, 1);
}
.mm-wb-card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.mm-wb-card-title {
	font-family: 'IvyPrestoDisplay', serif;
	font-weight: 300;
	line-height: 1.15;
	color: var(--mm-black);
	font-size: 28px;
	margin: 0;
}
.mm-wb-card-btn {
	margin-top: 4px;
}
@media (max-width: 480px) {
	.mm-wb-card-title { font-size: 22px; }
	.mm-wb-card-play { width: 52px; height: 52px; }
	.mm-wb-card-play::after { border-width: 9px 0 9px 14px; }
}