/* Author: WOODS Business Solutions */
/*
  wbs-pages/docs-wbs-connect.css

  Shared stylesheet of the WBS Connect for Dataverse documentation pages,
  and at the same time the page stylesheet of the hub page (slug
  docs-wbs-connect), which the loader enqueues automatically. Every other
  doc page's {slug}.css imports this file. Tokens come from
  _shared/_tokens.css (loaded first). Scoped to the .wbs-docs wrapper the
  doc partials render, under the wbs-page--docs-wbs-connect* body class the
  loader adds to these ten pages; page-level rules live in each {slug}.css.

  Design: dark canvas, two-column layout with a sticky section nav on the
  left, restrained type, hairline tables, one lime moment per page (the
  current nav entry).
*/

[class*="wbs-page--docs-wbs-connect"] .wbs-docs,
[class*="wbs-page--docs-wbs-connect"] .wbs-docs * {box-sizing:border-box}

[class*="wbs-page--docs-wbs-connect"] .wbs-docs {
	--wbs-docs-pad: clamp(20px, 5vw, 40px);
	--wbs-docs-code-bg: #1b1b1b;
	--wbs-docs-raised: #2b2b2b;
	background: var(--surface-bg);
	color: var(--fg-2);
	font-family: var(--font-sans);
	font-weight: var(--fw-light);
	font-size: 16.5px;
	line-height: 1.6;
	padding: clamp(40px, 5vw, 64px) var(--wbs-docs-pad) clamp(64px, 8vw, 112px);
}

[class*="wbs-page--docs-wbs-connect"] .wbs-docs-layout {
	max-width: var(--grid-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

/* Section nav */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav {
	position: sticky;
	top: 96px;
	font-size: 14.5px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav-title {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-3);
	font-weight: var(--fw-semi);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav-title a {color: var(--fg-3)}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav ul {list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline-strong)}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li {margin: 0}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li a {
	display: block;
	padding: 7px 14px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--fg-2);
	transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li a:hover {color: var(--fg-1)}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li a[aria-current="page"] {
	color: var(--fg-1);
	font-weight: var(--fw-semi);
	border-left-color: var(--wbs-lime);
}

/* Body */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body {min-width: 0; max-width: 78ch}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body h1 {
	color: var(--fg-1);
	font-size: clamp(32px, 3.6vw, 46px);
	margin: 0 0 12px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-meta {
	margin: 0 0 22px;
	font-size: 13px;
	color: var(--fg-3);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-summary {
	font-size: 18.5px;
	line-height: 1.55;
	color: var(--fg-1);
	margin: 0 0 40px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--hairline);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body h2 {
	color: var(--fg-1);
	font-size: clamp(24px, 2.4vw, 30px);
	margin: 48px 0 14px;
	padding-top: 8px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body h3 {
	color: var(--fg-1);
	font-size: 19px;
	margin: 30px 0 10px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body p {margin: 0 0 16px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body ul,
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body ol {margin: 0 0 18px; padding-left: 22px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body li {margin: 0 0 6px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body li > ul {margin-top: 6px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body strong {color: var(--fg-1)}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body a {
	color: var(--fg-1);
	border-bottom: 1px solid var(--hairline-strong);
	padding-bottom: 1px;
	transition: border-color var(--dur-base) var(--ease);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body a:hover {border-bottom-color: var(--wbs-lime)}

/* Inline code and code blocks */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body code {
	font-family: var(--font-mono);
	font-size: .88em;
	background: rgba(255, 255, 255, .07);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--fg-1);
	word-break: break-word;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body pre.wbs-code {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--wbs-docs-code-bg);
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-md);
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fg-1);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body pre.wbs-code code {
	background: none;
	padding: 0;
	font-size: inherit;
	white-space: pre;
	word-break: normal;
}

/* Tables */
[class*="wbs-page--docs-wbs-connect"] .wbs-table-wrap {
	overflow-x: auto;
	margin: 0 0 24px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--wbs-docs-raised);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body th,
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body td {
	text-align: left;
	vertical-align: top;
	padding: 11px 14px;
	border-bottom: 1px solid var(--hairline);
	line-height: 1.5;
	color: var(--fg-2);
	font-weight: var(--fw-light);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body thead th {
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-3);
	font-weight: var(--fw-semi);
	background: #242424;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body tbody th {color: var(--fg-1); font-weight: var(--fw-semi); white-space: nowrap}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body tbody tr:last-child th,
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body tbody tr:last-child td {border-bottom: 0}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body td code,
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-body th code {font-size: .9em}

/* Callouts */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-note {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--hairline-strong);
	border-left: 3px solid var(--fg-3);
	border-radius: var(--r-sm);
	background: var(--wbs-docs-raised);
	font-size: 15px;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-note p:last-child {margin-bottom: 0}

/* Hub grid of page cards */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid li {margin: 0}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid a {
	display: block;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-md);
	background: var(--wbs-docs-raised);
	transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid a:hover {border-color: var(--hairline-strong); transform: var(--hover-lift)}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid strong {display: block; margin-bottom: 4px; font-size: 16px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid span {font-size: 14px; color: var(--fg-2)}

/* See also */
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-seealso {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline);
}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-seealso h2 {margin-top: 0; font-size: 18px}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-seealso ul {list-style: none; padding: 0}
[class*="wbs-page--docs-wbs-connect"] .wbs-docs-seealso li {margin: 0 0 8px}

@media (max-width: 900px) {
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-layout {grid-template-columns: 1fr; gap: 28px}
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav {position: static}
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav ul {display: flex; flex-wrap: wrap; gap: 6px; border-left: 0}
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li a {
		margin: 0;
		padding: 6px 12px;
		border: 1px solid var(--hairline-strong);
		border-radius: var(--r-pill);
		font-size: 13.5px;
	}
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-nav li a[aria-current="page"] {border-color: var(--wbs-lime)}
	[class*="wbs-page--docs-wbs-connect"] .wbs-docs-grid {grid-template-columns: 1fr}
}

/* Hub page (slug docs-wbs-connect): free .site-main from the theme content-width cap. */
.wbs-page--docs-wbs-connect .site-main.wbs-html-page {max-width:none !important;width:auto !important;padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important}
.wbs-page--docs-wbs-connect .wbs-docs {min-height:60vh}