/* Framed Minds house ads 1.2.0. Literal hex only, no variables, no @import.
   Public ads: The Calling (Archivo 900 lowercase, Newsreader, #231F20 #F7F7F4 #E4E3DF, #88BD40 fill
   only, #4E7520 small green text). Member cards: Brand Booklet (Avenir/Poppins, #151515, #F4F1E8,
   #E7EAED, #BCCF97 CTA, #0E1A27 anchor). 8 px grid. */

.fmha-app .fmha:not(.fmha--member) { display: none !important; }

/* ---------- Shared frame ---------- */
.fmha {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 40px 0;
	padding: 0;
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	container-type: inline-size;
	transition: opacity .2s ease, transform .2s ease;
}
.fmha * { box-sizing: border-box; }
.fmha.fmha--leaving { opacity: 0; transform: translateY(4px); }
.fmha .fmha__in { display: flex; flex-direction: column; }
.fmha .fmha__art { display: flex; align-items: center; justify-content: center; line-height: 0; }
.fmha .fmha__art svg { display: block; width: auto; height: 136px; max-width: 100%; }
.fmha .fmha__txt { padding: 24px; min-width: 0; }
.fmha .fmha__label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.fmha .fmha__title { margin: 0 0 8px !important; }
.fmha .fmha__body { margin: 0 0 24px !important; }
.fmha .fmha__when { margin: 0 0 4px !important; }
.fmha .fmha__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; text-decoration: none !important; border: 0; }
.fmha .fmha__note { margin: 16px 0 0; }

@container (min-width: 560px) {
	.fmha .fmha__in { flex-direction: row; align-items: stretch; }
	.fmha .fmha__art { flex: 0 0 216px; }
	.fmha .fmha__art svg { width: 100%; height: auto; max-height: none; }
	.fmha .fmha__txt { padding: 32px 32px 32px 32px; flex: 1 1 auto; }
}

/* ---------- Public ads: The Calling ---------- */
.fmha:not(.fmha--member) {
	background: #F7F7F4;
	border: 1px solid #E4E3DF;
	border-top: 4px solid #88BD40;
	color: #231F20;
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
}
.fmha:not(.fmha--member) .fmha__art { background: #231F20; }
.fmha:not(.fmha--member) .fmha__label {
	font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 800;
	font-size: 11px !important;
	line-height: 16px !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #4E7520;
}
.fmha .fmha__logo { display: block; height: 16px; width: auto; margin: 0; flex: 0 0 auto; }
.fmha:not(.fmha--member) .fmha__title {
	font-family: 'Archivo', 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 900 !important;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: lowercase;
	color: #231F20;
}
.fmha:not(.fmha--member) .fmha__when {
	font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-weight: 800;
	font-size: 14px !important;
	line-height: 24px !important;
	letter-spacing: 0;
	color: #4E7520;
}
.fmha:not(.fmha--member) .fmha__body { font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important; font-size: 17px !important; line-height: 1.55 !important; color: #231F20; }
.fmha:not(.fmha--member) .fmha__cta {
	background: #231F20;
	color: #FFFFFF !important;
	font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: .01em;
	text-transform: lowercase;
}
.fmha:not(.fmha--member) .fmha__cta:hover, .fmha:not(.fmha--member) .fmha__cta:focus-visible { background: #4E7520; color: #FFFFFF !important; }
.fmha:not(.fmha--member) .fmha__note { font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important; font-size: 15px !important; line-height: 1.5 !important; color: #4A4547; }

/* ---------- Member cards: Brand Booklet ---------- */
.fmha.fmha--member {
	background: #F4F1E8;
	border: 1px solid #E7EAED;
	border-radius: 16px;
	color: #151515;
	font-family: 'Poppins', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.fmha.fmha--member .fmha__art { background: #0E1A27; }
.fmha.fmha--member .fmha__label {
	font-family: 'Avenir Next', Avenir, 'Poppins', 'Work Sans', Arial, sans-serif !important;
	font-weight: 700;
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0E1A27;
}
.fmha.fmha--member .fmha__label span { display: inline-flex; align-items: center; gap: 8px; }
.fmha.fmha--member .fmha__label span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #BCCF97; box-shadow: 0 0 0 2px #0E1A27 inset; }
.fmha.fmha--member .fmha__dismiss {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 8px 0;
	margin: -8px 0;
	min-height: 32px;
	cursor: pointer;
	font-family: 'Poppins', 'Work Sans', Arial, sans-serif !important;
	font-weight: 500;
	font-size: 13px !important;
	line-height: 16px !important;
	letter-spacing: 0;
	text-transform: none;
	color: #4A4A4A;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fmha.fmha--member .fmha__dismiss:hover, .fmha.fmha--member .fmha__dismiss:focus-visible { color: #151515; }
.fmha.fmha--member .fmha__title {
	font-family: 'Avenir Next', Avenir, 'Poppins', 'Work Sans', Arial, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #151515;
}
.fmha.fmha--member .fmha__when { font-family: 'Poppins', 'Work Sans', Arial, sans-serif !important; font-weight: 600; font-size: 14px !important; line-height: 24px !important; color: #0E1A27; }
.fmha.fmha--member .fmha__body { font-family: 'Poppins', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important; font-size: 16px !important; line-height: 1.6 !important; color: #151515; }
.fmha.fmha--member .fmha__cta {
	background: #BCCF97;
	color: #151515 !important;
	border-radius: 999px;
	font-family: 'Poppins', 'Work Sans', Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 24px;
}
.fmha.fmha--member .fmha__cta:hover, .fmha.fmha--member .fmha__cta:focus-visible { background: #0E1A27; color: #FFFFFF !important; }
.fmha.fmha--member .fmha__note { font-family: 'Poppins', 'Work Sans', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; color: #4A4A4A; }

.fmha .fmha__cta:focus-visible, .fmha .fmha__dismiss:focus-visible { outline: 3px solid #0E1A27; outline-offset: 3px; }
.fmha:not(.fmha--member) .fmha__cta:focus-visible { outline-color: #231F20; }

/* ---------- The rail beside the post (wide screens with room) ---------- */
.fmha-rail { display: none; }
.fmha-rail-on .entry-content:has(.fmha-rail) { position: relative; }
.fmha-rail-on .fmha-rail { display: block; position: absolute; top: 0; bottom: 0; left: calc(100% + 24px); width: 256px; }
/* 1.2.0: the panel stays in view while reading. It never stuck before: the theme gives .site
   overflow-x: hidden (buddyboss-theme theme.css:5920), which makes .site the sticky scroll container,
   and .site never scrolls (the window does). overflow-x: clip clips the same way without becoming a
   scroll container. The rail box spans the article (top 0, bottom 0), so the panel stops at the end
   of the article, before the comments and the footer. The script sets top (24 px, 56 px with the
   admin bar). */
@supports (overflow: clip) {
	html.fmha-rail-on body:not(.page-template-page-fullscreen) .site { overflow-x: clip; }
}
.fmha-rail-on .fmha-rail .fmha-rail__in { position: sticky; top: 24px; }
.fmha-rail .fmha { margin: 0; }
.fmha-rail-on .fmha-slot--after, .fmha-rail-on .fmha-slot--more, .fmha-rail-side .fmha-slot--more { display: none; }

/* ---------- The panel (1.2.0): two or three cards, the first in full, the rest compact ---------- */
.fmha-panel { display: flex; flex-direction: column; gap: 16px; }
.fmha-panel .fmha-panel__card[hidden] { display: none !important; }
.fmha-panel .fmha { margin: 0; }
.fmha-panel .fmha .fmha__txt { padding: 16px !important; }
.fmha-panel .fmha .fmha__label { margin-bottom: 8px; }
.fmha-panel .fmha .fmha__art svg { height: 80px !important; }
.fmha-panel .fmha:not(.fmha--member) .fmha__title { font-size: 18px !important; }
.fmha-panel .fmha.fmha--member .fmha__title { font-size: 16px !important; }
.fmha-panel .fmha:not(.fmha--member) .fmha__body { font-size: 15px !important; line-height: 1.45 !important; margin-bottom: 16px !important; }
.fmha-panel .fmha.fmha--member .fmha__body { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 16px !important; }
.fmha-panel .fmha .fmha__note { display: none; }
.fmha-panel .fmha .fmha__cta { display: flex; width: 100%; min-height: 40px; padding: 8px 16px; font-size: 14px; line-height: 20px; text-align: center; }
/* After the lead card: no art and no body, so three fit a laptop screen. The Frame card keeps its
   body, because "We call it the X Frame" is in it (behaviour first, then the name). */
.fmha-panel .fmha-panel__card:not(.fmha-panel__card--lead) .fmha__art { display: none; }
.fmha-panel .fmha-panel__card:not(.fmha-panel__card--lead) .fmha:not(.fmha--frame) .fmha__body { display: none; }
.fmha-panel .fmha-panel__card:not(.fmha-panel__card--lead) .fmha__title { margin-bottom: 12px !important; }
.fmha-panel.fmha-panel--tight .fmha-panel__card--lead .fmha__art { display: none; }
/* 1.1.1: a post that keeps the theme's right sidebar (#secondary) gets the rail card at the end of
   the sidebar, below Recent Comments and the other widgets, never on top of them. */
.fmha-rail-side #secondary .fmha-rail { display: block; position: static; width: auto; margin: 20px 0 0; }
.fmha-rail-side #secondary .fmha-rail .fmha-rail__in { position: static; }
.fmha-rail-side .fmha-slot--after { display: none; }

/* Narrow cards (the rail, small phones): the logo sits on its own line above the eyebrow. */
@container (max-width: 320px) {
	.fmha:not(.fmha--member) .fmha__label { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
	.fmha.fmha--member .fmha__label { gap: 8px; }
	.fmha.fmha--member .fmha__label span, .fmha.fmha--member .fmha__dismiss { white-space: nowrap; }
	.fmha.fmha--member .fmha__label { font-size: 11px !important; letter-spacing: .06em; }
	.fmha.fmha--member .fmha__dismiss { font-size: 12px !important; }
	.fmha:not(.fmha--member) .fmha__art svg, .fmha.fmha--member .fmha__art svg { height: 112px; }
	.fmha:not(.fmha--member) .fmha__txt, .fmha.fmha--member .fmha__txt { padding: 24px 16px; }
	.fmha:not(.fmha--member) .fmha__title { font-size: 20px; }
	.fmha.fmha--member .fmha__title { font-size: 18px; }
	.fmha:not(.fmha--member) .fmha__body { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 16px; }
	.fmha.fmha--member .fmha__body { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 16px; }
	.fmha:not(.fmha--member) .fmha__cta, .fmha.fmha--member .fmha__cta { display: flex; width: 100%; font-size: 14px; line-height: 20px; padding: 12px 16px; text-align: center; }
	.fmha:not(.fmha--member) .fmha__note, .fmha.fmha--member .fmha__note { font-size: 13px !important; }
}

@media (max-width: 480px) {
	.fmha { margin: 32px 0; }
	.fmha .fmha__txt { padding: 24px 16px; }
	.fmha .fmha__art svg { height: 120px; }
	.fmha:not(.fmha--member) .fmha__title { font-size: 22px; }
	.fmha .fmha__body { font-size: 16px; }
	.fmha .fmha__cta { display: flex; width: 100%; text-align: center; }
}
