/**
 * Mainsail Journeys — scoped visual components.
 *
 * These classes are meant to be applied by a site administrator to native
 * WordPress core blocks via the block editor's "Additional CSS Class(es)"
 * field (Advanced panel) when building a Buyer/Seller/Financing guide page.
 * There is no shortcode and no custom block — see docs/MAINSAIL-JOURNEYS.md
 * for why.
 *
 * Continues the same token-with-fallback pattern established in the
 * Mainsail Child Theme's visual skin (Phase 3.3) and reused by Mainsail
 * Communities and Mainsail Testimonials: every color references that
 * theme's CSS custom properties with an inline fallback equal to the same
 * sampled reference colors, so this plugin looks correct whether or not
 * the Mainsail Child Theme is active.
 *
 * All three components below are tightly scoped under their own class name
 * — nothing here targets a bare element selector (no bare `h1`, `ol`, `a`,
 * etc.), so nothing in this stylesheet can leak into unrelated page content
 * or interfere with Kadence's own styling of anything else on the site.
 *
 * No JavaScript accompanies this stylesheet.
 */

/* ----------------------------------------------------------------------
   .mainsail-journey-hero
   Apply to a core "Group" block wrapping an intro heading + paragraph at
   the top of a guide page. Clean, editorial/magazine-style presentation
   (generous whitespace, a thin brand-accent rule under the heading) rather
   than the photo-overlay treatment used for Communities cards — a full
   guide page reads as an article, not a card grid tile.
   ---------------------------------------------------------------------- */

.mainsail-journey-hero {
	max-width: 760px;
	margin: 0 auto 2.5rem;
	padding: 0 0 1.75rem;
	text-align: center;
}

.mainsail-journey-hero > :first-child {
	margin-top: 0;
}

.mainsail-journey-hero::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 1.25rem auto 0;
	background-color: var(--mainsail-color-accent, #24bef5);
	border-radius: 2px;
}

.mainsail-journey-hero p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #5a5a5a;
}

/* ----------------------------------------------------------------------
   .mainsail-journey-steps
   Apply to a core "List" block (ordered list) for step-by-step guide
   content (e.g. "Step 1: Get pre-approved", "Step 2: ..."). Restyles the
   native list markers into large, accent-colored numerals with generous
   spacing — the list items themselves remain ordinary <li> content the
   admin edits normally in the block editor; only presentation is scoped
   here, no content or markup structure is added by this plugin.
   ---------------------------------------------------------------------- */

.mainsail-journey-steps {
	list-style: none;
	counter-reset: mainsail-journey-step;
	margin: 0 0 2rem;
	padding: 0;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.mainsail-journey-steps > li {
	position: relative;
	counter-increment: mainsail-journey-step;
	padding: 0 0 1.5rem 3.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	line-height: 1.6;
}

.mainsail-journey-steps > li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.mainsail-journey-steps > li::before {
	content: counter(mainsail-journey-step);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--mainsail-color-accent, #24bef5);
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
}

/* ----------------------------------------------------------------------
   .mainsail-journey-cta
   Apply to a core "Group" block wrapping a short callout paragraph and a
   core "Button" block (e.g. "Contact an agent to get started"). Echoes the
   Phase 1 reference homepage's CTA-tile visual weight (bordered, brand-
   accent-toned box) in a form appropriate for sitting inside a guide page's
   body content rather than a homepage grid.
   ---------------------------------------------------------------------- */

.mainsail-journey-cta {
	max-width: 760px;
	margin: 2.5rem auto;
	padding: 1.75rem;
	border: 1px solid var(--mainsail-color-accent, #24bef5);
	border-radius: 8px;
	background-color: rgba(36, 190, 245, 0.06);
	text-align: center;
}

.mainsail-journey-cta p {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.mainsail-journey-cta p:last-of-type {
	margin-bottom: 1.25rem;
}

/* Restyle a core Button block's own link to the brand accent when it sits
   inside this component, without touching Kadence's or the theme's default
   button styling anywhere else on the site. */
.mainsail-journey-cta .wp-block-button__link {
	background-color: var(--mainsail-color-accent-deep, #40a2d9);
}

.mainsail-journey-cta .wp-block-button__link:hover,
.mainsail-journey-cta .wp-block-button__link:focus {
	background-color: var(--mainsail-color-accent, #24bef5);
}

/* ----------------------------------------------------------------------
   Responsive: at narrow widths, trim the step-number/padding proportions
   slightly so long guide-text doesn't feel cramped against the marker.
   ---------------------------------------------------------------------- */

@media (max-width: 480px) {
	.mainsail-journey-steps > li {
		padding-left: 2.75rem;
	}

	.mainsail-journey-steps > li::before {
		width: 1.9rem;
		height: 1.9rem;
		font-size: 0.9rem;
	}

	.mainsail-journey-cta {
		padding: 1.25rem;
	}
}