/*
 * MiraeLaw Single Practice Area — On This Page nav, Service Sections,
 * Related Practice Areas, CTA
 *
 * Renders entirely through [miraelaw_practice_area_jump_nav] /
 * [miraelaw_practice_area_sections] / [miraelaw_practice_area_related] /
 * [miraelaw_practice_area_cta] (inc/practice-areas/class-practice-area-*.php),
 * not Elementor widgets, so every rule below is load-bearing — same
 * reasoning as practice-area-hero.css. The Service Sections grid reuses the
 * same bordered "ledger" technique already established for
 * practice-areas-grid.css/team-grid.css (container supplies the outer
 * top/left edges, each cell supplies only its own right/bottom edge) with
 * its own class set, since the cell content (number + heading + bullet
 * list) is structurally different from that grid's image+title+blurb cards.
 *
 * The CTA phone link reuses .ml-hero-tel-btn / .ml-hero-tel-region verbatim
 * (home-hero.css, loaded here via the existing
 * miraelaw_child_enqueue_team_cta_assets() helper) — the same pattern
 * already reused by Team, Single Team Member, Areas of Expertise, and
 * Offices. The CTA button can't reuse .ml-hero-cta-primary the same way:
 * that class carries no styling of its own — its terracotta button look
 * comes entirely from Elementor's Global Kit Button defaults, which only
 * apply to an actual Elementor Button widget, not the plain <a> this
 * PHP-rendered CTA uses. .ml-pa-cta-button below reproduces the same look
 * from the (previously unused) --ml-btn-* design tokens instead, so the
 * visual result matches with no new hardcoded values.
 */

/* ---------------------------------------------------------------
 * On This Page — jump nav (navy band directly under the Hero)
 * ------------------------------------------------------------- */
.ml-pa-jump-nav {
	background: var( --ml-primary );
	border-top: 1px solid var( --ml-border-darker );
}

.ml-pa-jump-nav-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding-inline: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.ml-pa-jump-nav-label {
	display: flex;
	align-items: center;
	padding: 14px 20px 14px 0;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-xs );
	letter-spacing: var( --ml-tracking-wide-plus );
	text-transform: uppercase;
	color: var( --ml-tertiary-light );
}

.ml-pa-jump-nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border-left: 1px solid var( --ml-border-darker );
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-sm );
	color: var( --ml-background );
	text-decoration: none;
	transition: background-color var( --ml-transition-base ), color var( --ml-transition-base );
}

.ml-pa-jump-nav-link:hover,
.ml-pa-jump-nav-link:focus-visible {
	background: var( --ml-primary-tint );
	color: var( --ml-accent-light );
}

.ml-pa-jump-nav-num {
	color: var( --ml-accent );
}

/* ---------------------------------------------------------------
 * Service Sections — ledger grid
 * ------------------------------------------------------------- */
.ml-pa-sections {
	background: var( --ml-background );
}

.ml-pa-sections-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 88px ) 24px;
}

.ml-pa-sections-grid {
	display: grid;
	/* min(340px, 100%) caps the track's minimum at the container's own
	   width: below a ~388px viewport (340px card + 24px×2 section
	   padding), a bare 340px minimum doesn't shrink to fit and forces the
	   grid wider than its container — confirmed overflowing 14-29px and
	   producing real page-level horizontal scroll at 360px and below.
	   Same fix already applied to practice-areas-grid.css's identical
	   pattern; min() is a no-op everywhere 340px already fits. */
	grid-template-columns: repeat( auto-fill, minmax( min( 340px, 100% ), 1fr ) );
	gap: 0;
	border-top: 1px solid var( --ml-border );
	border-left: 1px solid var( --ml-border );
}

.ml-pa-section-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp( 24px, 3vw, 36px );
	background: var( --ml-background );
	border-right: 1px solid var( --ml-border );
	border-bottom: 1px solid var( --ml-border );
	/* Keeps a jump-nav / in-page link's target from landing flush against
	   the viewport top, same technique as practice-areas-grid.css's cards. */
	scroll-margin-top: 24px;
	transition: background-color var( --ml-transition-base );
}

.ml-pa-section-card:hover {
	background: var( --ml-surface );
}

.ml-pa-section-num {
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-sm );
	color: var( --ml-accent );
}

.ml-pa-section-title {
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	color: var( --ml-primary );
}

.ml-pa-section-bullets {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var( --ml-neutral-200 );
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ml-pa-section-bullets li {
	display: flex;
	gap: 11px;
	font-size: 14.5px;
	line-height: var( --ml-leading-comfortable );
	color: var( --ml-neutral-600 );
}

.ml-pa-section-bullet-mark {
	flex: none;
	font-family: var( --ml-font-mono );
	/* Distinguishes bullets from the ledger's borders — a green already
	   established for this exact glyph on the approved design, not present
	   as a design-system token elsewhere, so kept local. */
	color: #3E7561;
}

/* ---------------------------------------------------------------
 * Related Practice Areas — index rows
 * ------------------------------------------------------------- */
.ml-pa-related {
	background: var( --ml-surface );
	border-top: 1px solid var( --ml-border );
}

.ml-pa-related-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 88px ) 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	align-items: flex-start;
}

.ml-pa-related-heading {
	margin: 0;
	flex: 1 1 260px;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: clamp( 28px, 3.6vw, 40px );
	line-height: 1.1;
	color: var( --ml-primary );
}

.ml-pa-related-list {
	flex: 2 1 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var( --ml-border );
}

.ml-pa-related-link {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 20px 4px;
	border-bottom: 1px solid var( --ml-neutral-200 );
	text-decoration: none;
	color: var( --ml-primary );
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	transition: background-color var( --ml-transition-base );
}

.ml-pa-related-link:hover {
	background: var( --ml-background );
}

.ml-pa-related-arrow {
	flex: none;
	color: var( --ml-secondary );
	font-size: 18px;
}

/* ---------------------------------------------------------------
 * FAQ — heading, intro, and the constrained-width column around the
 * existing, unmodified [miraelaw_faq] accordion (see
 * class-practice-area-faq.php). Background/border/padding/heading
 * treatment mirror .ml-pa-related directly above; the heading specifically
 * reuses --ml-text-h2 / --ml-leading-h2 (the shared, cross-section H2
 * tokens design-system.css already defines for exactly this purpose,
 * and the same pair Home's own FAQ section heading already uses in
 * home-faq.css) rather than a new one-off clamp().
 * ------------------------------------------------------------- */
.ml-pa-faq {
	background: var( --ml-background );
	border-top: 1px solid var( --ml-border );
}

.ml-pa-faq-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 88px ) 24px;
}

.ml-pa-faq-heading {
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: var( --ml-text-h2 );
	line-height: var( --ml-leading-h2 );
	color: var( --ml-primary );
}

.ml-pa-faq-intro {
	margin: 16px 0 0;
	max-width: 60ch;
	font-size: var( --ml-text-md );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-600 );
}

.ml-pa-faq-accordion {
	margin-top: clamp( 24px, 4vw, 40px );
}

/* ---------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------- */
.ml-pa-cta {
	background: var( --ml-primary );
}

.ml-pa-cta-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 40px, 6vw, 64px ) 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.ml-pa-cta-heading {
	margin: 0;
	max-width: 22em;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: clamp( 26px, 3.4vw, 38px );
	line-height: 1.15;
	color: var( --ml-background );
}

.ml-pa-cta-description {
	margin-top: 12px;
	max-width: 32em;
	font-size: var( --ml-text-md );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}

.ml-pa-cta-description a {
	color: var( --ml-accent-light );
}

.ml-pa-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.ml-pa-cta-button {
	display: inline-block;
	padding: var( --ml-btn-padding-y ) var( --ml-btn-padding-x );
	background: var( --ml-btn-primary-bg );
	/* Matches the Elementor Global Kit's own button text color, which every
	   other CTA on this site inherits automatically — this is the one
	   value here with no matching --ml-btn-* token, documented rather than
	   left unexplained. */
	color: #FFFFFF;
	text-decoration: none;
	font-weight: var( --ml-btn-font-weight );
	font-size: var( --ml-btn-font-size );
	border-radius: var( --ml-btn-radius );
	transition: background-color var( --ml-transition-base );
}

.ml-pa-cta-button:hover,
.ml-pa-cta-button:focus-visible {
	background: var( --ml-btn-primary-bg-hover );
	color: #FFFFFF;
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states
 * ------------------------------------------------------------- */
.ml-pa-related a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}

.ml-pa-cta a:focus-visible {
	outline: 3px solid var( --ml-accent-light );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.ml-pa-jump-nav-link,
	.ml-pa-section-card,
	.ml-pa-related-link,
	.ml-pa-cta-button {
		transition: none;
	}
}