/*
 * NLM Newsletter blocks: front end and editor canvas.
 *
 * :is(.nlm-nl,#nlm-nl) carries ID-level specificity, so theme rules such as Divi's
 * "#left-area ul" or "#content-area h2" can't restyle the email, while inline styles
 * saved on blocks (core colour/size controls) still win.
 * Mobile rules follow ActiveCampaign's editor: one breakpoint at 600px.
 */

.nlm-nl {
	background: var(--nl-page, transparent);
	overflow-x: hidden;
	overflow-x: clip;
	font-family: var(--nl-ff, arial, 'helvetica neue', helvetica, sans-serif);
	font-size: var(--nl-fs, 14px);
	font-weight: 400; /* Email clients start at normal weight; themes (Divi: 500) don't. */
	line-height: var(--nl-lh, 150%);
	color: var(--nl-color, #333);
	text-align: left;
	-webkit-text-size-adjust: 100%;
	letter-spacing: normal;
	padding: var(--nl-pad, 0px) 0;
	margin: 0 0 1.5em;
}
.nlm-nl *,
.nlm-nl *::before,
.nlm-nl *::after { box-sizing: border-box; }
/* Feature issue_frame: space above and below the newsletter page, and content above it. */
.nlm-nl.nlm-framed { padding: calc(var(--nl-pad, 0px) + var(--nlm-fr, 0px)) 0; margin-bottom: 0; }
@media (max-width: 1024px) { .nlm-nl.nlm-framed { padding: calc(var(--nl-pad, 0px) + var(--nlm-fr-t, 0px)) 0; } }
@media (max-width: 600px) { .nlm-nl.nlm-framed { padding: calc(var(--nl-pad, 0px) + var(--nlm-fr-m, 0px)) 0; } }
.nlm-nl__before { max-width: var(--nl-w, 600px); margin: 0 auto; }
.nlm-nl__body {
	max-width: var(--nl-w, 600px);
	margin: 0 auto;
	background: var(--nl-bg, #fff);
}

/* Sections & columns */
.nlm-section { position: relative; background-size: cover; background-position: center; }
.nlm-section.nlm-has-outer { box-shadow: 0 0 0 100vmax var(--s-outer); clip-path: inset(0 -100vmax); }
.nlm-cols { display: flex; gap: var(--s-gap, 20px); align-items: var(--s-va, flex-start); }
.nlm-column { flex: var(--c-w, 1) 1 0%; min-width: 0; }

/* Resets inside the email (beat theme typography) */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) :is(p,h1,h2,h3,h4,h5,h6,ul,ol,li,figure,blockquote) {
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing: inherit;
	text-transform: none;
	font-family: inherit;
	background: none;
}
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) img { max-width: 100%; height: auto; max-height: none; object-fit: fill; contain-intrinsic-size: none; border: 0; margin: 0; box-shadow: none; vertical-align: top; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a { box-shadow: none; }

/* Text */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text {
	font-family: var(--t-ff, inherit);
	font-size: var(--t-fs, inherit);
	line-height: var(--t-lh, inherit);
	color: var(--t-color, inherit);
	word-wrap: break-word;
}
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(p,li) { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text p:empty::before { content: "\00a0"; }
/* A theme's own wpautop (e.g. Pioneer's custom_wpautop) leaves an empty <p> inside list items; it is not a blank line from the email. */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text li > p:empty { display: none; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(ul,ol) { margin: 1em 0; padding: 0 0 0 40px; list-style-position: outside; line-height: inherit; font-size: inherit; color: inherit; } /* Email clients' default list box. */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text ul { list-style-type: disc; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text ol { list-style-type: decimal; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text li { margin: 0 0 0 0; }
/* Feature email_details: a fixed-height email cell, content centred as in a table cell. */
.nlm-text.nlm-has-minh { min-height: var(--t-minh); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 600px) { .nlm-text.nlm-has-minh.nlm-m-hauto { min-height: 0; display: block; } }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text a { color: var(--t-link, var(--nl-link, inherit)); text-decoration: var(--t-ul, underline) !important; font-weight: inherit; } /* !important: themes such as Avada underline every link with !important. */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(h1,h2,h3,h4,h5,h6) { font-weight: normal; font-family: var(--nl-hff, inherit); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h1 { font-family: var(--t-h1-ff, var(--nl-hff, inherit)); font-size: var(--t-h1-fs, 30px); line-height: var(--t-h1-lh, 120%); color: var(--t-h1-c, inherit); font-weight: var(--t-h1-fw, normal); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h2 { font-family: var(--t-h2-ff, var(--nl-hff, inherit)); font-size: var(--t-h2-fs, 24px); line-height: var(--t-h2-lh, 120%); color: var(--t-h2-c, inherit); font-weight: var(--t-h2-fw, normal); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h3 { font-family: var(--t-h3-ff, var(--nl-hff, inherit)); font-size: var(--t-h3-fs, 20px); line-height: var(--t-h3-lh, 120%); color: var(--t-h3-c, inherit); font-weight: var(--t-h3-fw, normal); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(h4,h5,h6) { font-family: var(--t-h4-ff, var(--nl-hff, inherit)); font-size: var(--t-h4-fs, 16px); line-height: var(--t-h4-lh, 120%); color: var(--t-h4-c, inherit); font-weight: var(--t-h4-fw, normal); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(h1,h2,h3,h4,h5,h6) a { color: inherit; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(.has-text-align-left) { text-align: left; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(.has-text-align-center) { text-align: center; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(.has-text-align-right) { text-align: right; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(.has-text-align-justify) { text-align: justify; }

/* Image */
.nlm-image { line-height: 0; font-size: 0; }
.nlm-image a { display: block; max-width: 100%; } /* Block so 100%-wide images have a width to fill; alignment still inherits. */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-image img { display: inline-block; }

/* Button */
.nlm-button { line-height: 1; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-btn {
	display: inline-block;
	font-size: var(--b-fs, 16px);
	text-decoration: none !important; /* Beats a theme-wide link underline. */
	text-align: center;
	max-width: 100%;
	line-height: 1.2;
	transition: filter .15s ease;
}
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-btn[style*="line-height"] { line-height: unset; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a.nlm-btn:hover { filter: brightness(1.12); text-decoration: none; }
.nlm-btn-full .nlm-btn { display: block; width: 100%; }

/* Divider & spacer */
.nlm-divider { line-height: 0; font-size: 0; }
.nlm-hr {
	display: inline-block;
	vertical-align: top;
	width: var(--d-w, 100%);
	height: 0;
	border-top: var(--d-t, 1px) var(--d-s, solid) var(--d-c, #ccc);
}
.nlm-spacer { height: var(--sp-h, 20px); }

/* Original email markup kept as HTML */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html table { border: 0; border-collapse: collapse; margin: 0; max-width: 100%; background: none; }
/* Themes (Divi) stretch every table to 100%, which stops align="right" image tables from floating beside text. */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html table { width: auto; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html table[width="100%"] { width: 100%; }
/* Some themes force wide, scrolling post tables on phones (e.g. min-width: 1100px !important). */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html table { min-width: 0 !important; max-width: 100% !important; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html :is(td,th) { min-width: 0 !important; }
/* Email markup sizes boxes the classic way (an image's padding adds to its width). */
.nlm-html, .nlm-html * { box-sizing: content-box; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-html :is(td,th) { padding: 0; border: 0; vertical-align: top; line-height: inherit; }

/* Canvas extras */
.nlm-rounded .nlm-nl__body { border-radius: var(--nl-r); overflow: hidden; }
.nlm-nl.nlm-shadow { box-shadow: none; }
.nlm-nl.nlm-shadow .nlm-nl__body, .nlm-section.nlm-shadow { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.nlm-nl__meta { max-width: var(--nl-w, 600px); margin: 0 auto 12px; padding: 14px 20px; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }
.nlm-nl__subject { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.nlm-nl__from { color: #666; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Text extras */
.nlm-text.nlm-has-gap > * + * { margin-top: var(--t-gap) !important; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text li::marker { color: var(--t-bullet, inherit); }

/* Image extras */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-caption { font-size: 12px; line-height: 1.5; color: #666; padding-top: 6px; font-family: inherit; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-img-shadow img { box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* Button extras */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a.nlm-btn.nlm-has-hbg:hover { background-color: var(--b-hbg) !important; filter: none; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a.nlm-btn.nlm-has-hc:hover { color: var(--b-hc) !important; filter: none; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-btn.nlm-shadow { box-shadow: 0 3px 10px rgba(0,0,0,.18); }

/* Social icons */
.nlm-social { line-height: 0; font-size: 0; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-soc {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
	width: var(--so-s, 32px); height: var(--so-s, 32px);
	color: #fff; background: var(--so-brand, #555); text-decoration: none !important; box-shadow: none;
	transition: opacity .15s ease, transform .15s ease;
}
.nlm-soc + .nlm-soc { margin-left: var(--so-g, 10px); }
.nlm-soc svg { width: 55%; height: 55%; display: block; }
.nlm-soc:hover { opacity: .85; transform: translateY(-1px); }
.nlm-social.is-circle .nlm-soc { border-radius: 50%; }
.nlm-social.is-rounded .nlm-soc { border-radius: 22%; }
.nlm-social.is-square .nlm-soc { border-radius: 0; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-dark .nlm-soc { background: #333; color: #fff; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-light .nlm-soc { background: #fff; color: #333; box-shadow: inset 0 0 0 1px #d6d6d6; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-outline .nlm-soc { background: transparent; color: var(--so-brand); box-shadow: inset 0 0 0 2px var(--so-brand); }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-plain .nlm-soc { background: transparent; color: var(--so-brand); }
.nlm-social.is-plain .nlm-soc svg { width: 100%; height: 100%; }

/* Desktop only */
@media (min-width: 601px) {
	.nlm-hide-d { display: none !important; }
	.nlm-html .es-desk-hidden { display: none !important; }
}

/* Mobile (ActiveCampaign breakpoint) */
@media (max-width: 600px) {
	/* Use the whole phone screen, as the email does (themes keep a wide side gutter). */
	body:not(.wp-admin) .nlm-nl:not(.nlm-in-editor) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
	.nlm-hide-m { display: none !important; }
	/* Markup kept as HTML (e.g. the email's menu row) follows the email's own phone rules. */
	.nlm-html :is(.es-mobile-hidden, .es-hidden) { display: none !important; }
	:is(.nlm-nl,#nlm-nl) .nlm-html .es-adapt-td { display: block !important; width: 100% !important; box-sizing: border-box; }
	:is(.nlm-nl,#nlm-nl) .nlm-html :is(table:has(> tbody > tr > .es-adapt-td), tbody:has(> tr > .es-adapt-td), tr:has(> .es-adapt-td)) { display: block !important; width: 100% !important; }
	.nlm-has-mp { padding: var(--nlm-mp) !important; }
	.nlm-stack > .nlm-cols { flex-direction: column; align-items: stretch; gap: 0; }
	.nlm-stack.nlm-reverse > .nlm-cols { flex-direction: column-reverse; }
	.nlm-stack > .nlm-cols > .nlm-column { flex: 1 1 auto; width: 100%; }

	:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text :is(p,li) {
		font-size: var(--t-m-fs, var(--nl-m-fs, var(--t-fs, var(--nl-fs)))) !important;
		line-height: var(--nl-m-lh, var(--t-lh, var(--nl-lh))) !important;
	}
	:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h1 { font-size: var(--nl-m-h1, var(--t-h1-fs, 30px)) !important; line-height: 120% !important; }
	:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h2 { font-size: var(--nl-m-h2, var(--t-h2-fs, 24px)) !important; line-height: 120% !important; }
	:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-text h3 { font-size: var(--nl-m-h3, var(--t-h3-fs, 20px)) !important; line-height: 120% !important; }
	.nlm-text.nlm-m-left, .nlm-text.nlm-m-left :is(p,h1,h2,h3,h4) { text-align: left !important; }
	.nlm-text.nlm-m-center, .nlm-text.nlm-m-center :is(p,h1,h2,h3,h4) { text-align: center !important; }
	.nlm-text.nlm-m-right, .nlm-text.nlm-m-right :is(p,h1,h2,h3,h4) { text-align: right !important; }

	.nlm-image.nlm-m-full img { width: 100% !important; }
	.nlm-image.nlm-m-full a { display: block; }
	:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-btn { font-size: var(--nl-m-btn, var(--b-fs, 16px)) !important; }
	.nlm-button.nlm-m-full .nlm-btn { display: block; width: 100%; }
	.nlm-button.nlm-m-left { text-align: left !important; }
	.nlm-button.nlm-m-center { text-align: center !important; }
	.nlm-button.nlm-m-right { text-align: right !important; }
	.nlm-spacer { height: var(--sp-mh, var(--sp-h, 20px)) !important; }
}

/* Social: the email's own icon images */
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-original .nlm-soc { background: none; box-shadow: none; border-radius: 0; color: inherit; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) .nlm-social.is-original .nlm-soc img { display: block; width: 100%; height: 100%; max-width: none; }

/* Download PDF */
.nlm-nl__pdf { max-width: var(--nl-w, 600px); margin: 0 auto 14px; text-align: right; }
.nlm-nl__body + .nlm-nl__pdf { margin: 14px auto 0; text-align: center; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a.nlm-pdf-btn,
a.nlm-pdf-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 6px; background: #fff; color: #1d2327; border: 1px solid #d0d4d9; font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: border-color .15s, box-shadow .15s; }
:is(.nlm-nl,#nlm-nl):is(.nlm-nl,#nlm-nl) a.nlm-pdf-btn:hover,
a.nlm-pdf-btn:hover { border-color: #9aa1a8; box-shadow: 0 3px 10px rgba(0,0,0,.08); color: #1d2327; }
a.nlm-pdf-btn svg { flex: none; color: #b32d2e; }
@media (max-width: 600px) { .nlm-nl__pdf { padding: 0 12px; text-align: center; } }
/* Listings (Latest Newsletters, category archive) */
.nlm-list-pdf { margin: 8px 0 0; }
.nlm-list-pdf a.nlm-pdf-btn { padding: 6px 12px; font-size: 13px; }

/* Team showcase: a row with hidden members keeps the others at their width, centred. */
.nlm-has-hidden > .nlm-cols { justify-content: center; }
.nlm-has-hidden > .nlm-cols > .nlm-column { flex: 0 1 calc(var(--c-w, 50) * 1%); }
@media (max-width: 600px) { .nlm-stack.nlm-has-hidden > .nlm-cols > .nlm-column { flex: 1 1 auto; } }