/* =====================================================================
   My Conveyancing Specialist — additional homepage section styling
   Plain CSS. Layered ON TOP of the compiled theme stylesheet.

   Load AFTER the main stylesheet so these rules win, either by:
     - enqueueing from a child theme, or
     - pasting into Appearance → Customize → Additional CSS.

   Palette matches the theme:
     blue #4885BA · orange #F5911E · ink #1A2234 · off-white #fafafa · muted #555
   Only touches the new rewrite sections (.mcs-*, .home-faq, .trust-strip).
   ===================================================================== */

:root {
	--mcs-blue: #4885BA;
	--mcs-blue-dark: #3a6c98;
	--mcs-orange: #F5911E;
	--mcs-ink: #1A2234;
	--mcs-muted: #555;
	--mcs-line: #e2e6ea;
	--mcs-tick: #2E9E5B;
	--mcs-shadow: 0 6px 20px rgba(26, 34, 52, 0.08);
	--mcs-shadow-hover: 0 12px 28px rgba(26, 34, 52, 0.14);
	--mcs-ease: 0.25s ease;
}

/* ---------------------------------------------------------------------
   1. Centred section headings — small accent bar underneath
   --------------------------------------------------------------------- */
.mcs-centred h2 {
	position: relative;
	padding-bottom: 18px;
	margin-bottom: 8px;
}
.mcs-centred h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--mcs-blue), var(--mcs-orange));
}

/* ---------------------------------------------------------------------
   2. Banner trust strip — quiet divider pill
   --------------------------------------------------------------------- */
.trust-strip {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(2px);
	letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------------
   3. How it works — connect the step circles, gently
   --------------------------------------------------------------------- */
section.steps .step > div {
	box-shadow: 0 0 0 6px rgba(72, 133, 186, 0.10);
	transition: transform var(--mcs-ease), box-shadow var(--mcs-ease);
}
section.steps .step:hover > div {
	transform: scale(1.08);
	box-shadow: 0 0 0 8px rgba(245, 145, 30, 0.16);
}

/* ---------------------------------------------------------------------
   4. Why use us — card lift + top accent
   --------------------------------------------------------------------- */
.mcs-points-grid > div {
	position: relative;
	overflow: hidden;
	transition: transform var(--mcs-ease), box-shadow var(--mcs-ease);
}
.mcs-points-grid > div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mcs-blue), var(--mcs-orange));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mcs-ease);
}
.mcs-points-grid > div:hover {
	transform: translateY(-4px);
	box-shadow: var(--mcs-shadow-hover);
}
.mcs-points-grid > div:hover::before {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------
   5. What's included / what isn't — tick & cross list markers
   --------------------------------------------------------------------- */
.mcs-included-grid ul {
	list-style: none;
	padding-left: 0;
	margin: 12px 0 0;
}
.mcs-included-grid ul li {
	position: relative;
	padding-left: 32px;
}
.mcs-included-grid .col-in ul li::before,
.mcs-included-grid .col-out ul li::before {
	position: absolute;
	left: 0;
	top: 8px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}
.mcs-included-grid .col-in ul li::before {
	content: "\2713"; /* ✓ */
	color: #fff;
	background: var(--mcs-tick);
}
.mcs-included-grid .col-out ul li::before {
	content: "\2013"; /* – */
	color: var(--mcs-muted);
	background: #e6e8ea;
}
.mcs-included h3 {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------------------------------------------------------------------
   6. Services — card lift + inline links that shift on hover
   --------------------------------------------------------------------- */
.mcs-services-grid > div {
	transition: transform var(--mcs-ease), box-shadow var(--mcs-ease);
	border-left: 3px solid transparent;
}
.mcs-services-grid > div:hover {
	transform: translateY(-4px);
	box-shadow: var(--mcs-shadow-hover);
	border-left-color: var(--mcs-orange);
}
.mcs-services-grid a,
.mcs-info a,
.mcs-points a {
	transition: color var(--mcs-ease);
}
.mcs-services-grid a:hover,
.mcs-info a:hover,
.mcs-points a:hover,
.mcs-included a:hover {
	color: var(--mcs-blue-dark);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   7. FAQ — hover, focus, marker + gentle answer reveal
   --------------------------------------------------------------------- */
.home-faq details summary {
	transition: color var(--mcs-ease);
	outline: none;
}
.home-faq details summary:hover {
	color: var(--mcs-blue);
}
.home-faq details summary:focus-visible {
	outline: 2px solid var(--mcs-blue);
	outline-offset: 4px;
	border-radius: 4px;
}
.home-faq details summary::after {
	transition: transform var(--mcs-ease), color var(--mcs-ease);
}
.home-faq details[open] summary::after {
	color: var(--mcs-orange);
}
.home-faq details[open] > *:not(summary) {
	animation: mcsReveal 0.28s ease both;
}
@keyframes mcsReveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   8. Advice & guides — arrow links
   --------------------------------------------------------------------- */
.mcs-guides-list a {
	position: relative;
	display: inline-block;
	padding-left: 22px;
	transition: color var(--mcs-ease), padding-left var(--mcs-ease);
}
.mcs-guides-list a::before {
	content: "\2192"; /* → */
	position: absolute;
	left: 0;
	color: var(--mcs-orange);
	transition: transform var(--mcs-ease);
}
.mcs-guides-list a:hover {
	color: var(--mcs-blue-dark);
}
.mcs-guides-list a:hover::before {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   9. Closing CTA — richer background + button motion
   --------------------------------------------------------------------- */
.mcs-cta {
	background: linear-gradient(135deg, #24344C 0%, #1A2234 100%);
}
.mcs-cta a:not(.button):hover {
	color: var(--mcs-orange);
}

/* ---------------------------------------------------------------------
   10. Button polish across the new sections (theme buttons have no hover)
   --------------------------------------------------------------------- */
.mcs-centred .button,
.mcs-points .button,
.mcs-services .button,
.mcs-guides .button,
.mcs-cta .button {
	transition: transform var(--mcs-ease), box-shadow var(--mcs-ease), filter var(--mcs-ease);
}
.mcs-centred .button:hover,
.mcs-points .button:hover,
.mcs-services .button:hover,
.mcs-guides .button:hover,
.mcs-cta .button:hover {
	transform: translateY(-2px);
	filter: brightness(0.94);
	box-shadow: 0 8px 18px rgba(26, 34, 52, 0.22);
}

/* ---------------------------------------------------------------------
   11. Responsive spacing tidy-ups
   --------------------------------------------------------------------- */
@media (max-width: 769px) {
	.mcs-info,
	.mcs-points,
	.mcs-included,
	.mcs-services,
	.home-faq,
	.mcs-guides {
		padding: 28px 0;
	}
	.home-faq details summary {
		font-size: 19px;
	}
	.trust-strip {
		font-size: 15px;
		padding: 8px 16px;
	}
}

/* ---------------------------------------------------------------------
   12. Respect reduced-motion preferences
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mcs-points-grid > div,
	.mcs-services-grid > div,
	.mcs-points-grid > div::before,
	.home-faq details[open] > *:not(summary),
	section.steps .step > div,
	.mcs-guides-list a::before,
	.mcs-centred .button,
	.mcs-points .button,
	.mcs-services .button,
	.mcs-guides .button,
	.mcs-cta .button {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}