/* Classic Pools Knowledge Base. Scoped to .kb so nothing else on the site changes. */
.kb {
	--kb-ink: #1a1a1a;
	--kb-soft: #4a5154;
	--kb-paper: #fff;
	--kb-line: #d9d9d9;
	--kb-tile: #e7f6f8;
	--kb-pool: #07606d; /* brand teal #0cacc2 deepened: passes AA as text on white */
	--kb-teal: #0cacc2;
	--kb-sun: #ffba00;
	--kb-head: "Oswald", sans-serif;
	--kb-text: "Outfit", system-ui, sans-serif;
	--kb-measure: 68ch;
	background: var(--kb-paper);
	color: var(--kb-ink);
	font-family: var(--kb-text);
	font-size: 18px;
	line-height: 1.65;
}
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* Links. The site sets a global a:hover colour with !important, so hover states restate it here. */
.kb a { color: var(--kb-pool); text-decoration: underline; text-underline-offset: .18em; }
.kb a:hover { color: var(--kb-ink) !important; }
.kb a:focus-visible, .kb summary:focus-visible, .kb-table:focus-visible { outline: 3px solid var(--kb-ink); outline-offset: 2px; }

/* Above the waterline */
.kb-head { padding-block: 28px 30px; }
.kb-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--kb-soft); margin-bottom: 22px; }
.kb-title {
	font-family: var(--kb-head);
	font-weight: 600;
	font-size: clamp(34px, 5.2vw, 56px);
	line-height: 1.12;
	letter-spacing: 0;
	color: var(--kb-ink);
	max-width: 20ch;
	margin: 0;
}
.kb-title--library { font-size: clamp(42px, 8.4vw, 104px); line-height: 1.02; max-width: 15ch; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 0; font-size: 15px; color: var(--kb-soft); }

/* The waterline: a hard edge, then a band of deep water carrying the direct answer */
.kb-water {
	border-top: 6px solid var(--kb-teal);
	background-color: var(--kb-pool);
	color: #fff;
	padding-block: 34px;
}
.kb-water__inner p { max-width: 730px; margin: 0; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; }
.kb .kb-water a { color: #fff; }
.kb .kb-water a:hover { color: var(--kb-sun) !important; }
.kb-water--library { padding-block: 40px 44px; }

/* Article layout: contents list above the text on small screens, a rail on wide ones */
.kb-layout { display: grid; gap: 32px; padding-block: 36px 56px; }
.kb-toc { font-size: 16px; line-height: 1.4; }
.kb-toc__fold { background: var(--kb-tile); padding: 14px 18px; border-radius: 2px; }
.kb-toc summary { font-weight: 600; cursor: pointer; min-height: 28px; }
.kb-toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.kb-toc li { margin: 0; }
.kb-toc { scroll-margin-top: 90px; }
.kb-toc a { display: block; padding: 8px 0; text-decoration: none; color: var(--kb-ink); }
.kb-toc a:hover { text-decoration: underline; }
.breakdance .kb .kb-toc a.is-current { color: var(--kb-pool); }
.kb-toc-jump { display: none; }

.kb-body { min-width: 0; max-width: var(--kb-measure); }
.kb-body h2 {
	font-family: var(--kb-head);
	font-weight: 600;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.2;
	color: var(--kb-ink);
	margin: 2.1em 0 .55em;
	scroll-margin-top: 110px;
}
.kb-body h2:first-child { margin-top: 0; }
.kb-body h3 { font-family: var(--kb-text); font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--kb-ink); margin: 1.6em 0 .4em; }
.kb-body p { margin: 0 0 1em; }
.kb-body ul, .kb-body ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.kb-body li { margin-bottom: .45em; }

/* Tables scroll inside their own region */
.kb-table { overflow-x: auto; margin: 1.4em 0 1.6em; border-block: 2px solid var(--kb-ink); }
.kb-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.kb-table th { text-align: left; font-weight: 600; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--kb-ink); vertical-align: bottom; }
.kb-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--kb-line); vertical-align: top; }
.kb-table tr:last-child td { border-bottom: 0; }

/* FAQ */
.kb-faq, .kb-sources { scroll-margin-top: 110px; }
.kb-faq { margin-top: 2.6em; }
.kb-faq details { border-top: 1px solid var(--kb-line); }
.kb-faq details:last-child { border-bottom: 1px solid var(--kb-line); }
.kb-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 48px; line-height: 1.4; }
.kb-faq__a { padding-bottom: 8px; }

/* Next steps and sources */
.kb-next { margin-top: 2.6em; padding: 20px 22px 10px; background: var(--kb-tile); border-radius: 2px; }
.kb-next h2 { margin-top: .7em; }
.kb-sources { margin-top: 2.6em; font-size: 15px; line-height: 1.5; color: var(--kb-soft); }
.kb-sources h2 { font-size: 24px; }
.kb-sources ul { padding-left: 1.1em; }
.kb-sources a { overflow-wrap: anywhere; }

/* Question rows: archive and related guides */
.kb-groups { padding-block: 46px 30px; }
.kb-group { display: grid; gap: 10px 48px; padding-block: 28px; border-top: 2px solid var(--kb-ink); }
.kb-group > h2, .kb-related h2, .kb-cta h2, .kb-empty h2 {
	font-family: var(--kb-head);
	font-weight: 600;
	font-size: clamp(25px, 3vw, 32px);
	line-height: 1.2;
	color: var(--kb-ink);
	margin: 0;
}
.kb-rows { list-style: none; margin: 0; padding: 0; }
.kb-rows li { padding-block: 16px; border-bottom: 1px solid var(--kb-line); }
.kb-rows li:last-child { border-bottom: 0; }
.kb-rows a { font-family: var(--kb-head); font-weight: 500; font-size: clamp(21px, 2.4vw, 25px); line-height: 1.25; text-decoration: none; color: var(--kb-ink); }
.kb-rows a:hover { text-decoration: underline; }
.kb-rows p { margin: 6px 0 0; max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--kb-soft); }
.kb-rows .kb-rows__meta { display: flex; flex-wrap: wrap; gap: 2px 20px; font-size: 15px; }
.kb-related { background: var(--kb-tile); padding-block: 38px; }
.kb-related .kb-rows { margin-top: 12px; }
.kb-related .kb-rows li { border-bottom-color: #bcdde2; }

/* Closing action */
.kb-cta { background: var(--kb-ink); color: #fff; padding-block: 44px; }
.kb .kb-cta h2 { color: #fff; }
.kb-cta p { max-width: 570px; margin: 12px 0 0; }
.kb-cta p.kb-cta__links { max-width: none; }
.kb .kb-cta a:focus-visible, .kb .kb-water a:focus-visible { outline-color: #fff; }
.kb-cta__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px !important; }
.kb .kb-cta a { color: #fff; }
.kb .kb-cta a:hover { color: var(--kb-sun) !important; }
.kb .kb-cta a.kb-btn { display: inline-block; background: var(--kb-sun); color: var(--kb-ink); font-weight: 600; text-decoration: none; padding: 12px 24px; border-radius: 3px; }
.kb .kb-cta a.kb-btn:hover { color: var(--kb-ink) !important; background: #fff; }
.kb-empty { padding-block: 10px 40px; }

/*
 * Breakdance's global .breakdance h1/h2/h3 and .breakdance a rules (title case, 70px H1, bold links
 * with no underline) outrank the rules above, so the reading-specific values are restated here.
 * Link colour stays the site's own navy #273b7f, which matches the logo and passes AA on white.
 */
.breakdance .kb h1, .breakdance .kb h2, .breakdance .kb h3 { text-transform: none; }
/* Outfit's digit is wide, so ch units run long: hold running text under about 72 characters and let tables use the column. */
.kb-body > p, .kb-body > ul, .kb-body > ol, .kb-body > h2, .kb-body > h3, .kb-faq, .kb-next, .kb-sources { max-width: 570px; }
.kb-body { max-width: 820px; }

/* Phones: table rows stack as labelled blocks, and a fixed link returns to the contents list. */
@media (max-width: 759px) {
	.kb-table { overflow-x: visible; }
	.kb-table table, .kb-table tbody, .kb-table tr, .kb-table td { display: block; width: 100%; min-width: 0; }
	.kb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.kb-table tr { padding-block: 10px; border-bottom: 1px solid var(--kb-line); }
	.kb-table tr:last-child { border-bottom: 0; }
	.kb-table td { padding: 3px 0; border: 0; }
	.kb-table td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; font-size: 14px; color: var(--kb-soft); }
}
@media (max-width: 1023px) {
	.breakdance .kb .kb-toc-jump {
		display: flex;
		align-items: center;
		position: fixed;
		right: 12px;
		bottom: 12px;
		z-index: 20;
		min-height: 44px;
		padding: 0 16px;
		background: var(--kb-ink);
		color: #fff;
		font-weight: 500;
		font-size: 15px;
		text-decoration-line: none;
		border-radius: 3px;
	}
	.breakdance .kb .kb-toc-jump:hover { color: #fff !important; }
	.breakdance .kb .kb-toc-jump:focus-visible { outline-color: var(--kb-teal); }
	/* kb.js holds the link back until the contents list has scrolled away; without JS it simply stays visible. */
	.breakdance .kb .kb-toc-jump.is-held { display: none; }
}
@media print { .breakdance .kb .kb-toc-jump { display: none; } }
.breakdance .kb .kb-title { font-size: clamp(32px, 4vw, 46px); line-height: 1.15; max-width: 26ch; }
.breakdance .kb .kb-title--library { font-size: clamp(42px, 7.6vw, 96px); line-height: 1.04; max-width: 15ch; }
.breakdance .kb .kb-body h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; }
.breakdance .kb .kb-body h3 { font-family: var(--kb-text); font-size: 20px; line-height: 1.35; }
.breakdance .kb .kb-sources h2 { font-size: 24px; }
.breakdance .kb .kb-group > h2, .breakdance .kb .kb-related h2, .breakdance .kb .kb-cta h2, .breakdance .kb .kb-empty h2 { font-size: clamp(25px, 3vw, 32px); line-height: 1.2; }
.breakdance .kb a { color: #273b7f; font-weight: 400; text-decoration-line: underline; text-decoration-color: currentColor; }
.breakdance .kb .kb-crumbs a { font-weight: 400; }
.breakdance .kb .kb-toc a { color: var(--kb-ink); text-decoration-line: none; }
.breakdance .kb .kb-toc a:hover { text-decoration-line: underline; }
.breakdance .kb .kb-toc a.is-current { font-weight: 600; }
.breakdance .kb .kb-rows a { font-weight: 500; text-decoration-line: none; }
.breakdance .kb .kb-rows a:hover { text-decoration-line: underline; }
.breakdance .kb .kb-water a, .breakdance .kb .kb-cta a { color: #fff; }
.breakdance .kb .kb-cta a.kb-btn { color: var(--kb-ink); font-weight: 600; text-decoration-line: none; }

@media (min-width: 760px) {
	.kb-group { grid-template-columns: 240px minmax(0, 1fr); }
	.kb-rows li:first-child { padding-top: 0; }
}
@media (min-width: 1024px) {
	.kb-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 64px; padding-block: 50px 72px; }
	.kb-toc { position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 130px); overflow-y: auto; }
	.kb-toc__fold { background: none; padding: 0; }
	.kb-toc summary { list-style: none; pointer-events: none; }
	.kb-toc summary::-webkit-details-marker { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .kb a { transition: color .12s linear; } }
@media print {
	.kb-toc, .kb-cta, .kb-related { display: none; }
	.kb-water { background: none; color: #000; border-top: 2px solid #000; }
	.kb-layout { display: block; }
	.kb-table, .kb-faq details { break-inside: avoid; }
	.kb-faq .kb-faq__a { display: block; }
	.kb-sources a::after { content: " (" attr(href) ")"; }
}