/**
Theme Name: cultivating-digital-child
Author: Cultivating Digital
Author URI: https://cultivatingdigital.com/
Description: Cultivating Digital child theme for MedCycle Solutions. Astra + Gutenberg + Spectra Pro.
Version: 2026.10.21
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cultivating-digital-child
Template: astra
*/

/* ==========================================================================
   MedCycle Solutions design tokens

   These are for child-theme rules only. The GLOBAL palette and typography
   live in the Astra Customizer and must never be written from wp-cli.
   The tokens below point at the Customizer palette rather than repeating
   hex values, so there is one place to change a brand color. (2026.09.10)
   ========================================================================== */

:root {
	/* Aliases only. The Astra Customizer palette is the single source of truth;
	   change a brand color there and every rule below follows. */
	--mcs-accent:  var(--ast-global-color-0); /* orange #DE773F: buttons, links, active */
	--mcs-blue:    var(--ast-global-color-1); /* blue #267CC0: link hover, highlights */
	--mcs-primary: var(--ast-global-color-2); /* slate #1F2A33: headings, footer */
	--mcs-text:    var(--ast-global-color-3); /* black: body */
	--mcs-white:   var(--ast-global-color-4);
	--mcs-bg-2:    var(--ast-global-color-5); /* #F0F5FA */
	--mcs-bg-1:    var(--ast-global-color-7); /* #E0E6EB: borders, soft sections */
}

/* ==========================================================================
   Child theme rules

   Additive only. If Spectra exposes it as a block attribute (padding, margin,
   background, min-height, gap, alignment, typography size), set it on the
   block and leave it out of this file. Reserve this stylesheet for what
   Spectra cannot own: SVG and pseudo-element styling, cross-child flex
   coordination, responsive column widths, and CSS-only layout effects.

   Do not use the Customizer's Additional CSS panel. Everything lands here.
   ========================================================================== */

/* -- Sections added during the rebuild go below this line. -- */

/* ==========================================================================
   Header: "Let's Talk" button arrow (2026.09.10)
   Production's Elementor button carried a right-arrow icon. Astra's header
   button has no icon option, so it is drawn here as a decorative pseudo-
   element that follows the button's text color, including on hover.
   ========================================================================== */

.ast-header-button-1 .ast-custom-button::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 13px;
	vertical-align: -0.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   Footer columns (2026.09.10)
   Content lives in Astra Footer Builder HTML elements 1-3 (Customizer).
   Colors come from the Customizer; this only styles the markup inside them.
   ========================================================================== */

.site-footer .ast-builder-html-element p {
	font-size: 16px;
}

.site-footer .mcs-footer-logo img {
	width: 139px;
	height: auto;
}

.site-footer .mcs-footer-heading {
	margin: 0 0 1rem;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mcs-white);
}

.site-footer .mcs-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .mcs-footer-links li {
	margin: 0 0 0.5rem;
	font-size: 15px;
}

.site-footer .mcs-footer-links a {
	text-decoration: none;
}

.site-footer .mcs-footer-ma {
	margin: 1.5rem 0 0;
}

.site-footer .mcs-footer-ma img {
	width: 258px;
	max-width: 100%;
	height: auto;
}

.site-footer .mcs-footer-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0 0;
}

.site-footer .mcs-footer-badges img {
	display: block;
	height: auto;
}

/* ==========================================================================
   Rebuild base (2026.09.22)
   Shared rules for pages converted from Elementor. Per-page layout and type
   live in css/pages/page-<ID>.css, generated from each page's Elementor
   settings and loaded only on that page (see functions.php).
   ========================================================================== */

.mcs-sec,
.mcs-con {
	box-sizing: border-box;
}

.mcs-sec {
	margin: 0 !important;
}

.mcs-con .wp-block-uagb-advanced-heading .uagb-heading-text {
	margin: 0;
}

.mcs-con p:last-child,
.mcs-con .wp-block-list:last-child {
	margin-bottom: 0;
}

/* Icons: Font Awesome paths inlined as SVG, sized by font-size. */
.mcs-icon {
	display: inline-block;
	font-size: 40px;
	line-height: 1;
	color: var(--mcs-accent);
}

.mcs-icon svg {
	display: inline-block;
	width: 1em;
	height: 1em;
}

/* Icon boxes and image boxes, converted as small cards. */
.mcs-icon-box,
.mcs-image-box {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 12px;
	padding: 0 !important;
	text-align: center;
}

.mcs-imagebox__img img {
	margin: 0 auto;
}

/* FAQs: native <details>, accessible without JavaScript. */
.mcs-faq-list {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 12px;
	padding: 0 !important;
}

.mcs-faq {
	border: 1px solid var(--mcs-bg-1);
	border-radius: 8px;
	padding: 16px 20px;
	background: var(--mcs-white);
}

.mcs-faq > summary {
	font-weight: 600;
	cursor: pointer;
	color: var(--mcs-primary);
}

.mcs-faq[open] > summary {
	margin-bottom: 12px;
	color: var(--mcs-accent);
}

/* Former carousels render as a static grid of cards. */
.mcs-carousel-grid {
	padding: 0 !important;
}

/* Latest posts grid (Home and Blogs). */
.mcs-posts.wp-block-latest-posts.is-grid li {
	background: var(--mcs-white);
	border: 1px solid var(--mcs-bg-1);
	border-radius: 12px;
	padding: 0 0 20px;
	overflow: hidden;
}

.mcs-posts .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.mcs-posts li > a,
.mcs-posts .wp-block-latest-posts__post-date,
.mcs-posts .wp-block-latest-posts__post-excerpt {
	display: block;
	padding: 0 20px;
}

.mcs-posts li > a {
	margin-top: 16px;
	font-weight: 600;
	color: var(--mcs-primary);
	text-decoration: none;
}

/* Buttons that carried an arrow icon in Elementor. */
.mcs-btn-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 10px;
	vertical-align: -0.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hover reveal, ported from the Elementor kit's custom CSS. */
.reveal-text {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	transform: translateY(10px);
}

.hover-container:hover .reveal-text,
.hover-container:focus-within .reveal-text {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Careers application form. */
.mcs-careers-form {
	margin-top: 1rem;
}

/* Team bios: Elementor popups converted to native <details> (2026.09.22). */
.mcs-bio > summary {
	cursor: pointer;
	list-style: none;
}

.mcs-bio > summary::-webkit-details-marker {
	display: none;
}

.mcs-bio > summary::after {
	content: " +";
}

.mcs-bio[open] > summary::after {
	content: " \2212";
}

.mcs-bio[open] > summary {
	margin-bottom: 12px;
}

.mcs-bio .mcs-bio__text {
	text-align: left;
	font-size: 16px;
}

/* Gravity Forms on converted pages (2026.09.22) */
.entry-content .wp-block-uagb-container > .gform_wrapper { width: 100%; }
.page-id-104 .mcs-c-d09ddc3 > .gform_wrapper { width: min(1200px, calc(100vw - 48px)) !important; max-width: none; align-self: center; flex-shrink: 0; }
.gform-theme--orbital .gfield--type-checkbox .gfield_checkbox { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; }
.gform-theme--orbital .gfield--type-checkbox .gchoice { width: auto !important; }
.gform-theme--orbital .gform_footer .gform_button { min-width: 160px; }

/* Contact info row: the email column was removed, so center the remaining two (2026.09.22) */
.page-id-104 .entry-content .mcs-c-b81eaae { justify-content: center !important; }

/* Single blog posts: Astra native (replaces Elementor "Single Blog Post" template 4588), 2026.09.22 */
.single-post .ast-single-entry-banner { position: relative; isolation: isolate; min-height: 232px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: var(--mcs-bg-1, #2b6cb0) url('/wp-content/uploads/2026/06/mc-service-page-bg.jpg') bottom center / cover no-repeat; text-align: center; }
.single-post .ast-single-entry-banner::before { content: ""; position: absolute; inset: 0; background: var(--mcs-blue); opacity: .54; z-index: -1; }
.single-post .ast-single-entry-banner .entry-title { color: #fff; font-size: 36px; font-weight: 700; line-height: 1.25; max-width: 1000px; margin: 0 auto; }
.single-post .ast-single-entry-banner .entry-meta, .single-post .ast-single-entry-banner .entry-meta * { color: rgba(255,255,255,.9); }
.single-post #secondary { border-left: 1px solid #e2e2e2; padding-left: 40px; }
.single-post .mcs-side-title { font-size: 22px; margin-bottom: 16px; }
.single-post .mcs-side-posts { padding-left: 0; }
.single-post .mcs-side-posts li { margin-bottom: 16px; overflow: hidden; }
.single-post .mcs-side-posts li a { font-weight: 600; line-height: 1.35; }
.single-post .mcs-side-posts .wp-block-latest-posts__featured-image img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.single-post .mcs-side-form { margin-top: 32px; padding: 24px; background: var(--mcs-bg-1, #f3f7fb); border-radius: 8px; }
.single-post .mcs-side-form h3 { margin-top: 0; font-size: 20px; }
@media (max-width: 921px) {
  .single-post #secondary { border-left: 0; padding-left: 0; border-top: 1px solid #e2e2e2; padding-top: 32px; }
}
@media (max-width: 544px) {
  .single-post .ast-single-entry-banner { min-height: 160px; }
  .single-post .ast-single-entry-banner .entry-title { font-size: 25px; }
}

/* Blogs page: paginated Query Loop styled like the latest-posts cards (2026.09.22) */
.mcs-query .wp-block-post-template { gap: 24px; list-style: none; padding: 0; margin: 0; }
.mcs-query .wp-block-post { background: var(--mcs-white); border: 1px solid var(--mcs-bg-1); border-radius: 12px; overflow: hidden; padding: 0 0 20px; display: flex; flex-direction: column; }
.mcs-query .wp-block-post-featured-image { margin: 0 0 16px; }
.mcs-query .wp-block-post-featured-image img { width: 100%; height: 200px; object-fit: cover; }
.mcs-query .wp-block-post-date, .mcs-query .wp-block-post-title, .mcs-query .wp-block-post-excerpt { padding: 0 20px; margin: 0 0 8px; }
.mcs-query .wp-block-post-date { font-size: 14px; opacity: .8; }
.mcs-query .wp-block-post-title { font-size: 18px; line-height: 1.35; }
.mcs-query .wp-block-post-title a { font-weight: 600; color: var(--mcs-primary); text-decoration: none; }
.mcs-query .wp-block-post-excerpt__more-text { display: none; }
.mcs-query .wp-block-query-pagination { margin-top: 32px; gap: 8px; font-weight: 600; }
.mcs-query .wp-block-query-pagination-numbers .page-numbers { display: inline-block; min-width: 36px; padding: 4px 10px; text-align: center; border-radius: 6px; }
.mcs-query .wp-block-query-pagination-numbers .current { background: var(--mcs-primary); color: #fff; }
@media (max-width: 921px) { .mcs-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 544px) { .mcs-query .wp-block-post-template { grid-template-columns: 1fr !important; } }

/* --------------------------------------------------------------------------
   Resources (4457): links inside the blue "Coding and Billing Resources" band.
   Astra's global link colour is palette 0 (orange #DE773F), which fails against
   the blue. Spectra has no link-colour attribute on a container, so this is a
   genuine child-theme gap rather than an override of a block value.
   Note: mcs-c-d31cd99 is a converter-generated class. If page-4457.css is ever
   regenerated, confirm this selector still matches.
   -------------------------------------------------------------------------- */

.page-id-4457 .mcs-c-d31cd99 a,
.page-id-4457 .mcs-c-d31cd99 a:visited {
	color: var(--ast-global-color-4);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-id-4457 .mcs-c-d31cd99 a:hover,
.page-id-4457 .mcs-c-d31cd99 a:focus {
	color: var(--ast-global-color-4);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Icon treatment — corrected 2026-10-02.

   What went wrong: production renders these with Elementor's "stacked" view,
   which is a filled light box with a coloured icon inside. The converter
   dropped the box and wrote the BOX's background colour (--mcs-bg-1, #E0E6EB)
   onto the ICON's text colour, so the icon became light gray on white and
   effectively disappeared. That is the "white on white / gray on white" the
   client reported.

   The earlier attempt at this failed because the generated rules are
   `.page-id-NNNN .mcs-e-XXXX .mcs-iconbox__icon` (three classes), not the
   single class it looked like through a truncated grep. These use !important
   rather than a specificity arms race with ~50 generated rules. Icon colour is
   not a Spectra block attribute, so there is no block-level value being
   overridden here.
   ========================================================================== */

.mcs-icon.mcs-iconbox__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px !important;
	width: 64px !important;
	min-width: 64px;
	max-width: 64px;
	height: 64px !important;
	padding: 14px;
	box-sizing: border-box;
	align-self: center;
	border-radius: 10px;
	background-color: var(--mcs-bg-1) !important;
	color: var(--mcs-blue) !important;
	font-size: 32px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mcs-icon.mcs-iconbox__icon svg {
	width: 100%;
	height: 100%;
}

/* Hover reverses: box goes blue, icon goes light. */
.mcs-icon-box:hover .mcs-icon.mcs-iconbox__icon,
.mcs-image-box:hover .mcs-icon.mcs-iconbox__icon,
a:hover .mcs-icon.mcs-iconbox__icon {
	background-color: var(--mcs-blue) !important;
	color: var(--ast-global-color-4) !important;
}

/* On the brand-blue and dark bands the light box would glare, so invert:
   white box, blue icon. Generated from every container carrying a
   --mcs-blue / --mcs-primary / --mcs-secondary background. */
.mcs-c-00a6d22 .mcs-icon.mcs-iconbox__icon,
.mcs-c-1082a190 .mcs-icon.mcs-iconbox__icon,
.mcs-c-13304934 .mcs-icon.mcs-iconbox__icon,
.mcs-c-2280c86 .mcs-icon.mcs-iconbox__icon,
.mcs-c-23cddd5 .mcs-icon.mcs-iconbox__icon,
.mcs-c-3d56142 .mcs-icon.mcs-iconbox__icon,
.mcs-c-3da981c0 .mcs-icon.mcs-iconbox__icon,
.mcs-c-47d9c8e0 .mcs-icon.mcs-iconbox__icon,
.mcs-c-4930575 .mcs-icon.mcs-iconbox__icon,
.mcs-c-60516dfe .mcs-icon.mcs-iconbox__icon,
.mcs-c-64689850 .mcs-icon.mcs-iconbox__icon,
.mcs-c-702547f .mcs-icon.mcs-iconbox__icon,
.mcs-c-75a9c142 .mcs-icon.mcs-iconbox__icon,
.mcs-c-7be7126b .mcs-icon.mcs-iconbox__icon,
.mcs-c-978b976 .mcs-icon.mcs-iconbox__icon,
.mcs-c-bc59220 .mcs-icon.mcs-iconbox__icon,
.mcs-c-bd892a2 .mcs-icon.mcs-iconbox__icon,
.mcs-c-c2d0b6b .mcs-icon.mcs-iconbox__icon,
.mcs-c-d20bfb5 .mcs-icon.mcs-iconbox__icon,
.mcs-c-d31cd99 .mcs-icon.mcs-iconbox__icon {
	background-color: var(--ast-global-color-4) !important;
	color: var(--mcs-blue) !important;
}

/* ==========================================================================
   Events

   List is the only enabled view (2026-09-29 call: quarterly webinars would
   leave a calendar looking empty). With one view, TEC still renders its view
   switcher, which reads "List List". Hidden rather than disabled, because the
   switcher markup is part of the view template.
   ========================================================================== */

.tribe-events-c-view-selector,
.tribe-events-header__events-bar {
	display: none !important;
}

/* [mcs_events] embed. TEC's own [tribe_events] embed is a Pro feature, so this
   is our markup and our styling. No time is printed: the events are all-day
   placeholders until real start times arrive. */

.mcs-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.mcs-events__item {
	display: flex;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--mcs-bg-1);
	border-radius: 12px;
	background: var(--ast-global-color-4);
}

.mcs-events__date {
	flex: 0 0 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 64px;
	border-radius: 10px;
	background: var(--mcs-bg-1);
	color: var(--mcs-blue);
	line-height: 1.1;
}

.mcs-events__month {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mcs-events__day {
	font-size: 26px;
	font-weight: 700;
}

.mcs-events__when {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--mcs-blue);
	font-weight: 600;
}

.mcs-events__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

.mcs-events__excerpt {
	margin: 0 0 14px;
	font-size: 15px;
}

.mcs-events__cta {
	display: inline-block;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Careers: Healthcare Instructors

   Lexi asked for this not to turn the page into a wall of text, so the four
   long lists sit in native <details> expanders. No JavaScript, keyboard
   accessible, and the content stays in the markup so it is indexable.
   ========================================================================== */

.mcs-c-instructors {
	padding: 70px 15px !important;
	background-color: var(--mcs-bg-2) !important;
}

.mcs-c-instructors > * {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.mcs-instructor-lede {
	font-size: 20px;
	font-weight: 600;
	color: var(--mcs-blue);
	margin-bottom: 1rem;
}

.mcs-instructor-details {
	border: 1px solid var(--mcs-bg-1);
	border-radius: 10px;
	background: var(--ast-global-color-4);
	margin: 0 auto 12px;
	overflow: hidden;
}

.mcs-instructor-details > summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 600;
	font-size: 17px;
	color: var(--mcs-primary);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mcs-instructor-details > summary::-webkit-details-marker {
	display: none;
}

/* Chevron drawn in CSS so it rotates on open without any script. */
.mcs-instructor-details > summary::after {
	content: "";
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mcs-blue);
	border-bottom: 2px solid var(--mcs-blue);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.mcs-instructor-details[open] > summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.mcs-instructor-details > summary:hover,
.mcs-instructor-details > summary:focus-visible {
	color: var(--mcs-blue);
}

.mcs-instructor-details ul {
	margin: 0;
	padding: 0 20px 20px 40px;
}

.mcs-instructor-details li {
	margin-bottom: 8px;
}

.mcs-instructor-close {
	margin-top: 20px;
	font-weight: 600;
}

/* ==========================================================================
   Blog listing: category sidebar, category label on each card
   ========================================================================== */

.mcs-c-blogrow {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 40px !important;
}

.mcs-c-blogside {
	flex: 0 0 240px !important;
	width: 240px !important;
	max-width: 240px !important;
}

.mcs-c-blogmain {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
}

.mcs-blogside__title {
	font-size: 20px;
	margin: 0 0 12px;
}

.mcs-blogside__cats ul,
ul.mcs-blogside__cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcs-blogside__cats li {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.4;
}

.mcs-blogside__cats a {
	color: var(--mcs-primary);
	text-decoration: none;
}

.mcs-blogside__cats a:hover,
.mcs-blogside__cats a:focus {
	color: var(--mcs-blue);
	text-decoration: underline;
}

/* Category label on each post card */
.mcs-post-cat {
	margin: 12px 0 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mcs-accent);
}

.mcs-post-cat a {
	color: inherit;
	text-decoration: none;
}

.mcs-post-cat a:hover,
.mcs-post-cat a:focus {
	text-decoration: underline;
}

.mcs-postgrid .wp-block-post-date {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 6px;
}

.mcs-postgrid .wp-block-post-title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
}

/* Sidebar drops below the grid on narrow screens. */
@media (max-width: 921px) {
	.mcs-c-blogrow {
		flex-direction: column !important;
	}
	.mcs-c-blogside {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ==========================================================================
   Service card "Learn more" buttons: blue, not black (2026-09-29 call).

   Astra's own inline rule is
   `.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)`
   which resolves to palette slot 2 (#1F2A33) and is four classes deep, so a
   plain two-class override loses. Note also that `is-style-outline` sits on the
   wrapping div, not on the link. !important rather than stacking selectors to
   out-specify a theme rule we do not control.
   ========================================================================== */

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--mcs-blue) !important;
	border-color: var(--mcs-blue) !important;
	background-color: transparent !important;
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--mcs-blue) !important;
	border-color: var(--mcs-blue) !important;
	color: var(--ast-global-color-4) !important;
}

/* Lead line on each service card, from Laureen's rewritten copy. */
.mcs-svc__tag {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--mcs-primary);
	font-weight: 700;
}

/* ==========================================================================
   Service pages, and the site-wide bottom CTA              (2026.10.02)

   Laureen's rewritten service copy has the same eight-part shape on every
   page: hero, approach, challenges, services, how it works, why choose us,
   FAQ, closing CTA. One pattern renders all eight pages, so the design is
   consistent and restyling later means editing this block rather than eight
   pages of per-page converter CSS.

   Built on core blocks, not Spectra, because nothing here needs a block
   attribute the editor exposes and core markup survives a theme change.

   .mcs-cta is deliberately generic. It is the one-line-headline-plus-button
   treatment the 9/29 meeting asked for site-wide, not a service-page part.
   ========================================================================== */

.mcs-svc {
	padding: 64px 0;
}

/* Alternating bands break up the text. This is what "add visual interest to
   the text-heavy sections" asked for, and it costs no markup. */
.mcs-svc--cards,
.mcs-svc--why,
.mcs-svc--faq {
	background: var(--mcs-bg-2);
}

/* The gutter lives on the inner wrapper, not on .mcs-svc, so the tinted and
   coloured bands still run edge to edge while their content stays inset.
   Without it the cards touched both screen edges on a phone. (2026.10.02) */
.mcs-svc > * {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.mcs-svc__h {
	margin: 0 0 24px;
	color: var(--mcs-primary);
}

.mcs-svc__subhead {
	margin: 32px 0 12px;
	font-size: 20px;
	color: var(--mcs-blue);
}

.mcs-svc__ul {
	margin: 0 0 24px;
	padding-left: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
}

.mcs-svc__ul li {
	position: relative;
	padding-left: 28px;
	line-height: 1.5;
}

/* A check rather than a bullet. Decorative, so it is a pseudo-element and
   never reaches the accessibility tree. */
.mcs-svc__ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.45em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--mcs-blue);
	border-bottom: 2px solid var(--mcs-blue);
	transform: rotate(-45deg);
}

/* ---------- hero ---------- */

.mcs-hero {
	background: var(--mcs-bg-2);
	padding: 72px 0 64px;
}

.mcs-hero__t {
	margin: 0 0 16px;
	color: var(--mcs-primary);
}

.mcs-hero__lead {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--mcs-blue);
	margin: 0 0 20px;
}

.mcs-hero__kicker,
.mcs-cta__kicker {
	font-weight: 700;
	color: var(--mcs-primary);
	margin: 24px 0 0;
}

.mcs-hero__btn {
	margin-top: 28px;
}

/* ---------- card grids: challenges, steps, why ---------- */

.mcs-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.mcs-card {
	background: var(--mcs-white);
	border: 1px solid var(--mcs-bg-1);
	border-radius: 12px;
	padding: 28px 24px;
	margin: 0;
}

.mcs-card__t {
	margin: 0 0 10px;
	font-size: 19px;
	line-height: 1.3;
	color: var(--mcs-primary);
}

.mcs-card p:last-child {
	margin-bottom: 0;
}

.mcs-svc--prose .mcs-card,
.mcs-svc--list .mcs-card {
	border: 0;
	padding: 0;
	background: transparent;
}

/* Numbered steps. The number is a real paragraph so it is read out in order,
   which a CSS counter would not be. */
.mcs-steps .mcs-card {
	padding-top: 24px;
}

.mcs-step__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: var(--mcs-blue);
	color: var(--mcs-white);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
}

/* Why-choose-us cards sit on the tinted band, so they need the white card to
   stay legible but read lighter than the challenge cards. */
.mcs-why .mcs-card {
	border-color: transparent;
	box-shadow: 0 1px 3px rgba(31, 42, 51, 0.08);
}

/* ---------- FAQ ---------- */

.mcs-svc--faq .mcs-faq {
	margin: 0 0 12px;
}

.mcs-svc--faq .mcs-faq > summary {
	list-style: none;
	padding-right: 32px;
	position: relative;
}

.mcs-svc--faq .mcs-faq > summary::-webkit-details-marker {
	display: none;
}

.mcs-svc--faq .mcs-faq > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 22px;
	line-height: 1;
	color: var(--mcs-blue);
}

.mcs-svc--faq .mcs-faq[open] > summary::after {
	content: "\2013";
}

/* ---------- bottom CTA, site-wide pattern ---------- */

/* Brand blue, not slate. The footer is already --mcs-primary, so a slate CTA
   band merged into it and the closing call read as more footer. (2026.10.02) */
.mcs-cta {
	background: var(--mcs-blue);
	text-align: center;
	padding: 72px 0;
}

.mcs-cta__h {
	margin: 0 0 16px;
}

/* The band is dark, so every descendant needs the light colour explicitly.
   Astra sets heading and paragraph colours from the palette at a specificity
   this has to beat, which is why the colours are declared on the elements
   rather than inherited from .mcs-cta. */
.mcs-cta .mcs-cta__h,
.mcs-cta p {
	color: var(--mcs-white);
}

.mcs-cta .mcs-cta__kicker {
	color: var(--mcs-white);
	font-size: 19px;
}

.mcs-cta__btn {
	margin-top: 28px;
	justify-content: center;
}

/* Solid white button on the dark band. Astra's palette rule for
   .wp-block-button__link is four classes deep, so this needs !important
   rather than a specificity arms race. Same lesson as the outline buttons. */
.mcs-cta__btn .wp-block-button__link {
	background-color: var(--mcs-white) !important;
	color: var(--mcs-primary) !important;
	border-color: var(--mcs-white) !important;
}

.mcs-cta__btn .wp-block-button__link:hover,
.mcs-cta__btn .wp-block-button__link:focus {
	background-color: var(--mcs-accent) !important;
	color: var(--mcs-white) !important;
	border-color: var(--mcs-accent) !important;
}

/* ---------- responsive ---------- */

@media (max-width: 921px) {
	.mcs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 544px) {
	.mcs-svc {
		padding: 44px 0;
	}

	.mcs-grid,
	.mcs-svc__ul {
		grid-template-columns: 1fr;
	}

	.mcs-hero__lead {
		font-size: 18px;
	}
}

/* Astra prints an inline rule, `.entry-content > .wp-block-group`, that sets
   padding from --wp--custom--ast-default-block-top-padding (54px). It has the
   same specificity as `.mcs-svc` and loads after the child stylesheet, so it
   wins on source order and flattens every band to 54px all round. Matching the
   block class as well takes this to three classes, which beats it on
   specificity without reaching for !important. (2026.10.02)

   Third time today a rule lost to Astra. Read the winning rule off the live
   element with el.matches(r.selectorText) rather than inferring it. */
.entry-content > .wp-block-group.mcs-svc {
	padding: 64px 0;
}

.entry-content > .wp-block-group.mcs-hero {
	padding: 72px 0 64px;
}

.entry-content > .wp-block-group.mcs-cta {
	padding: 72px 0;
}

@media (max-width: 544px) {
	.entry-content > .wp-block-group.mcs-svc,
	.entry-content > .wp-block-group.mcs-hero,
	.entry-content > .wp-block-group.mcs-cta {
		padding: 44px 0;
	}
}

/* ==========================================================================
   Lists: one indent, site-wide                             (2026.10.06)

   From the 9/29 call, Lexi on the Careers page: the bullets were "squished to
   the side", and she wanted them "more aligned with each other so that all of
   the bullets are the same level".

   Two causes, both fixed:

   1. The Elementor converter copied `margin: 0 0 0 -30px` onto every list it
      carried over. Against a box with 20px of padding that is a net -10px, so
      the markers sat ON the box edge, or outside it. Those eight rules are
      deleted from css/pages/page-4377.css rather than overridden here, because
      the value was a bug being inherited, not a design choice. Backup kept as
      page-4377.css.bak-bullets-2026-10-06.

   2. The lists on the site came from three different sources with three
      different indents: converted lists at 20px, core lists at 40px, icon
      lists at 0. Nothing lined up with anything else.

   The standard below puts the TEXT of every list item 1.5em from its
   container's content edge, whatever kind of list it is. Disc lists get 1.5em
   of padding with the marker hanging outside it; icon lists already reach 1.5em
   through a 0.9em icon plus a 0.6em gap, so they need no padding at all. Both
   land in the same place, which is what "the same level" means.

   `list-style-position: outside` is what gives the hanging indent, so a wrapped
   line aligns with the first line's text rather than tucking under the bullet.
   ========================================================================== */

/* Marker lists only. Icon lists are excluded here and handled below, because
   they build their indent out of a flex child instead of padding; leaving them
   in this rule indented them twice. */
.entry-content .wp-block-list:not(.mcs-svc__ul):not(.mcs-iconlist):not([class*="gform"]):not([class*="gfield"]) {
	margin-left: 0;
	padding-left: var(--mcs-list-indent, 26px);
	list-style-position: outside;
}

/* Icon lists reach the same indent through the icon plus the gap rather than
   through padding. The converter sized both in em, so the text landed on a
   different pixel in every box that had a different font size. Fixed units
   here make the icon column exactly --mcs-list-indent wide, so icon lists and
   marker lists start their text on the same pixel. */
.entry-content .wp-block-list.mcs-iconlist {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

.entry-content .wp-block-list.mcs-iconlist > li {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.entry-content .wp-block-list.mcs-iconlist > li::before {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

.entry-content .wp-block-list:not(.mcs-svc__ul) > li {
	padding-left: 0;
	text-indent: 0;
}

/* Nested lists step in by the same amount, so the rhythm holds at any depth. */
.entry-content .wp-block-list:not(.mcs-svc__ul) .wp-block-list {
	margin-top: 8px;
	margin-bottom: 0;
}

/* Breathing room between items. The complaint was partly density, not only
   alignment: "just kind of spaced out a little bit". */
.entry-content .wp-block-list:not(.mcs-svc__ul) > li + li {
	margin-top: 8px;
}

/* ==========================================================================
   Reversed panels: white text needs the deeper blue        (2026.10.06)

   Laureen on the 9/29 call: "the black text on blue is kind of hard to read so
   make it white". The Do Not Apply box was rendering black on --mcs-blue.

   Making it white alone would have swapped one problem for another. White on
   --mcs-blue (#267CC0) measures 4.44:1, which is under the 4.5:1 WCAG AA
   threshold for body text — so the requested fix would have failed an audit on
   a healthcare vendor's own site. Black was actually passing at 4.73:1.

   So the panel colour steps down to --mcs-blue-deep, 12% darker, which carries
   white at 5.49:1. Still unmistakably the brand blue, and now the readable
   choice is also the compliant one. --mcs-blue is unchanged everywhere else;
   this token is only for panels that reverse text out of blue.
   ========================================================================== */

:root {
	--mcs-blue-deep: #216DA9;
	--mcs-list-indent: 26px;
}

/* The panel background itself is set in css/pages/page-4377.css, which loads
   after this file, so it had to change at the source rather than be overridden
   here. Only the text colours live below. */

.page-id-4377 .mcs-c-2280c86 .wp-block-list,
.page-id-4377 .mcs-c-2280c86 .wp-block-list li,
.page-id-4377 .mcs-c-2280c86 p,
.page-id-4377 .mcs-c-2280c86 .uagb-heading-text {
	color: var(--mcs-white) !important;
}

.page-id-4377 .mcs-c-2280c86 .wp-block-list li::before {
	background-color: var(--mcs-white) !important;
}

/* The service-page CTA band has the same white-on-blue problem: its body
   paragraphs are 18px, so 4.44:1 was failing there too. Same token, same fix.
   The 36px heading was always fine (large text needs only 3:1), but a band
   in two different blues would look like a mistake. */
.mcs-cta {
	background: var(--mcs-blue-deep);
}

/* ==========================================================================
   Contact Us icons                                         (2026.10.06)

   Laureen on the 9/29 call, about Contact Us: "it's just so bland... I don't
   know if we could put a mailbox and a calendar, something, it just needs some
   character."

   Reusable modifiers rather than page-ID rules, so the next block that wants a
   pin or a calendar just adds the class.

   The icon shows on the FIRST item only. An address is one thing written over
   two lines, so a pin on every line would read as two addresses. Every item
   still reserves the icon column, which keeps the second line aligned with the
   first instead of sliding under the icon.

   Masks rather than background images so the icon inherits currentColor and
   follows the brand palette, and aria-hidden by construction: a pseudo-element
   never reaches the accessibility tree, so a screen reader hears the address,
   not "image".
   ========================================================================== */

.mcs-iconlist--pin > li::before,
.mcs-iconlist--calendar > li::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: transparent;
	transform: translateY(0.15em);
}

.mcs-iconlist--pin > li:first-child::before {
	background-color: var(--mcs-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mcs-iconlist--calendar > li:first-child::before {
	background-color: var(--mcs-blue);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Card stripes, boxed sections, tighter rhythm        (2026.10.20)

   From the 10/16 notes. Three asks repeat on nearly every page, so they are
   solved once here rather than page by page:

   1. "maybe add the blue & orange rotating color bands? Similar to:" — the
      reference image is a light card with a 3px coloured rule across the top,
      rounded with the card. Cards alternate blue, orange, blue across a row.
   2. "there's no 'personality' on this section — box it or something?" — the
      prose and list sections were bare text on a white band.
   3. "decrease white space between sections (reduce scrolling)" — said about
      the Services landing page, Careers, Specialties, Resources, Contact Us
      and the service pages. It is the single most repeated note in the
      document.
   ========================================================================== */

/* ---------- 1. the rotating stripe ---------- */

.mcs-card {
	position: relative;
	overflow: hidden;
	padding-top: 30px;
}

/* A pseudo-element rather than border-top, so the stripe follows the card's
   rounded corners instead of running square across them. */
.mcs-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--mcs-blue);
}

/* Blue, orange, blue across a row of three; the fourth starts the cycle again.
   Keyed off nth-child so it follows the card's position, not the markup. */
.mcs-grid > .mcs-card:nth-child(3n + 2)::before {
	background: var(--mcs-accent);
}

/* At two across the 3n rhythm would put two oranges side by side on some rows,
   so the alternation switches to every other card. */
@media (max-width: 921px) {
	.mcs-grid > .mcs-card:nth-child(3n + 2)::before {
		background: var(--mcs-blue);
	}

	.mcs-grid > .mcs-card:nth-child(even)::before {
		background: var(--mcs-accent);
	}
}

@media (max-width: 544px) {
	.mcs-grid > .mcs-card:nth-child(even)::before {
		background: var(--mcs-accent);
	}
}

/* The step numbers already carry the colour on How It Works, so a stripe as
   well reads as two competing accents. The numbers alternate instead. */
.mcs-steps > .mcs-card::before {
	display: none;
}

.mcs-steps > .mcs-card {
	padding-top: 28px;
}

.mcs-steps > .mcs-card:nth-child(3n + 2) .mcs-step__n {
	background: var(--mcs-accent);
}

@media (max-width: 921px) {
	.mcs-steps > .mcs-card:nth-child(3n + 2) .mcs-step__n {
		background: var(--mcs-blue);
	}

	.mcs-steps > .mcs-card:nth-child(even) .mcs-step__n {
		background: var(--mcs-accent);
	}
}

/* ---------- 2. box the flat sections ---------- */

/* "No personality — box it or something." The approach sections and the
   services-we-provide lists were running as bare text on a white band. They
   get the same card shell as everything else, with a stripe on the side rather
   than the top so a full-width panel does not read as an oversized card. */
.mcs-svc--prose > .mcs-svc__panel,
.mcs-svc--list > .mcs-svc__panel {
	background: var(--mcs-white);
	border: 1px solid var(--mcs-bg-1);
	border-left: 4px solid var(--mcs-blue);
	border-radius: 12px;
	padding: 28px 32px;
}

.mcs-svc--list > .mcs-svc__panel {
	border-left-color: var(--mcs-accent);
}

.mcs-svc--prose > .mcs-svc__panel > *:last-child,
.mcs-svc--list > .mcs-svc__panel > *:last-child {
	margin-bottom: 0;
}

/* On the tinted bands the white panel needs no border to separate it. */
.mcs-svc--cards > .mcs-svc__panel,
.mcs-svc--why > .mcs-svc__panel {
	border-color: transparent;
	box-shadow: 0 1px 3px rgba(31, 42, 51, 0.08);
}

/* ---------- 3. tighter vertical rhythm ---------- */

/* 64px top and bottom put 128px between every pair of sections, which is what
   "a ton of scrolling" was describing. 44/48 keeps the sections distinct while
   removing roughly a screen height from a long service page. */
.entry-content > .wp-block-group.mcs-svc {
	padding: 44px 0;
}

.entry-content > .wp-block-group.mcs-hero {
	padding: 56px 0 48px;
}

.entry-content > .wp-block-group.mcs-cta {
	padding: 56px 0;
}

.mcs-svc__h {
	margin-bottom: 20px;
}

@media (max-width: 544px) {
	.entry-content > .wp-block-group.mcs-svc,
	.entry-content > .wp-block-group.mcs-hero,
	.entry-content > .wp-block-group.mcs-cta {
		padding: 36px 0;
	}
}

/* Converted pages carry 120px of section padding from Elementor, which is the
   same complaint on Careers, Specialties, Resources and Contact Us. Halved.
   This is a converter value being corrected, not a Spectra attribute being
   overridden — the pages were built from a builder that is on its way out. */
.mcs-sec.mcs-con {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

@media (max-width: 544px) {
	.mcs-sec.mcs-con {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* 10/16, Interim Staffing: "the rows of boxes, there's one hanging out all by
   itself - either add a couple more, delete one, something to even them out."
   Why Choose Us has seven items there. Rather than invent an eighth or drop one
   of Laureen's, a trailing single card centres itself instead of hanging left.
   General rule: it fixes any orphan row, on any page, at any breakpoint. */
.mcs-grid > .mcs-card:last-child:nth-child(3n + 1) {
	grid-column: 2;
}

@media (max-width: 921px) {
	.mcs-grid > .mcs-card:last-child:nth-child(3n + 1) {
		grid-column: auto;
	}

	.mcs-grid > .mcs-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc(50% - 12px);
		margin-inline: auto;
	}
}

@media (max-width: 544px) {
	.mcs-grid > .mcs-card:last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
	}
}

/* ==========================================================================
   Our Team                                                 (2026.10.20)

   From the 10/16 notes: "the layout feels a little too hierarchical, almost
   like a pyramid, which can unintentionally give off a siloed or top-down
   management feel... keeping all photos the same size and style."

   So every person is the same card in the same three-across grid, at the same
   photo size, whatever their level. The group headings stay as quiet dividers
   rather than visual tiers — removing them entirely would have left a visitor
   no way to tell a director from a senior, which was not the ask.

   The one thing that would have broken the even grid is that three people have
   bios and seven do not, which made row one several times taller than the rest
   and rebuilt the pyramid in a different shape. The bios sit behind a native
   <details> expander instead, so every card is the same height closed and the
   full text is still one click away, with no JavaScript.
   ========================================================================== */

.mcs-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

/* Stretch, so cards in a row share a bottom edge. The bio expander is pushed
   to the foot of the card by the auto margin, which keeps the three leadership
   cards level with each other even though their bios differ in length. */
.mcs-person {
	display: flex;
	flex-direction: column;
	background: var(--mcs-white);
	border: 1px solid var(--mcs-bg-1);
	border-radius: 12px;
	overflow: hidden;
	padding: 0 0 24px;
	margin: 0;
	text-align: center;
}

.mcs-person__img {
	margin: 0 0 18px;
}

/* The headshots are supplied with the top corners already rounded, so the
   image sits flush to the card's own radius and the two agree. */
.mcs-person__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mcs-person__name {
	margin: 0 20px 6px;
	font-size: 21px;
	line-height: 1.25;
	color: var(--mcs-primary);
}

.mcs-person__creds {
	margin: 0 20px 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mcs-blue);
	font-weight: 600;
}

/* Each credential is a nowrap span, so RH-CBS and CAH-CBS wrap as whole units
   and never split across two lines at the hyphen. Laureen has seven of them
   and that was the specific complaint. */
.mcs-cred {
	white-space: nowrap;
}

.mcs-person__role {
	margin: 0 20px 4px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--mcs-text);
}

.mcs-person__role:last-of-type {
	margin-bottom: 0;
}

.mcs-person__bio {
	margin: auto 20px 0;
	text-align: left;
	border-top: 1px solid var(--mcs-bg-1);
	padding-top: 14px;
}

.mcs-person__bio > summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	color: var(--mcs-blue);
	text-align: center;
	position: relative;
}

.mcs-person__bio > summary::-webkit-details-marker {
	display: none;
}

.mcs-person__bio > summary::after {
	content: " +";
	font-size: 17px;
}

.mcs-person__bio[open] > summary::after {
	content: " \2013";
}

.mcs-person__bio[open] > summary {
	margin-bottom: 12px;
}

.mcs-person__bio p {
	font-size: 15px;
	line-height: 1.6;
}

.mcs-person__bio p:last-child {
	margin-bottom: 0;
}

.mcs-team__h {
	margin: 0 0 24px;
	color: var(--mcs-primary);
}

/* Directors and Managers is a two-person group. Left alone it would stretch
   two cards across a three-column grid and they would read as oversized. */
.mcs-team .mcs-team-grid:has(> .mcs-person:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
	margin-inline: auto;
}

@media (max-width: 921px) {
	.mcs-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 544px) {
	.mcs-team-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mcs-team .mcs-team-grid:has(> .mcs-person:nth-child(2):last-child) {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Blog cards                                               (2026.10.20)

   10/16: "They're super long and creates a ton of scrolling" and "White space
   on the right - does that mean you can list 4 or 5 across?"

   The white space was a width:70% left on the content container by the
   Elementor conversion; that is fixed in css/pages/page-4606.css. With the
   full width back, three cards sit at a readable ~300px beside the category
   sidebar they asked for in September.

   Four or five across is not on with that sidebar in place - it would put the
   cards near 200px, too narrow for a 16:9 image and a headline. Three across
   plus the sidebar uses the same horizontal room without shrinking the cards.

   The length came from unclamped excerpts, which ran to different depths and
   made every row as tall as its longest card. Clamped to three lines.
   ========================================================================== */

.mcs-query .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
}

.mcs-query .wp-block-post-featured-image img {
	height: 170px;
}

.mcs-query .wp-block-post-title {
	font-size: 17px;
}

/* ==========================================================================
   Careers and Resources, 10/16 notes                       (2026.10.20)
   ========================================================================== */

/* "Applying - Billers/Credentialing Reps - Instructors - are all in the shaded
   blue - change it up a bit." Only Instructors actually carried the tint; the
   other two read as blue because every box inside them is tinted. Alternating
   the section bands gives the page a rhythm instead of one long blue stretch. */
.page-id-4377 .mcs-c-c0ffe5f {
	background-color: var(--mcs-bg-2) !important;
}

.page-id-4377 .mcs-c-instructors {
	background-color: transparent !important;
}

.page-id-4377 .mcs-careers-apply {
	background-color: var(--mcs-bg-2) !important;
}

/* "Culture - the section is a bit 'bland'." It is one wide tinted box of prose.
   A brand rule down the side and a touch more air is enough to stop it reading
   as a wall, without pre-empting the visual redesign. */
.page-id-4377 .mcs-c-c8aa2b9 .mcs-con[class*="mcs-c-"] {
	border-left: 4px solid var(--mcs-accent) !important;
}

/* Resources: "lots of orange on those boxes - maybe change the 'register in
   advance' to blue for the hyperlink". The webinar cards already carry orange
   headings and an orange CTA, so the link was the third orange thing in one
   card. Underlined as well, since colour alone should not carry a link. */
.page-id-4457 .mcs-c-919d76a a[href*="zoom.us"],
.page-id-4457 a[href*="zoom.us"] {
	color: var(--mcs-blue) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-id-4457 a[href*="zoom.us"]:hover,
.page-id-4457 a[href*="zoom.us"]:focus {
	color: var(--mcs-primary) !important;
}

/* "Podcasts - outline the box in the blue/orange, or just the top or side
   stripe." Side stripe, matching the treatment used everywhere else. */
.page-id-4457 .mcs-c-376741e .mcs-con[class*="mcs-c-"] {
	border-left: 4px solid var(--mcs-blue) !important;
	border-radius: 12px;
}

/* ==========================================================================
   Testimonial carousel                                     (2026.10.20)

   10/16: "Put this back as a changing/moving carousel. They're also super
   large, and do not need to be. Remove the icon of the person."

   Home and Specialties both had a carousel that the Elementor conversion
   flattened into a static grid, so this restores behaviour that used to exist
   rather than adding something new.

   Before the JS runs, and if it never runs, .mcs-tcar is a plain stacked list
   of quotes. The .is-enhanced class is what switches it into a single-slide
   carousel, so the no-JavaScript state is the default rather than an
   afterthought.
   ========================================================================== */

.mcs-tcar {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

.mcs-tcar__h {
	margin: 0 0 28px;
	color: var(--mcs-primary);
}

.mcs-tcar__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

.mcs-tcar__slide {
	margin: 0;
}

.mcs-tcar__quote {
	margin: 0;
	background: var(--mcs-white);
	border: 1px solid var(--mcs-bg-1);
	border-radius: 12px;
	padding: 32px 36px 26px;
	position: relative;
	overflow: hidden;
}

/* The brand stripe the rest of the site uses, rather than the stock quote
   mark. "Remove the icon of the person" - there is no avatar here at all. */
.mcs-tcar__quote::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--mcs-blue);
}

.mcs-tcar__quote p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--mcs-text);
	margin: 0 0 18px;
}

/* "They're also super large, and do not need to be." The quotes run from 67 to
   1030 characters, so one long one would set the height of the whole carousel.
   Clamped to six lines with the full set a click away on the Testimonials
   page. The text is all in the HTML either way - this only limits display. */
.mcs-tcar.is-enhanced .mcs-tcar__quote p {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mcs-tcar__attr {
	font-size: 15px;
	font-weight: 600;
	color: var(--mcs-blue);
}

.mcs-tcar__attr::before {
	content: "\2014\00a0";
}

/* ---------- enhanced state ---------- */

/* One slide at a time, and the viewport holds the height of the tallest so the
   page does not jump as slides change. */
.mcs-tcar.is-enhanced .mcs-tcar__track {
	display: block;
	min-height: 260px;
}

.mcs-tcar__controls {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

.mcs-tcar.is-enhanced .mcs-tcar__controls {
	display: flex;
}

.mcs-tcar__btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--mcs-bg-1);
	border-radius: 999px;
	color: var(--mcs-blue);
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	min-width: 36px;
	min-height: 36px;
	padding: 0 12px;
}

.mcs-tcar__btn:hover,
.mcs-tcar__btn:focus-visible {
	background: var(--mcs-blue);
	border-color: var(--mcs-blue);
	color: var(--mcs-white);
}

.mcs-tcar__dots {
	display: flex;
	gap: 8px;
	align-items: center;
}

.mcs-tcar__dot {
	appearance: none;
	border: 0;
	padding: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mcs-bg-1);
	cursor: pointer;
}

.mcs-tcar__dot.is-current {
	background: var(--mcs-blue);
}

/* A dot is a 10px target, which is well under the 24px minimum in WCAG 2.2
   (2.5.8). The visible dot stays small; the hit area is padded out around it. */
.mcs-tcar__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.mcs-tcar__dot {
	position: relative;
}

.mcs-tcar__more {
	margin: 18px 0 0;
	font-size: 15px;
}

.mcs-tcar__more a {
	color: var(--mcs-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 544px) {
	.mcs-tcar__quote {
		padding: 26px 22px 22px;
	}

	.mcs-tcar__quote p {
		font-size: 16px;
	}

	.mcs-tcar.is-enhanced .mcs-tcar__track {
		min-height: 320px;
	}
}

/* The Testimonials page renders the same post type as a static list rather
   than a carousel, so the two can never drift apart. No controls, no JS. */
.mcs-tlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	text-align: left;
	max-width: var(--wp--style--global--content-size, 1140px);
	margin-inline: auto;
}

.mcs-tlist .mcs-tcar__quote {
	padding: 28px 30px 22px;
}

.mcs-tlist .mcs-tcar__quote:nth-child(even)::before {
	background: var(--mcs-accent);
}

@media (max-width: 921px) {
	.mcs-tlist {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Service card grids: even titles, aligned buttons        (2026.10.21)

   The cards were ragged: titles ran to one line or two depending on the
   service name, and because the button sat straight after the body copy its
   distance from the bottom of the card ranged from 31px to 209px across the
   eight cards. Nothing lined up with anything.

   Two rules fix it. The title reserves two lines whether it needs them or
   not, so every card's body copy starts on the same baseline. The button then
   gets margin-top:auto, which in a flex column pushes it to the foot of the
   card, so all the buttons share one edge regardless of how long the copy is.

   min-height rather than height: a title that somehow needs three lines still
   gets them instead of being clipped.

   Applies to both grids that use this card: the homepage and the Services
   landing page.
   ========================================================================== */

.mcs-c-590c67e > .mcs-con .uagb-heading-text,
.mcs-c-82138c3 > .mcs-con .uagb-heading-text {
	min-height: calc(2 * 28px);
	display: flex;
	align-items: flex-start;
}

.mcs-c-590c67e > .mcs-con,
.mcs-c-82138c3 > .mcs-con {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}

.mcs-c-590c67e > .mcs-con > .wp-block-buttons,
.mcs-c-82138c3 > .mcs-con > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 18px;
}

/* Below the three-column breakpoint the titles have more room, so holding two
   lines open just adds a gap under the short ones. */
@media (max-width: 544px) {
	.mcs-c-590c67e > .mcs-con .uagb-heading-text,
	.mcs-c-82138c3 > .mcs-con .uagb-heading-text {
		min-height: 0;
		display: block;
	}
}

/* ==========================================================================
   Industries We Serve                                      (2026.10.21)

   Was an orange panel wrapping a white box of two bulleted columns, which read
   as a clinical checklist. Now a full-bleed brand band: the MedCycle pattern
   that already runs behind the homepage hero and the Careers header, laid over
   a solid colour, with the industries as chips rather than bullets.

   Chips are the point. A bulleted list says "here is a form to read"; a row of
   chips says "here is the range we cover", which is the actual message. It
   also fills the width properly instead of leaving the right half empty, which
   is the "floaty in the middle" note from 10/16.

   The colour underneath is --mcs-blue-deep, not --mcs-blue. The band carries
   white text, and white on #267CC0 is 4.44:1, under the 4.5 AA floor; on
   #216DA9 it is 5.49:1. The pattern sits above the colour at low opacity, so
   the contrast the text actually sees is the solid colour and is therefore
   predictable rather than varying across the image.
   ========================================================================== */

.mcs-ind {
	position: relative;
	isolation: isolate;
	background-color: var(--mcs-blue-deep);
	padding: 56px 20px;
	overflow: hidden;
	border-radius: 16px;
}

.mcs-ind::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("/wp-content/uploads/2026/06/mc-service-page-bg.jpg");
	background-size: cover;
	background-position: center;
	opacity: 0.35;
}

.mcs-ind__inner {
	max-width: 980px;
	margin-inline: auto;
	text-align: center;
}

.mcs-ind__h {
	margin: 0 0 10px;
	color: var(--mcs-white);
}

.mcs-ind__intro {
	margin: 0 auto 28px;
	max-width: 620px;
	color: var(--mcs-white);
	font-size: 17px;
}

.mcs-ind__h + .mcs-ind__list {
	margin-top: 28px;
}

.mcs-ind__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mcs-ind__item {
	background: var(--mcs-white);
	color: var(--mcs-primary);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
	padding: 11px 20px;
	border-radius: 999px;
	margin: 0;
	/* No marker, and none of the list indent the site-wide list rule applies. */
	list-style: none;
}

.mcs-ind__list .mcs-ind__item::before,
.mcs-ind__list .mcs-ind__item::marker {
	content: none;
}

@media (max-width: 544px) {
	.mcs-ind {
		padding: 40px 16px;
		border-radius: 12px;
	}

	.mcs-ind__item {
		font-size: 15px;
		padding: 9px 16px;
	}
}