/* =========================================================================
   JoMa Healthcare -- Services (Unit J4)
   Services overview (110) + all cpt_services single pages.
   Loaded after 05-system.css / 10-chrome.css by the mu-plugin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0a. `.content_wrap` / `.content_container` fluidity: originally patched
   here (round 1), now superseded by J1's sitewide fix in 05-system.css
   (`body.scheme_default.trx_addons_present .content_wrap`, a 3-class
   selector that beats our 2-class one on specificity regardless of load
   order, and covers every breakpoint including 1135/1023 which we
   hadn't). Removed to avoid two rules fighting over the same box --
   nothing left to do here.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   0b. CRITICAL: sidebar layout. The theme's `.content` (770px) /
   `.sidebar` (370px) are both fixed-pixel floats. Between ~768px and
   1140px there isn't room for 770+370, so the sidebar either wraps to a
   near-zero width (letter-by-letter text) or drops below leaving a dead
   gutter, depending on the exact breakpoint. Below 1141px we hide the
   sidebar outright -- related-services cards on every page, the main
   nav's Services dropdown (J1) and the footer services list (J1) already
   cover the same navigation, so nothing is lost. At/above 1141px we show
   it, but make `.content` fluid (calc, not the fixed 770px) so the two
   columns always actually fit inside `.content_wrap` at any width.
   ------------------------------------------------------------------------- */
@media (max-width:1140px){
	.single-cpt_services .sidebar{
		display:none;
	}
	.single-cpt_services .content{
		width:100% !important;
		max-width:100%;
		float:none;
		box-sizing:border-box;
	}
}
@media (min-width:1141px){
	.single-cpt_services .content{
		width:calc(100% - 410px) !important;
		box-sizing:border-box;
	}
	.single-cpt_services .sidebar{
		width:370px;
	}
}

/* Fix: the theme's single-cpt_services template auto-renders the
   featured image in its own `.services_page_header` section before
   the_content(). Our own hero (`.page-hero`) already shows the same
   photo, so hide the theme's plain duplicate. */
.single-cpt_services .services_page_header{
	display:none;
}

/* -------------------------------------------------------------------------
   1. Section rhythm -- consistent vertical spacing between every block.
   Padding (not margin) so it can never collapse against a neighbour.
   ------------------------------------------------------------------------- */
.jm-section{ padding-top:48px; }
.jm-section:first-child{ padding-top:0; }
@media (min-width:768px){
	.jm-section{ padding-top:80px; }
}
.service-hero{ margin:0; }

/* "Who it helps" list: plain list, teal marker, no checkmark */
ul.who-list{ list-style:none; margin:0; padding:0; }
ul.who-list li{ position:relative; padding-left:26px; margin-bottom:0.7em; color:var(--jm-text); }
ul.who-list li:before{
	content:"";
	position:absolute;
	left:0; top:0.55em;
	width:8px; height:8px;
	border-radius:50%;
	background:var(--jm-teal);
}

/* Checklist: two columns on wider screens */
@media (min-width:640px){
	ul.checklist.checklist-grid{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:32px;
		row-gap:0;
	}
}

/* Careful-language callout (medication / stroke / mental health / dementia / post-hospital) */
.service-note{
	background:var(--jm-cream);
	border:1px solid var(--jm-border);
	border-left:4px solid var(--jm-teal);
	border-radius:var(--jm-radius-sm);
	padding:18px 22px;
	color:var(--jm-text-muted);
	font-size:0.98rem;
}
.service-note strong{ color:var(--jm-teal-deep); }

/* -------------------------------------------------------------------------
   2. Photo hero (page-hero component) + breadcrumbs + CTA
   ------------------------------------------------------------------------- */
.page-hero__actions{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	justify-content:center;
	margin-top:1.6rem;
}

/* -------------------------------------------------------------------------
   3. Cards: whole card clickable, normalised image aspect ratio
   ------------------------------------------------------------------------- */
.services-grid .card,
.related-grid .card{
	position:relative;
}
.services-grid .card__title a,
.related-grid .card__title a{
	color:inherit;
	text-decoration:none;
}
.services-grid .card__title a::after,
.related-grid .card__title a::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	border-radius:var(--jm-radius);
}
/* Visible focus state on the whole card (not just the small title text)
   when the stretched link is reached by keyboard. */
.services-grid .card__title a:focus-visible,
.related-grid .card__title a:focus-visible{
	outline:none;
}
.services-grid .card__title a:focus-visible::after,
.related-grid .card__title a:focus-visible::after{
	outline:3px solid var(--jm-aqua);
	outline-offset:2px;
}
.services-grid .card__link,
.related-grid .card__link{
	position:relative;
	z-index:2;
}
.services-grid .card:hover .card__title a,
.related-grid .card:hover .card__title a{
	color:var(--jm-coral-cta);
}

.services-grid .card__media,
.related-grid .card__media{
	aspect-ratio:4/3;
	overflow:hidden;
	background:var(--jm-cream);
}
.services-grid .card__media img,
.related-grid .card__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* Related-service cards: thumbnail above title, 3 across */
.related-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:22px;
}
@media (max-width:699px){
	.related-grid{ grid-template-columns:1fr; }
}
@media (min-width:700px) and (max-width:1140px){
	.related-grid{ grid-template-columns:repeat(3, 1fr); }
}
.related-grid .card{ padding:20px 20px 26px; }
.related-grid .card__media{ margin:-20px -20px 1rem; border-radius:var(--jm-radius) var(--jm-radius) 0 0; }

/* Step-number badge (How we work / assessment steps) -- match the
   homepage `.home-steps__num` treatment: filled teal circle, white
   number, not the generic cream/coral icon-badge. Scoped to our own
   pages so it never leaks into other units' cards. */
.single-cpt_services .card__icon.icon-badge,
.page-id-110 .card__icon.icon-badge{
	background:var(--jm-teal-deep);
	color:#fff;
	font-family:var(--jm-font-head);
	font-weight:700;
}

/* -------------------------------------------------------------------------
   4. "Our Services" sidebar nav card (widget area custom_widgets_1)
   ------------------------------------------------------------------------- */
.sidebar .widget.widget_nav_menu{
	background:#fff;
	border-radius:var(--jm-radius);
	box-shadow:var(--jm-shadow-sm);
	padding:26px 24px;
	border:1px solid var(--jm-border);
}
.sidebar .widget.widget_nav_menu .widget_title{
	font-family:var(--jm-font-head);
	color:var(--jm-teal-deep);
	font-size:1.1rem;
	margin:0 0 1rem;
	padding-bottom:0.75rem;
	border-bottom:2px solid var(--jm-cream);
}
.sidebar .widget.widget_nav_menu ul.menu{ list-style:none; margin:0; padding:0; }
.sidebar .widget.widget_nav_menu ul.menu li{ margin:0; border-bottom:1px solid var(--jm-border); }
.sidebar .widget.widget_nav_menu ul.menu li:last-child{ border-bottom:0; }
.sidebar .widget.widget_nav_menu ul.menu li a{
	display:block;
	padding:11px 4px;
	color:var(--jm-text);
	font-weight:600;
	font-size:0.95rem;
	text-decoration:none;
	transition:color .18s ease, padding-left .18s ease;
}
.sidebar .widget.widget_nav_menu ul.menu li a:hover{ color:var(--jm-coral-cta); padding-left:8px; }
.sidebar .widget.widget_nav_menu ul.menu li.current-menu-item > a,
.sidebar .widget.widget_nav_menu ul.menu li.current_page_item > a{
	color:var(--jm-coral-cta);
	font-weight:700;
}

/* -------------------------------------------------------------------------
   5. Services overview page (110)
   ------------------------------------------------------------------------- */
.services-overview-intro{ max-width:760px; margin:0 auto; text-align:center; }
.services-group .section-head{ margin-bottom:2rem; }

.services-overview-assessment{
	background:var(--jm-cream);
	border-radius:var(--jm-radius);
	padding:44px 40px;
	display:flex;
	align-items:center;
	gap:40px;
	flex-wrap:wrap;
}
.services-overview-assessment__body{ flex:1 1 320px; min-width:0; }
.services-overview-assessment__media{ flex:0 0 260px; }
.services-overview-assessment__media img{ width:100%; height:auto; border-radius:var(--jm-radius); box-shadow:var(--jm-shadow-md); display:block; }
@media (max-width:767px){
	.services-overview-assessment{ padding:32px 24px; }
}

.services-grid .card{ padding:0 0 28px; overflow:hidden; }
.services-grid .card__media{ margin:0 0 1.2rem; }
.services-grid .card__body{ padding:0 26px; }
.services-grid .card__icon{ margin-top:0; }

/* Force 3 columns for the 6-item "everyday home care" grid at desktop
   (auto-fit alone packs 4 into a 1200px container). */
.services-grid.services-grid--core{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:28px;
}
@media (max-width:959px){
	.services-grid.services-grid--core{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:599px){
	.services-grid.services-grid--core{ grid-template-columns:1fr; }
}
/* The 4-item "specialist support" grid: 4 across at desktop, 2x2 tablet. */
.services-grid.services-grid--specialist{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:28px;
}
@media (max-width:1099px){
	.services-grid.services-grid--specialist{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:599px){
	.services-grid.services-grid--specialist{ grid-template-columns:1fr; }
}