/* =============================================================================
   WPChill KB: layout only.

   Typography, colors, links, buttons, inputs and widths come from the theme: the
   templates are core blocks and the theme's header/footer. This file only places the
   KB pieces. It sets no fonts and no colors of its own: lines and muted text are
   derived from the current text color (currentColor), spacing from the theme's block
   gap, so it follows any theme and its dark/light variations.
   ========================================================================== */

.wpchill-kb-main {
	--wpchill-kb-gap: var(--wp--style--block-gap, 1.5rem);
	--wpchill-kb-line: color-mix(in srgb, currentColor 14%, transparent);
	--wpchill-kb-muted: color-mix(in srgb, currentColor 68%, transparent);
	--wpchill-kb-radius: var(--wp--preset--border-radius--md, 8px);
	--wpchill-kb-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 2rem);
	padding-block: calc(var(--wpchill-kb-gap) * 1.5) calc(var(--wpchill-kb-gap) * 3);
}

/* Editor previews of the blocks that need a current article. */
.wpchill-kb-placeholder {
	padding: .75em 1em;
	border: 1px dashed var(--wpchill-kb-line, currentColor);
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-placeholder p { margin: 0; }


/* -----------------------------------------------------------------------------
   Knowledge base home
   -------------------------------------------------------------------------- */

.wpchill-kb-intro {
	text-align: center;
}
.wpchill-kb-intro > * {
	max-width: 44rem;
	margin-inline: auto !important;
}
.wpchill-kb-intro .wpchill-kb-search {
	margin-top: calc(var(--wpchill-kb-gap) * 1.25);
}

.wpchill-kb-categories {
	margin-top: calc(var(--wpchill-kb-gap) * 2);
}
.wpchill-kb-article .wpchill-kb-categories {
	margin-top: var(--wpchill-kb-gap);
}

.wpchill-kb-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--wpchill-kb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Without an article list the whole card is the link (the title's link is stretched over it). */
.wpchill-kb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: 0;
	padding: calc(var(--wpchill-kb-gap) * 1.1);
	border: 1px solid var(--wpchill-kb-line);
	border-radius: var(--wpchill-kb-radius);
	transition: border-color .2s ease;
}
.wpchill-kb-card:hover,
.wpchill-kb-card:focus-within {
	border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.wpchill-kb-card > * {
	margin: 0;
}
.wpchill-kb-card__title {
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
}
.wpchill-kb-card__title a {
	color: inherit;
	text-decoration: none;
}
.wpchill-kb-card:not(.has-articles) .wpchill-kb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.wpchill-kb-card:not(.has-articles) .wpchill-kb-card__title a:focus-visible {
	outline: none;
}
.wpchill-kb-card:not(.has-articles):focus-within {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.wpchill-kb-card__articles {
	display: grid;
	gap: .35em;
	margin: .25em 0 0;
	padding: 0;
	list-style: none;
}
.wpchill-kb-card__articles a {
	color: inherit;
}
.wpchill-kb-card__desc {
	color: var(--wpchill-kb-muted);
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-card__count {
	margin-top: auto !important;
	padding-top: .5em;
	color: var(--wpchill-kb-muted);
	font-size: var(--wp--preset--font-size--small, .875rem);
}


/* -----------------------------------------------------------------------------
   Article, category and search pages: navigation | content | table of contents
   -------------------------------------------------------------------------- */

.wpchill-kb-layout {
	display: grid;
	grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
	gap: calc(var(--wpchill-kb-gap) * 2);
	align-items: start;
}
.wpchill-kb-layout.has-toc {
	grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) minmax(11rem, 14rem);
}
.wpchill-kb-layout > * {
	margin: 0 !important;
}

.wpchill-kb-sidebar,
.wpchill-kb-toc-area {
	position: sticky;
	top: var(--wpchill-kb-sticky-top);
	max-height: calc(100vh - var(--wpchill-kb-sticky-top) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.wpchill-kb-sidebar > * + * {
	margin-top: var(--wpchill-kb-gap);
}
/* Short articles get no table of contents: the column goes away with it. */
.wpchill-kb-toc-area:empty {
	display: none;
}
.wpchill-kb-layout.has-toc:has(> .wpchill-kb-toc-area:empty),
.wpchill-kb-layout.has-toc:not(:has(> .wpchill-kb-toc-area)) {
	grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
}

.wpchill-kb-article > * + * {
	margin-top: var(--wpchill-kb-gap);
}
.wpchill-kb-article > .wp-block-post-title,
.wpchill-kb-article > .wp-block-query-title {
	margin-top: calc(var(--wpchill-kb-gap) * .5);
}

@media (max-width: 1100px) {
	.wpchill-kb-layout.has-toc {
		grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
	}
	.wpchill-kb-layout.has-toc .wpchill-kb-toc-area {
		display: none;
	}
}

/* On phones the article comes first and the navigation folds (wpchill-kb-scripts.js). */
@media (max-width: 781px) {
	.wpchill-kb-layout,
	.wpchill-kb-layout.has-toc {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wpchill-kb-gap);
	}
	.wpchill-kb-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}


/* -----------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.wpchill-kb-nav {
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* A chevron in the text color instead of the browser's triangle; it turns when open. */
.wpchill-kb-nav summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75em;
	list-style: none;
	cursor: pointer;
}
.wpchill-kb-nav summary::-webkit-details-marker {
	display: none;
}
.wpchill-kb-nav summary::after {
	content: "";
	flex: 0 0 auto;
	width: .45em;
	height: .45em;
	margin-right: .2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .2s ease;
}
.wpchill-kb-nav details[open] > summary::after {
	transform: rotate(45deg);
}

/* "Browse articles" is only a control on phones. */
.wpchill-kb-nav__fold > summary {
	display: none;
}
@media (max-width: 781px) {
	.wpchill-kb-nav__fold {
		border: 1px solid var(--wpchill-kb-line);
		border-radius: var(--wpchill-kb-radius);
		padding: .75em 1em;
	}
	.wpchill-kb-nav__fold > summary {
		display: flex;
		font-weight: 600;
	}
	.wpchill-kb-nav__fold[open] > summary {
		margin-bottom: .75em;
	}
}

.wpchill-kb-nav__category + .wpchill-kb-nav__category {
	border-top: 1px solid var(--wpchill-kb-line);
}
.wpchill-kb-nav__category > details > summary {
	padding-block: .6em;
	font-weight: 600;
}
.wpchill-kb-nav__articles {
	padding-bottom: .6em !important;
}
.wpchill-kb-nav__articles a {
	display: block;
	padding: .3em 0 .3em .9em;
	border-left: 2px solid transparent;
	color: inherit;
	line-height: 1.4;
	text-decoration: none;
}
.wpchill-kb-nav__articles a:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}
.wpchill-kb-nav__articles a[aria-current="page"] {
	border-left-color: currentColor;
	font-weight: 600;
}
/* Subcategories sit inside their parent, slightly indented. */
.wpchill-kb-nav__category .wpchill-kb-nav__list {
	padding-left: .9em;
}


/* -----------------------------------------------------------------------------
   Breadcrumbs and article meta
   -------------------------------------------------------------------------- */

.wpchill-kb-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wpchill-kb-muted);
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-breadcrumbs li + li::before {
	content: "/";
	margin-right: .35em;
	opacity: .6;
}
.wpchill-kb-breadcrumbs a {
	color: inherit;
}

.wpchill-kb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4em 1.25em;
	color: var(--wpchill-kb-muted);
	font-size: var(--wp--preset--font-size--small, .875rem);
}


/* -----------------------------------------------------------------------------
   Table of contents (built by toc-scrollspy.js)
   -------------------------------------------------------------------------- */

.wpchill-kb-toc {
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-toc__title {
	margin: 0 0 .75em;
	font-weight: 600;
}
.wpchill-kb-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--wpchill-kb-line);
}
.wpchill-kb-toc__link {
	display: block;
	margin-left: -1px;
	padding: .3em 0 .3em .9em;
	border-left: 2px solid transparent;
	color: var(--wpchill-kb-muted);
	line-height: 1.4;
	text-decoration: none;
}
.wpchill-kb-toc__item--level-3 .wpchill-kb-toc__link { padding-left: 1.7em; }
.wpchill-kb-toc__item--level-4 .wpchill-kb-toc__link,
.wpchill-kb-toc__item--level-5 .wpchill-kb-toc__link,
.wpchill-kb-toc__item--level-6 .wpchill-kb-toc__link { padding-left: 2.5em; }
.wpchill-kb-toc__link:hover,
.wpchill-kb-toc__link.is-active {
	color: inherit;
}
.wpchill-kb-toc__link.is-active {
	border-left-color: currentColor;
	font-weight: 600;
}


/* -----------------------------------------------------------------------------
   Category and search lists (core Query block)
   -------------------------------------------------------------------------- */

.wpchill-kb-list .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpchill-kb-list .wp-block-post {
	margin: 0;
	padding-block: var(--wpchill-kb-gap);
	border-top: 1px solid var(--wpchill-kb-line);
}
.wpchill-kb-list .wp-block-post > * {
	margin-block: 0;
}
.wpchill-kb-list .wp-block-post > * + * {
	margin-top: .4em;
}
.wpchill-kb-list .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
}
.wpchill-kb-list .wp-block-post-excerpt {
	color: var(--wpchill-kb-muted);
}
.wpchill-kb-list .wp-block-post-excerpt__more-text {
	display: none;
}
.wpchill-kb-list .wp-block-query-pagination {
	margin-top: var(--wpchill-kb-gap);
}


/* -----------------------------------------------------------------------------
   "Was this page helpful?"
   The submit button is a theme button (wp-element-button); the rest are outlined
   in the text color.
   -------------------------------------------------------------------------- */

.wpchill-kb-rating-block {
	margin-top: calc(var(--wpchill-kb-gap) * 2) !important;
	padding-top: var(--wpchill-kb-gap);
	border-top: 1px solid var(--wpchill-kb-line);
}
.wpchill-kb-rating-row,
.wpchill-kb-rating-buttons,
.wpchill-kb-rating-counts,
.wpchill-kb-feedback-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75em;
}
.wpchill-kb-rating-row {
	justify-content: space-between;
}
.wpchill-kb-rating-question {
	font-weight: 600;
}
.wpchill-kb-rating-counts {
	margin-top: .5em;
	color: var(--wpchill-kb-muted);
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.wpchill-kb-rating-count {
	display: inline-flex;
	align-items: center;
	gap: .3em;
}

.wpchill-kb-rating-button,
.wpchill-kb-feedback-cancel {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em .9em;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: var(--wpchill-kb-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.wpchill-kb-rating-button:hover,
.wpchill-kb-feedback-cancel:hover,
.wpchill-kb-rating-button.selected {
	border-color: currentColor;
}
.wpchill-kb-rating-button.selected {
	box-shadow: inset 0 0 0 1px currentColor;
}
.wpchill-kb-rating.voted .wpchill-kb-rating-buttons {
	display: none;
}

.wpchill-kb-feedback-form {
	margin-top: var(--wpchill-kb-gap);
}
.wpchill-kb-feedback-title {
	margin: 0 0 .75em;
	font-weight: 600;
}
.wpchill-kb-feedback-options {
	display: grid;
	gap: .5em;
}
.wpchill-kb-feedback-option {
	display: flex;
	align-items: center;
	gap: .6em;
	cursor: pointer;
}
.wpchill-kb-feedback-textarea {
	margin-top: .75em;
}
.wpchill-kb-feedback-textarea textarea {
	box-sizing: border-box;
	width: 100%;
}
.wpchill-kb-feedback-actions {
	margin-top: var(--wpchill-kb-gap);
}


/* -----------------------------------------------------------------------------
   Code blocks (header + copy button; colors in prism.css) and the image lightbox
   -------------------------------------------------------------------------- */

.code-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-size: var(--wp--preset--font-size--small, .875rem);
}
.copy-code-btn {
	font: inherit;
	cursor: pointer;
}

.wpchill-kb-zoomable {
	cursor: zoom-in;
}
.wpchill-kb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgb(0 0 0 / .85);
	cursor: zoom-out;
}
.wpchill-kb-lightbox.is-open {
	display: flex;
}
.wpchill-kb-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}