/* ==========================================================================
   MS2S brand layer. One file. Same colour values are set as Elementor
   Global Colors, so edit colours in Elementor > Site Settings > Global Colors
   and keep this :root block in step.

   Contrast (WCAG, computed):
     white / mint on dark ........ 17.9 / 17.0  fine for any text
     yellow on dark .............. 14.8         fine for any text
     dark on yellow .............. 14.8         buttons
     dark-green on mint / white .. 6.4 / 6.7    fine for any text
     green on mint / white ....... 4.7 / 4.9    fine for any text
     white on green .............. 4.9          fine for any text
     green on dark ............... 3.6          LARGE TEXT OR DECORATION ONLY
   ========================================================================== */

@font-face {
	font-family: "Outfit";
	src: url("../fonts/Outfit-VariableFont.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* IBM Plex Mono (SIL OFL, see assets/fonts/OFL-IBMPlexMono.txt), Latin subset, bundled locally. */
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/IBMPlexMono-600.woff2") format("woff2");
}


:root {
	--ms2s-dark: #0A191E;
	--ms2s-green: #3C7C61;
	--ms2s-yellow: #FFE999;
	--ms2s-mint: #F6FAF8;
	--ms2s-border: #DCE6E1;
	--ms2s-green-text: #2F6650;
	--ms2s-white: #FFFFFF;
	--ms2s-font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ms2s-radius: 16px;
	--ms2s-gutter: 24px;
	--ms2s-max: 1200px;
}

/* ---------- Base ---------- */

body {
	font-family: var(--ms2s-font);
	color: var(--ms2s-dark);
	background: var(--ms2s-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms2s-font);
	font-weight: 600;
	line-height: 1.15;
	color: var(--ms2s-dark);
}

a { color: var(--ms2s-green-text); }
a:hover, a:focus-visible { color: var(--ms2s-dark); }

:focus-visible {
	outline: 3px solid var(--ms2s-green);
	outline-offset: 2px;
}

.ms2s-on-dark { color: var(--ms2s-mint); background: var(--ms2s-dark); }
.ms2s-on-dark h1, .ms2s-on-dark h2, .ms2s-on-dark h3, .ms2s-on-dark h4 { color: var(--ms2s-white); }
.ms2s-on-dark a { color: var(--ms2s-yellow); }

.skip-link:focus {
	background: var(--ms2s-yellow);
	color: var(--ms2s-dark);
	padding: 12px 16px;
	z-index: 100000;
}

/* ---------- Buttons ---------- */

.ms2s-btn {
	display: inline-block;
	font-family: var(--ms2s-font);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	padding: 14px 22px;
	border-radius: 999px;
	border: 2px solid transparent;
	white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s;
}

.ms2s-btn--join {
	background: var(--ms2s-yellow);
	color: var(--ms2s-dark);
}
.ms2s-btn--join:hover,
.ms2s-btn--join:focus-visible {
	background: var(--ms2s-white);
	color: var(--ms2s-dark);
}
.ms2s-header .ms2s-btn:focus-visible,
.ms2s-footer .ms2s-btn:focus-visible { outline-color: var(--ms2s-yellow); }

.ms2s-btn--solid { background: var(--ms2s-green-text); color: var(--ms2s-white); }
.ms2s-btn--solid:hover, .ms2s-btn--solid:focus-visible { background: var(--ms2s-dark); color: var(--ms2s-white); }

.ms2s-btn--outline { border-color: var(--ms2s-green-text); color: var(--ms2s-green-text); background: transparent; }
.ms2s-btn--outline:hover, .ms2s-btn--outline:focus-visible { background: var(--ms2s-green-text); color: var(--ms2s-white); }

/* ---------- Header ---------- */

.ms2s-header {
	background: var(--ms2s-dark);
	color: var(--ms2s-white);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.admin-bar .ms2s-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ms2s-header { top: 46px; } }

.ms2s-header__inner {
	max-width: var(--ms2s-max);
	margin: 0 auto;
	padding: 12px var(--ms2s-gutter);
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.ms2s-header__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ms2s-white);
	margin-right: auto;
}
.ms2s-header__brand img { height: 44px; width: auto; display: block; }
.ms2s-header__name {
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ms2s-yellow);
}

.ms2s-nav { order: 2; }
.ms2s-nav__list,
.ms2s-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}
.ms2s-nav__list a {
	display: block;
	padding: 10px 14px;
	color: var(--ms2s-white);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 2px solid transparent;
}
.ms2s-nav__list a:hover,
.ms2s-nav__list a:focus-visible,
.ms2s-nav__list .current-menu-item > a {
	color: var(--ms2s-yellow);
	border-bottom-color: var(--ms2s-yellow);
}

.ms2s-header__join { order: 3; }
.ms2s-nav-toggle { order: 4; display: none; }

.ms2s-nav-toggle {
	background: transparent;
	border: 2px solid var(--ms2s-mint);
	border-radius: 10px;
	width: 46px;
	height: 46px;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
/* Hello Elementor paints buttons pink on hover/focus; keep brand colours. */
.ms2s-nav-toggle:hover,
.ms2s-nav-toggle:focus,
.ms2s-nav-toggle:active,
.ms2s-nav-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, .12);
	border-color: var(--ms2s-yellow);
	color: var(--ms2s-mint);
}
.ms2s-nav-toggle:focus-visible { outline: 3px solid var(--ms2s-yellow); outline-offset: 2px; }
.ms2s-nav-toggle__bars,
.ms2s-nav-toggle__bars::before,
.ms2s-nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ms2s-mint);
	position: relative;
	content: "";
}
.ms2s-nav-toggle__bars::before { position: absolute; top: -7px; }
.ms2s-nav-toggle__bars::after { position: absolute; top: 7px; }

@media (max-width: 1180px) {
	.ms2s-header__name { display: none; }
}
@media (max-width: 1000px) {
	.ms2s-nav-toggle { display: inline-flex; }
	.ms2s-header__inner { gap: 12px; }
	.ms2s-header__join { padding: 12px 16px; font-size: .9375rem; }
	.ms2s-nav {
		order: 5;
		flex-basis: 100%;
		display: none;
		border-top: 1px solid rgba(255, 255, 255, .18);
		padding-top: 8px;
	}
	.ms2s-nav.is-open { display: block; }
	.ms2s-nav__list { flex-direction: column; gap: 0; }
	.ms2s-nav__list a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 380px) {
	.ms2s-header__brand img { height: 36px; }
	.ms2s-header__join { padding: 10px 12px; font-size: .875rem; }
}

/* ---------- Footer ---------- */

.ms2s-footer {
	background: var(--ms2s-dark);
	color: var(--ms2s-mint);
	margin-top: 0;
}
.ms2s-footer a { color: var(--ms2s-yellow); }
.ms2s-footer a:hover, .ms2s-footer a:focus-visible { color: var(--ms2s-white); }
.ms2s-footer .ms2s-btn--join { color: var(--ms2s-dark); }

.ms2s-footer__inner {
	max-width: var(--ms2s-max);
	margin: 0 auto;
	padding: 36px var(--ms2s-gutter) 24px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 40px;
	align-items: center;
}
.ms2s-footer__brand img { width: 100%; max-width: 200px; height: auto; display: block; }
.ms2s-footer__right { display: flex; flex-direction: column; gap: 22px; align-items: flex-end; }
.ms2s-footer__list { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; }
.ms2s-footer__list a { text-decoration: none; font-weight: 500; }
.ms2s-footer__list a:hover { text-decoration: underline; }
.ms2s-footer__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 20px; }
.ms2s-footer__contact p { margin: 0; }
.ms2s-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ms2s-yellow);
	color: var(--ms2s-dark);
	transition: background-color .15s;
}
.ms2s-footer a.ms2s-icon-btn { color: var(--ms2s-dark); }
.ms2s-footer a.ms2s-icon-btn:hover, .ms2s-footer a.ms2s-icon-btn:focus-visible { background: var(--ms2s-white); color: var(--ms2s-dark); }
.ms2s-footer__legal {
	max-width: var(--ms2s-max);
	margin: 0 auto;
	padding: 16px var(--ms2s-gutter) 28px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .875rem;
	color: var(--ms2s-mint);
	opacity: .85;
}
@media (max-width: 760px) {
	.ms2s-footer__inner { grid-template-columns: 1fr; padding-top: 36px; gap: 24px; }
	.ms2s-footer__right, .ms2s-footer__list, .ms2s-footer__contact { align-items: flex-start; justify-content: flex-start; }
}

/* ==========================================================================
   Reusable classes. Add under Advanced > CSS Classes on any Elementor
   container, heading or HTML widget.
   ========================================================================== */

/* Small caps label. Use on light backgrounds. */
.ms2s-label {
	display: block;
	font-family: var(--ms2s-font);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ms2s-green-text);
	margin: 0 0 12px;
}
/* On dark backgrounds, add ms2s-label--dark as well. */
.ms2s-label--dark { color: var(--ms2s-yellow); }

/* Rounded mint box. */
.ms2s-card {
	background: var(--ms2s-mint);
	border: 1px solid var(--ms2s-border);
	border-radius: var(--ms2s-radius);
	padding: 28px;
}
.ms2s-card--white { background: var(--ms2s-white); }
/* Elementor containers set their own padding; match it when a card is a container. */
.e-con.ms2s-card { padding: 28px; border-radius: var(--ms2s-radius); }
.e-con.ms2s-card--white { background: var(--ms2s-white); }

/* Agenda strip. Put on a container whose children are the steps, or on an
   <ol class="ms2s-chevrons"><li>...</li></ol> in an HTML widget. */
.ms2s-chevrons {
	--chev: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ms2s-chevrons > *,
.ms2s-chevrons > .e-con-inner > * {
	flex: 1 1 180px;
	background: var(--ms2s-green-text);
	color: var(--ms2s-white);
	font-weight: 500;
	margin: 0;
	padding: 18px calc(var(--chev) + 14px) 18px calc(var(--chev) + 8px);
	clip-path: polygon(0 0, calc(100% - var(--chev)) 0, 100% 50%, calc(100% - var(--chev)) 100%, 0 100%, var(--chev) 50%);
}
.ms2s-chevrons > :first-child {
	padding-left: 18px;
	clip-path: polygon(0 0, calc(100% - var(--chev)) 0, 100% 50%, calc(100% - var(--chev)) 100%, 0 100%);
	border-radius: 10px 0 0 10px;
}
.ms2s-chevrons > :nth-child(even) { background: var(--ms2s-green); }
.ms2s-chevrons strong { display: block; font-size: 1.125rem; font-weight: 600; }
.ms2s-chevrons small { font-size: .875rem; opacity: .95; }
.ms2s-chevrons .ms2s-yellow, .ms2s-chevrons > .is-highlight { background: var(--ms2s-yellow); color: var(--ms2s-dark); }

/* Stack the strip on phones: flat rows instead of arrows. */
@media (max-width: 640px) {
	.ms2s-chevrons > *,
	.ms2s-chevrons > :first-child {
		flex-basis: 100%;
		clip-path: none;
		border-radius: 10px;
		padding: 16px 18px;
	}
}

/* ==========================================================================
   Page building blocks (Elementor containers). Add the class under
   Advanced > CSS Classes on a top-level container.
   ========================================================================== */

/* Vertical rhythm. Elementor containers read these variables. */
.e-con.ms2s-section {
	padding: 72px var(--ms2s-gutter);
	--gap: 20px;
}
@media (max-width: 640px) {
	.e-con.ms2s-section { padding-top: 48px; padding-bottom: 48px; }
}

.ms2s-hero { background: var(--ms2s-dark); }
.e-con.ms2s-hero--small { padding-top: 56px; padding-bottom: 56px; }
.ms2s-mint { background: var(--ms2s-mint); }
.ms2s-band { background: var(--ms2s-yellow); }
.e-con.ms2s-band { padding-top: 28px; padding-bottom: 28px; }

/* Outline button on a dark hero: light border and text (green on dark is only 3.6:1). */
.ms2s-hero .ms2s-btn--outline { border-color: var(--ms2s-mint); color: var(--ms2s-mint); }
.ms2s-hero .ms2s-btn--outline:hover,
.ms2s-hero .ms2s-btn--outline:focus-visible { background: var(--ms2s-yellow); border-color: var(--ms2s-yellow); color: var(--ms2s-dark); }

.ms2s-hero .elementor-widget .elementor-heading-title { color: var(--ms2s-white); }
.ms2s-hero h1.elementor-heading-title { font-size: clamp(2.25rem, 5.2vw, 3.75rem); max-width: 18ch; }
.ms2s-hero--small h1.elementor-heading-title { font-size: clamp(2rem, 4.4vw, 3rem); max-width: none; }
.ms2s-hero .elementor-widget-text-editor,
.ms2s-hero .elementor-widget-text-editor p { color: var(--ms2s-mint); font-size: 1.125rem; max-width: 60ch; }
.ms2s-hero .elementor-widget-text-editor a { color: var(--ms2s-yellow); }

.ms2s-band .elementor-widget .elementor-heading-title { color: var(--ms2s-dark); font-size: 1.375rem; }
.ms2s-band .e-con-inner, .ms2s-band { align-items: center; }
.ms2s-band .ms2s-btn--join { background: var(--ms2s-dark); color: var(--ms2s-yellow); }
.ms2s-band .ms2s-btn--join:hover, .ms2s-band .ms2s-btn--join:focus-visible { background: var(--ms2s-white); color: var(--ms2s-dark); }

.ms2s-section h2.elementor-heading-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.ms2s-section .elementor-widget-text-editor p { font-size: 1.0625rem; line-height: 1.65; }

/* Card grid: children are containers with class ms2s-card. */
.e-con.ms2s-grid > .e-con-inner,
.e-con.ms2s-grid:not(:has(> .e-con-inner)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.ms2s-grid .ms2s-card { height: 100%; }

/* Initials circle for people without a photo yet. */
.ms2s-avatar {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--ms2s-dark);
	color: var(--ms2s-yellow);
	font-weight: 600;
	font-size: 1.75rem;
	letter-spacing: .04em;
	margin-bottom: 8px;
}
.ms2s-avatar--empty { background: var(--ms2s-white); color: var(--ms2s-green-text); border: 2px dashed var(--ms2s-green); }

/* Next meeting card + date badge (from the [ms2s_next_meeting] shortcode). */
.ms2s-meeting__row { display: flex; gap: 22px; align-items: flex-start; }
.ms2s-date {
	flex: 0 0 auto;
	width: 76px;
	border-radius: 14px;
	overflow: hidden;
	text-align: center;
	background: var(--ms2s-white);
	border: 1px solid var(--ms2s-border);
}
.ms2s-date__m { display: block; background: var(--ms2s-dark); color: var(--ms2s-yellow); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; }
.ms2s-date__d { display: block; font-size: 2rem; font-weight: 600; line-height: 1; padding: 12px 0 14px; color: var(--ms2s-dark); }
.ms2s-meeting__title { margin: 0 0 6px; font-size: 1.5rem; }
.ms2s-meeting__title a { color: var(--ms2s-dark); text-decoration: none; }
.ms2s-meeting__title a:hover { text-decoration: underline; }
.ms2s-meeting__meta { margin: 0 0 4px; }
.ms2s-meeting__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.ms2s-meeting__actions .ms2s-btn { padding: 12px 18px; font-size: .9375rem; }
@media (max-width: 560px) {
	.ms2s-meeting__row { flex-direction: column; }
	.ms2s-meeting__actions .ms2s-btn { white-space: normal; }
}

.ms2s-card h3 { margin-top: 0; }
.ms2s-card p:last-child { margin-bottom: 0; }

/* ---------- Meetings list ([ms2s_meetings]) ---------- */
.ms2s-meetings__h { margin: 0 0 20px; font-size: 1.75rem; }
.ms2s-meetings__h:not(:first-child) { margin-top: 56px; }
.ms2s-meetings__list { display: grid; gap: 20px; }
.ms2s-meeting--past .ms2s-meeting__title { font-size: 1.25rem; }
.ms2s-meeting--past .ms2s-meeting__actions { margin-top: 14px; }
.ms2s-speaker { margin: 0 0 1em; }

/* ---------- Contact Form 7 ---------- */
.ms2s-form { max-width: 640px; }
.ms2s-form label { display: block; margin-bottom: 6px; font-weight: 500; }
.ms2s-form p { margin: 0 0 20px; }
.ms2s-form input[type="text"],
.ms2s-form input[type="email"],
.ms2s-form select,
.ms2s-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	color: var(--ms2s-dark);
	background: var(--ms2s-white);
	border: 1px solid #5E706A; /* 5.2:1 on white, meets the 3:1 needed for input borders */
	border-radius: 10px;
}
.ms2s-form textarea { min-height: 160px; }
.ms2s-form input:focus-visible,
.ms2s-form select:focus-visible,
.ms2s-form textarea:focus-visible { outline: 3px solid var(--ms2s-green); outline-offset: 1px; }
.ms2s-form .wpcf7-submit { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
/* Spam trap: off screen, not display:none (some bots skip display:none fields). */
.ms2s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wpcf7-not-valid-tip { color: #9B1C1C; font-size: .9375rem; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: 10px; border-width: 2px; max-width: 640px; box-sizing: border-box; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ms2s-green-text); background: var(--ms2s-mint); }

/* ---------- The Events Calendar pages (month view, list, single event) ----------
   TEC reads these variables, so recolouring them restyles its pages in one place.
   Link/button blue becomes brand dark green (6.7:1 on white); font becomes Outfit. */
html:root, .tribe-common, .tribe-events {
	--tec-color-accent-primary: var(--ms2s-green-text);
	--tec-color-accent-primary-hover: var(--ms2s-dark);
	--tec-color-accent-primary-active: var(--ms2s-dark);
	--tec-color-button-primary: var(--ms2s-green-text);
	--tec-color-button-primary-hover: var(--ms2s-dark);
	--tec-color-button-primary-active: var(--ms2s-dark);
	--tec-color-link-accent: var(--ms2s-green-text);
	--tec-color-link-accent-hover: var(--ms2s-dark);
	--tec-color-text-primary: var(--ms2s-dark);
	--tec-color-text-event-title: var(--ms2s-dark);
	--tec-color-text-event-date: var(--ms2s-dark);
	--tec-font-family-sans-serif: var(--ms2s-font);
}
.tribe-common, .tribe-common button, .tribe-common input, .tribe-common select,
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text { font-family: var(--ms2s-font); }
.tribe-events .tribe-events-c-search__button,
.tribe-events .tribe-events-c-search__button:hover { color: var(--ms2s-white); }
.tribe-events .tribe-events-c-search__button { background: var(--ms2s-green-text); border-radius: 999px; }
.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search__button:focus-visible { background: var(--ms2s-dark); }
/* TEC's list view rows overhang by about 1px on phones; clip it so the page never scrolls sideways. */
.tribe-events-view { overflow-x: clip; }

/* ==========================================================================
   Round 2 changes (home page, speaker, event types, people)
   ========================================================================== */

/* Centered blocks (home page). */
.e-con.ms2s-center { align-items: center; text-align: center; }
.ms2s-center .elementor-heading-title,
.ms2s-center .elementor-widget-text-editor,
.ms2s-center .elementor-widget-text-editor p { text-align: center; }
.ms2s-center .elementor-widget-text-editor p { margin-left: auto; margin-right: auto; }

/* Thinner dark hero. */
.e-con.ms2s-hero--thin { padding-top: 36px; padding-bottom: 40px; }
.ms2s-hero--thin h1.elementor-heading-title { font-size: clamp(2rem, 4.2vw, 3.25rem); max-width: none; }
.ms2s-hero--thin .elementor-widget-text-editor p { font-size: 1.125rem; max-width: 62ch; }
.e-con.ms2s-hero--small:not(:has(.elementor-widget-text-editor)) { padding-top: 40px; padding-bottom: 44px; }

/* Thin yellow strip: heading and buttons on one centered line. */
.e-con.ms2s-band { padding-top: 18px; padding-bottom: 18px; }
.ms2s-band .elementor-widget .elementor-heading-title { font-size: 1.375rem; margin: 0; }
.ms2s-band .ms2s-btn { padding: 11px 20px; }
.ms2s-band .ms2s-btn--outline { border-color: var(--ms2s-dark); color: var(--ms2s-dark); }
.ms2s-band .ms2s-btn--outline:hover, .ms2s-band .ms2s-btn--outline:focus-visible { background: var(--ms2s-dark); color: var(--ms2s-yellow); }

.ms2s-btn--icon { display: inline-flex; align-items: center; gap: 10px; }
.ms2s-btn--icon .ms2s-li { flex: 0 0 auto; }

/* Hero buttons: yellow solid on dark. */
.ms2s-hero .ms2s-btn--solid { background: var(--ms2s-yellow); color: var(--ms2s-dark); }
.ms2s-hero .ms2s-btn--solid:hover, .ms2s-hero .ms2s-btn--solid:focus-visible { background: var(--ms2s-white); }

/* "Coming soon" card on the Join page. */
.ms2s-soon { display: inline-block; margin-top: 8px; }
.ms2s-soon p { margin: 0; font-size: 1.25rem; }
.ms2s-center .ms2s-soon { margin-left: auto; margin-right: auto; }

/* Calendar button above the meetings list. */
.ms2s-cal-link { margin: 0 0 28px; }

/* ---------- Speaker block ---------- */
.ms2s-speaker { display: flex; align-items: center; gap: 16px; margin: 16px 0 4px; }
.ms2s-speaker p { margin: 0; }
.ms2s-speaker__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.ms2s-speaker__label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ms2s-green-text); }
.ms2s-speaker__name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.ms2s-speaker__title { font-size: .9375rem; line-height: 1.4; color: #3B4A45; }
.ms2s-speaker--lg { gap: 24px; margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--ms2s-border); }
.ms2s-speaker--lg .ms2s-speaker__photo { width: 132px; height: 132px; }
.ms2s-speaker--lg .ms2s-speaker__name { font-size: 1.625rem; }
.ms2s-speaker--lg .ms2s-speaker__title { font-size: 1.0625rem; }
@media (max-width: 560px) {
	.ms2s-speaker--lg { flex-direction: column; align-items: flex-start; }
}

/* Past meetings: the date badge is crossed off. */
.ms2s-meeting--past .ms2s-date { position: relative; opacity: .7; filter: grayscale(1); }
.ms2s-meeting--past .ms2s-date::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ms2s-dark) calc(50% - 1.5px), var(--ms2s-dark) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

/* ---------- Event types: tag on cards, colour in the calendar ----------
   Types are Events > Event Categories. The slug picks the colours, so a new type
   needs one more block below. Colour is never the only signal: the tag names the type. */
.ms2s-tag {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--ms2s-mint);
	color: var(--ms2s-dark);
	border: 1px solid var(--ms2s-border);
}
.ms2s-tag--ms2s-meeting { background: var(--ms2s-green-text); color: var(--ms2s-white); border-color: var(--ms2s-green-text); }
.ms2s-tag--vendor-event { background: var(--ms2s-yellow); color: var(--ms2s-dark); border-color: var(--ms2s-yellow); }
.ms2s-tag--community-event { background: var(--ms2s-white); color: var(--ms2s-dark); border-color: var(--ms2s-dark); }

/* ---------- People (Leadership page) ---------- */
.e-con.ms2s-person { align-items: center; text-align: center; }
.ms2s-person .elementor-heading-title, .ms2s-person .elementor-widget-text-editor, .ms2s-person p { text-align: center; }
.ms2s-avatar--lg { width: 168px; height: 168px; font-size: 2.75rem; margin-bottom: 14px; }
.ms2s-person__role { font-weight: 600; color: var(--ms2s-green-text); }
.e-con.ms2s-grid--people > .e-con-inner,
.e-con.ms2s-grid--people:not(:has(> .e-con-inner)) { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; }
.e-con.ms2s-band .e-con.ms2s-band-actions { width: auto; max-width: 100%; flex: 0 1 auto; justify-content: center; }
.e-con.ms2s-section.ms2s-center .elementor-widget-text-editor { max-width: 72ch; }

/* ---------- Calendar page: readable text, calmer size ---------- */
.tribe-events .tribe-events-l-container { max-width: 1040px; margin-left: auto; margin-right: auto; }
.tribe-events .tribe-events-calendar-month__header-column-title { font-size: 15px; }
.tribe-events .tribe-events-calendar-month__day-date-daynum { font-size: 18px; }
.tribe-events .tribe-events-calendar-month__calendar-event-title { font-size: 15px; line-height: 1.3; }
.tribe-events .tribe-events-calendar-month__calendar-event-title-link { font-size: 15px; }
.tribe-events .tribe-events-calendar-month__calendar-event-datetime { font-size: 14px; }
.tribe-events .tribe-events-c-search__input, .tribe-events .tribe-events-c-search__input-control .tribe-events-c-search__input { font-size: 16px; }
.tribe-events .tribe-events-c-search__button { font-size: 16px; }
.tribe-events .tribe-events-c-view-selector__list-item-text { font-size: 16px; }
.tribe-events .tribe-events-c-top-bar__nav-link-text, .tribe-events .tribe-events-c-top-bar__today-button { font-size: 15px; }
.tribe-events .tribe-events-calendar-month__day { min-height: 0; height: auto; }
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title { font-size: 15px; }

/* Event types in the calendar: a coloured chip, set by the event's category slug. */
.tribe-events .tribe-events-calendar-month__calendar-event {
	--ev-bg: var(--ms2s-mint);
	--ev-fg: var(--ms2s-dark);
	--ev-bd: var(--ms2s-green-text);
	background: var(--ev-bg);
	color: var(--ev-fg);
	border-left: 5px solid var(--ev-bd);
	border-radius: 8px;
	padding: 6px 8px;
	margin-bottom: 4px;
}
.tribe-events .tribe-events-calendar-month__calendar-event a,
.tribe-events .tribe-events-calendar-month__calendar-event time { color: var(--ev-fg); }
.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-ms2s-meeting { --ev-bg: var(--ms2s-green-text); --ev-fg: var(--ms2s-white); --ev-bd: var(--ms2s-dark); }
.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-vendor-event { --ev-bg: var(--ms2s-yellow); --ev-fg: var(--ms2s-dark); --ev-bd: var(--ms2s-dark); }
.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-community-event { --ev-bg: var(--ms2s-white); --ev-fg: var(--ms2s-dark); --ev-bd: var(--ms2s-green); outline: 1px solid var(--ms2s-border); }
/* Shorter rows: TEC sets 168px per week at desktop widths; 108px still fits a chip. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__week,
.tribe-events.tribe-common .tribe-events-calendar-month__week { grid-template-rows: minmax(108px, auto); }
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day,
.tribe-events.tribe-common .tribe-events-calendar-month__day { min-height: 108px; height: auto; }
.tribe-events .tribe-events-calendar-month__header-column-title span { font-size: 15px; font-weight: 600; }

/* Footer sits at the bottom of short pages. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main, body > #content, body > .site-main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > .elementor { flex: 1 0 auto; display: flex; flex-direction: column; }
body > main > .elementor > .e-con.ms2s-solo { flex: 1 0 auto; }
body > .ms2s-footer { flex: 0 0 auto; }

/* A page that is one section (Sponsors, Join): light, centered, fills the space. */
.e-con.ms2s-solo { min-height: 52vh; justify-content: center; }
.ms2s-solo h1.elementor-heading-title { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 24ch; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.15; }
.e-con.ms2s-solo > .elementor-widget { width: auto; max-width: 100%; }

/* People grid: centered. */
.e-con.ms2s-grid.ms2s-grid--people > .e-con-inner,
.e-con.ms2s-grid.ms2s-grid--people:not(:has(> .e-con-inner)) { justify-content: center; }
.e-con.ms2s-section.ms2s-center .elementor-widget-text-editor p { max-width: 72ch; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Typography: Outfit headings (700) and IBM Plex Mono for small accent text
   (labels, tags, date, nav, buttons). Type only: shapes stay rounded and soft.
   ========================================================================== */
:root { --ms2s-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
h1, h2, h3, .elementor-heading-title { font-weight: 700; letter-spacing: -0.02em; }
.ms2s-btn { font-family: var(--ms2s-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ms2s-label, .ms2s-tag, .ms2s-date__m,
.ms2s-speaker__label, .ms2s-header__name, .ms2s-nav__list a,
.ms2s-footer__list a { font-family: var(--ms2s-mono); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; font-weight: 600; }
.ms2s-nav__list a { font-size: .8125rem; }
.ms2s-date__d { font-family: var(--ms2s-mono); font-weight: 600; }
.tribe-events .tribe-events-c-search__button { font-family: var(--ms2s-mono); text-transform: uppercase; letter-spacing: .06em; }
/* Mono is wider than Outfit: keep the header Join button on one row with the logo and menu button on phones. */
@media (max-width: 1000px) {
	.ms2s-header__join { font-size: .75rem; letter-spacing: .04em; padding: 12px 14px; }
}
@media (max-width: 420px) {
	.ms2s-header__join { font-size: .6875rem; letter-spacing: .02em; padding: 10px 12px; }
	.ms2s-header__inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
}

/* Home hero only: green stick spectrum along the bottom (made by tools/spectrum/make_spectrum.py).
   Drawn at its own pixel size (72 px high, never stretched), centred and cropped, so peak widths
   stay the same at every screen width. Phones get a shorter file with fewer clusters. The
   bottom padding keeps every peak below the text. */
.e-con.ms2s-hero--thin {
	background-image: url("../img/spectrum-wide.svg");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 72px;
	padding-bottom: 100px;
}
@media (max-width: 640px) {
	.e-con.ms2s-hero--thin {
		background-image: url("../img/spectrum-narrow.svg");
		padding-bottom: 92px;
	}
}

/* ==========================================================================
   Round 3 tweaks
   ========================================================================== */

/* Home: thin "Want to connect?" strip, heading and both buttons on one line, buttons the same height. */
.e-con.ms2s-band { padding-top: 12px; padding-bottom: 12px; min-height: 0; }
.ms2s-band .e-con-inner, .ms2s-band .e-con.ms2s-band-actions { padding-top: 0; padding-bottom: 0; min-height: 0; }
.ms2s-band .elementor-widget { margin: 0; }
.ms2s-band .elementor-widget .elementor-heading-title { font-size: 1.25rem; line-height: 1.2; margin: 0; }
.e-con.ms2s-band, .ms2s-band .e-con-inner, .e-con.ms2s-band .e-con.ms2s-band-actions { align-items: center; }
.ms2s-band .ms2s-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	line-height: 1;
	margin: 0;
}

/* Home: "What is MS2S?" with the title on the left, a vertical line, and the text left-aligned beside it. */
.e-con.ms2s-about .e-con.ms2s-about__title { flex: 0 0 300px; width: 300px; max-width: 38%; justify-content: center; padding-right: 40px; }
.e-con.ms2s-about .e-con.ms2s-about__body { flex: 1 1 0; width: auto; min-width: 0; align-items: flex-start; justify-content: center; border-left: 2px solid var(--ms2s-green); padding-left: 40px; }
.ms2s-about .elementor-heading-title { text-align: left; }
.ms2s-about .elementor-widget-text-editor, .ms2s-about .elementor-widget-text-editor p { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
@media (max-width: 767px) {
	.e-con.ms2s-about, .e-con.ms2s-about > .e-con-inner { flex-direction: column; }
	.e-con.ms2s-about .e-con.ms2s-about__title { flex: 0 0 auto; width: 100%; max-width: 100%; padding-right: 0; }
	.e-con.ms2s-about .e-con.ms2s-about__body { border-left: 0; padding-left: 0; }
}

/* Meetings page: the two buttons above the list sit side by side. */
.ms2s-cal-link { display: flex; flex-wrap: wrap; gap: 12px; }
.ms2s-cal-submit { margin: 0 0 20px; }

/* Calendar chips: name in white and bold, time at the bottom in its own colour, the chip as wide as
   the day, and one line per event once a day has two or more. */
.tribe-events .tribe-events-calendar-month__calendar-event {
	--ev-time: var(--ms2s-yellow);
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px 8px;
}
.tribe-events .tribe-events-calendar-month__calendar-event-details { display: flex; flex-direction: column; gap: 4px; }
.tribe-events .tribe-events-calendar-month__calendar-event-title { order: 1; margin: 0; }
.tribe-events .tribe-events-calendar-month__calendar-event-title-link { font-weight: 700; }
.tribe-events .tribe-events-calendar-month__calendar-event-datetime { order: 2; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.tribe-events .tribe-events-calendar-month__calendar-event time { color: var(--ev-time); }
.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-vendor-event,
.tribe-events .tribe-events-calendar-month__calendar-event.tribe_events_cat-community-event { --ev-time: var(--ms2s-green-text); }
.tribe-events .tribe-events-calendar-month__events:has(.tribe-events-calendar-month__calendar-event:nth-child(2)) .tribe-events-calendar-month__calendar-event { padding: 3px 8px 4px; margin-bottom: 3px; }
.tribe-events .tribe-events-calendar-month__events:has(.tribe-events-calendar-month__calendar-event:nth-child(2)) .tribe-events-calendar-month__calendar-event-details { gap: 0; }
.tribe-events .tribe-events-calendar-month__events:has(.tribe-events-calendar-month__calendar-event:nth-child(2)) .tribe-events-calendar-month__calendar-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.tribe-events .tribe-events-calendar-month__events:has(.tribe-events-calendar-month__calendar-event:nth-child(2)) .tribe-events-calendar-month__calendar-event-title-link { font-size: 13px; }
.tribe-events .tribe-events-calendar-month__events:has(.tribe-events-calendar-month__calendar-event:nth-child(2)) .tribe-events-calendar-month__calendar-event-datetime { font-size: 12px; line-height: 1.25; }

/* Contact form: event fields. */
.ms2s-form input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	color: var(--ms2s-dark);
	background: var(--ms2s-white);
	border: 1px solid #5E706A;
	border-radius: 10px;
}
.ms2s-form input[type="date"]:focus-visible { outline: 3px solid var(--ms2s-green); outline-offset: 1px; }
.ms2s-hint { font-weight: 400; color: #5E706A; font-size: .875rem; }
.ms2s-event-fields[hidden] { display: none; }
.ms2s-event-fields.ms2s-js .ms2s-hint { display: none; }
/* The Events Calendar resets link padding, borders and colour; restore the pill button there. */
.tribe-common .ms2s-cal-submit a.ms2s-btn {
	display: inline-block;
	padding: 12px 20px;
	border: 2px solid var(--ms2s-green-text);
	border-radius: 999px;
	color: var(--ms2s-green-text);
	background: transparent;
	font-family: var(--ms2s-mono);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}
.tribe-common .ms2s-cal-submit a.ms2s-btn:hover,
.tribe-common .ms2s-cal-submit a.ms2s-btn:focus-visible { background: var(--ms2s-green-text); color: var(--ms2s-white); }
/* Long button label: wrap on narrow phones instead of widening the page. */
.ms2s-cal-link .ms2s-btn, .tribe-common .ms2s-cal-submit a.ms2s-btn { white-space: normal; max-width: 100%; box-sizing: border-box; line-height: 1.3; text-align: center; }

/* Sponsor logos: a centred row that wraps; the white of the JPG blends into the section colour. */
.ms2s-sponsors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; }
.ms2s-sponsors li { margin: 0; padding: 0; }
.elementor .ms2s-sponsors li img { display: block; height: 72px; width: auto; max-width: 100%; mix-blend-mode: multiply; }

/* Header and footer content line up with the page titles: the boxed page content is 1200 px wide with no
   side padding, so these bars are 1200 px of content plus the side gutters. */
.ms2s-header__inner, .ms2s-footer__inner, .ms2s-footer__legal { max-width: calc(var(--ms2s-max) + 2 * var(--ms2s-gutter)); }

/* Join the mailing list and LinkedIn buttons: one shorter, shared height everywhere (header, home strip, footer). */
:root { --ms2s-pill-h: 36px; }
.ms2s-btn--join, .ms2s-band .ms2s-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ms2s-pill-h);
	padding: 0 18px;
	line-height: 1;
}
.ms2s-btn--icon .ms2s-li { width: 20px; height: 20px; }
.ms2s-icon-btn { width: var(--ms2s-pill-h); height: var(--ms2s-pill-h); }
.ms2s-icon-btn .ms2s-li { width: 20px; height: 20px; }
@media (max-width: 1000px) {
	.ms2s-header__join { padding: 0 14px; }
}
@media (max-width: 420px) {
	.ms2s-header__join { padding: 0 12px; }
}

/* Sponsors: bigger logos on the Sponsors page, more room under the title, the button at the bottom of the strip.
   "Become a sponsor" is the same height as the Join the mailing list button. */
.ms2s-btn--slim { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: var(--ms2s-pill-h); padding: 0 18px; line-height: 1; }
.elementor .ms2s-sponsors li img { object-fit: contain; }
.elementor .ms2s-sponsors--lg li img { height: 128px; }
.ms2s-sponsors--lg { gap: 32px 72px; margin-top: 24px; }
.e-con.ms2s-sponsors-page { min-height: 66vh; }
.e-con.ms2s-sponsors-page > .e-con-inner, .e-con.ms2s-sponsors-page:not(:has(> .e-con-inner)) { justify-content: flex-start; min-height: 100%; }
.e-con.ms2s-sponsors-page .elementor-widget:last-child { margin-top: auto; padding-top: 48px; }
/* The Become a sponsor button sits at the bottom edge of its strip: little space below it. */
.e-con.ms2s-sponsors-section, .e-con.ms2s-sponsors-page { padding-bottom: 14px; }