/* ============================================================================
 * docs.css — Power Claude documentation section
 * ============================================================================
 *
 * PURPOSE
 *   Styles the two-column documentation shell rendered by the docs.php
 *   article-view override (templates/nllm/html/com_content/article/docs.php):
 *
 *     - .pc-docs__sidebar  : sticky tree-nav listing every docs article,
 *                            grouped by subcategory, with the current page
 *                            highlighted.
 *     - .pc-docs__main     : the article body OR, for the /docs landing alias,
 *                            a hero + category-card grid + full article index.
 *
 * ARCHITECTURE
 *   Mobile-first. Base styles target a 320px single-column stack (sidebar
 *   first, then content). At the `tablet` breakpoint (768px) the layout
 *   becomes a two-column CSS grid with the sidebar pinned via position:sticky.
 *   All color/spacing comes from the brand token sheet
 *   (media/com_neurallicense/brand/tokens.css → :root --nllm-* / --pc-*),
 *   which is loaded ahead of this file by the template. This file never
 *   hardcodes a brand hex value.
 *
 * DEPENDENCIES
 *   - tokens.css   : --nllm-* / --pc-* custom properties.
 *   - template.css : base typography + .pc-* reset already on the page.
 *   Loaded via WAM registerAndUseStyle('nllm.docs', ...) in docs.php with a
 *   filemtime() cache-bust query string.
 *
 * SCOPE
 *   Every rule is prefixed `.pc-docs` so docs styling cannot leak into the
 *   marketing pages or the shop checkout views.
 *
 * BREAKPOINTS
 *   base    0-767px   single column, sidebar collapses to a scrollable strip
 *   768px+  tablet+   two-column grid, sticky sidebar
 *   1024px+ desktop   wider content column, larger type scale
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * Local layout tokens
 * Derived from brand tokens; kept local so the docs shell can be retuned
 * without touching the global sheet. Sidebar width and the sticky offset are
 * the two values the grid template and the position:sticky rule both need.
 * -------------------------------------------------------------------------- */
.pc-docs {
	--pc-docs-sidebar-width: 16rem;     /* fixed nav column width at tablet+   */
	--pc-docs-sticky-top: 1.5rem;       /* gap between sticky nav and viewport */
	--pc-docs-content-max: 48rem;       /* readable measure for article body  */
	--pc-docs-radius: 0.625rem;         /* card / panel corner radius         */
	--pc-docs-gap: 2.5rem;              /* sidebar ↔ content gap at tablet+    */

	background: var(--nllm-surface-deep);
	color: var(--nllm-text);
	/* Comfortable page gutter on mobile; the shell adds its own max-width. */
	padding: 1.5rem 1rem 4rem;
}

/* ----------------------------------------------------------------------------
 * Shell — single column on mobile, two-column grid from 768px up
 * -------------------------------------------------------------------------- */
.pc-docs__shell {
	max-width: 72rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* ----------------------------------------------------------------------------
 * Sidebar — sticky tree navigation
 * On mobile it is a normal block at the top of the flow with a capped height
 * so a long docs tree does not push the article far down the page; it scrolls
 * internally. From 768px it becomes a sticky rail beside the content.
 * -------------------------------------------------------------------------- */
.pc-docs__sidebar {
	/* Mobile: a bordered, internally-scrolling panel. */
	background: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--pc-docs-radius);
	padding: 1rem 1.125rem;
	max-height: 18rem;        /* cap so it never dominates the mobile viewport */
	overflow-y: auto;
}

.pc-docs__nav {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* "Documentation home" link — visually distinct from the grouped article list. */
.pc-docs__nav-home {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 36px;         /* WCAG 2.5.5 tap target on mobile */
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--nllm-text);
	text-decoration: none;
	padding: 0.375rem 0.5rem;
	border-radius: 0.375rem;
}

.pc-docs__nav-home:hover {
	background: var(--nllm-surface-soft);
}

.pc-docs__nav-home.is-current {
	color: var(--nllm-violet-soft);
	background: color-mix(in srgb, var(--nllm-violet) 14%, transparent);
}

.pc-docs__nav-home-icon {
	font-size: 0.625rem;
	color: var(--nllm-violet-soft);
}

/* A subcategory group inside the tree. */
.pc-docs__nav-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.pc-docs__nav-group-title {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nllm-text-subtle);
}

.pc-docs__nav-empty {
	margin: 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--nllm-text-subtle);
}

.pc-docs__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* A hairline rail down the left edge ties the article list to its group. */
	border-left: 1px solid var(--nllm-surface-edge);
}

.pc-docs__nav-item {
	margin: 0;
}

/* Article link in the tree. The current article gets a violet rail + tint. */
.pc-docs__nav-link {
	display: block;
	min-height: 36px;
	padding: 0.4375rem 0.75rem;
	margin-left: -1px;        /* overlap the group rail for the active border */
	border-left: 2px solid transparent;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--nllm-text-muted);
	text-decoration: none;
}

.pc-docs__nav-link:hover {
	color: var(--nllm-text);
	background: var(--nllm-surface-soft);
}

.pc-docs__nav-link.is-current {
	color: var(--nllm-violet-soft);
	font-weight: 600;
	border-left-color: var(--nllm-violet-soft);
	background: color-mix(in srgb, var(--nllm-violet) 12%, transparent);
}

/* ----------------------------------------------------------------------------
 * Main content column
 * -------------------------------------------------------------------------- */
.pc-docs__main {
	min-width: 0;             /* lets long <pre> blocks scroll, not overflow */
}

/* ── Landing hero ─────────────────────────────────────────────────────────── */
.pc-docs__hero {
	margin-bottom: 2.5rem;
}

.pc-docs__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nllm-cyan-bright);
}

.pc-docs__hero-title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 800;
	color: var(--nllm-text);
}

.pc-docs__hero-lede {
	margin: 0;
	max-width: var(--pc-docs-content-max);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--nllm-text-muted);
}

/* ── Category card grid ───────────────────────────────────────────────────── */
/* Single column on mobile; 2-up from tablet. Never multi-column at 320px. */
.pc-docs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 3rem;
}

.pc-docs__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--pc-docs-radius);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.pc-docs__card:hover {
	border-color: var(--nllm-violet-soft);
	transform: translateY(-2px);
}

.pc-docs__card-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--nllm-text);
}

.pc-docs__card-blurb {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--nllm-text-muted);
}

.pc-docs__card-count {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nllm-cyan-bright);
}

/* ── Full article index (anchored per category) ──────────────────────────── */
.pc-docs__index {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.pc-docs__index-group {
	/* scroll-margin keeps the anchored heading clear of any sticky header. */
	scroll-margin-top: 5rem;
}

.pc-docs__index-title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--nllm-text);
	border-bottom: 1px solid var(--nllm-surface-edge);
}

.pc-docs__index-empty {
	margin: 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--nllm-text-subtle);
}

.pc-docs__index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.pc-docs__index-item {
	margin: 0;
}

.pc-docs__index-link {
	display: block;
	min-height: 36px;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.9375rem;
	color: var(--nllm-violet-soft);
	text-decoration: none;
}

.pc-docs__index-link:hover {
	background: var(--nllm-surface);
	color: var(--nllm-cyan-bright);
}

/* ── Individual docs article ─────────────────────────────────────────────── */
.pc-docs__article-header {
	margin-bottom: 1.75rem;
}

.pc-docs__breadcrumb {
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	color: var(--nllm-text-subtle);
}

.pc-docs__breadcrumb a {
	color: var(--nllm-violet-soft);
	text-decoration: none;
}

.pc-docs__breadcrumb a:hover {
	text-decoration: underline;
}

.pc-docs__breadcrumb-sep {
	margin-inline: 0.4rem;
}

.pc-docs__article-title {
	margin: 0;
	font-size: 1.625rem;
	line-height: 1.25;
	font-weight: 800;
	color: var(--nllm-text);
}

/* Article body — readable measure, generous vertical rhythm. The body is
 * editor-generated HTML, so descendant selectors style the raw tags. */
.pc-docs__article-body {
	max-width: var(--pc-docs-content-max);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--nllm-text-muted);
}

.pc-docs__article-body h2 {
	margin: 2rem 0 0.75rem;
	font-size: 1.3125rem;
	font-weight: 700;
	color: var(--nllm-text);
	scroll-margin-top: 5rem;
}

.pc-docs__article-body h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--nllm-text);
}

.pc-docs__article-body p {
	margin: 0 0 1rem;
}

.pc-docs__article-body ul,
.pc-docs__article-body ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}

.pc-docs__article-body li {
	margin-bottom: 0.375rem;
}

.pc-docs__article-body a {
	color: var(--nllm-violet-soft);
}

.pc-docs__article-body a:hover {
	color: var(--nllm-cyan-bright);
}

.pc-docs__article-body strong {
	color: var(--nllm-text);
}

/* Inline code + fenced blocks — the docs lean on CLI snippets heavily. */
.pc-docs__article-body code {
	font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
	font-size: 0.875em;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	background: var(--nllm-surface);
	color: var(--nllm-cyan-pale);
}

.pc-docs__article-body pre {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--pc-docs-radius);
	background: var(--nllm-surface);
	overflow-x: auto;        /* long lines scroll inside the block */
	line-height: 1.55;
}

.pc-docs__article-body pre code {
	padding: 0;
	background: none;
	color: var(--nllm-text);
}

/* Tables inside docs (e.g. the settings-reference articles). */
.pc-docs__article-body table {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.pc-docs__article-body th,
.pc-docs__article-body td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--nllm-surface-edge);
	text-align: left;
	vertical-align: top;
}

.pc-docs__article-body th {
	background: var(--nllm-surface);
	color: var(--nllm-text);
	font-weight: 700;
}

/* Settings-reference docs tables use Bootstrap's `.table`. Cassiopeia's
 * template.min.css loads AFTER our template.css and re-sets `--bs-table-color`
 * to a near-black default — dark-on-dark and unreadable on our dark theme.
 * Scoping to the prefixed docs body (`.pc-docs__article-body .table`) outranks
 * Cassiopeia's bare `.table`, so cells stay legible regardless of load order.
 * Overriding the Bootstrap variable AND the color covers both rule shapes. */
.pc-docs__article-body .table {
	--bs-table-color: var(--nllm-text-muted);
	--bs-table-striped-color: var(--nllm-text-muted);
	color: var(--nllm-text-muted);
}

.pc-docs__article-body .table > :not(caption) > * > * {
	color: var(--nllm-text-muted);
}

/* Step screenshots + demo videos in article bodies. Images and videos must
 * share the same full content-column width — do not leave <video> at intrinsic
 * (often narrower) size while screenshots stretch to 100%. */
.pc-docs__article-body img,
.pc-docs__article-body video,
.pc-docs__article-body iframe,
.pc-docs__step-shot {
	max-width: 100%;
	width: 100%;
	height: auto;
	border-radius: var(--pc-docs-radius);
	border: 1px solid var(--nllm-surface-edge);
	display: block;
	box-sizing: border-box;
}

.pc-docs__article-body figure {
	margin-inline: 0;
	margin-block: 1.25rem 1.5rem;
	width: 100%;
	max-width: 100%;
}

.pc-docs__article-body figure > video,
.pc-docs__article-body figure > img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.pc-docs__article-body figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--nllm-text-subtle);
	text-align: center;
}

/* Onboarding step figure — used by the H.3 article body. */
.pc-docs__step {
	margin: 1.5rem 0 0;
}

.pc-docs__step figcaption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--nllm-text-subtle);
}

/* ----------------------------------------------------------------------------
 * Onboarding walkthrough — the numbered 7-step "Power Claude in 5 minutes"
 * Each step is a card with a numbered badge, copy, an optional CTA, and an
 * optional screenshot that degrades gracefully (the <img> is only emitted by
 * docs.php when the PNG exists on disk).
 * -------------------------------------------------------------------------- */
.pc-docs__steps {
	list-style: none;
	margin: 1.5rem 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pc-docs__step-item {
	padding: 1.25rem;
	background: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--pc-docs-radius);
	scroll-margin-top: 5rem;
}

/* Step header — numbered badge + title on one row. */
.pc-docs__step-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.625rem;
}

/* Circular violet step number. Fixed size so it never squashes a long title. */
.pc-docs__step-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--nllm-gradient);
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 800;
}

.pc-docs__step-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nllm-text);
}

.pc-docs__step-body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--nllm-text-muted);
}

.pc-docs__step-cta {
	margin: 0.75rem 0 0;
}

.pc-docs__step-link {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--nllm-violet-soft);
	text-decoration: none;
}

.pc-docs__step-link:hover {
	color: var(--nllm-cyan-bright);
	text-decoration: underline;
}

/* Closing "next" pointer under the step list. */
.pc-docs__step-next {
	margin: 0;
	padding: 1rem 1.125rem;
	border-radius: var(--pc-docs-radius);
	background: color-mix(in srgb, var(--nllm-violet) 12%, transparent);
	font-size: 0.9375rem;
	color: var(--nllm-text-muted);
}

.pc-docs__step-next a {
	color: var(--nllm-violet-soft);
	font-weight: 600;
}

/* From tablet up the step number sits a little larger for hierarchy. */
@media (min-width: 768px) {
	.pc-docs__step-item {
		padding: 1.5rem;
	}

	.pc-docs__step-num {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1rem;
	}

	.pc-docs__step-title {
		font-size: 1.1875rem;
	}
}

/* ----------------------------------------------------------------------------
 * tablet (768px+) — two-column grid, sticky sidebar
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.pc-docs {
		padding: 2.5rem 1.5rem 5rem;
	}

	/* Switch the shell to a grid: fixed nav rail + fluid content column. */
	.pc-docs__shell {
		display: grid;
		grid-template-columns: var(--pc-docs-sidebar-width) 1fr;
		gap: var(--pc-docs-gap);
		align-items: start;        /* required so position:sticky works */
	}

	/* The sidebar now pins to the viewport as the content scrolls. Its own
	 * max-height is the viewport minus the sticky offset so a very long tree
	 * still scrolls internally rather than clipping. */
	.pc-docs__sidebar {
		position: sticky;
		top: var(--pc-docs-sticky-top);
		max-height: calc(100vh - (2 * var(--pc-docs-sticky-top)));
	}

	/* 2-up category cards from tablet up. */
	.pc-docs__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.pc-docs__hero-title {
		font-size: 2.25rem;
	}

	.pc-docs__article-title {
		font-size: 2rem;
	}
}

/* ----------------------------------------------------------------------------
 * desktop (1024px+) — a touch more breathing room
 * -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.pc-docs {
		--pc-docs-sidebar-width: 17.5rem;
	}

	.pc-docs__hero-title {
		font-size: 2.5rem;
	}
}

/* ----------------------------------------------------------------------------
 * Reduced motion — disable the card lift for users who opt out
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pc-docs__card {
		transition: none;
	}

	.pc-docs__card:hover {
		transform: none;
	}
}