/*
 * BeTended Newsletter Page — CSS class name aliases
 * The WordPress newsletter page uses alternate bt-nl-* class names.
 * These aliases apply correct styles to those HTML class names.
 * Applied: 2026-04-07
 */

/* ==========================================================================
   NEWSLETTER HERO — class name aliases
   HTML uses: .bt-nl-hero__title, .bt-nl-hero__subtitle
   CSS has:   .bt-nl-hero__heading, .bt-nl-hero__sub
   ========================================================================== */

.bt-nl-hero__title {
	font-family: var(--bt-font-heading);
	font-size: clamp(28px, 4vw, 42px);
	color: var(--bt-white);
	margin-bottom: 1rem;
}

.bt-nl-hero__subtitle {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.7;
	margin-bottom: 2rem;
}

/* ==========================================================================
   NEWSLETTER BENEFITS — class name aliases
   HTML uses: .bt-nl-benefits__grid, .bt-nl-benefit-card, .bt-nl-benefit-card__icon
   CSS has:   .bt-nl-benefits__list, .bt-nl-benefits__item, .bt-nl-benefits__icon
   ========================================================================== */

.bt-nl-benefits__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.bt-nl-benefit-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.bt-nl-benefit-card strong {
	display: block;
	font-family: var(--bt-font-heading);
	font-size: 18px;
	color: var(--bt-text-dark);
	margin-bottom: 6px;
}

.bt-nl-benefit-card p {
	font-size: 15px;
	color: var(--bt-text-muted);
	line-height: 1.6;
	margin: 0;
}

.bt-nl-benefit-card__icon {
	font-size: 28px;
	flex-shrink: 0;
	line-height: 1;
}

/* ==========================================================================
   NEWSLETTER SUBSCRIBE CTA — class name alias
   HTML uses: .bt-nl-subscribe
   CSS has:   .bt-nl-cta
   ========================================================================== */

.bt-nl-subscribe {
	background: var(--bt-bg-light);
	text-align: center;
	padding: 4rem 1.5rem;
}

/* ==========================================================================
   NEWSLETTER CTA BUTTON — new class (no existing CSS)
   HTML uses: .bt-nl-cta-btn
   ========================================================================== */

.bt-nl-cta-btn {
	display: inline-block;
	font-family: var(--bt-font-body);
	font-weight: 600;
	font-size: 1.125rem;
	padding: 14px 36px;
	border: none;
	border-radius: var(--bt-radius);
	text-decoration: none;
	cursor: pointer;
	background-color: var(--bt-accent);
	color: var(--bt-white);
	transition: background-color 0.2s ease, transform 0.15s ease;
	background-image: none;
}

.bt-nl-cta-btn:hover,
.bt-nl-cta-btn:focus {
	background-color: var(--bt-accent-dark);
	color: var(--bt-white);
	transform: translateY(-1px);
	text-decoration: none;
	background-size: 0%;
}

/* ==========================================================================
   HOMEPAGE v2 — Decorative SVG accents in hero (CAR-127)
   ========================================================================== */

.bt2-hero {
	position: relative;
	overflow: hidden;
}

.bt2-hero__decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
}

.bt2-hero__decor--star {
	top: 12%;
	right: 8%;
	opacity: 0.7;
	animation: bt2-spin-slow 20s linear infinite;
}

.bt2-hero__decor--circle {
	bottom: -20px;
	left: -40px;
	opacity: 0.5;
}

.bt2-hero__decor--heart {
	top: 60%;
	right: 3%;
	opacity: 0.6;
	animation: bt2-float 6s ease-in-out infinite;
}

@keyframes bt2-spin-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes bt2-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

/* Card image fit for homepage article grid */
.bt2-card__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: var(--bt2-radius-card, 12px) var(--bt2-radius-card, 12px) 0 0;
}

.bt2-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.bt2-card__heading {
	font-family: var(--bt2-font-heading);
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--bt2-neutral-900);
	margin: 0;
}

.bt2-card__heading a {
	color: inherit;
	text-decoration: none;
}

.bt2-card__heading a:hover {
	color: var(--bt2-teal);
}

.bt2-card__excerpt {
	font-size: 0.9375rem;
	color: var(--bt2-neutral-600);
	line-height: 1.6;
	margin: 0;
}

.bt2-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bt2-teal);
	background: var(--bt2-teal-bg);
	padding: 3px 10px;
	border-radius: 50px;
	background-image: none;
}

/* Stats band number styling */
.bt2-stat__number span {
	font-size: 0.6em;
	vertical-align: super;
}