/* --------------------------------------------------------------------------
   MSM Guide Gate
   Everything here reads from custom properties set in Settings, so one
   stylesheet serves every client without a per-site fork.
   -------------------------------------------------------------------------- */

:root{
	--msmgg-accent:#B8863B;
	--msmgg-ink:#22303F;
	--msmgg-muted:#6F7780;
	--msmgg-surface:#F3F1EC;
	--msmgg-border:#DFE3EA;
	--msmgg-radius:12px;
	--msmgg-font-heading:inherit;
	--msmgg-font-body:inherit;
	--msmgg-fold-dur:520ms;
	--msmgg-ease:cubic-bezier(.22,.68,.24,1);
}

/* ------------------------------------------------------------------ modal */

.msmgg-gate{
	position:fixed;
	inset:0;
	z-index:99999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
}
.msmgg-gate[hidden]{display:none !important}

.msmgg-gate__scrim{
	position:absolute;
	inset:0;
	background:color-mix(in srgb, var(--msmgg-ink) 58%, transparent);
	animation:msmgg-fade .24s ease both;
}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
	.msmgg-gate__scrim{background:rgba(20,28,38,.58)}
}

.msmgg-gate__panel{
	position:relative;
	background:#fff;
	border-radius:var(--msmgg-radius);
	box-shadow:0 26px 64px rgba(16,24,34,.26);
	width:100%;
	max-width:460px;
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	padding:44px 44px 36px;
	animation:msmgg-rise .3s var(--msmgg-ease) both;
}

.msmgg-gate__x{
	position:absolute;
	top:12px;
	right:14px;
	width:34px;
	height:34px;
	border:0;
	padding:0;
	background:none;
	font-size:26px;
	line-height:1;
	color:var(--msmgg-muted);
	cursor:pointer;
	border-radius:50%;
	transition:color .2s ease, background-color .2s ease;
}
.msmgg-gate__x:hover{color:var(--msmgg-ink);background:var(--msmgg-surface)}
.msmgg-gate__x:focus-visible{outline:2px solid var(--msmgg-accent);outline-offset:2px}

.msmgg-gate__pane[hidden]{display:none !important}

.msmgg-gate__eyebrow{
	font-family:var(--msmgg-font-body);
	font-size:11px;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--msmgg-accent);
	margin:0 0 12px;
}
.msmgg-gate__title{
	font-family:var(--msmgg-font-heading);
	font-size:29px;
	line-height:1.2;
	color:var(--msmgg-ink);
	margin:0 0 10px;
}
.msmgg-gate__lede{
	font-family:var(--msmgg-font-body);
	font-size:15px;
	line-height:1.6;
	color:var(--msmgg-muted);
	margin:0 0 24px;
}

body.msmgg-open{overflow:hidden}

/* Form plugins bring their own furniture. This only evens out the obvious
   mismatches; anything more opinionated belongs in the form plugin's styles. */
.msmgg-gate__form .wpforms-container{margin:0}
.msmgg-gate__form .wpforms-field{padding:0 0 15px !important}
.msmgg-gate__form input[type="text"],
.msmgg-gate__form input[type="email"],
.msmgg-gate__form input[type="tel"],
.msmgg-gate__form select,
.msmgg-gate__form textarea{
	width:100% !important;
	max-width:100% !important;
	border:1px solid var(--msmgg-border) !important;
	border-radius:calc(var(--msmgg-radius) * .6) !important;
	padding:12px 14px !important;
	font-family:var(--msmgg-font-body);
	font-size:15px !important;
	color:var(--msmgg-ink) !important;
	background:#fff !important;
}
.msmgg-gate__form input:focus,
.msmgg-gate__form select:focus,
.msmgg-gate__form textarea:focus{
	border-color:var(--msmgg-accent) !important;
	outline:none !important;
	box-shadow:0 0 0 3px color-mix(in srgb, var(--msmgg-accent) 18%, transparent) !important;
}
.msmgg-gate__form button[type="submit"],
.msmgg-gate__form input[type="submit"]{
	width:100% !important;
	background:var(--msmgg-accent) !important;
	border:1px solid var(--msmgg-accent) !important;
	border-radius:calc(var(--msmgg-radius) * .6) !important;
	padding:14px 24px !important;
	font-family:var(--msmgg-font-body);
	font-size:15px !important;
	font-weight:600 !important;
	color:#fff !important;
	cursor:pointer !important;
	transition:background-color .25s ease, border-color .25s ease !important;
}
.msmgg-gate__form button[type="submit"]:hover,
.msmgg-gate__form input[type="submit"]:hover{
	background:var(--msmgg-ink) !important;
	border-color:var(--msmgg-ink) !important;
}

/* ---------------------------------------------------------------- buttons */

.msmgg-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.5em;
	padding:15px 30px;
	border-radius:999px;
	border:1px solid transparent;
	font-family:var(--msmgg-font-body);
	font-size:15px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.msmgg-btn--primary{
	background:var(--msmgg-accent);
	border-color:var(--msmgg-accent);
	color:#fff;
}
.msmgg-btn--primary:hover,
.msmgg-btn--primary:focus-visible{
	background:var(--msmgg-ink);
	border-color:var(--msmgg-ink);
	color:#fff;
}
.msmgg-btn--ghost{
	background:transparent;
	border-color:var(--msmgg-border);
	color:var(--msmgg-ink);
}
.msmgg-btn--ghost:hover,
.msmgg-btn--ghost:focus-visible{
	border-color:var(--msmgg-ink);
	background:var(--msmgg-ink);
	color:#fff;
}
.msmgg-btn--bare{
	background:none;
	border-color:transparent;
	padding-left:0;
	padding-right:0;
	color:var(--msmgg-accent);
	text-decoration:underline;
	text-underline-offset:3px;
}
.msmgg-btn:focus-visible{outline:2px solid var(--msmgg-accent);outline-offset:3px}

.msmgg-trigger-wrap{display:flex;flex-wrap:wrap}
.msmgg-trigger-wrap > .msmgg-btn{flex:0 0 auto}

/* ------------------------------------------------------------------- fold */

/*
 * grid-template-rows 0fr to 1fr is what lets this animate to the real content
 * height without anything measuring anything, and :target is what opens it,
 * which matters on sites that delay JavaScript: a fold that needs a script to
 * open is a fold that sometimes does not.
 */
.msmgg-fold{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows var(--msmgg-fold-dur) var(--msmgg-ease);
}
.msmgg-fold:target,
.msmgg-fold.is-open{grid-template-rows:1fr}

.msmgg-fold__inner{
	overflow:hidden;
	min-height:0;
}
.msmgg-fold__content{
	opacity:0;
	transform:translateY(-6px);
	transition:opacity calc(var(--msmgg-fold-dur) * .8) ease var(--msmgg-fold-dur),
	           transform calc(var(--msmgg-fold-dur) * .8) ease var(--msmgg-fold-dur);
}
.msmgg-fold:target .msmgg-fold__content,
.msmgg-fold.is-open .msmgg-fold__content{
	opacity:1;
	transform:none;
}

.msmgg-fold__close{margin:2em 0 0}
.msmgg-fold__close a{
	font-family:var(--msmgg-font-body);
	font-size:14px;
	color:var(--msmgg-muted);
	text-decoration:underline;
	text-underline-offset:3px;
}
.msmgg-fold__close a:hover{color:var(--msmgg-ink)}

/* ----------------------------------------------------------- editor aid */

.msmgg-placeholder{
	border:1px dashed var(--msmgg-border);
	border-radius:var(--msmgg-radius);
	padding:28px 24px;
	text-align:center;
	color:var(--msmgg-muted);
	font-size:14px;
	background:var(--msmgg-surface);
}

/* --------------------------------------------------------------- motion */

@keyframes msmgg-fade{from{opacity:0}to{opacity:1}}
@keyframes msmgg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:520px){
	.msmgg-gate__panel{padding:36px 22px 28px}
	.msmgg-gate__title{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
	.msmgg-gate__scrim,
	.msmgg-gate__panel{animation:none}
	.msmgg-fold,
	.msmgg-fold__content{transition:none}
}