/*
 * BFHoF Mailchimp Newsletter -- front-end styles.
 *
 * Colors and fonts come from the site's Elementor global kit, with the kit's
 * current values as fallbacks, so a kit change carries through.
 */

.bfhof-mcn-content,
.bfhof-mcn-past,
.bfhof-mcn-latest {
	--bfhof-mcn-navy: var(--e-global-color-secondary, #092E63);
	--bfhof-mcn-orange: var(--e-global-color-primary, #CD4712);
	--bfhof-mcn-orange-dark: #A5360A;
	--bfhof-mcn-ink: #233B6B;
	--bfhof-mcn-muted: #5b6577;
	--bfhof-mcn-rule: #dde2ea;
	--bfhof-mcn-heading-font: var(--e-global-typography-primary-font-family, "Roboto Condensed"), sans-serif;
	/* Buttons and "Read more" links share the main nav's type through the
	 * Elementor global "Nav & Buttons" (Site Settings > Typography). */
	--bfhof-mcn-button-font: var(--e-global-typography-bfhofnav-font-family, "Roboto Condensed"), sans-serif;
	--bfhof-mcn-button-size: var(--e-global-typography-bfhofnav-font-size, 18px);
	--bfhof-mcn-button-weight: var(--e-global-typography-bfhofnav-font-weight, 900);
}

/* ── Newsletter body ─────────────────────────────────────────────── */

.bfhof-mcn-content {
	max-width: 760px;
	margin: 0 auto;
	color: var(--bfhof-mcn-ink);
	font-size: 17px;
	line-height: 1.7;
}

.bfhof-mcn-content > * {
	margin-top: 0;
	margin-bottom: 1.1em;
}

.bfhof-mcn-content h2,
.bfhof-mcn-content h3,
.bfhof-mcn-content h4 {
	color: var(--bfhof-mcn-navy);
	font-family: var(--bfhof-mcn-heading-font);
	line-height: 1.15;
	text-wrap: balance;
}

.bfhof-mcn-content h2 {
	margin-top: 2.6em;
	margin-bottom: 0.6em;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Short orange rule under each section headline. */
.bfhof-mcn-content h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 0.45em;
	background: var(--bfhof-mcn-orange);
}

.bfhof-mcn-content h2.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

.bfhof-mcn-content h3 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
}

/* A subhead straight after a headline belongs to it. */
.bfhof-mcn-content h2 + h3,
.bfhof-mcn-content h2 + p.has-text-align-center {
	margin-top: -0.2em;
	color: var(--bfhof-mcn-muted);
	font-weight: 400;
}

.bfhof-mcn-content h4 {
	margin-top: 1.5em;
	font-size: 1.15rem;
	font-weight: 700;
}

.bfhof-mcn-content .has-text-align-center {
	text-align: center;
}

.bfhof-mcn-content a {
	color: var(--bfhof-mcn-orange);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bfhof-mcn-content a:hover,
.bfhof-mcn-content a:focus-visible {
	color: var(--bfhof-mcn-navy);
}

/* "Read more" links use the main nav's type: Roboto Condensed, black
 * weight, uppercase. A paragraph that holds nothing but the link (the
 * trailing dots included) takes the same type so they match. */
.bfhof-mcn-content a.bfhof-mcn-more,
.bfhof-mcn-content p:has(> a.bfhof-mcn-more:only-child) {
	color: var(--bfhof-mcn-orange);
	font-family: var(--bfhof-mcn-button-font);
	font-size: var(--bfhof-mcn-button-size);
	font-weight: var(--bfhof-mcn-button-weight);
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: uppercase;
}

/* 44px-tall tap area for fingers; the negative margin cancels the padding,
 * so the line does not grow. */
.bfhof-mcn-content a.bfhof-mcn-more {
	display: inline-block;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: -12px;
	margin-bottom: -12px;
	text-decoration: none;
}

.bfhof-mcn-content a.bfhof-mcn-more strong {
	font-weight: inherit;
}

.bfhof-mcn-content a.bfhof-mcn-more:hover,
.bfhof-mcn-content a.bfhof-mcn-more:focus-visible {
	color: var(--bfhof-mcn-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfhof-mcn-content strong {
	font-weight: 700;
}

.bfhof-mcn-content blockquote {
	margin: 1.6em 0;
	padding: 0.2em 0 0.2em 1.25em;
	border-left: 4px solid var(--bfhof-mcn-orange);
	color: var(--bfhof-mcn-navy);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.55;
}

.bfhof-mcn-content blockquote p {
	margin: 0;
}

.bfhof-mcn-content hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--bfhof-mcn-rule);
}

/* ── Images ──────────────────────────────────────────────────────── */

.bfhof-mcn-content figure {
	margin: 1.75em 0;
}

.bfhof-mcn-content figure img {
	display: block;
	width: 100%;
	height: auto;
}

.bfhof-mcn-content figure a {
	display: block;
}

.bfhof-mcn-content figcaption {
	padding: 0.6em 0 0.7em;
	border-bottom: 1px solid var(--bfhof-mcn-rule);
	color: var(--bfhof-mcn-muted);
	font-size: 0.85em;
	line-height: 1.5;
}

.bfhof-mcn-content figcaption em {
	font-style: normal;
}

.bfhof-mcn-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 1.75em 0;
}

.bfhof-mcn-content .bfhof-mcn-gallery figure {
	margin: 0;
}

.bfhof-mcn-content .bfhof-mcn-gallery img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ── Shared bits ─────────────────────────────────────────────────── */

.bfhof-mcn-date {
	display: inline-block;
	margin: 0;
	padding: 3px 8px;
	background: var(--bfhof-mcn-orange);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}

.bfhof-mcn-button {
	display: inline-block;
	padding: 12px 26px;
	background: var(--bfhof-mcn-orange);
	color: #fff;
	font-family: var(--bfhof-mcn-button-font);
	font-size: var(--bfhof-mcn-button-size);
	font-weight: var(--bfhof-mcn-button-weight);
	letter-spacing: normal;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}

/* Same hover as the site's orange CTA buttons (.orange-btn in the child
 * theme): a darker orange slides in from the left, on a layer behind the
 * label. In the latest-newsletter card it runs when the whole card is
 * hovered, since the card is the link. */
.bfhof-mcn-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.bfhof-mcn-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	box-shadow: inset 0 0 0 var(--bfhof-mcn-orange-dark);
	transition: box-shadow 0.35s cubic-bezier(0.5, 0.25, 0, 1);
}

.bfhof-mcn-button:hover,
a.bfhof-mcn-latest:hover .bfhof-mcn-button {
	color: #fff;
}

.bfhof-mcn-button:hover::before,
.bfhof-mcn-button:focus-visible::before,
a.bfhof-mcn-latest:hover .bfhof-mcn-button::before,
a.bfhof-mcn-latest:focus-visible .bfhof-mcn-button::before {
	box-shadow: inset 600px 0 0 var(--bfhof-mcn-orange-dark);
}

.bfhof-mcn-button:focus-visible {
	outline: 3px solid var(--bfhof-mcn-navy);
	outline-offset: 3px;
	color: #fff;
}

/* ── Latest newsletter (News page) ───────────────────────────────── */

/* The whole card is one link. "a.bfhof-mcn-latest" outranks the theme's
 * link colors so the text stays white. */
a.bfhof-mcn-latest {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	background: var(--bfhof-mcn-navy);
	color: #fff;
	text-decoration: none;
	transition: box-shadow 0.3s ease;
}

a.bfhof-mcn-latest.bfhof-mcn-latest--no-image {
	grid-template-columns: minmax(0, 1fr);
}

/* Same hover as the News cards (Post Loop Item template): a soft shadow
 * and a slow zoom-and-tilt on the image. */
a.bfhof-mcn-latest:hover,
a.bfhof-mcn-latest:focus-visible {
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
	color: #fff;
	text-decoration: none;
}

a.bfhof-mcn-latest:focus-visible {
	outline: 3px solid var(--bfhof-mcn-orange);
	outline-offset: 3px;
}

/* Square, sized by the column; it stays square even when the text runs
 * taller than it. */
.bfhof-mcn-latest__media {
	position: relative;
	display: block;
	align-self: start;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

/* The doubled selector beats Elementor's ".elementor img { height: auto }". */
.bfhof-mcn-latest .bfhof-mcn-latest__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform 0.7s cubic-bezier(0.25, 1, 0.3, 1);
	will-change: transform;
}

a.bfhof-mcn-latest:hover .bfhof-mcn-latest__media img,
a.bfhof-mcn-latest:focus-visible .bfhof-mcn-latest__media img {
	transform: scale(1.05) rotate(1deg);
}

.bfhof-mcn-latest__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(22px, 3vw, 34px);
}

.bfhof-mcn-latest__heading {
	display: block;
	color: #fff;
	font-family: var(--bfhof-mcn-heading-font);
	font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.35rem);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
}

.bfhof-mcn-latest__title {
	display: block;
	color: #fff;
	font-family: var(--bfhof-mcn-heading-font);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
}

.bfhof-mcn-latest__summary {
	display: block;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.6;
}

.bfhof-mcn-latest .bfhof-mcn-button {
	margin-top: 6px;
}


@media (max-width: 767px) {
	a.bfhof-mcn-latest {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Past newsletters (under each newsletter) ────────────────────── */

.bfhof-mcn-past {
	margin-top: 64px;
	padding-top: 36px;
	border-top: 1px solid var(--bfhof-mcn-rule);
}

.bfhof-mcn-past__heading {
	margin: 0 0 22px;
	color: var(--bfhof-mcn-navy);
	font-family: var(--bfhof-mcn-heading-font);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 900;
	text-transform: uppercase;
}

.bfhof-mcn-past__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

/* Same shape as the site's News cards: image over a navy panel. The
 * section sits inside the post-content widget, whose link color would
 * otherwise win, hence the doubled-up selectors. */
.bfhof-mcn-past a.bfhof-mcn-card {
	display: flex;
	flex-direction: column;
	background: var(--bfhof-mcn-navy);
	color: #fff;
	text-decoration: none;
	transition: box-shadow 0.3s ease;
}

.bfhof-mcn-past a.bfhof-mcn-card:hover,
.bfhof-mcn-past a.bfhof-mcn-card:focus-visible {
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
	color: #fff;
	text-decoration: none;
}

.bfhof-mcn-past a.bfhof-mcn-card:hover .bfhof-mcn-card__media img,
.bfhof-mcn-past a.bfhof-mcn-card:focus-visible .bfhof-mcn-card__media img {
	transform: scale(1.05) rotate(1deg);
}

.bfhof-mcn-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #0d3a78;
	overflow: hidden;
}

.bfhof-mcn-past .bfhof-mcn-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform 0.7s cubic-bezier(0.25, 1, 0.3, 1);
}

.bfhof-mcn-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px 18px;
}

.bfhof-mcn-past .bfhof-mcn-card__title {
	color: #fff;
	font-family: var(--bfhof-mcn-heading-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.bfhof-mcn-latest .bfhof-mcn-latest__media img,
	.bfhof-mcn-past .bfhof-mcn-card__media img,
	.bfhof-mcn-button,
	.bfhof-mcn-button::before {
		transition: none;
	}

	a.bfhof-mcn-latest:hover .bfhof-mcn-latest__media img,
	a.bfhof-mcn-latest:focus-visible .bfhof-mcn-latest__media img,
	.bfhof-mcn-past a.bfhof-mcn-card:hover .bfhof-mcn-card__media img,
	.bfhof-mcn-past a.bfhof-mcn-card:focus-visible .bfhof-mcn-card__media img {
		transform: none;
	}
}