/* =========================================================================
   JoMa Healthcare -- homepage (page 102) -- Unit J2
   Uses the shared design system in 05-system.css (see COMPONENTS.md).
   Only homepage-specific rules live here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------------- */
/* padding-top/bottom only (not the shorthand): .home-section is combined with
   .u-container on the same element, and the shorthand would zero out
   .u-container's left/right padding since this file loads after 05-system.css */
.home-section{ padding-top:88px; padding-bottom:88px; }
@media (max-width:959px){ .home-section{ padding-top:64px; padding-bottom:64px; } }
@media (max-width:599px){ .home-section{ padding-top:48px; padding-bottom:48px; } }

.home-row-hero .wpb_column,
.home-row-trust .wpb_column{ padding:0 !important; }

/* -------------------------------------------------------------------------
   Heading scale + spacing fix (scoped to this page's own markup)
   The theme's legacy Customizer-generated inline <style> block (output by
   saveo_customizer_get_css, printed after every enqueued stylesheet
   including 05-system.css) sets bare h1/h2/h3 font-size and large
   margin-top rules. Against the bare h1/h2 in this page's raw-HTML
   sections that carry no class, that inline block wins on source order
   (equal specificity), producing 80px/60px headings and ~64px empty gaps
   above headings. Restore the intended scale and spacing here.
   ------------------------------------------------------------------------- */
.home-hero h1{
	font-size:clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem) !important;
	margin-top:0 !important;
	margin-bottom:1rem !important;
}
.home-section h2,
.cta-band h2{
	font-size:clamp(1.7rem, 1.45rem + 1.1vw, 2.5rem) !important;
	margin-top:0 !important;
	margin-bottom:1rem !important;
}
.home-hero h1, .home-hero h2, .home-hero h3,
.home-section h1, .home-section h2, .home-section h3,
.cta-band h1, .cta-band h2, .cta-band h3{
	margin-top:0 !important;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.home-hero{
	position:relative;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:660px;
	display:flex;
	align-items:center;
	color:#fff;
	overflow:hidden;
}
/* Strengthened + extended vs round 1: the review measured ~2.0-2.7:1 for
   the 16px lead paragraph where it crossed the light cardigan/window on
   the right. Keep near-opaque through ~60% of the row width (comfortably
   past the text column's right edge, see .home-hero__content) before
   fading, so contrast holds regardless of exact line-wrap width. */
.home-hero__overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(100deg, rgba(31,92,96,0.97) 0%, rgba(31,92,96,0.92) 60%, rgba(31,92,96,0.55) 80%, rgba(31,92,96,0.15) 100%);
}
/* .home-hero__inner keeps .u-container's own max-width:1200 / margin:auto /
   padding:20px so its content starts at the SAME left edge as every other
   section on the page (and the header) -- PLUS an explicit width:100% here,
   because .home-hero is display:flex: a flex item with auto width
   shrink-to-fits its content instead of filling the row, which silently
   turned u-container's max-width:1200 box into a content-sized (~640px)
   box that .home-hero__inner's inherited margin:auto then re-centred,
   pushing the text ~280px right of the site's actual content edge. Forcing
   width:100% (still capped at max-width:1200) restores normal box
   behaviour so the auto margins centre the full 1200px box as everywhere
   else. The width cap for the text column itself lives on
   .home-hero__content, not here. */
.home-hero__inner{
	position:relative;
	z-index:1;
	width:100%;
	padding-top:64px;
	padding-bottom:64px;
}
.home-hero__content{ max-width:600px; }
.home-hero h1{ color:#fff !important; margin-bottom:1rem; }
.home-hero .eyebrow{ color:var(--jm-aqua); }
/* !important: J1's new sitewide rule
   "body.scheme_default.trx_addons_present p{color:var(--jm-text)}" (dark
   text) is a body+2-classes+element selector -- higher specificity than a
   single class -- and matches every <p> on the page including this one,
   overriding it to dark-on-dark-teal (near-invisible). Same fix applied
   below to .home-hero__trust and this page's .cta-band p. */
.home-hero__subtitle{
	font-size:1.15rem;
	line-height:1.6;
	color:rgba(255,255,255,0.94) !important;
	margin-bottom:1.9rem;
	max-width:560px;
}
.home-hero__actions{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin-bottom:1.7rem;
}
.home-hero__trust{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:0.92rem;
	color:rgba(255,255,255,0.88) !important;
	margin-bottom:0;
}
.home-hero__trust svg{ flex:none; color:var(--jm-aqua); }
/* !important: the sitewide "html.scheme_default .scheme_default a" rule
   (05-system.css section 7) has higher specificity (two classes + element)
   than a plain ".home-hero__trust a" and was winning, rendering this link
   as dark teal-on-teal (near-invisible). Force white with a visible
   underline; aqua/mint on hover. */
.home-hero__trust a{ color:#fff !important; text-decoration:underline; text-decoration-color:rgba(255,255,255,0.75); text-underline-offset:2px; }
.home-hero__trust a:hover{ color:var(--jm-aqua) !important; text-decoration-color:var(--jm-aqua); }

@media (max-width:767px){
	.home-hero{ min-height:0; }
	.home-hero__overlay{
		background:linear-gradient(180deg, rgba(31,92,96,0.90) 0%, rgba(31,92,96,0.88) 100%);
	}
	.home-hero__inner{ padding-top:48px; padding-bottom:48px; }
	.home-hero__content{ max-width:none; }
	.home-hero__subtitle{ max-width:none; }
	.home-hero__actions .btn{ flex:1 1 auto; }
}

/* -------------------------------------------------------------------------
   Mission quote
   ------------------------------------------------------------------------- */
/* !important on padding/background: a generic bare "blockquote" rule
   (theme legacy CSS) sets ~62-66px top/bottom padding and a grey-cream
   background on every <blockquote>; my original rule only set
   padding-left, so top/right/bottom leaked through, producing a tall,
   mostly-empty box (worst on mobile). Set all four sides explicitly. */
.home-quote{
	border-left:4px solid var(--jm-coral-cta);
	padding:28px 32px !important;
	margin:0 0 1.5rem;
	background:var(--jm-cream) !important;
	border-radius:0 8px 8px 0;
	position:relative;
}
/* Suppress the theme's generic decorative blockquote::before glyph (large
   quote mark, inline Customizer CSS) which otherwise overlaps this text. */
.home-quote::before{ content:none !important; }
.home-quote p{
	font-family:var(--jm-font-head);
	font-style:italic;
	font-size:1.2rem;
	line-height:1.5;
	color:var(--jm-text);
	margin-bottom:0.7rem;
}
.home-quote cite{
	display:block;
	font-style:normal;
	font-weight:700;
	color:var(--jm-teal-deep);
}

/* -------------------------------------------------------------------------
   Core services grid -- 3 columns desktop (not the shared .card-grid's
   auto-fit, which put 4+2 at 1280 with a big gap on row 2)
   ------------------------------------------------------------------------- */
.home-services-grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:959px){ .home-services-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:599px){ .home-services-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   Service cards -- whole card is one link (title + text + photo), so the
   click/tap target is the full card, not just a 22px "Learn more" line.
   .card is now an <a> in this page's markup; the shared .card/.card-grid
   rules from 05-system.css already blockify it correctly as a grid item,
   this just removes link styling and keeps text colours as designed.
   Keyboard focus uses the sitewide a:focus-visible outline (05-system.css).
   ------------------------------------------------------------------------- */
a.card{
	display:block;
	color:inherit;
	text-decoration:none !important;
	cursor:pointer;
}
/* The specialist cards below use <h4> (a legitimate h2>h3>h4 nesting under
   "Specialist and round-the-clock care"); the legacy inline Customizer CSS
   sets a large bare h4 margin-top (see the h1/h2/h3 note above) that isn't
   covered by that reset list. Target .card__title directly instead, so
   both the <h3> and <h4> variants are protected regardless of level. */
.card__title{ margin-top:0 !important; }
a.card:hover .card__link,
a.card:focus-visible .card__link{
	color:var(--jm-coral-cta-hover);
	text-decoration:underline;
}
.card__photo{
	display:block;
	width:100%;
	height:180px;
	object-fit:cover;
	border-radius:var(--jm-radius-sm);
	margin-bottom:1.1rem;
}

/* -------------------------------------------------------------------------
   Specialist / round-the-clock care -- compact cards (not pills): a photo
   + title + one line + link, in the same clickable-card pattern as the
   core services above, so specialist care doesn't read as second-class.
   flex + justify-content:center (not grid) so 5 cards naturally lay out
   as 5-across at desktop, 3+2 centred at tablet, 1-up on mobile, with no
   orphaned single card off to one side.
   ------------------------------------------------------------------------- */
.home-specialist{
	margin-top:52px;
	padding-top:44px;
	border-top:1px solid var(--jm-border);
}
.home-specialist__title{
	text-align:center;
	margin-bottom:1.5rem;
}
.home-specialist-grid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:24px;
}
.home-specialist-card{
	flex:0 1 200px;
	padding:20px 18px;
}
.home-specialist-card .card__photo{ height:110px; margin-bottom:0.9rem; }
.home-specialist-card .card__title{ font-size:1.05rem; margin-bottom:0.4rem; }
.home-specialist-card .card__text{ font-size:0.92rem; margin-bottom:0.7rem; }
@media (max-width:479px){ .home-specialist-card{ flex-basis:100%; } }

.home-services__more{
	text-align:center;
	margin-top:36px;
}

/* -------------------------------------------------------------------------
   How care starts -- steps
   ------------------------------------------------------------------------- */
.home-steps{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:28px;
}
@media (max-width:959px){ .home-steps{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:599px){ .home-steps{ grid-template-columns:1fr; } }

.home-steps__item{
	background:#fff;
	border-radius:var(--jm-radius);
	box-shadow:var(--jm-shadow-sm);
	padding:30px 26px;
	text-align:center;
}
.home-steps__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--jm-teal-deep);
	color:#fff;
	font-family:var(--jm-font-head);
	font-weight:700;
	font-size:1.1rem;
	margin-bottom:1.1rem;
}
.home-steps__item h3{ font-size:1.12rem; margin-bottom:0.5rem; }
.home-steps__item p{ color:var(--jm-text-muted); font-size:0.95rem; margin-bottom:0; }

/* -------------------------------------------------------------------------
   Why families choose JoMa -- checklist
   ------------------------------------------------------------------------- */
/* ul.checklist.home-checklist (not .home-checklist alone): the shared
   "ul.checklist" rule (05-system.css) is element+class specificity, which
   beat a plain ".home-checklist" class selector on margin-left/right
   (both set to 0, defeating the auto-centring), leaving the list flush
   left under a centred heading. !important as a safety margin too. */
ul.checklist.home-checklist{
	max-width:660px;
	margin-left:auto !important;
	margin-right:auto !important;
	font-size:1.05rem;
}

/* -------------------------------------------------------------------------
   Areas / Careers split sections
   ------------------------------------------------------------------------- */
.home-section .split__body h2{ margin-bottom:0.7rem; }
.home-section .split__body p{ color:var(--jm-text-muted) !important; font-size:1.05rem; }

/* -------------------------------------------------------------------------
   Final CTA band spacing
   ------------------------------------------------------------------------- */
.home-section .cta-band{ padding:64px 40px; }
@media (max-width:599px){ .home-section .cta-band{ padding:44px 24px; } }
/* !important: this page's final CTA band sits inside .home-section, and
   J1's new sitewide "body...p" rule (see the hero note above) overrides
   even the shared .cta-band p white-text rule from 05-system.css, making
   it dark-on-dark-teal here too. */
.home-section .cta-band p{ color:rgba(255,255,255,0.92) !important; }

/* -------------------------------------------------------------------------
   Body-copy <p> colour restore
   J1's new sitewide "body.scheme_default.trx_addons_present p{color:var(
   --jm-text)}" rule (higher specificity than a single class) also flattened
   these to full dark text instead of the intended softer muted tone. Not a
   contrast failure on their light/white card backgrounds, but restore the
   original design for consistency.
   ------------------------------------------------------------------------- */
.card__text,
.home-steps__item p{ color:var(--jm-text-muted) !important; }
/* Extra specificity (3 classes, not .home-quote p's 1): .home-quote is
   nested inside .split__body in this page's mission-section markup, so
   the .home-section .split__body p rule above (2 classes) otherwise beats
   a plain ".home-quote p" even with !important, forcing the quote to the
   muted grey meant for the surrounding split__body copy instead of the
   slightly darker quote tone. */
.home-section .split__body .home-quote p{ color:var(--jm-text) !important; }
.section-head__intro{ color:var(--jm-text-muted) !important; }