/* Madrose Media — Fairlington Dental blog post enhancements
   Two pieces, both meant to live in the Elementor Theme Builder's
   "Single Post" template (Templates > Theme Builder > Single Post),
   so they apply to every blog post automatically — no per-post editing.

   1. .mm-side-cta   — small sticky card for the sidebar column
   2. .mm-post-cta   — full-width band at the end of the post, holding
                        the real Elementor Shortcode widget for the form

   Same brand palette as the FAQ accordion:
     navy   #1C244B   slate  #405464   green  #47A248
*/

/* ---------- 1. Sidebar CTA card ---------- */

.mm-side-cta {
	position: sticky;
	top: 100px;
	background: #ffffff;
	border-top: 4px solid #47A248;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(28, 36, 75, 0.10);
	padding: 28px 24px;
	margin-bottom: 32px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mm-side-cta__eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #47A248;
	font-weight: 700;
	margin-bottom: 10px;
}

.mm-side-cta__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 21px;
	color: #1C244B;
	margin: 0 0 10px;
	line-height: 1.25;
}

.mm-side-cta__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: #52575D;
	margin: 0 0 20px;
}

.mm-side-cta__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: #1C244B !important;
	text-decoration: none;
	font-size: 15px;
	margin-bottom: 18px;
}
.mm-side-cta__phone:hover { color: #47A248 !important; }
.mm-side-cta__phone svg { width: 16px; height: 16px; fill: #47A248; flex: none; }

.mm-side-cta__button {
	display: block;
	width: 100%;
	text-align: center;
	background: #47A248;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	padding: 14px 18px;
	border-radius: 4px;
	transition: background 0.2s ease;
	box-sizing: border-box;
}
.mm-side-cta__button:hover { background: #3B8A3C; color: #ffffff; }

.mm-side-cta__form { margin-top: 8px; }
.mm-side-cta__form input[type="text"],
.mm-side-cta__form input[type="email"],
.mm-side-cta__form input[type="tel"],
.mm-side-cta__form textarea,
.mm-side-cta__form select {
	border: 1px solid #d7dbe0 !important;
	border-radius: 4px !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	background: #fafbfc !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.mm-side-cta__form input:focus,
.mm-side-cta__form textarea:focus,
.mm-side-cta__form select:focus {
	border-color: #47A248 !important;
	outline: none !important;
}
.mm-side-cta__form .elementor-button,
.mm-side-cta__form button[type="submit"] {
	background: #47A248 !important;
	border-radius: 4px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	width: 100% !important;
}
.mm-side-cta__form .elementor-button:hover,
.mm-side-cta__form button[type="submit"]:hover {
	background: #3B8A3C !important;
}

@media (max-width: 1024px) {
	.mm-side-cta { position: static; }
}

/* ---------- 2. End-of-post CTA + form band ---------- */

.mm-post-cta {
	background: #2C6B2F; /* darkened brand green, for contrast against the slate FAQ section earlier in the post */
	color: #ffffff;
	padding: 64px 24px;
	margin: 48px 0 0;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mm-post-cta__inner { max-width: 640px; margin: 0 auto; text-align: center; }

.mm-post-cta__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(24px, 3.6vw, 32px);
	line-height: 1.2;
	margin: 0 0 14px;
}

.mm-post-cta__text {
	font-size: 16px;
	line-height: 1.65;
	color: #DCEEDD;
	margin: 0 auto 36px;
	max-width: 46ch;
}

/* Card the actual form sits on, so its fields stay legible against the
   green band regardless of the form plugin's own default styling */
.mm-post-cta__form-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 32px 28px;
	text-align: left;
	color: #1C244B;
}

/* Generic skin for Elementor Pro Form widget fields, scoped so it only
   applies inside this card — safe to leave in even if the form markup
   differs slightly, these are broad/defensive selectors. */
.mm-post-cta__form-card input[type="text"],
.mm-post-cta__form-card input[type="email"],
.mm-post-cta__form-card input[type="tel"],
.mm-post-cta__form-card textarea,
.mm-post-cta__form-card select,
.mm-post-cta__form-card .elementor-field {
	border: 1px solid #d7dbe0 !important;
	border-radius: 4px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	background: #fafbfc !important;
}
.mm-post-cta__form-card input:focus,
.mm-post-cta__form-card textarea:focus,
.mm-post-cta__form-card select:focus {
	border-color: #47A248 !important;
	outline: none !important;
}
.mm-post-cta__form-card .elementor-button,
.mm-post-cta__form-card button[type="submit"] {
	background: #47A248 !important;
	border-radius: 4px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
}
.mm-post-cta__form-card .elementor-button:hover,
.mm-post-cta__form-card button[type="submit"]:hover {
	background: #3B8A3C !important;
}

/* Placeholder block — only visible if the real form hasn't been dropped
   in yet, so it's obvious in the Elementor editor what still needs doing */
.mm-post-cta__form-slot-empty {
	border: 2px dashed #c7cdd3;
	border-radius: 6px;
	padding: 40px 20px;
	text-align: center;
	color: #7a828a;
	font-size: 14px;
}

/* ---------- 3. Prev/next post navigation ---------- */

.mm-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 40px 0;
	padding-top: 28px;
	border-top: 1px solid #e5e8eb;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mm-post-nav__link {
	flex: 1;
	text-decoration: none;
	color: #1C244B !important;
	max-width: 46%;
}
.mm-post-nav__link--next { text-align: right; margin-left: auto; }

.mm-post-nav__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #47A248 !important;
	font-weight: 700;
	margin-bottom: 6px;
}

.mm-post-nav__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.4;
	color: #1C244B !important;
	transition: color 0.2s ease;
}
.mm-post-nav__link:hover .mm-post-nav__title { color: #47A248 !important; }

@media (max-width: 560px) {
	.mm-post-cta { padding: 44px 18px; }
	.mm-post-cta__form-card { padding: 24px 18px; }
}

/* ---------- 4. Full single.php template structural styles ---------- */

.mm-post-hero {
	background: #405464;
	color: #ffffff;
	padding: 56px 24px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mm-post-hero__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.2;
	max-width: 900px;
	margin: 0 auto 14px;
}

.mm-post-hero__date {
	font-size: 14px;
	color: #C9D2D9;
}

.mm-post-layout {
	max-width: 1100px;
	margin: 48px auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	/* align-items intentionally left at the default (stretch) so the
	   sidebar column matches the height of the main content column —
	   position: sticky on .mm-side-cta needs that extra height to have
	   room to stay pinned for the length of a long post, instead of
	   running out of container almost immediately. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 900px) {
	.mm-post-layout { grid-template-columns: 1fr; }
}

.mm-post-main { min-width: 0; }

.mm-post-thumb {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 28px;
	display: block;
}

/* Heading scale for post body content — !important because Elementor's
   global Kit typography settings apply broad h1-h6 selectors that would
   otherwise win the cascade regardless of load order. */
.mm-post-main h1,
.mm-post-main h2,
.mm-post-main h3,
.mm-post-main h4,
.mm-post-main h5,
.mm-post-main h6 {
	font-family: 'Montserrat', sans-serif !important;
	color: #1B262C !important;
	line-height: 1.3 !important;
}
.mm-post-main h1 { font-weight: 800 !important; font-size: 30px !important; margin: 44px 0 16px !important; }
.mm-post-main h2 { font-weight: 700 !important; font-size: 24px !important; margin: 40px 0 14px !important; }
.mm-post-main h3 { font-weight: 600 !important; font-size: 19px !important; margin: 28px 0 10px !important; }
.mm-post-main h4 { font-weight: 600 !important; font-size: 17px !important; margin: 24px 0 8px !important; }
.mm-post-main h5 { font-weight: 600 !important; font-size: 15px !important; margin: 20px 0 8px !important; }
.mm-post-main h6 {
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	margin: 20px 0 8px !important;
}

.mm-post-main p { line-height: 1.75; color: #52575D; margin: 0 0 18px; }

/* Links inside post prose — theme/global CSS was rendering these white
   and unreadable; force brand green with a visible underline on hover. */
.mm-post-main a,
.mm-post-main a:visited {
	color: #47A248 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(71, 162, 72, 0.4) !important;
}
.mm-post-main a:hover {
	color: #3B8A3C !important;
	text-decoration-color: #3B8A3C !important;
}

.mm-post-sidebar > * + * { margin-top: 24px; }

.mm-share {
	background: #ffffff;
	border: 1px solid #e5e8eb;
	border-radius: 6px;
	padding: 20px;
}

.mm-share__label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #1C244B;
	margin: 0 0 14px;
}

.mm-share__row { display: flex; gap: 10px; }

.mm-share__row a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f3f5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.mm-share__row a:hover { background: #47A248; }
.mm-share__row a:hover svg { fill: #ffffff; }
.mm-share__row svg { width: 15px; height: 15px; fill: #405464; }

.mm-recent {
	background: #ffffff;
	border: 1px solid #e5e8eb;
	border-radius: 6px;
	padding: 20px;
}

.mm-recent__label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #1C244B;
	margin: 0 0 16px;
}

.mm-recent__item { display: flex; gap: 12px; text-decoration: none; }
.mm-recent__item + .mm-recent__item { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef0f2; }

.mm-recent__thumb {
	width: 56px;
	height: 56px;
	border-radius: 4px;
	object-fit: cover;
	flex: none;
	background: #BECBFF;
}

.mm-recent__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.4;
	color: #1B262C !important;
}
.mm-recent__item:hover .mm-recent__title { color: #47A248 !important; }