/* DNA/GUT/EHS/CGM screening comparison table — biovital-child */

.dna-screening {
	--dna-navy: #1B3052;
	--dna-dark: #272626;
	--dna-text: #625A53;
	--dna-gold: #F0CF79;
	--dna-border: #E7E2D9;
	--dna-bg-muted: #F7F4EF;
	--dna-category-bg: #EAE6DF;
	--dna-check: #B99B5D;
	--dna-sticky-offset: 0px;
	--dna-heading-font: "Butler Local", serif;
	--dna-body-font: "Dm Sans Local", sans-serif;
	--dna-muted: #7d7c7c;
	--dna-package-text: #525151;

	margin: 0 auto;
	max-width: 1200px;
	font-family: var(--dna-body-font);
	color: var(--dna-text);
}

/* Keep the sticky header clear of the WP admin toolbar for logged-in editors. */
body.admin-bar .dna-screening {
	--dna-sticky-offset: 32px;
}

/* Re-enable native position:sticky on pages that render this table. The parent theme
   sets `overflow: hidden auto` on both <html> and <body>; since <html> already owns the
   viewport scroll, <body>'s overflow turns it into a scroll container that never scrolls,
   and every sticky descendant then sticks to <body> instead of the viewport (i.e. never).
   `overflow-x: clip` keeps the theme's horizontal clipping without creating a scroll
   container. Scoped with :has() so no other page is affected. */
body:has([data-component="dna-screening-table"]) {
	overflow: visible !important;
	overflow-x: clip !important;
}

/* Sub-line under the page's section title (the Elementor heading right above the
   shortcode), e.g. "Same DNAassess in all packages. ..." */
.dna-screening__intro {
	margin: 0 0 40px !important;
	padding: 0 16px;
	font-family: var(--dna-body-font);
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	color: var(--dna-muted) !important;
}

/* No outer frame around the table (as on eternami.com/programme/): only the sticky
   header box gets an outline (see the thead rules below), and the body rows run
   edge-to-edge without left/right borders. */
.dna-screening__panel {
	background: #fff;
}

.dna-screening__scroll {
	/* No overflow here on purpose: per the CSS overflow spec, setting overflow-x to
	   anything but visible forces overflow-y to compute as auto too, which would turn
	   this div into its own scroll container and break position:sticky on the thead
	   below (sticky needs the page itself to be the scrolling ancestor). Mobile avoids
	   horizontal scroll entirely with a stacked layout instead (see the media query). */
	border-radius: 16px;
}

.dna-screening__table {
	width: 100%;
	min-width: 760px;
	/* `separate`, not `collapse`: with collapsed borders, Chrome paints the borders of a
	   sticky row in their original position, so they would scroll away from the header. */
	border-collapse: separate;
	border-spacing: 0;
}

/* Sticky header: tier name/price + Benefits + Biomarkers rows attach to the top of the
   viewport while category rows scroll underneath, and release once the table ends (the
   table is the thead's containing block). Native sticky runs on the compositor, so it
   tracks wheel/trackpad scrolling without the lag a JS scroll-driven transform has. */
.dna-screening__table thead {
	position: sticky;
	top: var(--dna-sticky-offset);
	z-index: 5;
	background: #fff !important;
	color: var(--dna-text);
}

.dna-screening__table thead tr:last-child th,
.dna-screening__table thead tr:last-child td {
	border-bottom: 1px solid var(--dna-border);
}

/* Header box outline with rounded corners. */
.dna-screening__table thead tr > :first-child {
	border-left: 1px solid var(--dna-border) !important;
}

.dna-screening__table thead tr > :last-child {
	border-right: 1px solid var(--dna-border) !important;
}

.dna-screening__table thead tr:first-child > * {
	border-top: 1px solid var(--dna-border) !important;
}

.dna-screening__table thead tr:first-child > :first-child {
	border-top-left-radius: 16px;
}

.dna-screening__table thead tr:first-child > :last-child {
	border-top-right-radius: 16px;
}

.dna-screening__table thead tr:last-child > :first-child {
	border-bottom-left-radius: 16px;
}

.dna-screening__table thead tr:last-child > :last-child {
	border-bottom-right-radius: 16px;
}

/* Body rows: no vertical borders at all — only horizontal row separators, as on
   eternami.com/programme/ (the parent theme adds its own on td too, hence !important). */
.dna-screening__table tbody th,
.dna-screening__table tbody td {
	border-left: 0 !important;
	border-right: 0 !important;
}

/* No line under the CTA row / bottom of the table. */
.dna-screening__table tbody .dna-screening__cta-row td,
.dna-screening__table tfoot td {
	border-bottom: 0 !important;
}

.dna-screening__table {
	border: 0 !important;
}

.dna-screening__row-label-cell {
	text-align: left;
	font-family: var(--dna-body-font);
	font-weight: 500;
	color: var(--dna-dark) !important;
	padding: 18px 16px;
	width: 220px;
	min-width: 180px;
	vertical-align: top;
	position: sticky;
	left: 0;
	background: #fff !important;
	z-index: 2;
}

.dna-screening__package-head {
	text-align: left;
	padding: 22px 16px 18px;
	min-width: 220px;
	border-left: 1px solid var(--dna-border);
	vertical-align: top;
	background: #fff !important;
}

/* Icon-beside-text layout, matching eternami.com/programme/'s own
   .et__screening-table-package-header (a flex row: icon, then name+price stacked). */
.dna-screening__package-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Dimensions match eternami.com/programme/'s own
   .et__screening-table-package-header img rule (68x68, 12px radius, object-fit: cover). */
.dna-screening__package-badge {
	display: block;
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	max-width: 68px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
}

.dna-screening__package-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.dna-screening__package-badge--0 {
	background-image: url("../images/package-badge-1.webp?v=2");
}

.dna-screening__package-badge--1 {
	background-image: url("../images/package-badge-2.webp?v=2");
}

.dna-screening__package-badge--2 {
	background-image: url("../images/package-badge-3.webp?v=2");
}

.dna-screening__package-badge--3 {
	background-image: url("../images/package-badge-4.webp?v=2");
}

.dna-screening__package-name {
	display: block;
	font-family: var(--dna-heading-font);
	font-weight: 700;
	font-size: 20px;
	color: var(--dna-package-text) !important;
	margin-bottom: 6px;
	/* Separator under the name, running to the column's edge. */
	padding-bottom: 6px;
	border-bottom: 1px solid var(--dna-muted);
}

.dna-screening__package-price {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--dna-package-text) !important;
}

.dna-screening__info-row th,
.dna-screening__info-row td {
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
	border-left: 1px solid var(--dna-border);
	background: #fff !important;
}

.dna-screening__desc-row td,
.dna-screening__biomarkers-row td {
	color: var(--dna-text) !important;
}

/* "Lab Tests Included" counts (44, 69, ...) — big & bold. */
.dna-screening__biomarkers-row td {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--dna-dark) !important;
}

.dna-screening__desc-row .dna-screening__row-label-cell,
.dna-screening__biomarkers-row .dna-screening__row-label-cell {
	font-size: 19px;
}

/* Sheet header rows ("Tests included | Participate | Predict | Prevent", one per workbook
   sheet) — navy bars that start each sheet's block, mirroring the workbook's header row. */
.dna-screening__group-row th {
	padding: 16px;
	background: var(--dna-navy) !important;
	color: #fff !important;
	font-family: var(--dna-body-font);
	font-size: 15px;
	font-weight: 600;
	vertical-align: middle;
}

.dna-screening__group-row .dna-screening__group-tier {
	text-align: center;
}

/* Category accordion heading rows — the [aria-expanded] selector defeats a generic
   theme accordion rule that otherwise paints the open row navy, and the :hover/:focus/
   :active variants defeat any button/row default state doing the same on interaction.
   Both the <tr> and its <td> are covered since the theme's generic row-hover tint can
   land on either depending on the rule. */
.dna-screening__heading-row,
.dna-screening__heading-row:hover,
.dna-screening__heading-row:focus-within,
.dna-screening__heading-row td,
.dna-screening__heading-row[aria-expanded="true"] td,
.dna-screening__heading-row[aria-expanded="false"] td,
.dna-screening__heading-row:hover td,
.dna-screening__heading-row:focus-within td,
.dna-screening__heading-row td:hover,
.dna-screening__heading-row td:focus-within {
	background: var(--dna-category-bg) !important;
}

.dna-screening__heading-row td {
	padding: 0;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 1px solid var(--dna-border);
}

.dna-screening__toggle:hover,
.dna-screening__toggle:focus,
.dna-screening__toggle:active {
	background: none !important;
	color: var(--dna-navy) !important;
	outline: none;
}

/* The parent theme paints two absolutely-positioned overlays on every <button>:
   `::before` (the resting background — the gold #F0CF79 that covered the category rows
   regardless of what background the row/td/button had) and `::after` (the hover colour,
   which caused the navy flash). Both sit on top of — and are independent of — this
   button's own `background`, so overriding `background` never touched them.
   `content: none` stops both pseudo-elements from generating at all. */
.dna-screening__toggle::before,
.dna-screening__toggle:hover::before,
.dna-screening__toggle:focus::before,
.dna-screening__toggle:active::before,
.dna-screening__toggle::after,
.dna-screening__toggle:hover::after,
.dna-screening__toggle:focus::after,
.dna-screening__toggle:active::after {
	content: none !important;
	opacity: 0 !important;
	background: none !important;
}

.dna-screening__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 14px 16px;
	font-family: var(--dna-body-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--dna-navy) !important;
	text-align: center;
}

.dna-screening__heading-row[aria-expanded="true"] .dna-screening__toggle {
	color: var(--dna-navy) !important;
}

/* +/− icon pinned to the row's right edge (title stays centred): + while collapsed,
   − while open. */
.dna-screening__toggle {
	position: relative;
	padding-right: 64px !important;
	padding-left: 64px !important;
}

.dna-screening__toggle-icon {
	position: absolute;
	top: 50%;
	right: 16px;
	/* 16px icon inside a 34px white box. */
	box-sizing: content-box;
	width: 16px !important;
	height: 16px !important;
	padding: 9px;
	max-width: none;
	margin: 0;
	background: #fff;
	border-radius: 4px;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.dna-screening__toggle-icon--minus,
.dna-screening__heading-row.is-open .dna-screening__toggle-icon--plus {
	display: none;
}

.dna-screening__heading-row.is-open .dna-screening__toggle-icon--minus {
	display: block;
}

.dna-screening__toggle:hover .dna-screening__toggle-icon,
.dna-screening__toggle:focus-visible .dna-screening__toggle-icon {
	opacity: 0.6;
}

/* Data rows */
.dna-screening__item-row th,
.dna-screening__item-row td {
	padding: 14px 16px;
	border-left: 1px solid var(--dna-border);
	border-bottom: 1px solid var(--dna-border);
	font-size: 14.5px;
	background: #fff !important;
	color: var(--dna-dark) !important;
}

.dna-screening__item-row:hover td,
.dna-screening__item-row:hover th {
	background: var(--dna-bg-muted) !important;
}

.dna-screening__item-row.is-hidden {
	display: none;
}

.dna-screening__mark {
	text-align: center;
}

.dna-screening__check {
	display: inline-block;
	width: 22px !important;
	height: 22px !important;
	max-width: none;
	margin: 0;
	object-fit: contain;
	vertical-align: middle;
}

.dna-screening__dash {
	color: var(--dna-border);
	font-weight: 600;
}

/* CTA row */
.dna-screening__cta-row td {
	padding: 20px 16px 24px;
	border-left: 1px solid var(--dna-border);
	text-align: center;
	background: #fff !important;
}

/* Rounded-rectangle button matching the theme's own buttons (e.g. the header's
   "Learn More": 5px radius, 15px/30px padding, DM Sans 15px/600). */
.dna-screening__cta {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 5px;
	background: var(--dna-gold) !important;
	color: var(--dna-dark) !important;
	font-family: var(--dna-body-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.dna-screening__cta:hover,
.dna-screening__cta:focus-visible {
	background: var(--dna-navy) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Mobile: stacked layout modeled on eternami.com/programme/ — no horizontal scroll.
   Every <tr> becomes a grid of --dna-cols equal columns (set inline from PHP, so it
   works for 3- and 4-tier lines). Row labels span the full width on their own line,
   with the tier cells (checks / values / CTAs) underneath. The thead stays sticky.
   --------------------------------------------------------------------------- */
@media (max-width: 782px) {
	/* The WP admin bar is 46px tall here, and stops being fixed below 601px. */
	body.admin-bar .dna-screening {
		--dna-sticky-offset: 46px;
	}

	.dna-screening__table,
	.dna-screening__table thead,
	.dna-screening__table tbody {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.dna-screening__table tr {
		display: grid;
		grid-template-columns: repeat(var(--dna-cols, 4), minmax(0, 1fr));
	}

	.dna-screening__table th,
	.dna-screening__table td {
		display: block;
		border: 0 !important;
		border-radius: 0 !important;
	}

	.dna-screening__row-label-cell {
		grid-column: 1 / -1;
		position: static;
		width: auto;
		min-width: 0;
		text-align: center;
	}

	/* Header card: one outline + radius on the (block-level) thead itself. */
	.dna-screening__table thead {
		border: 1px solid var(--dna-border);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(27, 48, 82, 0.06);
	}

	.dna-screening__header-row > .dna-screening__row-label-cell,
	.dna-screening__desc-row {
		display: none !important;
	}

	.dna-screening__package-head {
		min-width: 0;
		padding: 12px 4px 10px;
		text-align: center;
	}

	.dna-screening__package-row {
		flex-direction: column;
		gap: 8px;
	}

	.dna-screening__package-badge {
		width: 56px;
		height: 56px;
		max-width: 56px;
		border-radius: 10px;
	}

	.dna-screening__package-info {
		align-items: center;
		gap: 2px;
	}

	.dna-screening__package-name {
		font-size: 14px;
		line-height: 1.2;
		margin-bottom: 0;
		word-break: break-word;
	}

	.dna-screening__package-price {
		font-size: 13px;
	}

	/* "Biomarkers / Data Points": grey label bar, then a divided row of values. */
	.dna-screening__biomarkers-row .dna-screening__row-label-cell {
		padding: 10px;
		font-size: 14px !important;
		font-weight: 400;
		background: var(--dna-bg-muted) !important;
		border-top: 1px solid var(--dna-border) !important;
		border-bottom: 1px solid var(--dna-border) !important;
	}

	.dna-screening__biomarkers-row td {
		padding: 10px 4px;
		text-align: center;
		font-size: 20px !important;
	}

	.dna-screening__biomarkers-row td + td,
	.dna-screening__item-row td + td,
	.dna-screening__cta-row td + td {
		border-left: 1px solid var(--dna-border) !important;
	}

	/* Sheet header rows: "Tests included" on its own line, tier names underneath. */
	.dna-screening__group-row .dna-screening__row-label-cell {
		padding: 12px 10px 4px;
		font-size: 15px;
	}

	.dna-screening__group-row .dna-screening__group-tier {
		padding: 4px 4px 12px;
		font-size: 13px;
		word-break: break-word;
	}

	/* Category headings span the full width. */
	.dna-screening__heading-row td {
		grid-column: 1 / -1;
		border-bottom: 1px solid var(--dna-border) !important;
	}

	.dna-screening__toggle {
		padding: 12px 48px !important;
		font-size: 15px;
	}

	.dna-screening__toggle-icon {
		right: 10px;
		width: 14px !important;
		height: 14px !important;
		padding: 8px;
	}

	/* Data rows: centred label on its own line, check cells underneath. */
	.dna-screening__item-row.is-hidden {
		display: none;
	}

	.dna-screening__item-row .dna-screening__row-label-cell {
		padding: 14px 10px 10px;
		font-size: 14px;
		font-weight: 600;
	}

	.dna-screening__item-row td {
		padding: 10px 4px;
		border-top: 1px solid var(--dna-border) !important;
		border-bottom: 1px solid var(--dna-border) !important;
	}

	.dna-screening__item-row.is-alt th,
	.dna-screening__item-row.is-alt td {
		background: var(--dna-bg-muted) !important;
	}

	/* CTA row: no label column; buttons shrink to fit a quarter-width cell. */
	.dna-screening__cta-row > .dna-screening__row-label-cell {
		display: none !important;
	}

	.dna-screening__cta-row td {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 4px;
		background: var(--dna-bg-muted) !important;
	}

	/* Two-line button ("Select This / Package"), as on eternami's mobile view. */
	.dna-screening__cta {
		display: block;
		width: 100%;
		max-width: 96px;
		padding: 9px 3px;
		border-radius: 5px;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 600px) {
	body.admin-bar .dna-screening {
		--dna-sticky-offset: 0px;
	}
}