/*
 * HClinic design system - 4/7 content
 * Editorial typography, lists, links, tables, quotes and images for pages and medical articles.
 *
 * Scope: price/service pages have no .entry-content wrapper (their copy is inside WPBakery
 * .wpb_text_column), while single posts use both. Rules therefore target
 * #content :is(.entry-content, .wpb_text_column).
 *
 * Legacy copy carries inline style="" (tahoma 12pt on almost every paragraph, red #ff0000 and blue
 * #0000FF text). That markup lives in the database and is not edited here, so the few rules that
 * normalise it use !important on purpose and only on those inline patterns.
 */

/* ==========================================================================================
   Body copy
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) {
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: var(--hc-text-base);
	line-height: 1.7;
}

#content :is(.entry-content, .wpb_text_column) p {
	margin: 0 0 1.25rem;
	font-size: var(--hc-text-base);
	line-height: 1.7;
}

/* Paragraphs that hold typed "- item<br>- item" lines need extra air between lines. */
#content :is(.entry-content, .wpb_text_column) p:has(br) {
	line-height: 1.8;
}

/* Saved inline fonts: one typeface and size for body copy (tahoma 10-12pt spans). */
#content :is(.entry-content, .wpb_text_column) [style*="font-family"] {
	font-family: var(--hc-font) !important;
}

#content :is(.entry-content, .wpb_text_column) :is(p, li, td, th) span[style*="font-size: 12pt"],
#content :is(.entry-content, .wpb_text_column) :is(p, li, td, th) span[style*="font-size:12pt"],
#content :is(.entry-content, .wpb_text_column) :is(p, li, td, th) span[style*="font-size: 11pt"],
#content :is(.entry-content, .wpb_text_column) :is(p, li, td, th) span[style*="font-size: 10pt"] {
	font-size: inherit !important;
}

/* Saved red / blue accents: same meaning, calmer values with AA contrast on white. */
#content :is(.entry-content, .wpb_text_column) [style*="color: #ff0000"],
#content :is(.entry-content, .wpb_text_column) [style*="color:#ff0000"],
#content :is(.entry-content, .wpb_text_column) [style*="color: red"] {
	color: var(--hc-alert) !important;
}

#content :is(.entry-content, .wpb_text_column) [style*="color: #0000ff"],
#content :is(.entry-content, .wpb_text_column) [style*="color: #0000FF"],
#content :is(.entry-content, .wpb_text_column) [style*="color:#0000ff"] {
	color: var(--hc-blue-primary-dark) !important;
}

/* ==========================================================================================
   Headings inside copy: tight tracking, confident weight, spacing that anchors a title to the
   text that follows it (more space above than below).
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) :is(h1, h2, h3, h4) {
	margin-bottom: .75rem;
	letter-spacing: -.02em;
	line-height: 1.25;
	font-weight: 700;
	text-wrap: balance;
}

#content :is(.entry-content, .wpb_text_column) h2 {
	margin-top: 2.5rem;
}

#content :is(.entry-content, .wpb_text_column) h3 {
	margin-top: 2rem;
	margin-bottom: .5rem;
}

#content :is(.entry-content, .wpb_text_column) h4 {
	margin-top: 1.5rem;
	margin-bottom: .5rem;
}

#content :is(.entry-content, .wpb_text_column) :is(h1, h2, h3, h4):first-child {
	margin-top: 0;
}

/* ==========================================================================================
   Links in running text
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) :is(p, li, td) a:not([class]) {
	color: var(--hc-blue-primary);
	text-decoration: underline;
	text-decoration-color: rgba(30, 115, 190, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--hc-duration-fast) var(--hc-ease-standard),
		text-decoration-color var(--hc-duration-fast) var(--hc-ease-standard);
}

#content :is(.entry-content, .wpb_text_column) :is(p, li, td) a:not([class]):hover {
	color: var(--hc-navy-deep);
	text-decoration-color: currentColor;
}

/* ==========================================================================================
   Lists: a drawn marker, aligned to the first line, same on every template.
   Bullets become a circled check; numbered lists get numbered discs. Both are decoration
   (empty generated content), so screen readers still announce the native list semantics.
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) :is(ul, ol) {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

#content :is(.entry-content, .wpb_text_column) :is(ul, ol) :is(ul, ol) {
	margin: .5rem 0 .25rem;
}

#content :is(.entry-content, .wpb_text_column) :is(ul, ol) > li {
	position: relative;
	margin: 0 0 .625rem;
	padding-left: 30px;
	color: var(--hc-slate-text);
	line-height: 1.65;
}

#content :is(.entry-content, .wpb_text_column) ul > li::before {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23e0f2fe'/%3E%3Cpath d='M5.6 10.4l3 3 5.9-6.4' fill='none' stroke='%231e73be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#content :is(.entry-content, .wpb_text_column) ol {
	counter-reset: hc-ol;
}

#content :is(.entry-content, .wpb_text_column) ol > li {
	counter-increment: hc-ol;
}

#content :is(.entry-content, .wpb_text_column) ol > li::before {
	content: counter(hc-ol);
	position: absolute;
	top: .15em;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-blue-surface);
	box-shadow: inset 0 0 0 1px #bae6fd;
	color: var(--hc-blue-primary-dark);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
}

/* ==========================================================================================
   Tables: price lists and data tables. Every row and number stays visible at any width.
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) table {
	width: 100%;
	margin: 1.5rem 0 2rem;
	border: 1px solid var(--hc-border-subtle);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg);
	box-shadow: var(--hc-shadow-card);
	overflow: hidden;
}

#content :is(.entry-content, .wpb_text_column) table :is(th, td) {
	padding: .75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--hc-border-subtle);
	color: var(--hc-slate-text);
	font-size: .9375rem;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
	overflow-wrap: anywhere;
}

#content :is(.entry-content, .wpb_text_column) table tr:last-child > :is(th, td) {
	border-bottom: 0;
}

#content :is(.entry-content, .wpb_text_column) table thead th {
	padding-block: .875rem;
	border-bottom: 2px solid var(--hc-border-subtle);
	background: #f1f5f9;
	color: var(--hc-navy-deep);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

#content :is(.entry-content, .wpb_text_column) table tbody tr:nth-child(even) > :is(th, td) {
	background: #f8fafc;
}

#content :is(.entry-content, .wpb_text_column) table tbody tr {
	transition: background-color var(--hc-duration-fast) var(--hc-ease-standard);
}

#content :is(.entry-content, .wpb_text_column) table tbody tr:hover > :is(th, td) {
	background: var(--hc-blue-surface);
}

/* Row numbers */
#content :is(.entry-content, .wpb_text_column) table th[scope="row"] {
	width: 3rem;
	color: var(--hc-slate-muted);
	font-weight: 600;
	text-align: center;
}

/* Price column of the striped price tables */
#content :is(.entry-content, .wpb_text_column) table.table-striped td:last-child {
	color: var(--hc-navy-deep);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

#content :is(.entry-content, .wpb_text_column) table.table-striped thead th:last-child {
	text-align: right;
}

/* Saved price colours (navy/blue) follow the table, old prices recede, promos use the alert hue */
#content :is(.entry-content, .wpb_text_column) table td span[style*="color: #333399"],
#content :is(.entry-content, .wpb_text_column) table td span[style*="color: #0000ff"] {
	color: inherit !important;
}

#content :is(.entry-content, .wpb_text_column) table :is(del, s, span[style*="line-through"]) {
	color: var(--hc-slate-muted) !important;
	font-size: .875em !important;
	font-weight: 500 !important;
}

/* Phones: wide tables scroll sideways inside their own box (touch momentum), page never does. */
@media (max-width: 767px) {
	#content :is(.entry-content, .wpb_text_column) table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#content :is(.entry-content, .wpb_text_column) table :is(th, td) {
		padding: .625rem .75rem;
	}
}

/* A saved empty <p>&nbsp;</p> before a table is a 2-line void; the table already has its own
   top margin, so any paragraph directly before one sits tight against it. */
#content :is(.entry-content, .wpb_text_column) p:has(+ table) {
	margin-bottom: 0;
}

#content :is(.entry-content, .wpb_text_column) p + table {
	margin-top: .5rem;
}

/* ==========================================================================================
   Quotes and images
   ========================================================================================== */

#content :is(.entry-content, .wpb_text_column) blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--hc-blue-primary);
	border-radius: 0 var(--hc-radius-md) var(--hc-radius-md) 0;
	background: var(--hc-blue-surface);
	color: var(--hc-slate-text);
	font-size: 1.0625rem;
	font-style: normal;
	line-height: 1.65;
}

#content :is(.entry-content, .wpb_text_column) blockquote p:last-child {
	margin-bottom: 0;
}

#content :is(.entry-content, .wpb_text_column) :is(.wp-block-image, figure) img,
#content :is(.entry-content, .wpb_text_column) p > img {
	border-radius: var(--hc-radius-md);
}

#content :is(.entry-content, .wpb_text_column) :is(figcaption, .wp-caption-text) {
	margin-top: .5rem;
	color: var(--hc-slate-muted);
	font-size: .875rem;
	line-height: 1.5;
}

/* ==========================================================================================
   Articles: comfortable measure. Applies to single posts only; price and service pages keep
   the full container width.
   ========================================================================================== */

.single #content .entry-content :is(p, ul, ol, blockquote, .hclinic-eeat-badge, .hclinic-eeat-sources, .sources, .hc-cta) {
	max-width: var(--hc-reading-width);
}

/* ==========================================================================================
   E-E-A-T blocks (rendered at request time by mu-plugins/hclinic-medical-trust.php)
   Classes only: the PHP emits no inline styles, so legacy and pipeline articles look identical.
   ========================================================================================== */

#content .hclinic-eeat-badge {
	margin: var(--hc-space-4) 0 var(--hc-space-5);
	padding: var(--hc-space-4) var(--hc-space-5);
	border: 1px solid #bae6fd;
	border-left: 4px solid var(--hc-blue-primary);
	border-radius: var(--hc-radius-md);
	background: var(--hc-blue-surface);
	color: var(--hc-slate-text);
	font-size: .9375rem;
	line-height: 1.55;
}

#content .hclinic-eeat-badge .hclinic-eeat-date {
	color: var(--hc-slate-muted);
	font-size: .875rem;
}

#content .hclinic-eeat-sources {
	margin: 2.5rem 0 var(--hc-space-4);
	padding: var(--hc-space-4) var(--hc-space-5);
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg);
	color: var(--hc-slate-muted);
	font-size: .875rem;
	line-height: 1.55;
}

#content .hclinic-eeat-sources h4 {
	margin: 0 0 .5rem;
	color: var(--hc-navy-deep);
	font-size: 1rem;
}

#content .hclinic-eeat-sources p {
	margin: 0;
	font-size: inherit;
}

/* ==========================================================================================
   Pipeline articles (seo-pipeline): lead paragraph, information notice, source list, booking card
   The delivered HTML carries these as classes (its inline styles are stripped on import).
   ========================================================================================== */

#content .entry-content .lead {
	margin-bottom: 1.5rem;
	color: var(--hc-navy-deep);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.65;
}

#content .entry-content .notice {
	margin: 1.5rem 0;
	padding: var(--hc-space-3) var(--hc-space-4);
	border-left: 4px solid var(--hc-border-subtle);
	border-radius: 0 var(--hc-radius-sm) var(--hc-radius-sm) 0;
	background: #f1f5f9;
	color: var(--hc-slate-muted);
	font-size: .9375rem;
	line-height: 1.55;
}

#content .entry-content .sources {
	margin: 2rem 0;
	padding: var(--hc-space-4) var(--hc-space-5);
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg);
	font-size: .875rem;
}

#content .entry-content .sources :is(h2, h3, h4) {
	margin: 0 0 .5rem;
	font-size: 1rem;
}

#content .entry-content .sources ul {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

#content .entry-content .sources ul > li {
	margin-bottom: .375rem;
	padding-left: .25rem;
}

#content .entry-content .sources ul > li::before {
	display: none;
}

#content .entry-content .hc-cta {
	margin: 2.5rem 0 var(--hc-space-4);
	padding: var(--hc-space-5);
	border: 1px solid #bae6fd;
	border-radius: var(--hc-radius-lg);
	background: var(--hc-blue-surface);
}

#content .entry-content .hc-cta > h2 {
	margin: 0 0 .75rem;
	font-size: var(--hc-h3);
}

#content .entry-content .hc-cta p:last-child {
	margin-bottom: 0;
}

#content .entry-content .hc-cta p:has(> .hc-button) {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

#content .entry-content a.hc-button,
#content .entry-content a.hc-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--hc-tap);
	padding: 0 1.25rem;
	border: 1px solid var(--hc-blue-primary);
	border-radius: var(--hc-radius-sm);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard),
		background-color var(--hc-duration-fast) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard);
}

#content .entry-content a.hc-button {
	background: var(--hc-blue-primary);
	box-shadow: var(--hc-shadow-sm);
	color: #fff;
}

#content .entry-content a.hc-button:hover {
	background: var(--hc-blue-primary-dark);
	box-shadow: var(--hc-shadow-hover);
	transform: translateY(-1px);
}

#content .entry-content a.hc-secondary {
	background: var(--hc-card-bg);
	color: var(--hc-blue-primary-dark);
}

#content .entry-content a.hc-secondary:hover {
	background: var(--hc-blue-surface);
	transform: translateY(-1px);
}

/* ==========================================================================================
   Legacy Google Translate remnants
   Saved content contains <pre class="tw-data-text ..."> boxes that Google Translate left behind.
   Some are empty (a stray empty box on doctor pages); many wrap REAL text such as price-table
   cells and doctor roles, which must stay visible. So only empty ones are hidden, and the rest
   are made to read like ordinary text instead of monospace preformatted blocks.
   ========================================================================================== */

pre.tw-data-text:empty {
	display: none;
}

pre.tw-data-text:not(:empty) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	overflow: visible;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}