/* ==========================================================================
   Orfeo Docs: doc and category pages. Header, footer, fonts and colours are
   Blocksy's; this file only lays out the three columns, the sticky title,
   breadcrumb and sidebars, the meta row, previous/next and the category list.
   The doc content itself is styled by its Kadence blocks.
   Loaded on single docs and doc category/tag pages only.
   ========================================================================== */

/* --orfeo-docs-offset = WP admin bar (logged in) + Blocksy's sticky header
   while it shows. Everything sticky is measured from it. */
body.orfeo-docs {
	--orfeo-adminbar: 0px;
	--orfeo-header: 0px;
	--orfeo-docs-offset: calc(var(--orfeo-adminbar) + var(--orfeo-header));
	--orfeo-docs-gap: 20px;   /* space under the header */
	--orfeo-docs-align: 58px; /* sidebar padding above its search box */
	--orfeo-title-h: 156px;   /* measured by docs.js */
	--orfeo-crumb-h: 55px;    /* measured by docs.js */
	--od-content-size: 18px;  /* base text size of the doc, as before the switch */
	--od-page: var(--theme-palette-color-6, #f2f3f4); /* the page background, behind the sticky parts */
}
html body.orfeo-docs.admin-bar {
	--orfeo-adminbar: var(--wp-admin--admin-bar--height, 32px);
}
html body.orfeo-docs:has(#header [data-sticky*="yes"]) {
	--orfeo-header: var(--header-sticky-height, 110px);
}

/* ---------- Columns ---------- */
.od-layout {
	--theme-normal-container-max-width: 1400px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 30px;
	align-items: start;
	padding-bottom: 60px;
}
.od-col--left,
.od-col--right {
	display: none;
	min-width: 0;
}
@media (min-width: 769px) {
	.od-layout {
		grid-template-columns: minmax(220px, 1fr) minmax(0, 750px);
	}
	.od-col--left {
		display: block;
		align-self: stretch;
		padding-bottom: 96px; /* the sidebar stops before the footer */
	}
}
@media (min-width: 1200px) {
	.od-layout--doc {
		grid-template-columns: minmax(220px, 1fr) minmax(0, 750px) minmax(220px, 1fr);
	}
	.od-layout--archive {
		grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
	}
	.od-col--right {
		display: block;
		align-self: stretch;
	}
}

/* Left sidebar: sticky, scrolls on its own when taller than the screen */
.od-col--left .od-col__inner {
	position: sticky;
	top: calc(var(--orfeo-docs-offset) + var(--orfeo-docs-gap));
	max-height: calc(100vh - var(--orfeo-docs-offset) - 2 * var(--orfeo-docs-gap));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding: var(--orfeo-docs-align) 24px 0 0;
	transition: top .25s ease, max-height .25s ease;
}
.od-col--left .orfeo-docs-search {
	margin-bottom: 24px;
}

/* Right sidebar: the table of contents, its title level with the search box
   and the doc title (same top padding as the left sidebar) */
.od-col--right .od-col__inner {
	position: sticky;
	top: calc(var(--orfeo-docs-offset) + var(--orfeo-docs-gap));
	max-height: calc(100vh - var(--orfeo-docs-offset) - 2 * var(--orfeo-docs-gap));
	overflow-y: auto;
	scrollbar-width: thin;
	padding: var(--orfeo-docs-align) 0 80px 20px;
	transition: top .25s ease, max-height .25s ease;
}

/* ---------- Doc column ---------- */
.od-doc,
.od-archive {
	min-width: 0;
	padding: 0 0 40px;
}
.od-doc__header {
	margin: 0;
	padding: calc(var(--orfeo-docs-align) - 6px) 0 4px; /* title level with the search box */
	background: var(--od-page);
}
.od-doc__title {
	margin: 0;
	padding: 0 0 16px;
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.2;
}
/* Breadcrumb and meta row (reading time, Listen, updated), one sticky bar */
.od-doc__bar {
	margin: 0 0 24px;
	padding: 6px 0 14px;
	border-bottom: 1px solid var(--od-line);
	background: var(--od-page);
}
.od-doc__bar .od-breadcrumbs--doc {
	margin: 0 0 12px;
}
.od-doc__bar .od-meta {
	margin: 0;
}

/* Title and breadcrumb stay at the top while the doc scrolls (desktop) */
@media (min-width: 1025px) {
	.od-doc__header {
		position: sticky;
		top: var(--orfeo-docs-offset);
		z-index: 4;
		transition: top .25s ease;
	}
	.od-doc__bar {
		position: sticky;
		top: calc(var(--orfeo-docs-offset) + var(--orfeo-title-h));
		z-index: 4;
		transition: top .25s ease;
	}
}

/* Headings land just under the sticky title and breadcrumb */
.od-doc__content :is(h1, h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: calc(var(--orfeo-docs-offset) + var(--orfeo-title-h) + var(--orfeo-crumb-h) + 16px);
}
@media (max-width: 1024px) {
	.od-doc__content :is(h1, h2, h3, h4, h5, h6)[id] {
		scroll-margin-top: calc(var(--orfeo-docs-offset) + 16px);
	}
}

/* Base text of the doc, as it was; blocks set their own sizes on top.
   The content uses the whole doc column (the theme's narrow "constrained"
   width would otherwise apply inside it). */
.od-doc__content {
	--theme-block-max-width: 100%;
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
	color: var(--theme-palette-color-5, #2d2d2d);
	font-size: var(--od-content-size);
	line-height: 1.65;
}

/* ---------- Meta row: reading time, Listen, "Updated on" ---------- */
.od-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 24px;
	color: var(--od-muted);
	font-size: 14px;
	line-height: 1.4;
}
.od-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 16px;
	background: var(--od-soft);
	color: var(--od-muted);
	font-size: 14px;
	line-height: 1.15;
}
.od-meta .od-listen {
	order: 2;
}
.od-meta .od-updated {
	order: 3;
}
/* An open player gets a line of its own under the row */
.od-meta .od-listen.is-active {
	order: 4;
	flex: 1 1 100%;
}
@media (max-width: 600px) {
	.od-meta .od-updated {
		flex-basis: 100%;
	}
}

/* ---------- Previous / next ---------- */
.od-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 40px 0;
	padding: 14px 16px;
	border-radius: 4px;
	background: var(--od-soft);
}
.od-prevnext__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--od-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}
.od-prevnext__link:hover {
	color: var(--od-accent);
}
.od-prevnext__link--next {
	margin-left: auto;
	text-align: right;
}
.od-prevnext__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
/* The other category, before the title ("Settings | Setup and Settings"),
   when a link leaves this category */
.od-prevnext__cat {
	color: var(--od-muted);
	font-size: 13px;
	font-weight: 500;
	white-space: pre;
}
.od-prevnext__cat::after {
	content: " | ";
	opacity: .6;
}

/* ---------- Table of contents (Kadence block in "Docs – Right sidebar") ---------- */
.od-col--right .kb-table-of-content-nav .kb-table-of-content-wrap {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.od-col--right .kb-table-of-content-list {
	margin-left: 0;
	padding-left: 0;
}
.od-col--right .kb-table-of-content-list li {
	margin: 0 0 2px;
}
.od-col--right .kb-table-of-content-list .kb-table-of-contents-list-sub {
	margin: 2px 0 0 18px;
	padding: 0;
}
.od-col--right .kb-table-of-content-list a.kb-table-of-contents__entry {
	display: inline-flex;
	padding: 8px;
	border-radius: 0 4px 4px 0;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}
/* The section being read (set by docs.js) */
.od-col--right .kb-table-of-content-list li.active > a.kb-table-of-contents__entry {
	color: var(--od-accent);
	font-weight: 700;
	background: var(--od-accent-faint);
	box-shadow: inset 3px 0 0 var(--od-accent);
}

/* ---------- Browse docs (phones and small tablets) ---------- */
.od-browse {
	margin: 20px 0 0;
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius);
	background: var(--od-card);
}
.od-browse__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	color: var(--od-text);
	font-size: 15px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.od-browse__toggle::-webkit-details-marker {
	display: none;
}
.od-browse__toggle .od-ui-icon--chevron-down {
	margin-left: auto;
	transition: transform .2s ease;
}
.od-browse[open] .od-browse__toggle .od-ui-icon--chevron-down {
	transform: rotate(180deg);
}
.od-browse__panel {
	padding: 0 8px 8px;
}
@media (min-width: 769px) {
	.od-browse {
		display: none;
	}
}
@media (max-width: 768px) {
	.od-doc__header {
		padding-top: 20px;
	}
	.od-archive .od-breadcrumbs--archive {
		margin-top: 20px;
	}
}

/* ---------- Category page ---------- */
.od-archive {
	padding-top: var(--orfeo-docs-align);
}
@media (max-width: 768px) {
	.od-archive {
		padding-top: 0;
	}
}
.od-breadcrumbs--archive {
	margin: 0 0 24px;
}
.od-archive__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 0 32px;
	padding: 32px 20px;
	border-radius: var(--od-radius);
	background: var(--od-soft);
	text-align: center;
}
.od-archive__header .od-cat-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 4px;
}
.od-archive__title {
	margin: 0;
	line-height: 1.2;
}
.od-archive__count {
	margin: 0;
	color: var(--od-muted);
	font-size: 14px;
}
.od-archive__description {
	max-width: 560px;
	color: var(--od-muted);
	font-size: 15px;
}
.od-item {
	padding: 22px 12px;
	border-bottom: 1px solid var(--od-line);
}
.od-item:last-child {
	border-bottom: 0;
}
.od-item__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
}
.od-item__title .od-ui-icon {
	color: var(--od-muted);
}
.od-item__title a {
	color: var(--od-text);
	text-decoration: none;
}
.od-item__title a:hover {
	color: var(--od-accent);
}
.od-item__date {
	display: inline-block;
	margin: 0 0 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: #fff8f0;
	color: var(--od-muted);
	font-size: 11px;
	line-height: 1.6;
}
.od-item__excerpt {
	margin: 0;
	color: var(--od-text);
	font-size: 15px;
	line-height: 1.6;
}