/*
 * Stature — header refinements (inc/stature-newsletter-page.php).
 *
 * 1. The "Get Strength & Longevity Insights →" invitation: charcoal-black,
 *    white lettering, a restrained red arrow. Desktop: in the masthead, under
 *    the About / For Professionals / Editorial Approach links. Tablet and
 *    phone: a centred row under the mobile masthead. Never sticky, never a
 *    popup.
 * 2. The global header is no longer sticky. Foxiz used to give the mobile
 *    header holder its sticky class, which the Additional CSS also used to
 *    keep the publication strip beneath the mobile masthead. The holder now
 *    keeps that column order on its own.
 */

/* ---------- The button ---------- */

.stature-sub-cta {
	align-items: center;
	background: #1b1b1b;
	border: 1px solid #1b1b1b;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	color: #fff !important;
	display: inline-flex;
	font-family: Outfit, "Helvetica Neue", Arial, sans-serif;
	font-size: 13.5px;
	font-style: normal;
	font-weight: 600;
	gap: 11px;
	justify-content: center;
	letter-spacing: .1em;
	line-height: 1.2;
	min-height: 44px;
	padding: 0 22px;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color .2s ease, border-color .2s ease;
	vertical-align: middle;
	white-space: nowrap;
}

.stature-sub-cta__label {
	color: inherit !important;
}

/* The shorter wording is used only on narrow phones (below). */
.stature-sub-cta__short {
	display: none;
}

.stature-sub-cta__arrow {
	color: #ff4d4d;
	display: inline-block;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	position: relative;
	top: -1px;
}

.stature-sub-cta:hover,
.stature-sub-cta:focus-visible {
	background: #000;
	border-color: #000;
	color: #fff !important;
}

.stature-sub-cta:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

[data-theme="dark"] .stature-sub-cta {
	background: #f4f4f4;
	border-color: #f4f4f4;
	color: #111 !important;
}

[data-theme="dark"] .stature-sub-cta__arrow {
	color: #c90000;
}

[data-theme="dark"] .stature-sub-cta:hover,
[data-theme="dark"] .stature-sub-cta:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #111 !important;
}

[data-theme="dark"] .stature-sub-cta:focus-visible {
	outline-color: #f4f4f4;
}

/* ---------- Desktop (1025px and up): in the masthead ----------
   The masthead's right-hand column wraps: About · For Professionals ·
   Editorial Approach and Search on the first line, the invitation on its own
   line beneath them, aligned to the same right edge. */

@media (min-width: 1025px) {
	.header-template .elementor-element.elementor-element-a8e21a7 {
		align-content: center;
		flex-wrap: wrap;
		row-gap: 16px; /* comfortable space between the utility links and the invitation */
	}

	.header-template .elementor-element.stature-sub-cta-holder {
		flex: 0 0 100%;
		max-width: 100%;
		order: 10; /* after Search, on its own line */
		text-align: right;
		width: 100%;
	}

	.header-template .stature-sub-cta-holder .elementor-shortcode,
	.header-template .stature-sub-cta-holder .elementor-widget-container {
		display: block;
		line-height: 0;
	}
}

/* ---------- Tablet and phone (1024px and below) ---------- */

.stature-sub-mobile {
	display: none;
}

@media (max-width: 1024px) {
	/* Mobile masthead first, then the publication strip (was done by the sticky class). */
	.header-template #header-template-holder {
		display: flex;
		flex-direction: column;
	}

	#header-mobile .stature-sub-mobile {
		background: #fff;
		border-top: 1px solid #e6e6e6;
		box-sizing: border-box;
		display: block;
		padding: 12px 20px 14px;
		text-align: center;
		width: 100%;
	}

	#header-mobile .stature-sub-mobile .stature-sub-cta {
		font-size: 13px;
		letter-spacing: .09em;
		max-width: 100%;
		min-height: 46px;
		padding: 0 20px;
	}

	[data-theme="dark"] #header-mobile .stature-sub-mobile {
		background: transparent;
		border-top-color: #333;
	}
}

/* Narrow phones: "Get Stature Stories →", same size. */
@media (max-width: 419px) {
	#header-mobile .stature-sub-mobile .stature-sub-cta__long {
		display: none;
	}

	#header-mobile .stature-sub-mobile .stature-sub-cta__short {
		display: inline;
	}

	#header-mobile .stature-sub-mobile .stature-sub-cta {
		letter-spacing: .1em;
		padding: 0 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stature-sub-cta {
		transition: none;
	}
}