/* ==========================================================================
   MakeAdera WHY MAKE ADERA PAGE Stylesheet
   Template: why-make-adera-template.php (route: /why-make-adera/)

   Page container, hero canvas, eyebrow, section heading, button and section
   bands are shared components — see page-base.css.
   Author: aderaDev
   ========================================================================== */

/* --------------------------------------------------------------------------
   The four sections: numbered list, each one an anchor target for the
   "Why Make Adera?" nav dropdown.
   -------------------------------------------------------------------------- */
.ma-wma-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ma-wma-item {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin: 0;
	padding: 44px 0;
	border-top: 1px solid var(--makeadera-color-slate-light, #E9E6F0);

	/* The header is sticky-ish tall; keep an anchored section clear of it
	   when the dropdown jumps straight to a fragment. */
	scroll-margin-top: 120px;
}

.ma-wma-item::before {
	content: none;
}

.ma-wma-item:first-child {
	border-top: none;
	padding-top: 0;
}

.ma-wma-item-number {
	flex: 0 0 auto;
	font-family: var(--makeadera-font-mono, 'JetBrains Mono', monospace);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.6;
	padding-top: 6px;
	color: var(--makeadera-color-accent, #C3241D);
}

.ma-wma-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ma-wma-item-title {
	margin: 0 0 16px;
	font-family: var(--makeadera-font-primary, 'Inter', sans-serif);
	font-size: clamp(20px, 2.1vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--makeadera-color-black, #17141F);
}

/* --------------------------------------------------------------------------
   Placeholder shown while a section has no client copy.

   Deliberately looks unfinished — dashed, muted, monospace — so it cannot be
   mistaken for finished content in a review. Remove this rule once every
   section in makeadera_wma_sections() has real body copy.
   -------------------------------------------------------------------------- */
.ma-wma-pending {
	margin: 0;
	padding: 14px 18px;
	border: 1px dashed var(--makeadera-color-border-light, #DEDBE5);
	border-radius: 8px;
	background-color: var(--makeadera-color-bg-soft, #F7F6FA);
	font-family: var(--makeadera-font-mono, 'JetBrains Mono', monospace);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--makeadera-color-gray-mid, #86828F);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.ma-wma-cta {
	background: linear-gradient(180deg, #E1B778 0%, #EFCD99 50%, #FFE3B9 100%) !important;
}

.ma-wma-cta-inner {
	max-width: 640px;
}

.ma-wma-cta-title {
	margin: 0 0 14px;
	font-family: var(--makeadera-font-primary, 'Inter', sans-serif);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--makeadera-color-gold-ink, #31220C) !important;
}

.ma-wma-cta-text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(49, 34, 12, 0.85) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.ma-wma-item {
		flex-direction: column;
		gap: 10px;
		padding: 32px 0;
		scroll-margin-top: 90px;
	}

	.ma-wma-item-number {
		padding-top: 0;
	}
}