/* @override 
	https://www.creativeapplications.net/wp-content/plugins/can-api-docs/assets/css/api-docs.css?* */

/* CAN API Docs — matches can-taxonomy layout */

.can-api-docs-browser {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Main layout — sidebar 25%, main column 75%. Height set by JS to fill viewport. */
.can-api-docs-browser .can-layout {
	display: flex;
	gap: 0;
	align-items: stretch;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

div#can-api-content.can-content div.can-section.active div.can-feature-card div.can-activity-embed ul.can-activity-log-feed {
	padding-left: 1.5em;
	font-family: "JetBrainsMono-Light", Arial, Helvetica, Geneva, sans-serif;
	font-size: 0.75em;
}

/* Sidebar */
.can-api-docs-browser .can-sidebar {
	width: 25%;
	flex-shrink: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-right: 1px solid var(--linecolor);
	margin-right: -1px;
}

/* Term list — scrolls independently */
.can-api-docs-browser .can-termlist {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	margin: 0;
	padding: 0;
	list-style: none;
}

.can-api-docs-browser .can-termlist::-webkit-scrollbar {
	width: 4px;
}

.can-api-docs-browser .can-termlist::-webkit-scrollbar-thumb {
	background: rgba(128, 128, 128, 0.3);
	border-radius: 2px;
}

/* Term items — flex so the icon centres vertically against the label */
.can-api-docs-browser .can-term {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: opacity 0.12s;
	line-height: 1.5;
	padding: 0.5em 1em;
	border-bottom: 1px solid var(--linecolor);
	color: inherit;
	text-align: left;
}

.can-api-docs-browser .can-term:hover {
	opacity: 0.9;
}

.can-api-docs-browser .can-term.active {
	opacity: 1;
	color: var(--backgroundcolor);
	background-color: var(--midcolor);
}

/* Pinned sidebar item — sits below the scrolling list, anchored to the bottom */
.can-api-docs-browser .can-term-pinned {
	flex-shrink: 0;
	border-top: 1px solid var(--linecolor);
	border-bottom: none;
}

/* Sidebar item icons — inline SVGs using currentColor, so they follow the
   term's text colour in every theme and in the active state */
.can-api-docs-browser .can-term-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 0.5em;
}

.can-api-docs-browser .can-term-icon svg {
	width: 0.9em;
	height: 0.9em;
	display: block;
}

/* Main column: content on top, detail pane below */
.can-api-docs-browser .can-main {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-right: 1px solid var(--linecolor);
}

/* Content area — natural height; shrinks and scrolls when the detail pane
   below needs room. NOT flex:1 — that would pin the detail pane to the very
   bottom of the viewport with a gap under short endpoint lists. */
.can-api-docs-browser .can-content {
	flex: 0 1 auto;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	overflow-y: auto;
}

.can-api-docs-browser .can-content::-webkit-scrollbar {
	display: none;
}

/* While the detail pane is open: the list keeps its natural height up to
   half the column and cannot be shrink-crushed by a long detail — flex
   shrink is proportional to content size, so without this a big detail
   squeezes the list to a sliver and appears to sit on top of it. */
.can-api-docs-browser .can-main.detail-open .can-content {
	flex-shrink: 0;
	max-height: 50%;
}

/* Once the user has dragged the separator, their chosen pane height (set
   inline by JS) takes over and the content area fills whatever remains */
.can-api-docs-browser .can-main.detail-resized .can-content {
	flex: 1 1 auto;
	max-height: none;
}

.can-api-docs-browser .can-main.detail-resized .can-detail {
	flex: 0 0 auto;
}

/* Detail pane — sits directly under the endpoint list and fills all the
   remaining space below it; the body scrolls internally. The heavy dark
   rule + distinct surface color separate it from the list above. */
.can-api-docs-browser .can-detail {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--backgroundcoloralt);
	border-left: 1px solid var(--linecolor);
}

/* Drag handle — draws the 2px separator line and resizes the pane */
.can-api-docs-browser .can-detail-resizer {
	flex-shrink: 0;
	height: 7px;
	cursor: row-resize;
	touch-action: none;
	position: relative;
}

.can-api-docs-browser .can-detail-resizer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	background: var(--darkcolor);
}

.can-api-docs-browser .can-detail-resizer:hover::before {
	height: 3px;
}

.can-api-docs-browser .can-detail-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5em 1em;
	border-bottom: 1px solid var(--linecolor);
	background-color: var(--shadecolor);
}

.can-api-docs-browser .can-detail-title {
	font-weight: 700;
}

.can-api-docs-browser .can-detail-close {
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.12s;
	padding: 0;
	line-height: 1;
}

.can-api-docs-browser .can-detail-close:hover {
	opacity: 1;
}

.can-api-docs-browser .can-detail-body {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 1em;

}

.can-api-docs-browser .can-detail-body::-webkit-scrollbar {
	width: 4px;
}

.can-api-docs-browser .can-detail-body::-webkit-scrollbar-thumb {
	background: rgba(128, 128, 128, 0.3);
	border-radius: 2px;
}

/* Activity Log embed (theme shortcodes rendered inside the docs browser) */
.can-activity-embed {
	padding: 1em;
}

/* Pre-rendered sections — sidebar clicks toggle these, no AJAX */
.can-api-docs-browser .can-section {
	display: none;
}

.can-api-docs-browser .can-section.active {
	display: block;
}

/* Feature card in content */
.can-feature-card {
	padding: 0;
}

.can-feature-header {
	padding: 1em;
	border-bottom: 1px solid var(--linecolor);
}

.can-feature-header h2 {
	margin-top: 0;
	margin-bottom: 0.5em;
	line-height: 1.3;
}

.can-feature-header p {
	margin: 0.5em 0 0 0;
	line-height: 1.5;
}

/* Endpoints list */
.can-endpoints {
	margin: 0;
}

.can-endpoint {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--linecolor);
	transition: opacity 0.12s;
	cursor: pointer;
}

.can-endpoint:hover {
	opacity: 0.9;
	background-color: var(--shadecolor);
}

.can-endpoint.active {
	background-color: var(--shadecolor);
}

.can-endpoint-row,
.can-detail-endpoint-row {
	display: flex;
	gap: 0.5em;
	align-items: baseline;
	margin-bottom: 0.25em;
	font-size: 0.9em;
}

.can-detail-endpoint-row {
	margin-bottom: 0.75em;
}

.can-method {
	display: inline-block;
	font-weight: 700;
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-shrink: 0;
	padding: 0.1em 0.5em;
	background-color: var(--darkcolor);
	color: var(--backgroundcolor);
	border-radius: 2px;
}

.can-path {
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 0.85em;
	opacity: 0.7;
}

.can-endpoint h3 {
	margin: 0.25em 0 0 0;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.3;
}

.can-endpoint > p {
	margin: 0.25em 0 0 0;
	font-size: 0.9em;
	opacity: 0.8;
	line-height: 1.4;
}

.can-rate-limit {
	margin-top: 0.5em;
	opacity: 0.7;
}

/* Intro sections */
.can-intro-section {
	padding: 1em;
	border-bottom: 1px solid var(--linecolor);
}

.can-intro-section h3 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-size: 1.5em;
}

.can-release-date {
	font-weight: 400;
	opacity: 0.6;
}

.can-intro-section h4 {
	margin: 1em 0 0.25em 0 !important;
	font-size: 0.95em;
	font-weight: 600;
}

.can-intro-section p {
	margin: 0.5em 0;
	line-height: 1.5;
}

.can-intro-section ul,
.can-intro-section ol {
	margin: 0.5em 0;
	padding-left: 1.5em;
}

.can-intro-section li {
	margin-bottom: 0.25em;
	line-height: 1.4;
}

/* Terms of Use: permitted vs prohibited highlighting */
.can-permitted-uses {
	list-style: none;
	padding-left: 0 !important;
}

.can-permitted-uses > li {
	padding: 0.5em 0.75em;
	margin: 0.25em 0 !important;
	padding-left: 0.5em;
	border-left: 3px solid #4ade80;
	background-color: rgba(74, 222, 128, 0.08);
	border-radius: 2px;
}

.can-permitted-uses > li ul {
	list-style: disc;
	margin: 0.5em 0 0 0;
	padding-left: 1.5em;
	background: none;
	border: none;
}

.can-permitted-uses > li ul li {
	padding: 0;
	border: none;
	background: none;
	margin: 0.25em 0;
}

.can-prohibited-uses {
	list-style: none;
	padding-left: 0 !important;
}

.can-prohibited-uses > li {
	padding: 0.5em 0.75em;
	margin: 0.5em 0 !important;
	padding-left: 0.5em;
	border-left: 3px solid #f87171;
	background-color: rgba(248, 113, 113, 0.08);
	border-radius: 2px;
}

.can-prohibited-uses > li ul {
	list-style: disc;
	margin: 0.5em 0 0 0;
	padding-left: 1.5em;
	background: none;
	border: none;
}

.can-prohibited-uses > li ul li {
	padding: 0;
	border: none;
	background: none;
	margin: 0.25em 0;
}

/* In dark mode, slightly adjust the colors for better contrast */
@media (prefers-color-scheme: dark) {
	.can-permitted-uses > li {
		border-left-color: #22c55e;
		background-color: rgba(34, 197, 94, 0.12);
	}

	.can-prohibited-uses > li {
		border-left-color: #ef4444;
		background-color: rgba(239, 68, 68, 0.12);
	}
}

.can-intro-section pre {
	margin: 0.75em 0;
	padding: 0.75em;
	background: var(--shadecolor);
	overflow-x: auto;
	font-size: 0.85em;
}

/* Error code rows with subtle status coloring */
tr.can-error-2xx {
	background-color: rgba(74, 222, 128, 0.08);
}

tr.can-error-4xx {
	background-color: rgba(251, 146, 60, 0.08);
}

tr.can-error-5xx {
	background-color: rgba(248, 113, 113, 0.08);
}

@media (prefers-color-scheme: dark) {
	tr.can-error-2xx {
		background-color: rgba(34, 197, 94, 0.12);
	}

	tr.can-error-4xx {
		background-color: rgba(249, 115, 22, 0.12);
	}

	tr.can-error-5xx {
		background-color: rgba(239, 68, 68, 0.12);
	}
}

/* Tables (intro + detail pane) */
.can-intro-section table,
.can-detail-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.75em 0;
	font-size: 0.9em;
}

.can-intro-section th,
.can-intro-section td,
.can-detail-body th,
.can-detail-body td {
	padding: 0.5em;
	text-align: left;
	border: 1px solid var(--linecolor);
}

.can-intro-section th,
.can-detail-body th {
	background: var(--shadecolor);
	font-weight: 700;
}

/* Detail pane content */
.can-detail-body h4 {
	margin: 1em 0 0.5em 0 !important;
	font-size: 0.95em;
	font-weight: 700;
}

.can-detail-body p {
	margin: 0.5em 0;
	line-height: 1.5;
}

.can-detail-example {
	margin: 0.75em 0;
}

.can-detail-example p {
	margin: 0 0 0.25em 0;
	font-size: 0.9em;
}

.can-detail-example pre {
	margin: 0;
	padding: 0.75em;
	background: var(--shadecolor);
	overflow-x: auto;
	font-size: 0.8em;
}

/* Responsive */
@media (max-width: 768px) {
	.can-api-docs-browser .can-layout {
		flex-direction: column;
	}

	.can-api-docs-browser .can-sidebar {
		width: 100%;
		height: auto;
		max-height: 35vh;
		border-right: none;
		border-bottom: 1px solid var(--linecolor);
	}

	.can-api-docs-browser .can-main {
		height: auto;
		flex: 1;
	}
}