/* ========================================================
   KEKOA Docs - Component & Layout Styles
   Matches Figma node 15159-21477 ("API Specification").
   Consumes the custom properties defined in docs-tokens.css.
   ======================================================== */

/* Scoped reset: the active theme's own header/footer wrap our content (so
   site nav/branding stays consistent), which means its stylesheet is also
   loaded. Class selectors below (.kd-content h2, .kd-sidebar__link, etc.)
   already out-specificity plain element rules like the theme's `h2 {}`, but
   `body` needs an explicit nudge since WP always outputs these classes via
   body_class() regardless of which theme is active. */
body.single-kekoa_doc,
body.post-type-archive-kekoa_doc {
	background: var(--kd-bg);
}

.kekoa-docs {
	color: var(--kd-text);
	font-family: var(--kd-font-body);
	font-size: 15px;
	line-height: 1.6;
	box-sizing: border-box;
}
.kekoa-docs *,
.kekoa-docs *::before,
.kekoa-docs *::after {
	box-sizing: inherit;
}

/* ---- Scrollbar theming (sidebar nav, code panels, anything else that
   scrolls within a doc page) - matches the dark palette instead of the
   browser's default light/OS scrollbar. ---- */
.kekoa-docs,
.kekoa-docs * {
	scrollbar-width: thin;
	scrollbar-color: var(--kd-border-strong) transparent;
}
.kekoa-docs ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.kekoa-docs ::-webkit-scrollbar-track {
	background: transparent;
}
.kekoa-docs ::-webkit-scrollbar-thumb {
	background: var(--kd-border-strong);
	border-radius: 4px;
}
.kekoa-docs ::-webkit-scrollbar-thumb:hover {
	background: var(--kd-muted);
}

/* ---- Page layout (standalone template) ---- */
.kd-page {
	background: var(--kd-bg);
	padding: var(--kd-space-6) var(--kd-space-5);
}
.kd-page__layout {
	/* !important: this site also loads Elementor + bdthemes-element-pack
	   (a UIkit-based framework prone to broad resets), and their CSS prints
	   after ours - at equal specificity, later wins. This structural layout
	   must not lose that fight. */
	display: grid !important;
	grid-template-columns: var(--kd-sidebar-width) minmax(0, 1fr) !important;
	max-width: 1440px;
	margin: 0 auto;
	align-items: start;
	background: var(--kd-panel-bg);
	border-radius: var(--kd-radius);
	/* No `overflow: hidden` here - it would establish this element as the
	   nearest scrolling ancestor for the sticky sidebar below, breaking its
	   stickiness against the actual page scroll. --kd-panel-bg is
	   transparent, so there's nothing for corner-clipping to do anyway. */
}
.kd-main {
	min-width: 0;
	padding: 56px 64px 80px;
}

/* ---- Embed layout ([kekoa_doc] shortcode inside Elementor) ---- */
.kd-embed__layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) var(--kd-toc-width) !important;
	gap: var(--kd-space-6);
	align-items: start;
}

/* ---- Sidebar ---- */
.kd-sidebar {
	border-right: 1px solid var(--kd-border);
	align-self: stretch;
	height: 100%;
}
.kd-sidebar__inner {
	/* Sticks to the viewport as the page scrolls, and scrolls internally if
	   the nav list itself is taller than the available space, so the main
	   content column can be scrolled on its own without the sidebar moving.
	   A fixed `height` (not just `max-height`) keeps the nav column at full
	   height even when collapsed TOC branches leave it with little content -
	   it never shrinks to fit, it just has blank space below when short. */
	position: sticky;
	top: var(--kd-space-5);
	height: calc(100vh - (var(--kd-space-5) * 2));
	overflow-y: auto;
	/* Nav labels are forced to a single line (see .kd-sidebar__link); long
	   ones scroll horizontally instead of wrapping onto a second line. */
	overflow-x: auto;
	padding: var(--kd-space-4);
}
.kd-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--kd-space-4) 12px;
}
.kd-sidebar__brand-name {
	font-family: var(--kd-font-brand);
	font-weight: 700;
	font-size: 24px;
	color: var(--kd-accent-contrast);
	letter-spacing: 0.5px;
}
.kd-sidebar__brand-badge {
	background: var(--kd-badge-bg);
	border: 1px solid var(--kd-badge-border);
	color: var(--kd-muted);
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: var(--kd-radius-xs);
}
.kd-sidebar__toggle {
	display: none;
}
.kd-sidebar__search input {
	width: 100%;
	background: var(--kd-surface-active);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius-sm);
	color: var(--kd-sidebar-text);
	font-family: var(--kd-font-body);
	font-size: 14px;
	padding: var(--kd-space-2) var(--kd-space-3);
	margin-bottom: var(--kd-space-3);
}
.kd-sidebar__search input::placeholder {
	color: var(--kd-muted);
}
.kd-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.kd-sidebar__item {
	margin: 0;
}
.kd-sidebar__link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--kd-accent-contrast) !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: var(--kd-radius-sm);
	white-space: nowrap;
}
.kd-sidebar__link:hover {
	background: rgba(255, 255, 255, 0.04);
}
.kd-sidebar__link::before {
	content: "";
	display: block;
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: transparent;
	flex-shrink: 0;
}
.kd-sidebar__link.is-current {
	background: var(--kd-surface-active);
	color: var(--kd-accent-contrast);
	font-weight: 600;
}
.kd-sidebar__link.is-current::before {
	background: var(--kd-accent-strong);
}

/* Pure grouping label (top-level item WITH children, e.g. "GETTING STARTED",
   "ENDPOINTS", "RESOURCES") - not a real page, so no active/indicator state. */
.kd-sidebar__link--section {
	color: var(--kd-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: var(--kd-space-2) 12px var(--kd-space-1);
	pointer-events: none;
}
.kd-sidebar__link--section::before {
	display: none;
}
.kd-sidebar__item--section {
	margin-top: var(--kd-space-2);
}
.kd-sidebar__item--section:first-child {
	margin-top: 0;
}

/* Nested (depth 2+) = smaller, further indented sub-items. Text color comes
   from the shared .kd-sidebar__link white !important rule above. */
.kd-sidebar__list--depth-2 > .kd-sidebar__item > .kd-sidebar__link,
.kd-sidebar__list--depth-3 > .kd-sidebar__item > .kd-sidebar__link {
	font-size: 13px;
	font-weight: 500;
	padding: 8px 12px 8px 24px;
}
.kd-sidebar__list--depth-2 > .kd-sidebar__item > .kd-sidebar__link.is-current,
.kd-sidebar__list--depth-3 > .kd-sidebar__item > .kd-sidebar__link.is-current {
	background: var(--kd-surface-active);
}
.kd-sidebar__item.kd-sidebar__item--hidden {
	display: none;
}

/* "On this page" outline for the active doc, nested directly under its own
   nav item (not a separate right-hand column) - see render_nav_tree(). Each
   heading level is a genuinely nested <ul>/<li> (see build_toc_tree() /
   render_toc_branch()), so indentation comes from that nesting itself
   (margin-left below, compounding one level at a time) rather than a
   per-level padding hack. Anything below the top level starts collapsed
   behind a toggle arrow - see docs.js initTocToggle()/openTocBranch(). */
.kd-sidebar__list--toc {
	margin: var(--kd-space-1) 0 var(--kd-space-2);
	margin-left: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kd-sidebar__toc-row {
	display: flex;
	align-items: center;
	gap: 2px;
}
.kd-sidebar__toc-row .kd-sidebar__link--toc {
	flex: 1 1 auto;
}
.kd-sidebar__link--toc {
	font-size: 12.5px;
	font-weight: 400;
	padding: 5px 12px;
}
.kd-sidebar__link--toc::before {
	display: none;
}
.kd-sidebar__link--toc:hover {
	background: rgba(255, 255, 255, 0.04);
}
.kd-sidebar__link--toc.is-active {
	background: var(--kd-surface-active);
	font-weight: 600;
}
.kd-sidebar__link--toc.is-active::before {
	display: block;
	background: var(--kd-accent-strong);
}

.kd-sidebar__toc-toggle {
	/* !important: a generic `button` reset from Elementor/bdthemes-element-pack
	   was painting this as a filled gradient pill - this must always render
	   as a plain, bare chevron regardless of that. */
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0;
	color: var(--kd-muted);
	cursor: pointer;
}
.kd-sidebar__toc-toggle::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 150ms ease;
}
.kd-sidebar__toc-toggle[aria-expanded="true"]::before {
	transform: rotate(45deg);
}
.kd-sidebar__toc-toggle:hover {
	color: var(--kd-sidebar-text);
}

/* ---- Breadcrumb ---- */
.kd-breadcrumb {
	font-size: 13px;
	color: var(--kd-muted);
	margin-bottom: var(--kd-space-4);
}
.kd-breadcrumb a {
	color: var(--kd-muted);
	text-decoration: none;
}
.kd-breadcrumb a:hover {
	color: var(--kd-text);
}
.kd-breadcrumb a.is-current {
	color: var(--kd-heading);
}
.kd-breadcrumb__sep {
	margin: 0 var(--kd-space-2);
}

/* ---- Content typography ---- */
.kd-content__title {
	color: var(--kd-heading);
	font-family: var(--kd-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	margin: 0 0 var(--kd-space-4);
	padding-bottom: var(--kd-space-4);
	border-bottom: 1px solid var(--kd-divider);
}
.kd-content h2,
.kd-content h3,
.kd-content h4 {
	color: var(--kd-heading);
	font-family: var(--kd-font);
	font-weight: 700;
	line-height: 1.3;
	scroll-margin-top: var(--kd-space-5);
}
.kd-content h2 { font-size: 20px; margin: var(--kd-space-6) 0 var(--kd-space-3); }
.kd-content h3 { font-size: 16px; margin: var(--kd-space-5) 0 var(--kd-space-2); }
.kd-content h4 { font-size: 14px; margin: var(--kd-space-4) 0 var(--kd-space-2); }
.kd-content p {
	margin: 0 0 var(--kd-space-4);
	font-size: 15px;
	line-height: 24px;
}
/* Paragraphs directly under a subsection heading read slightly smaller, matching the reference */
.kd-content h3 + p {
	font-size: 14px;
	line-height: 22px;
}
.kd-content a {
	color: var(--kd-accent-strong);
	text-decoration: underline;
	text-decoration-color: var(--kd-note-border);
	text-underline-offset: 2px;
}
.kd-content a:hover {
	color: var(--kd-accent);
}
.kd-content strong { color: var(--kd-heading); font-weight: 600; }
.kd-content ul,
.kd-content ol {
	margin: 0 0 var(--kd-space-4);
	padding-left: var(--kd-space-5);
}
.kd-content li + li {
	margin-top: var(--kd-space-1);
}
.kd-content code {
	font-family: var(--kd-font-mono);
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--kd-border);
	border-radius: 4px;
	padding: 1px 6px;
}
.kd-content img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
}
.kd-content hr {
	border: none;
	border-top: 1px solid var(--kd-divider);
	margin: var(--kd-space-6) 0;
}

/* ---- Heading anchor links ---- */
.kd-heading-anchor {
	margin-left: var(--kd-space-2);
	color: var(--kd-muted);
	text-decoration: none;
	opacity: 0;
	transition: opacity 150ms;
}
.kd-content h2:hover .kd-heading-anchor,
.kd-content h3:hover .kd-heading-anchor,
.kd-content h4:hover .kd-heading-anchor,
.kd-heading-anchor:focus {
	opacity: 1;
}

/* ---- Tables ---- */
.kd-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--kd-space-4);
	font-size: 13px;
	background: var(--kd-surface);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	overflow: hidden;
}
.kd-content th,
.kd-content td {
	padding: var(--kd-space-3);
	text-align: left;
	border-bottom: 1px solid var(--kd-divider);
}
.kd-content tr:last-child td {
	border-bottom: none;
}
.kd-content th {
	background: var(--kd-surface-raised);
	color: var(--kd-text-strong);
	font-weight: 600;
}
.kd-content td {
	color: var(--kd-text);
}
.kd-content tbody tr:nth-child(even) {
	background: var(--kd-surface-sunken);
}

/* ---- Callout ---- */
.kd-callout {
	border: 1px solid var(--kd-border);
	border-left-width: 4px;
	border-radius: var(--kd-radius-sm);
	background: var(--kd-surface);
	padding: var(--kd-space-4);
	margin: 0 0 var(--kd-space-4);
}
.kd-callout__label {
	font-family: var(--kd-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: var(--kd-space-2);
}
.kd-callout__body > :last-child {
	margin-bottom: 0;
}
.kd-callout--note { border-left-color: var(--kd-note); }
.kd-callout--note .kd-callout__label { color: var(--kd-note); }
.kd-callout--tip { border-left-color: var(--kd-tip); background: var(--kd-tip-bg); }
.kd-callout--tip .kd-callout__label { color: var(--kd-tip); }
.kd-callout--warning { border-left-color: var(--kd-warning); background: var(--kd-warning-bg); }
.kd-callout--warning .kd-callout__label { color: var(--kd-warning); }
.kd-callout--important { border-left-color: var(--kd-important); background: var(--kd-important-bg); }
.kd-callout--important .kd-callout__label { color: var(--kd-important); }
.kd-callout--caution { border-left-color: var(--kd-danger); background: var(--kd-danger-bg); }
.kd-callout--caution .kd-callout__label { color: var(--kd-danger); }

/* ---- Endpoint block (```endpoint fenced blocks, e.g. "POST /v1/auth/token") ---- */
.kd-endpoint {
	display: flex;
	align-items: center;
	gap: var(--kd-space-3);
	background: var(--kd-surface-raised);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius-sm);
	padding: var(--kd-space-3) var(--kd-space-4);
	margin: 0 0 var(--kd-space-4);
}
.kd-endpoint__method {
	font-family: var(--kd-font);
	font-weight: 700;
	font-size: 12px;
	border-radius: var(--kd-radius-xs);
	padding: 4px 8px;
	white-space: nowrap;
}
.kd-endpoint__method--get { background: var(--kd-method-get-bg); color: var(--kd-method-get-text); }
.kd-endpoint__method--post { background: var(--kd-method-post-bg); color: var(--kd-method-post-text); }
.kd-endpoint__method--put { background: var(--kd-method-put-bg); color: var(--kd-method-put-text); }
.kd-endpoint__method--patch { background: var(--kd-method-patch-bg); color: var(--kd-method-patch-text); }
.kd-endpoint__method--delete { background: var(--kd-method-delete-bg); color: var(--kd-method-delete-text); }
.kd-endpoint__path {
	font-family: var(--kd-font-mono);
	font-weight: 600;
	font-size: 14px;
	color: var(--kd-text-strong);
}

/* ---- Code panel ---- */
.kd-code-panel {
	background: var(--kd-surface-sunken);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	overflow: hidden;
	margin: 0 0 var(--kd-space-4);
}
.kd-code-panel__header {
	display: flex;
	align-items: center;
	padding: 10px var(--kd-space-4);
	background: var(--kd-surface-raised);
	border-bottom: 1px solid var(--kd-border);
}
.kd-code-panel__lang {
	font-family: var(--kd-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--kd-muted);
}
.kd-code-panel pre {
	margin: 0;
	padding: var(--kd-space-4);
	overflow-x: auto;
}
.kd-code-panel code {
	font-family: var(--kd-font-mono);
	font-size: 13px;
	line-height: 20px;
	color: var(--kd-muted);
	background: none;
	border: none;
	padding: 0;
}
.kd-code-panel .kd-tok-key { color: var(--kd-code-key); }
.kd-code-panel .kd-tok-string { color: var(--kd-code-string); }
.kd-code-panel .kd-tok-number { color: var(--kd-code-number); }

/* ---- Table of contents rail ---- */
.kd-toc {
	position: sticky;
	top: var(--kd-space-5);
	font-size: 13px;
}
.kd-toc__title {
	color: var(--kd-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: var(--kd-space-3);
}
.kd-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--kd-border);
}
.kd-toc__item a {
	display: block;
	color: var(--kd-muted);
	text-decoration: none;
	padding: 4px 0 4px var(--kd-space-3);
	border-left: 2px solid transparent;
	margin-left: -1px;
}
.kd-toc__item--level-3 a { padding-left: var(--kd-space-5); }
.kd-toc__item--level-4 a { padding-left: var(--kd-space-6); }
.kd-toc__item a:hover {
	color: var(--kd-text);
}
.kd-toc__item a.is-active {
	color: var(--kd-accent-strong);
	border-left-color: var(--kd-accent-strong);
}

/* ---- Prev/next ---- */
.kd-prevnext {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--kd-space-4);
	margin-top: var(--kd-space-6);
	padding-top: var(--kd-space-5);
	padding-bottom: var(--kd-space-1);
	border-top: 1px solid var(--kd-divider);
	/* Always a single row - on narrow viewports it scrolls horizontally
	   instead of wrapping Previous/Next onto separate lines. */
	overflow-x: auto;
}
.kd-prevnext__link {
	flex: 1 0 240px;
	display: block;
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	padding: var(--kd-space-3) var(--kd-space-4);
	text-decoration: none;
}
.kd-prevnext__link:hover {
	border-color: var(--kd-accent-strong);
}
.kd-prevnext__link--next {
	text-align: right;
}
.kd-prevnext__label {
	display: block;
	color: var(--kd-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}
.kd-prevnext__title {
	color: var(--kd-heading);
	font-weight: 600;
}

/* ---- Archive / card grid ---- */
.kd-archive {
	background: var(--kd-bg);
	padding: var(--kd-space-6) var(--kd-space-5);
}
.kd-archive__header {
	max-width: 1200px;
	margin: 0 auto var(--kd-space-6);
}
.kd-archive__title {
	color: var(--kd-heading);
	font-family: var(--kd-font);
	font-size: 32px;
	font-weight: 700;
	text-align: center;
}
.kd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--kd-space-5);
	max-width: 1200px;
	margin: 0 auto;
}
.kd-card {
	display: block;
	background: var(--kd-surface);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	padding: var(--kd-space-5);
	text-decoration: none;
	transition: border-color 150ms;
}
.kd-card:hover {
	border-color: var(--kd-accent-strong);
}
.kd-card__title {
	color: var(--kd-heading);
	font-family: var(--kd-font);
	font-size: 19px;
	margin: 0 0 var(--kd-space-2);
}
.kd-card__desc {
	color: var(--kd-text);
	font-size: 14px;
	margin: 0 0 var(--kd-space-3);
}
.kd-card__count {
	color: var(--kd-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
	.kd-embed__layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.kd-embed__layout .kd-toc {
		display: none;
	}
}

@media (max-width: 860px) {
	.kd-page { padding: var(--kd-space-4) var(--kd-space-3); }
	.kd-page__layout {
		grid-template-columns: 1fr;
	}
	.kd-sidebar__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: var(--kd-surface);
		border: 1px solid var(--kd-border);
		border-radius: var(--kd-radius-sm);
		color: var(--kd-sidebar-text);
		font-size: 14px;
		padding: var(--kd-space-2) var(--kd-space-3);
		margin-bottom: var(--kd-space-3);
	}
	.kd-sidebar {
		border-right: none;
		border-bottom: 1px solid var(--kd-border);
	}
	.kd-sidebar__inner {
		display: none;
		position: static;
		max-height: none;
	}
	.kd-sidebar.is-open .kd-sidebar__inner {
		display: block;
	}
	.kd-content__title { font-size: 26px; }
	.kd-content h2 { font-size: 18px; }
}