/*
 * IC Knowledge Base: archive, category and article pages. Loaded on those three page kinds and, for the section it prints, on the
 * front page (IC Search's, see IC_KB_Home); print rules apply to pages with an .ic-kb body only. Loaded after the frame
 * style (container width and spacing). Logical properties only, so the pages work right-to-left; no class of any theme.
 * Fonts are the theme's own (nothing here sets a font family). Colours and radii are custom properties with the
 * values of the site's look as fallbacks, so a theme can override any of them on :root or on .ic-kb:
 *   --ic-ink #1A1D21, --ic-muted #59616B, --ic-rule #E4E7EB, --ic-surface #F5F6F8, --ic-accent #1D4E89,
 *   --ic-accent-hover #123459, --ic-radius 10px (boxes), --ic-radius-card 12px (cards),
 *   --ic-reading 760px (article column), --ic-archive 860px (archive and category column).
 * Text on a surface or card sets its own ink colour because the box sets its own background; the page text keeps
 * the theme's colour.
 */
/* The reading column: the frame container is narrowed or widened to the look's measure on these pages only. */
.ic-page:has(.ic-kb-article) {
	max-inline-size: var(--ic-reading, 760px);
}

.ic-page:has(.ic-kb-archive),
.ic-page:has(.ic-kb-category) {
	max-inline-size: var(--ic-archive, 860px);
}

.ic-kb {
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.ic-kb-title {
	margin-block: 0 0.75em;
}

.ic-kb-breadcrumbs {
	margin-block-end: 1em;
	font-size: 0.875rem;
	color: var(--ic-muted, #59616B);
}

.ic-kb-breadcrumbs a {
	color: var(--ic-accent, #1D4E89);
}

.ic-kb-breadcrumbs a:hover {
	color: var(--ic-accent-hover, #123459);
}

.ic-kb-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ic-kb-breadcrumbs li:not(:last-child)::after {
	content: "\203A";
	margin-inline-start: 0.5em;
}

.ic-kb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1.25em;
	margin-block: 0 1.25em;
	font-size: 0.875rem;
	color: var(--ic-muted, #59616B);
}

.ic-kb-toc {
	margin-block: 0 1.5em;
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--ic-rule, #E4E7EB);
	border-radius: var(--ic-radius, 10px);
	background: var(--ic-surface, #F5F6F8);
	color: var(--ic-ink, #1A1D21);
}

.ic-kb-toc a {
	color: var(--ic-accent, #1D4E89);
}

.ic-kb-toc a:hover {
	color: var(--ic-accent-hover, #123459);
}

.ic-kb-toc summary {
	cursor: pointer;
	font-weight: 600;
}

/* Some themes remove the outline (`*{outline:none}`); the summary keeps a visible keyboard focus. */
.ic-kb-toc summary:focus-visible {
	outline: 2px solid var(--ic-accent, #1D4E89);
	outline-offset: 2px;
}

.ic-kb-toc ul {
	margin-block: 0.5em 0;
	padding-inline-start: 1.25em;
	list-style: none;
}

.ic-kb-toc ul ul {
	margin-block-start: 0.25em;
}

.ic-kb-body {
	margin-block: 0 2em;
}

.ic-kb-body img,
.ic-kb-body video,
.ic-kb-body iframe {
	max-inline-size: 100%;
}

/* A table is its own bordered box and scrolls sideways when it is wider than the column (the stored markup is not wrapped). */
.ic-kb-body table {
	display: block;
	inline-size: max-content;
	max-inline-size: 100%;
	overflow-x: auto;
	border: 1px solid var(--ic-rule, #E4E7EB);
	border-radius: var(--ic-radius, 10px);
	border-collapse: collapse;
}

.ic-kb-body th,
.ic-kb-body td {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-block-end: 1px solid var(--ic-rule, #E4E7EB);
	text-align: start;
	vertical-align: top;
}

.ic-kb-body tr:last-child > th,
.ic-kb-body tr:last-child > td {
	border-block-end: 0;
}

.ic-kb-body th {
	background: var(--ic-surface, #F5F6F8);
	color: var(--ic-ink, #1A1D21);
	font-weight: 600;
}

.ic-kb-body img,
.ic-kb-body video {
	block-size: auto;
}

.ic-kb-body pre {
	max-inline-size: 100%;
	overflow-x: auto;
}

/* Previous and next: two bordered cards; one card alone keeps half the width. */
.ic-kb-prevnext {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block: 2em 0;
}

.ic-kb-prevnext a {
	display: flex;
	flex: 0 1 calc(50% - 0.5rem);
	flex-direction: column;
	gap: 0.25rem;
	box-sizing: border-box;
	min-inline-size: min(100%, 14rem);
	padding: 1rem 1.25rem;
	border: 1px solid var(--ic-rule, #E4E7EB);
	border-radius: var(--ic-radius-card, 12px);
	color: var(--ic-accent, #1D4E89);
	text-decoration: none;
}

.ic-kb-prevnext a:hover {
	border-color: var(--ic-accent, #1D4E89);
	color: var(--ic-accent-hover, #123459);
}

.ic-kb-prevnext__next {
	margin-inline-start: auto;
	text-align: end;
}

.ic-kb-prevnext__label {
	color: var(--ic-muted, #59616B);
	font-size: 0.8125rem;
}

.ic-kb-prevnext__title {
	font-weight: 600;
}

.ic-kb-group {
	margin-block: 0 2em;
}

.ic-kb-group__title {
	margin-block: 0 0.5em;
}

.ic-kb-description {
	color: var(--ic-muted, #59616B);
}

/* The archive and category lists: rows with a rule between them; the title in the accent, the description under it. */
.ic-kb-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ic-kb-list > li {
	padding-block: 1rem;
}

.ic-kb-list > li:first-child {
	padding-block-start: 0.25rem;
}

.ic-kb-list > li + li {
	border-block-start: 1px solid var(--ic-rule, #E4E7EB);
}

.ic-kb-list > li > a {
	color: var(--ic-accent, #1D4E89);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ic-kb-list > li > a:hover {
	color: var(--ic-accent-hover, #123459);
	text-decoration: underline;
}

.ic-kb-list__description {
	margin-block: 0.375rem 0;
	color: var(--ic-muted, #59616B);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The archive: a grid of category cards. Two columns where the column is wide enough for two cards of 320px, one column
   on a phone (min() lets a card shrink below 320px on a narrower screen instead of overflowing). */
.ic-kb-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 1.25rem;
	margin-block: 0 2em;
}

.ic-kb-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-inline-size: 0;
	padding: 1.25rem 1.375rem;
	color: var(--ic-ink, #1A1D21);
	background: #fff;
	border: 1px solid var(--ic-rule, #E4E7EB);
	border-radius: var(--ic-radius-card, 12px);
	overflow-wrap: anywhere; /* a very long word or address wraps inside the card instead of widening the page */
}

.ic-kb-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.ic-kb-card__title a {
	color: var(--ic-accent, #1D4E89);
	text-decoration: none;
}

.ic-kb-card__title a:hover {
	color: var(--ic-accent-hover, #123459);
	text-decoration: underline;
}

.ic-kb-card__text {
	margin-block: 0.5rem 0;
	color: var(--ic-muted, #59616B);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ic-kb-card__list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.ic-kb-card__item + .ic-kb-card__item {
	margin-block-start: 0.75rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--ic-rule, #E4E7EB);
}

.ic-kb-card__link {
	color: var(--ic-accent, #1D4E89);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ic-kb-card__link:hover {
	color: var(--ic-accent-hover, #123459);
	text-decoration: underline;
}

.ic-kb-card__summary {
	margin-block: 0.25rem 0;
	color: var(--ic-muted, #59616B);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* The link to the category page sits at the bottom of the card, whatever the cards beside it hold. */
.ic-kb-card__all {
	margin-block: auto 0;
	padding-block-start: 1rem;
	font-size: 0.9375rem;
}

.ic-kb-card__all a {
	color: var(--ic-accent, #1D4E89);
}

.ic-kb-card__all a:hover {
	color: var(--ic-accent-hover, #123459);
}

.ic-kb-print-footer {
	display: none;
}

@media print {
	/* Pages with an .ic-kb body only (the front page section is not one: it prints as the page is). The article's title, meta line, body and footer line only. Theme chrome is hidden by element, not by theme class. */
	body:has(.ic-kb) :is(header, footer, aside, nav):not(.ic-kb *) {
		display: none !important;
	}

	.ic-kb-breadcrumbs,
	.ic-kb-toc,
	.ic-kb-prevnext {
		display: none !important;
	}

	.ic-kb-print-footer {
		display: block;
		margin-block-start: 2em;
		padding-block-start: 0.5em;
		border-block-start: 1px solid #000;
		font-size: 0.875em;
	}

	.ic-page:has(.ic-kb) {
		max-inline-size: none;
		padding: 0;
	}
}

/* Front page section (printed by IC Search's front page): one row for each category, each the category as a heading with a link, then a grid of cards. */
.ic-kb-home {
	box-sizing: border-box;
	max-inline-size: var(--ic-front-wide, 1120px);
	margin-inline: auto;
	padding: 64px 24px 24px;
}

/* A second row follows the first closely. */
.ic-kb-home + .ic-kb-home {
	padding-block-start: 32px;
}

.ic-kb-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-block-end: 24px;
}

.ic-kb-home__title {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
}

.ic-kb-home__all {
	color: var(--ic-accent, #1D4E89);
}

.ic-kb-home__all:hover {
	color: var(--ic-accent-hover, #123459);
}

.ic-kb-home__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ic-kb-home__card {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 22px;
	color: var(--ic-ink, #1A1D21);
	background: #fff;
	border: 1px solid var(--ic-rule, #E4E7EB);
	border-radius: var(--ic-radius-card, 12px);
	overflow-wrap: anywhere; /* a very long word or address wraps inside the card instead of widening the page */
}

.ic-kb-home__card:hover,
.ic-kb-home__card:focus-within {
	border-color: var(--ic-accent, #1D4E89);
}

.ic-kb-home__card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.ic-kb-home__card-title a {
	color: var(--ic-accent, #1D4E89);
	text-decoration: none;
}

/* The whole card is the link target. */
.ic-kb-home__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ic-kb-home__card-text {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ic-muted, #59616B);
}