/* WP STUDIODDC HQ DOCUMENTATION PAGE -- LAYOUT, STICKY TOC AND CONTENT RHYTHM.
   Loaded only on the wp-studioddc-hq-documentation page (see
   includes/documentation-page.php), so selectors here are safely scoped
   without needing a page-specific wrapper class on every rule. Colors read
   from this plugin's own --sddc-* custom properties (defined in site.css)
   with sane fallbacks, so this stays correct in both the light and dark
   theme. */

.wpsddc-docs-toc .wpsddc-docs-return {
	margin: 0 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sddc-border);
	text-align: left;
}
.wpsddc-docs-toc .wpsddc-docs-return a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--sddc-text-2);
	text-decoration: none;
	transition: color 0.2s ease;
}
.wpsddc-docs-toc .wpsddc-docs-return a:hover,
.wpsddc-docs-toc .wpsddc-docs-return a:focus-visible {
	color: var(--sddc-text);
	text-decoration: none;
}
.wpsddc-docs-return .dashicons {
	flex: 0 0 1em;
	font-size: 1.2em;
	width: 1em;
	height: 1em;
}
.wpsddc-docs-columns {
	column-gap: 3rem;
	align-items: flex-start;
}

/* Separate the introductory summary from the documentation and its index. */
.entry .entry-excerpt-single {
	margin-bottom: clamp(3rem, 5vw, 4rem);
}

/* STICKY TOC COLUMN -- align-self:flex-start KEEPS IT FROM STRETCHING TO
   MATCH THE TALLER CONTENT COLUMN, WHICH IS WHAT LETS position:sticky PIN IT
   IN PLACE WHILE THE PAGE SCROLLS PAST. DISABLED BELOW 782PX, WHERE CORE'S
   wp:columns ALREADY STACKS THE TWO COLUMNS VERTICALLY. top LEAVES VISIBLE
   AIR BELOW THE 65PX SITE HEADER SO THE CARD NEVER READS AS PASTED TO IT.
   padding-right ADDS EXTRA BREATHING ROOM ON TOP OF THE COLUMN GAP, SO THE
   TOC CARD NEVER READS AS CROWDING THE CONTENT COLUMN NEXT TO IT. */
.wpsddc-docs-toc-col {
	position: sticky;
	top: 104px;
	align-self: flex-start;
	padding-right: clamp(1rem, 3vw, 2.5rem);
}

@media (max-width: 781px) {
	.wpsddc-docs-toc-col {
		position: static;
		top: auto;
		padding-right: 0;
	}
}

/* CONTENT COLUMN -- EXPLICIT SIDE PADDING SO RUNNING TEXT NEVER READS AS
   TOUCHING THE COLUMN GUTTER OR THE PAGE'S OUTER EDGE, INDEPENDENT OF
   WHATEVER DEFAULT GUTTER THE THEME'S OWN wp:column STYLES APPLY. */
.wpsddc-docs-content-col {
	padding-right: clamp(0.5rem, 2vw, 2rem);
}

/* TOC CARD -- A SMALL SURFACE WITH ITS OWN BORDER/RADIUS INSTEAD OF A BARE
   LIST FLOATING IN THE MARGIN, SO IT READS AS A DISTINCT NAVIGATION PANEL.
   SELECTORS ARE QUALIFIED WITH THE PARENT COLUMN (INSTEAD OF A BARE
   .wpsddc-docs-toc CLASS) BECAUSE THE THEME'S OWN .wp-block-group RULES
   SHARE THE SAME (0,0,1,0) SPECIFICITY AND LOAD LATER IN THE CASCADE,
   SO A BARE CLASS SELECTOR HERE SILENTLY LOST THE PADDING TO IT. */
.wpsddc-docs-toc-col .wpsddc-docs-toc {
	display: block;
	background: var(--sddc-card, rgba(24, 38, 56, 0.55));
	border: 1px solid var(--sddc-border, rgba(215, 221, 229, 0.16));
	border-radius: var(--sddc-radius, 20px);
	padding: 1.5rem 1.5rem 1rem;
}

/* NUMBERED STEPPER LIST -- A SMALL LEADING INDEX NUMBER PER ENTRY INSTEAD OF
   A GENERIC BULLET, WITH A SOFT HOVER FILL AND A DISTINCT ACTIVE STATE THAT
   THE SCROLLSPY SCRIPT TOGGLES AS EACH SECTION SCROLLS INTO VIEW. */
.wpsddc-docs-nav {
	list-style: none;
	counter-reset: wpsddc-toc;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wpsddc-docs-nav li {
	counter-increment: wpsddc-toc;
}

.entry-content .wpsddc-docs-toc ul.wpsddc-docs-nav > li::marker {
	content: '';
}

/* text-decoration IS REPEATED ON :hover/:focus-visible/.is-active BELOW
   (RATHER THAN LEFT TO INHERIT FROM THIS BASE RULE) SO NONE OF THOSE STATES
   CAN PICK UP AN UNDERLINE FROM A LATER, EQUALLY-SPECIFIC GLOBAL a:hover
   RULE ELSEWHERE IN THE CASCADE. */
.wpsddc-docs-nav a {
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	padding: 0.5rem 0.65rem;
	border-radius: calc(var(--sddc-radius, 20px) - 8px);
	text-decoration: none;
	color: inherit;
	font-size: 0.875rem;
	line-height: 1.3;
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.wpsddc-docs-nav a::before {
	content: counter(wpsddc-toc, decimal-leading-zero);
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sddc-accent, var(--color-link));
	opacity: 0.85;
}

.wpsddc-docs-nav a:hover,
.wpsddc-docs-nav a:focus-visible {
	background: var(--sddc-btn2-hover, rgba(215, 221, 229, 0.12));
	padding-left: 0.9rem;
	text-decoration: none;
}

.wpsddc-docs-nav a.is-active {
	background: var(--sddc-accent, #56779d);
	color: #fff;
	text-decoration: none;
}

.wpsddc-docs-nav a.is-active::before {
	color: inherit;
	opacity: 1;
}

/* CONTENT COLUMN -- EACH ANCHORED H2 GETS A TOP RULE AND REAL BREATHING ROOM
   SO SECTIONS READ AS DISTINCT UNITS INSTEAD OF RUNNING TOGETHER. THE FIRST
   SECTION SKIPS THE RULE/TOP MARGIN SO IT DOESN'T FLOAT AWAY FROM THE TITLE.
   scroll-margin-top MATCHES THE STICKY HEADER OFFSET SO A DIRECT #ANCHOR
   LINK (A SHARED URL, A BROWSER BACK/FORWARD JUMP) DOESN'T LAND THE HEADING
   UNDERNEATH THE HEADER -- THE CLICK-DRIVEN JS SMOOTH SCROLL ALREADY HANDLES
   ITS OWN OFFSET, BUT NATIVE FRAGMENT NAVIGATION DOES NOT. */
.wpsddc-docs-content-col h2[id] {
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--sddc-border, rgba(215, 221, 229, 0.16));
	scroll-margin-top: 104px;
}

.wpsddc-docs-content-col h2[id]:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.wpsddc-docs-content-col h2[id] + * {
	margin-top: 1rem;
}

.wpsddc-docs-content-col h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

/* Scope spacing to authored lists, including native WordPress List blocks.
   LIVE PLUGIN OUTPUT EMBEDDED IN THE CONTENT -- SUCH AS THE
   [wpsddc_social_icons] SHORTCODE DEMO, A <ul class="wpsddc-social-icons">
   MEANT TO LAY OUT AS A HORIZONTAL ROW -- ALWAYS CARRIES ITS OWN CLASS, SO
   IT NO LONGER GETS FORCED INTO A VERTICAL STACK BY THIS RULE. */
.wpsddc-docs-content-col ul:not([class]),
.wpsddc-docs-content-col ol:not([class]),
.wpsddc-docs-content-col ul.wp-block-list,
.wpsddc-docs-content-col ol.wp-block-list {
	margin-top: 0.75rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.wpsddc-docs-content-col p + p {
	margin-top: 0.85rem;
}

/* LIVE [wpsddc_social_icons] DEMO -- A LITTLE AIR ABOVE SO IT DOESN'T SIT
   RIGHT AGAINST THE PARAGRAPH ABOVE IT. */
.wpsddc-docs-content-col .wpsddc-social-icons {
	margin-top: 1rem;
}