/**
 * S2 — Headings: keep the look of headings that inc/areas/fix-s2-headings.php changed.
 * Each changed element carries "yb-s2-hN" (N = its original level). These rules repeat the
 * tag rules that used to style it, with the SAME specificity as the originals:
 * :is(h1,...,div) counts as one tag and :where() adds nothing, so class rules still win as before.
 */

/* 1. WoodMart base (css/parts/base.min.css) — specificity 0,0,1 */
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3, .yb-s2-h4, .yb-s2-h5, .yb-s2-h6) {
	display: block;
	margin-bottom: var(--wd-tags-mb);
	color: var(--wd-title-color);
	text-transform: var(--wd-title-transform);
	font-weight: var(--wd-title-font-weight);
	font-style: var(--wd-title-font-style);
	font-family: var(--wd-title-font);
	line-height: 1.4;
}
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1) { font-size: 28px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h2) { font-size: 24px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h3) { font-size: 22px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h4) { font-size: 18px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h5) { font-size: 16px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h6) { font-size: 12px; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3, .yb-s2-h4, .yb-s2-h5, .yb-s2-h6) a { color: inherit; }
:is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3, .yb-s2-h4, .yb-s2-h5, .yb-s2-h6) a:hover { color: var(--wd-link-color-hover); }

/* 2. Child style.css ".yb h1-h4" — specificity 0,1,1 */
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3, .yb-s2-h4) {
	font-family: var(--yb-font);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-transform: none;
	color: inherit;
}

/* 3. 00-tokens.css ".yb h1-h6" (loads after style.css) — specificity 0,1,1 */
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3, .yb-s2-h4, .yb-s2-h5, .yb-s2-h6) {
	font-family: var(--yb-font);
	font-weight: 600;
	letter-spacing: 0;
}
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h1) { font-size: 30px; line-height: 1.2; }
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h2) { font-size: 28px; line-height: 1.2; }
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h3) { font-size: 24px; line-height: 1.25; }
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h4) { font-size: 19px; line-height: 1.26; }
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h5) { font-size: 17px; line-height: 1.25; }
.yb :is(h1, h2, h3, h4, h5, h6, div):where(.yb-s2-h6) { font-size: 16px; line-height: 1.25; }

/* 4. Context rules that selected the old tag */
/* Info pages: side-nav label ("About us") — style.css .yb-info h2 / .yb-info__nav h2 */
.yb .yb-info :is(h2, div):where(.yb-s2-h2) { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; }
.yb .yb-info__nav :is(h2, div):where(.yb-s2-h2) { margin: 0 0 20px; font-size: 34px; }
@media (max-width: 1024px) {
	.yb .yb-info__nav :is(h2, div):where(.yb-s2-h2) { font-size: 28px; margin-bottom: 12px; }
}
/* Help pages: an extra content H1 turned into a div keeps the help-page ink colour */
.yb .yb-hp :is(h1, h2, h3, div):where(.yb-s2-h1, .yb-s2-h2, .yb-s2-h3) { color: var(--hp-ink); letter-spacing: 0; text-transform: none; }

/* Screen-reader H1 added to pages that had none (visually hidden, still read by crawlers and AT) */
.yb-s2-h1-auto.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}