/* =========================================================================
   JoMa Healthcare -- design system (Unit J1)
   Loaded after the Saveo theme CSS by wp-content/mu-plugins/johma-assets.php.

   SHARED COMPONENTS -- use these class names in J2/J3/J4 content (they work
   inside WPBakery vc_column_text / vc_raw_html). Full markup examples are in
   scratchpad/joma/COMPONENTS.md.

   Buttons
     .btn .btn-primary            coral CTA, white text, >=44px tall
     .btn .btn-secondary          teal outline button
     .btn .btn-white              white button for use on dark/photo backgrounds
     .btn-lg / .btn-sm            size modifiers

   Section header (eyebrow + H2 + intro)
     .section-head[.section-head-center]
       .eyebrow > .section-head__title (h2) > .section-head__intro (p)

   Cards
     .card-grid                   grid wrapper (auto-fit columns)
     .card                        12px radius, soft shadow, hover lift
       .card__icon .card__title .card__text .card__link

   Icon badge
     .icon-badge[.icon-badge-lg][.icon-badge-outline]   round badge for an icon/svg

   Inner-page hero
     .page-hero[.page-hero--has-image]
       .page-hero__inner > .eyebrow, h1, .page-hero__subtitle, .page-hero__crumbs

   CTA band
     .cta-band[.cta-band--photo]
       .cta-band__inner > .eyebrow, h2, p, .cta-band__actions (2x .btn)

   Trust strip
     .trust-strip > .trust-strip__item (repeat, bullet-separated)

   Checklist
     ul.checklist > li  (coral check icon, no default bullet)

   Two-column split
     .split[.split--reverse] > .split__media, .split__body

   Utility
     .eyebrow                      small uppercase kicker label
     .u-container                  max-width content wrapper with >=20px gutters
     .bg-cream / .bg-teal-deep / .bg-teal / .visually-hidden

   Colour variables: --jm-teal-deep, --jm-teal, --jm-aqua, --jm-coral,
   --jm-coral-cta, --jm-cream, --jm-text, --jm-text-muted, --jm-border.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Palette + base variables
   ------------------------------------------------------------------------- */
:root{
	--jm-teal-deep:#1F5C60;
	--jm-teal:#2A8A86;
	--jm-aqua:#6CC3C4;
	--jm-coral:#E76F51;
	--jm-coral-cta:#BE4E35;   /* darkened from the brand #C4543A: white text on #C4543A is 4.49:1, below AA; #BE4E35 is 4.85:1 */
	--jm-coral-cta-hover:#A73E2E;
	--jm-cream:#FBF6EF;
	--jm-text:#23343A;
	--jm-text-muted:#5E6E73;
	--jm-border:#E6E1D8;
	--jm-radius:12px;
	--jm-radius-sm:8px;
	--jm-shadow-sm:0 2px 8px rgba(31,92,96,0.08);
	--jm-shadow-md:0 8px 24px rgba(31,92,96,0.12), 0 2px 6px rgba(31,92,96,0.08);
	--jm-shadow-lg:0 20px 48px rgba(31,92,96,0.18), 0 6px 16px rgba(31,92,96,0.10);
	--jm-font-head:'Lora', Georgia, 'Times New Roman', serif;
	--jm-font-body:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--jm-gutter:20px;
}

/* -------------------------------------------------------------------------
   2. Fonts sitewide (replace Sanchez / Source Sans Pro)
   ------------------------------------------------------------------------- */
html.scheme_default body,
html.scheme_dark body,
.sc_layouts_row,
body,
input,
textarea,
select,
.select_container,
button,
.theme_button{
	font-family:var(--jm-font-body) !important;
}

h1,h2,h3,h4,h5,h6,
.sc_layouts_logo .logo_text,
.sc_title,
.page-hero h1,
.section-head__title,
.card__title,
.trx_sc_title,
.wpb_wrapper h1,.wpb_wrapper h2,.wpb_wrapper h3,.wpb_wrapper h4,.wpb_wrapper h5,.wpb_wrapper h6{
	font-family:var(--jm-font-head) !important;
	font-weight:700;
	letter-spacing:0;
}

h5,h6{ font-weight:600; }

/* Heading colour: deep teal, sitewide, except where a component explicitly
   sits on a dark/photo background (those rules use !important at equal-or-
   higher specificity and so still win -- see .page-hero/.cta-band/
   .johma-title-band below, and J2/J3/J4's own dark-hero rules). The theme's
   own ".scheme_default h1/h2/h3{color:#435460}" (no !important) is what
   we're beating here; matching its 1-class specificity would tie (and lose
   the tie, since Saveo's CSS prints after ours -- see the note in section 7),
   so this uses the same "body.scheme_default.trx_addons_present" reinforced
   selector, deliberately WITHOUT !important so real !important dark-bg
   overrides elsewhere still take priority. */
body.scheme_default.trx_addons_present h1,
body.scheme_default.trx_addons_present h2,
body.scheme_default.trx_addons_present h3{ color:var(--jm-teal-deep); }

.sc_layouts_menu_nav>li>a,
.sc_layouts_item_details,
.johma-wordmark,
.btn,
.theme_button,
input[type="submit"],
button[type="submit"],
.wpcf7-submit{
	font-family:var(--jm-font-body);
}

/* -------------------------------------------------------------------------
   3. Base type scale
   ------------------------------------------------------------------------- */
body{ color:var(--jm-text); font-size:16px; line-height:1.65; }
/* Reinforced selector: Saveo's Customizer CSS (saveo_customizer_get_css,
   printed via the "saveo-main-inline-css" block) sets bare h1{font-size:5em}
   etc AFTER our stylesheet in the DOM (trx_addons re-orders the styles
   queue -- see the note in section 7), so a plain "h1{}" rule here loses
   the specificity/order tie. Use the same always-present compound selector
   to guarantee we win regardless of load order. */
h1, h2, h3, h4, h5, h6{ margin-top:0; }
body.scheme_default.trx_addons_present h1,
body.scheme_default.trx_addons_present h2,
body.scheme_default.trx_addons_present h3,
body.scheme_default.trx_addons_present h4,
body.scheme_default.trx_addons_present h5,
body.scheme_default.trx_addons_present h6{ margin-top:0 !important; }
body.scheme_default.trx_addons_present h1{ font-size:clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem) !important; line-height:1.15 !important; letter-spacing:-0.5px; margin-bottom:1.1rem !important; }
body.scheme_default.trx_addons_present h2{ font-size:clamp(1.7rem, 1.45rem + 1.1vw, 2.5rem) !important; line-height:1.2 !important; letter-spacing:-0.3px; margin-bottom:1rem !important; }
body.scheme_default.trx_addons_present h3{ font-size:clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem) !important; line-height:1.25 !important; margin-bottom:0.85rem !important; }
body.scheme_default.trx_addons_present h4{ font-size:1.25rem !important; line-height:1.3 !important; margin-bottom:0.7rem !important; }
body.scheme_default.trx_addons_present h5{ font-size:1.05rem !important; line-height:1.35 !important; margin-bottom:0.6rem !important; }
body.scheme_default.trx_addons_present h6{ font-size:0.85rem !important; line-height:1.4 !important; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:0.5rem !important; }
p{ margin-top:0; margin-bottom:1.15em; }
a{ transition:color .18s ease, background-color .18s ease, border-color .18s ease; }

/* -------------------------------------------------------------------------
   4. Selection / focus
   ------------------------------------------------------------------------- */
::selection{ background:var(--jm-coral); color:#fff; }
::-moz-selection{ background:var(--jm-coral); color:#fff; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.sc_layouts_menu_nav>li>a:focus-visible{
	outline:3px solid var(--jm-aqua);
	outline-offset:2px;
	border-radius:4px;
}

/* -------------------------------------------------------------------------
   5. Mobile gutters + minimum body text size
   ------------------------------------------------------------------------- */
@media (max-width:767px){
	body{ font-size:16px; }
	.content_wrap,
	.page_content_wrap .content_wrap,
	.sc_layouts_row .sc_layouts_row_container,
	.u-container{
		padding-left:var(--jm-gutter) !important;
		padding-right:var(--jm-gutter) !important;
	}
}

/* Saveo's responsive.css gives .content_wrap/.content_container (and the
   title band's .sc_content_width_1_1) a FIXED pixel width at each of its
   "boxed" breakpoints (e.g. 900px right through the 1023-768px range),
   instead of a fluid one -- so on any viewport narrower than that fixed
   value the content is wider than the screen (clipped or overflowing).
   Make it fluid sitewide across every affected breakpoint, reinforced
   enough (3 real classes) to beat the theme's plain 1-class rules
   regardless of load order (see the note in section 7). */
body.scheme_default.trx_addons_present .content_wrap,
body.scheme_default.trx_addons_present .content_container,
body.scheme_default.trx_addons_present .sc_content_width_1_1{
	width:auto !important;
	max-width:1170px;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
}
@media (max-width:1135px){
	body.scheme_default.trx_addons_present .content_wrap,
	body.scheme_default.trx_addons_present .content_container,
	body.scheme_default.trx_addons_present .sc_content_width_1_1{ max-width:964px; }
}
@media (max-width:1023px){
	body.scheme_default.trx_addons_present .content_wrap,
	body.scheme_default.trx_addons_present .content_container,
	body.scheme_default.trx_addons_present .sc_content_width_1_1{ max-width:900px; padding-left:20px; padding-right:20px; }
}
@media (max-width:959px){
	body.scheme_default.trx_addons_present .content_wrap,
	body.scheme_default.trx_addons_present .content_container,
	body.scheme_default.trx_addons_present .sc_content_width_1_1{ max-width:100%; }
}
@media (max-width:767px){
	body.scheme_default.trx_addons_present .content_wrap,
	body.scheme_default.trx_addons_present .content_container,
	body.scheme_default.trx_addons_present .sc_content_width_1_1{ max-width:100%; padding-left:20px !important; padding-right:20px !important; }
}

/* Body text colour: the theme's default #7f7f7f is 4.0:1 on white and
   3.72:1 on cream -- both fail WCAG AA (4.5:1) for normal text. Use the
   readable dark text colour everywhere prose actually appears -- but NOT
   inside any dark/photo section, where text must stay white/light and
   this rule's specificity (2 real classes) would otherwise beat a plain
   1-class "white text" rule and repaint it near-black/invisible. Two
   layers of protection: exclude known dark containers with :not() (a
   modern-CSS belt), and separately restate light text explicitly for
   each dark container at equal-or-higher specificity (the braces, works
   everywhere, no :not() support required). */
body.scheme_default.trx_addons_present p:not(.page-hero *):not(.cta-band *):not(.johma-footer *):not(.johma-topstrip *):not(.johma-title-band *):not(.scheme_dark *):not([class*="--dark"] *),
body.scheme_default.trx_addons_present li:not(.page-hero *):not(.cta-band *):not(.johma-footer *):not(.johma-topstrip *):not(.johma-title-band *):not(.scheme_dark *):not([class*="--dark"] *),
body.scheme_default.trx_addons_present .wpb_text_column,
body.scheme_default.trx_addons_present .post_content,
body.scheme_default.trx_addons_present .post_content p,
body.scheme_default.trx_addons_present .post_content li{
	color:var(--jm-text);
}
/* Explicit light-text restatement for every dark/photo context, so this
   still holds even without :not() support, and for anything the :not()
   list above doesn't happen to name. */
body.scheme_default.trx_addons_present .page-hero p,
body.scheme_default.trx_addons_present .cta-band p,
body.scheme_default.trx_addons_present .johma-footer p,
body.scheme_default.trx_addons_present .johma-footer li,
body.scheme_default.trx_addons_present .johma-topstrip p,
body.scheme_default.trx_addons_present .johma-title-band p,
body.scheme_default.trx_addons_present .scheme_dark p,
body.scheme_default.trx_addons_present .scheme_dark li,
body.scheme_default.trx_addons_present [class*="--dark"] p,
body.scheme_default.trx_addons_present [class*="--dark"] li{
	color:rgba(255,255,255,0.92) !important;
}
/* This component's own lead paragraph already had a colour, just not
   !important -- close the same hole directly at the source too. */
body.scheme_default.trx_addons_present .page-hero__subtitle,
body.scheme_default.trx_addons_present .cta-band p{
	color:rgba(255,255,255,0.92) !important;
}

/* Skip link: first focusable element (see wp_body_open in the mu-plugin). */
.johma-skip-link{
	position:absolute;
	top:-60px;
	left:12px;
	z-index:100000;
	background:var(--jm-teal-deep);
	color:#fff;
	padding:12px 20px;
	border-radius:var(--jm-radius-sm);
	font-family:var(--jm-font-body);
	font-weight:700;
	text-decoration:none;
	transition:top .15s ease;
}
.johma-skip-link:focus{ top:12px; color:#fff; }

/* Focus ring reinforcement for chrome elements that otherwise show no
   visible focus indicator (icon-only or custom-styled links). */
a.johma-wordmark:focus-visible,
a.johma-topstrip__item:focus-visible,
.sc_layouts_logo:focus-visible,
.menu_mobile_close:focus-visible,
.sc_layouts_menu_mobile_button a:focus-visible{
	outline:3px solid var(--jm-aqua) !important;
	outline-offset:2px;
	border-radius:4px;
}

/* =========================================================================
   6. Shared components
   ========================================================================= */

.u-container{ max-width:1170px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; box-sizing:border-box; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bg-cream{ background-color:var(--jm-cream); }
.bg-teal-deep{ background-color:var(--jm-teal-deep); }
.bg-teal{ background-color:var(--jm-teal); }

/* Eyebrow kicker */
.eyebrow{
	display:inline-block;
	font-family:var(--jm-font-body);
	font-weight:700;
	font-size:0.8rem;
	letter-spacing:1.6px;
	text-transform:uppercase;
	color:var(--jm-coral-cta);
	margin-bottom:0.6em;
}
.scheme_dark .eyebrow{ color:var(--jm-aqua); }

/* Buttons */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:44px;
	padding:12px 28px;
	border-radius:var(--jm-radius-sm);
	font-family:var(--jm-font-body);
	font-weight:700;
	font-size:1rem;
	line-height:1.2;
	text-decoration:none !important;
	text-align:center;
	border:2px solid transparent;
	cursor:pointer;
	transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
	box-sizing:border-box;
}
.btn:hover, .btn:focus{ transform:translateY(-1px); text-decoration:none !important; }
.btn-primary,
a.btn-primary{
	background-color:var(--jm-coral-cta);
	border-color:var(--jm-coral-cta);
	color:#fff !important;
	box-shadow:0 6px 16px rgba(190,78,53,0.28);
}
.btn-primary:hover, .btn-primary:focus{
	background-color:var(--jm-coral-cta-hover);
	border-color:var(--jm-coral-cta-hover);
	color:#fff !important;
}
.btn-secondary,
a.btn-secondary{
	background-color:transparent;
	border-color:var(--jm-teal);
	color:var(--jm-teal-deep) !important;
}
.btn-secondary:hover, .btn-secondary:focus{
	background-color:var(--jm-teal-deep);
	border-color:var(--jm-teal-deep);
	color:#fff !important;
}
.btn-white,
a.btn-white{
	background-color:#fff;
	border-color:#fff;
	color:var(--jm-teal-deep) !important;
}
.btn-white:hover, .btn-white:focus{
	background-color:transparent;
	border-color:#fff;
	color:#fff !important;
}
.btn-outline-white,
a.btn-outline-white{
	background-color:transparent;
	border-color:rgba(255,255,255,0.7);
	color:#fff !important;
}
.btn-outline-white:hover, .btn-outline-white:focus{
	background-color:#fff;
	border-color:#fff;
	color:var(--jm-teal-deep) !important;
}
.btn-lg{ min-height:52px; padding:14px 34px; font-size:1.05rem; }
.btn-sm{ min-height:40px; padding:9px 20px; font-size:0.9rem; }

/* Section header: eyebrow + H2 + intro */
.section-head{ max-width:720px; margin:0 0 2.5rem; }
.section-head-center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head__title{ margin-bottom:0.6rem; }
.section-head__intro{ color:var(--jm-text-muted); font-size:1.08rem; margin-bottom:0; }

/* Cards */
.card-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:28px;
}
.card{
	background:#fff;
	border-radius:var(--jm-radius);
	box-shadow:var(--jm-shadow-sm);
	padding:32px 28px;
	transition:transform .22s ease, box-shadow .22s ease;
	box-sizing:border-box;
	height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--jm-shadow-md); }
.card__icon{ margin-bottom:1.1rem; }
.card__title{ font-size:1.2rem; margin-bottom:0.5rem; color:var(--jm-teal-deep); }
.card__text{ color:var(--jm-text-muted); margin-bottom:0.9rem; }
.card__link{ font-weight:700; color:var(--jm-coral-cta); text-decoration:none; }
.card__link:hover{ color:var(--jm-coral-cta-hover); text-decoration:underline; }

/* Icon badge */
.icon-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	border-radius:50%;
	background:var(--jm-cream);
	color:var(--jm-teal-deep);
	font-size:1.5rem;
}
.icon-badge svg, .icon-badge img{ width:28px; height:28px; }
.icon-badge-lg{ width:76px; height:76px; font-size:2rem; }
.icon-badge-lg svg, .icon-badge-lg img{ width:36px; height:36px; }
.icon-badge-outline{ background:transparent; border:2px solid var(--jm-teal); }
.icon-badge-dark{ background:rgba(255,255,255,0.12); color:#fff; }

/* Inner-page hero (image + teal overlay) */
.page-hero{
	position:relative;
	background:linear-gradient(120deg, var(--jm-teal-deep) 0%, var(--jm-teal) 100%);
	color:#fff;
	padding:72px 0 56px;
	overflow:hidden;
}
.page-hero--has-image{ background-size:cover; background-position:center; }
.page-hero--has-image:before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(120deg, rgba(31,92,96,0.92) 0%, rgba(42,138,134,0.82) 100%);
}
.page-hero__inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px; text-align:center; }
.page-hero h1{ color:#fff !important; margin-bottom:0.5rem; }
.page-hero__subtitle{ font-size:1.15rem; color:rgba(255,255,255,0.92); max-width:620px; margin:0 auto; }
.page-hero__crumbs{ margin-bottom:1rem; font-size:0.85rem; }
/* Reinforced: the sitewide link-colour rule (section 7) would otherwise
   repaint these <a> tags deep teal, which is ~1.5:1 on the teal overlay. */
body.scheme_default.trx_addons_present .page-hero__crumbs,
body.scheme_default.trx_addons_present .page-hero__crumbs a{ color:rgba(255,255,255,0.85) !important; text-decoration:none; }
body.scheme_default.trx_addons_present .page-hero__crumbs a:hover{ color:#fff !important; text-decoration:underline; }
.page-hero__crumbs .sep{ margin:0 6px; opacity:.6; }
/* The eyebrow's default coral (section 6) is ~1.1:1 on the teal overlay.
   White at 90% opacity clears AA (4.5:1) against both ends of the teal
   gradient; aqua alone does not at this small a size. */
.page-hero .eyebrow{ color:rgba(255,255,255,0.9) !important; }

/* CTA band */
.cta-band{
	position:relative;
	background:linear-gradient(120deg, var(--jm-teal-deep) 0%, var(--jm-teal) 100%);
	color:#fff;
	border-radius:var(--jm-radius);
	padding:56px 40px;
	text-align:center;
	overflow:hidden;
}
.cta-band--photo{ background-size:cover; background-position:center; }
.cta-band--photo:before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(120deg, rgba(31,92,96,0.90) 0%, rgba(42,138,134,0.78) 100%);
}
.cta-band__inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.cta-band h2{ color:#fff !important; margin-bottom:0.6rem; }
.cta-band p{ color:rgba(255,255,255,0.92); font-size:1.1rem; margin-bottom:1.6rem; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* Trust strip */
.trust-strip{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:10px 0;
	padding:14px 20px;
	background:var(--jm-cream);
	border-bottom:1px solid var(--jm-border);
	font-size:0.92rem;
	color:var(--jm-text-muted);
	text-align:center;
}
.trust-strip__item{ display:inline-flex; align-items:center; gap:8px; padding:0 16px; }
.trust-strip__item + .trust-strip__item{ border-left:1px solid var(--jm-border); }
.trust-strip__item svg{ width:16px; height:16px; flex:none; color:var(--jm-teal); }
@media (max-width:639px){
	.trust-strip__item + .trust-strip__item{ border-left:0; }
	.trust-strip__item{ width:100%; justify-content:center; padding:2px 0; }
}

/* Checklist */
ul.checklist{ list-style:none; margin:0 0 1.2em; padding:0; }
ul.checklist li{
	position:relative;
	padding-left:32px;
	margin-bottom:0.7em;
	color:var(--jm-text);
}
ul.checklist li:before{
	content:"";
	position:absolute;
	left:0; top:0.15em;
	width:20px; height:20px;
	border-radius:50%;
	background:var(--jm-coral-cta);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3,8.5 6.5,12 13,4'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center;
	background-size:11px 11px;
}

/* Two-column split */
.split{ display:flex; align-items:center; gap:56px; }
.split__media{ flex:1 1 46%; min-width:0; }
.split__media img{ width:100%; height:auto; border-radius:var(--jm-radius); box-shadow:var(--jm-shadow-md); display:block; }
.split__body{ flex:1 1 54%; min-width:0; }
.split--reverse{ flex-direction:row-reverse; }
@media (max-width:959px){
	.split, .split--reverse{ flex-direction:column; gap:32px; }
}

/* =========================================================================
   7. Neutralise legacy blue/green scheme colours sitewide
   ========================================================================= */

/* Light (.scheme_default) content: rest = deep teal, hover = coral CTA */
html.scheme_default .scheme_default a,
.scheme_default a{ color:var(--jm-teal-deep); }
html.scheme_default .scheme_default a:hover,
.scheme_default a:hover,
.scheme_default a:focus{ color:var(--jm-coral-cta); }
body.scheme_default.trx_addons_present h1 a:hover,body.scheme_default.trx_addons_present h2 a:hover,body.scheme_default.trx_addons_present h3 a:hover,
body.scheme_default.trx_addons_present h4 a:hover,body.scheme_default.trx_addons_present h5 a:hover,body.scheme_default.trx_addons_present h6 a:hover,
body.scheme_default.trx_addons_present li a:hover{ color:var(--jm-coral-cta) !important; }
.scheme_default blockquote,
.scheme_default blockquote a,
.scheme_default blockquote:before{ color:var(--jm-teal-deep); border-color:var(--jm-teal); }
.scheme_default ul>li:before,
.scheme_default .widget ul>li:before{ color:var(--jm-teal-deep); background-color:var(--jm-teal-deep); }
body.scheme_default.trx_addons_present .theme_button{ background-color:var(--jm-coral-cta) !important; color:#fff !important; }
.scheme_default .wp-block-button.is-style-outline .wp-block-button__link{ color:var(--jm-teal-deep); border-color:var(--jm-teal-deep); }
.scheme_default .wp-block-button.is-style-outline .wp-block-button__link:hover{ color:var(--jm-coral-cta); border-color:var(--jm-coral-cta); }
.scheme_default .sc_button_simple:not(.sc_button_bg_image),
.scheme_default .sc_button_simple:not(.sc_button_bg_image):before,
.scheme_default .sc_button_simple:not(.sc_button_bg_image):after{ color:var(--jm-teal-deep); }
body.scheme_default.trx_addons_present .sc_button_simple:not(.sc_button_bg_image):hover,
body.scheme_default.trx_addons_present .sc_button_simple:not(.sc_button_bg_image):hover:before,
body.scheme_default.trx_addons_present .sc_button_simple:not(.sc_button_bg_image):hover:after{ color:var(--jm-coral-cta) !important; }
body.scheme_default.trx_addons_present .sc_button_bordered:not(.sc_button_bg_image):hover{ color:#fff !important; background:var(--jm-teal-deep) !important; border-color:var(--jm-teal-deep) !important; }
.scheme_default .comments_wrap .form-submit input[type="submit"],
input[type="submit"],
button[type="submit"],
.wpcf7-submit{
	background-color:var(--jm-coral-cta);
	border-color:var(--jm-coral-cta);
	color:#fff;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover{ background-color:var(--jm-coral-cta-hover); border-color:var(--jm-coral-cta-hover); }
.scheme_default .nav-links .page-numbers.current,
.scheme_default .nav-links a.page-numbers:hover{ color:#fff; background-color:var(--jm-teal-deep); }

/* Header / footer / menu chrome (shared by scheme_default + scheme_dark)
   NOTE: Saveo's own colour rules (in the inline "saveo-main-inline-css"
   block) print AFTER our stylesheets in the DOM despite being the theme's
   base CSS, because trx_addons re-orders the styles queue. So an equal-
   specificity !important tie goes to the THEME, not to us. Every rule
   below that must beat a themed !important adds the real, always-present
   compound selector "body.scheme_default.trx_addons_present" (2 classes on
   one node) on top of the theme's own selector, guaranteeing strictly
   higher specificity regardless of load order. */
body.scheme_default.trx_addons_present .sc_layouts_item_icon,
body.scheme_default.trx_addons_present .sc_layouts_item_details_line1,
body.scheme_default.trx_addons_present .sc_layouts_logo_text{ color:var(--jm-teal-deep) !important; }
.scheme_dark .sc_layouts_item_icon,
.scheme_dark .sc_layouts_item_details_line1,
.scheme_dark .sc_layouts_logo_text{ color:rgba(255,255,255,0.92) !important; }

body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li>a{ color:var(--jm-text) !important; }
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li>a:hover,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li.sfHover>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li.current-menu-item>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li.current-menu-parent>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li.current-menu-ancestor>a{ color:var(--jm-coral-cta) !important; }
.scheme_dark .sc_layouts_menu_nav>li>a:hover,
.scheme_dark .sc_layouts_menu_nav>li.sfHover>a,
.scheme_dark .sc_layouts_menu_nav>li.current-menu-item>a,
.scheme_dark .sc_layouts_menu_nav>li.current-menu-parent>a,
.scheme_dark .sc_layouts_menu_nav>li.current-menu-ancestor>a{ color:#fff !important; }
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li>ul:before,
body.scheme_default.trx_addons_present .sc_layouts_menu_popup .sc_layouts_menu_nav,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li ul,
.scheme_dark .sc_layouts_menu_nav>li>ul:before,
.scheme_dark .sc_layouts_menu_popup .sc_layouts_menu_nav,
.scheme_dark .sc_layouts_menu_nav>li ul{ background-color:#fff !important; }
body.scheme_default.trx_addons_present .sc_layouts_menu_popup .sc_layouts_menu_nav>li>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li>a,
.scheme_dark .sc_layouts_menu_popup .sc_layouts_menu_nav>li>a,
.scheme_dark .sc_layouts_menu_nav>li li>a{ color:var(--jm-text) !important; }
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li>a:hover,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li.sfHover>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li.current-menu-item>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li.current-menu-parent>a,
body.scheme_default.trx_addons_present .sc_layouts_menu_nav>li li.current-menu-ancestor>a{ color:var(--jm-coral-cta) !important; background-color:var(--jm-cream) !important; }

body.scheme_default.trx_addons_present .socials_wrap .social_item .social_icon{ color:#fff !important; background-color:var(--jm-teal-deep) !important; }
body.scheme_default.trx_addons_present .socials_wrap .social_item:hover .social_icon{ color:#fff !important; background-color:var(--jm-coral-cta) !important; }

.trx_addons_scroll_to_top,
.trx_addons_cv .trx_addons_scroll_to_top{
	color:#fff !important;
	border-color:var(--jm-coral-cta) !important;
	background-color:var(--jm-coral-cta) !important;
}
.trx_addons_scroll_to_top:hover{
	border-color:var(--jm-coral-cta-hover) !important;
	background-color:var(--jm-coral-cta-hover) !important;
}

/* =========================================================================
   8. Contact Form 7 -- sitewide base styling
   Applies to every CF7 form (6, and any future ones) so nothing needs
   per-form CSS. See COMPONENTS.md for markup notes.
   ========================================================================= */

.wpcf7-form{ max-width:100%; }
.wpcf7-form p{ margin-bottom:1.1em; }
.wpcf7-form label{ display:block; font-weight:600; color:var(--jm-text); margin-bottom:6px; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select{
	width:100%;
	min-height:48px;
	padding:12px 16px;
	border:1px solid var(--jm-border) !important;
	border-radius:var(--jm-radius-sm);
	background-color:#fff !important;
	color:var(--jm-text) !important;
	font-family:var(--jm-font-body);
	font-size:1rem;
	box-sizing:border-box;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.wpcf7-form textarea{ min-height:140px; padding-top:12px; resize:vertical; }
.wpcf7-form select{ cursor:pointer; }
body.scheme_default.trx_addons_present .wpcf7-form input[type="text"]:focus,
body.scheme_default.trx_addons_present .wpcf7-form input[type="email"]:focus,
body.scheme_default.trx_addons_present .wpcf7-form input[type="tel"]:focus,
body.scheme_default.trx_addons_present .wpcf7-form input[type="url"]:focus,
body.scheme_default.trx_addons_present .wpcf7-form textarea:focus,
body.scheme_default.trx_addons_present .wpcf7-form select:focus{
	border-color:var(--jm-teal) !important;
	outline:3px solid var(--jm-aqua);
	outline-offset:1px;
}

body.scheme_default.trx_addons_present .wpcf7-form input[type="submit"],
.wpcf7-form input[type="submit"]{
	min-height:48px;
	padding:12px 30px;
	border:2px solid var(--jm-coral-cta) !important;
	border-radius:var(--jm-radius-sm);
	background-color:var(--jm-coral-cta) !important;
	color:#fff !important;
	font-family:var(--jm-font-body) !important;
	font-weight:700 !important;
	font-size:16px !important;
	cursor:pointer;
	transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
body.scheme_default.trx_addons_present .wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover{
	background-color:var(--jm-coral-cta-hover) !important;
	border-color:var(--jm-coral-cta-hover) !important;
	transform:translateY(-1px);
}
/* Disabled (consent not yet ticked): stays clearly a coral button, just
   softened, rather than looking like a pale/broken default input. */
body.scheme_default.trx_addons_present .wpcf7-form input[type="submit"]:disabled,
.wpcf7-form input[type="submit"]:disabled{
	background-color:var(--jm-coral-cta) !important;
	border-color:var(--jm-coral-cta) !important;
	color:#fff !important;
	opacity:0.6;
	cursor:not-allowed;
	transform:none;
}
/* Hint under the consent checkbox while the submit button is disabled.
   Markup-free: shown via ::after on the acceptance wrapper. J3 owns the
   form markup; if a form doesn't use CF7's [acceptance] shortcode this
   simply won't appear. */
.wpcf7-form span[class*="acceptance"]:has(input:not(:checked))::after{
	content:"Please tick the box above to send";
	display:block;
	margin-top:6px;
	font-size:0.85rem;
	color:var(--jm-text-muted);
}

/* Checkboxes / radios: the theme visually hides the native control
   (input[type="checkbox"]{clip:rect(1px,1px,1px,1px)}) and expects a
   sibling "<input>+span:before" pseudo-box that CF7's own markup
   (<label><input>...text...</label>, no adjacent span) never produces --
   so CF7 checkboxes/radios render invisible. Restore the native control
   sitewide inside CF7 forms rather than reproducing the pseudo-box, and
   give every option a real, >=44px tall tap row. */
body.scheme_default.trx_addons_present .wpcf7-form input[type="checkbox"],
body.scheme_default.trx_addons_present .wpcf7-form input[type="radio"]{
	clip:auto !important;
	position:static !important;
	display:inline-block !important;
	width:20px;
	height:20px;
	margin:0 10px 0 0 !important;
	padding:0 !important;
	transform:none;
	flex:none;
	accent-color:var(--jm-teal);
	cursor:pointer;
}
.wpcf7-form .wpcf7-list-item{
	display:block;
	margin:0 0 4px !important;
}
.wpcf7-form .wpcf7-list-item label,
.wpcf7-form span[class*="acceptance"] label{
	display:flex !important;
	align-items:center;
	min-height:44px;
	margin-bottom:0;
	font-weight:400;
	cursor:pointer;
}
.wpcf7-form .wpcf7-list-item-label{ font-weight:400; }

.wpcf7-form .wpcf7-not-valid-tip{
	color:var(--jm-coral-cta);
	font-size:0.85rem;
	margin-top:4px;
}
.wpcf7-form .wpcf7-response-output{
	border-radius:var(--jm-radius-sm);
	border-width:2px !important;
	padding:14px 18px;
	font-size:0.95rem;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output{
	border-color:var(--jm-coral-cta) !important;
	color:var(--jm-coral-cta);
}
.wpcf7-form.sent .wpcf7-response-output{
	border-color:var(--jm-teal) !important;
	color:var(--jm-teal-deep);
}
.wpcf7-form .wpcf7-spinner{ margin-left:10px; }

/* =========================================================================
   9. Branded 404 page (johma-404.php)
   ========================================================================= */
.johma-404-wrap{ padding:80px 0 100px; }
.johma-404{ text-align:center; max-width:640px; }
.johma-404 h1{ margin-bottom:1rem; }
.johma-404__lead{ color:var(--jm-text-muted); font-size:1.1rem; margin-bottom:2rem; }
.johma-404__links{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:2rem; }