/**
 * Focus Healthcare - long-form article layout
 * Scoped entirely under .focus-article so no other page is affected.
 * Inherits the theme's font stack on purpose (no webfont import = no CLS, no clash).
 * Icons are CSS data-URI SVGs so they survive content edits in the WP editor.
 */

.focus-article {
	--fh-brand:      #007D9E; /* theme primary */
	--fh-brand-dark: #005C75;
	--fh-brand-soft: #E6F4F8;
	--fh-cyan:       #67C9E0; /* theme accent */
	--fh-heading:    #2F3D4A; /* theme heading colour */
	--fh-text:       #46596B; /* darkened from theme #7D98AD to pass WCAG AA */
	--fh-myth:       #C0392B;
	--fh-myth-bg:    #FDF3F2;
	--fh-fact:       #15803D;
	--fh-fact-bg:    #F1FAF4;
	--fh-take:       #9A5B08;
	--fh-take-bg:    #FFF9EC;
	--fh-border:     #E2EBF0;
	--fh-radius:     14px;

	color: var(--fh-text);
	font-size: 1.7rem;
	line-height: 1.75;
	max-width: 100%;
}

/* padding must never widen a box - the theme does not set this globally */
.focus-article,
.focus-article *,
.focus-article *::before,
.focus-article *::after { box-sizing: border-box; }

/* long words/URLs must not force horizontal scroll */
.focus-article p,
.focus-article li,
.focus-article h2,
.focus-article h3 { overflow-wrap: break-word; }

.focus-article p { margin: 0 0 1.15em; }
.focus-article a { color: var(--fh-brand); text-decoration: underline; text-underline-offset: 2px; }
.focus-article a:hover,
.focus-article a:focus-visible { color: var(--fh-brand-dark); }
.focus-article a:focus-visible { outline: 3px solid var(--fh-cyan); outline-offset: 2px; border-radius: 3px; }

/* ---------------------------------------------------------------- intro */

.focus-article .fh-lead {
	font-size: 1.92rem;
	line-height: 1.65;
	color: var(--fh-heading);
	font-weight: 500;
	border-left: 4px solid var(--fh-cyan);
	padding-left: 1.6rem;
}

/* ------------------------------------------------------- principle card */

.focus-article .fh-principle {
	background: linear-gradient(135deg, var(--fh-brand) 0%, #0A94B8 60%, var(--fh-cyan) 140%);
	color: #fff;
	border-radius: var(--fh-radius);
	padding: 2.8rem 2.8rem 2.4rem;
	margin: 3.2rem 0 4rem;
	box-shadow: 0 10px 26px -12px rgba(0, 125, 158, .55);
}
.focus-article .fh-principle p { margin: 0; }
.focus-article .fh-principle__label {
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: 1.25rem;
	font-weight: 700;
	opacity: .9;
	margin-bottom: 0.96rem !important;
}
.focus-article .fh-principle__main {
	font-size: 2.08rem;
	line-height: 1.45;
	font-weight: 700;
	margin-bottom: 0.8rem !important;
	color: #fff;
}
.focus-article .fh-principle__sub { opacity: .95; line-height: 1.6; }

/* ------------------------------------------------------------ myth head */

.focus-article .fh-myth-h {
	color: var(--fh-heading);
	font-size: 2.4rem;
	line-height: 1.35;
	margin: 4rem 0 0;
	padding: 0 0 1.36rem 3.76rem;
	position: relative;
	border-bottom: 2px solid var(--fh-border);
}
/* circled cross = "myth". Paired with the word "Myth" in the text, never colour alone. */
.focus-article .fh-myth-h::before {
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 2.56rem;
	height: 2.56rem;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- card */

.focus-article .fh-card {
	background: #fff;
	border: 1px solid var(--fh-border);
	border-radius: var(--fh-radius);
	padding: 2.56rem 2.56rem 0.64rem;
	margin: 2rem 0 0;
	box-shadow: 0 4px 16px -10px rgba(47, 61, 74, .28);
}

/* fact callout */
.focus-article .fh-fact {
	background: var(--fh-fact-bg);
	border-left: 4px solid var(--fh-fact);
	border-radius: 0 10px 10px 0;
	padding: 1.52rem 1.76rem 1.52rem 4.8rem;
	position: relative;
	color: #14532D;
	font-weight: 500;
}
.focus-article .fh-fact::before {
	content: "";
	position: absolute;
	left: 1.6rem;
	top: 1.68rem;
	width: 2.16rem;
	height: 2.16rem;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.focus-article .fh-tag {
	display: inline-block;
	font-size: 1.12rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .18em .6em;
	border-radius: 999px;
	margin-right: 0.8rem;
	vertical-align: .12em;
	background: var(--fh-fact);
	color: #fff;
}

/* key takeaway */
.focus-article .fh-takeaway {
	background: var(--fh-take-bg);
	border: 1px dashed #E8C489;
	border-radius: 10px;
	padding: 1.52rem 1.76rem 1.52rem 4.8rem;
	position: relative;
	color: var(--fh-take);
	margin-bottom: 1.84rem;
}
.focus-article .fh-takeaway::before {
	content: "";
	position: absolute;
	left: 1.6rem;
	top: 1.52rem;
	width: 2.16rem;
	height: 2.16rem;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A5B08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.focus-article .fh-takeaway strong { color: #7A4706; }

/* related-service link row */
.focus-article .fh-links {
	border-top: 1px solid var(--fh-border);
	padding-top: 1.44rem;
	font-size: 1.55rem;
}

/* ------------------------------------------------------ generic section */

.focus-article .fh-h {
	color: var(--fh-heading);
	font-size: 2.4rem;
	line-height: 1.35;
	margin: 4.4rem 0 1.6rem;
	padding-bottom: 1.12rem;
	border-bottom: 2px solid var(--fh-border);
}

.focus-article .fh-prevent {
	background: var(--fh-brand-soft);
	border-radius: var(--fh-radius);
	padding: 2.56rem 2.56rem 0.8rem;
	border: 1px solid #CFE6EE;
}
.focus-article .fh-prevent .fh-strong {
	display: block;
	color: var(--fh-brand-dark);
	font-size: 1.79rem;
	font-weight: 700;
}

/* ------------------------------------------------------- closing panel */

.focus-article .fh-close {
	background: #F7FBFD;
	border: 1px solid #CFE6EE;
	border-radius: var(--fh-radius);
	padding: 2.56rem 2.56rem 2.8rem;
	margin-top: 1.6rem;
}
.focus-article .fh-close__tagline {
	font-size: 1.95rem;
	font-weight: 700;
	color: var(--fh-brand-dark);
	margin-bottom: 1.76rem !important;
}
/* Spans, not <li>, so the theme's content-list glyphs can never leak in. */
.focus-article .fh-pills {
	margin: 0 0 2.24rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.96rem;
}
.focus-article .fh-pill {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--fh-cyan);
	color: var(--fh-brand-dark);
	font-weight: 700;
	font-size: 1.44rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 0.72rem 1.68rem;
	border-radius: 999px;
	margin: 0;
}

/* buttons - 44px min height for touch targets */
.focus-article .fh-cta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; }
.focus-article .fh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 1.12rem 2.4rem;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.focus-article .fh-btn--primary {
	background: var(--fh-brand);
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(0, 125, 158, .8);
}
.focus-article .fh-btn--primary:hover,
.focus-article .fh-btn--primary:focus-visible { background: var(--fh-brand-dark); color: #fff; }
.focus-article .fh-btn--ghost {
	background: #fff;
	color: var(--fh-brand-dark);
	border: 2px solid var(--fh-brand);
}
.focus-article .fh-btn--ghost:hover,
.focus-article .fh-btn--ghost:focus-visible { background: var(--fh-brand-soft); color: var(--fh-brand-dark); }

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

.focus-article .fh-faq { border-top: 1px solid var(--fh-border); margin-top: 0.8rem; }
.focus-article .fh-faq details {
	border-bottom: 1px solid var(--fh-border);
	background: #fff;
}
.focus-article .fh-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.68rem 4.8rem 1.68rem 0.4rem;
	position: relative;
	font-weight: 600;
	color: var(--fh-heading);
	min-height: 44px;
}
.focus-article .fh-faq summary::-webkit-details-marker { display: none; }
.focus-article .fh-faq summary:focus-visible {
	outline: 3px solid var(--fh-cyan);
	outline-offset: -3px;
	border-radius: 6px;
}
.focus-article .fh-faq summary:hover { color: var(--fh-brand); }
/* chevron */
.focus-article .fh-faq summary::after {
	content: "";
	position: absolute;
	right: 0.8rem;
	top: 50%;
	width: 1.84rem;
	height: 1.84rem;
	margin-top: -0.92rem;
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007D9E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform .22s ease;
}
.focus-article .fh-faq details[open] summary::after { transform: rotate(180deg); }
.focus-article .fh-faq details[open] summary { color: var(--fh-brand); }
.focus-article .fh-faq .fh-faq__a {
	padding: 0 1.6rem 1.84rem 0.4rem;
	margin: 0;
	color: var(--fh-text);
}
/* the H3 stays for SEO/structure but inherits the summary's look */
.focus-article .fh-faq h3 {
	margin: 0;
	font-size: 1.68rem;
	line-height: 1.5;
	font-weight: 600;
	color: inherit;
	display: inline;
}

.focus-article .fh-note {
	margin-top: 2.4rem;
	background: var(--fh-brand-soft);
	border-radius: 10px;
	padding: 1.6rem 1.84rem;
	font-size: 1.55rem;
}

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

@media (max-width: 782px) {
	.focus-article { font-size: 1.6rem; }
	.focus-article .fh-lead { font-size: 1.76rem; }
	.focus-article .fh-myth-h,
	.focus-article .fh-h { font-size: 2.05rem; }
	.focus-article .fh-principle,
	.focus-article .fh-card,
	.focus-article .fh-prevent,
	.focus-article .fh-close { padding-left: 1.76rem; padding-right: 1.76rem; }
	.focus-article .fh-principle__main { font-size: 1.84rem; }
	.focus-article .fh-cta .fh-btn { width: 100%; }
}

/* users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	.focus-article * { transition: none !important; animation: none !important; }
}

/* print: expand every FAQ answer */
@media print {
	.focus-article .fh-faq details { display: block; }
	.focus-article .fh-faq .fh-faq__a { display: block !important; }
	.focus-article .fh-principle { background: #fff; color: #000; box-shadow: none; }
}