/*
 * UE WWH Publication
 * Theme-independent publication navigation
 */

/* ================================================================
 * TUNING BLOCK
 *
 * Every value you are likely to want to change is here. Nothing below
 * this block needs editing for ordinary visual adjustment.
 * ================================================================ */

.ue-wwh-publication {
	/* Chapter row: the full-width band behind it.
	   Set this to the same colour as the pattern below, so the two read
	   as one band. Leave transparent to disable the band. */
	--ue-wwh-bar-bg: #f5f5f5;

	/* Height of the band. The chapter links fill it completely, so
	   raising this makes both the band and the hover areas taller. */
	--ue-wwh-bar-pad-block: 0.55em;

	/* Chapter row: width and horizontal position */
	--ue-wwh-bar-max: var(--ue-content-width, 1200px);
	--ue-wwh-bar-inset: 2.5em;      /* raise to move the row further right */
	--ue-wwh-bar-gap: 0;            /* space between the links and the hamburger */

	/* Chapter row: type and colour */
	--ue-wwh-bar-size: 1em;
	--ue-wwh-bar-color: #111111;
	--ue-wwh-bar-hover-color: #111111;
	--ue-wwh-chapter-pad-inline: 0.55em;   /* spacing between main-part links */
	--ue-wwh-chapter-active-bg: #e2e2e2;   /* hover and current main part */

	/* Index panel */
	--ue-wwh-index-bg: #f5f5f5;
	--ue-wwh-index-color: #111111;
	--ue-wwh-index-link-color: #111111;
	--ue-wwh-index-link-hover-bg: #e2e2e2;
	--ue-wwh-index-link-hover-color: #111111;
	--ue-wwh-search-bg: #ffffff;
	--ue-wwh-search-focus-bg: #eeeeee;

	/* Edge tab */
	--ue-wwh-tab-top: 55vh;         /* how far down the screen it sits */
	--ue-wwh-tab-bg: #f5f5f5;
	--ue-wwh-tab-hover-bg: #e2e2e2;
	--ue-wwh-tab-color: #111111;
	--ue-wwh-tab-hover-color: #111111;
	--ue-wwh-tab-border-color: var(--ue-color-border, rgba(0, 0, 0, 0.25));
	--ue-wwh-tab-border-width: 1px;        /* 0 for no border */

	/* Hamburger icon, shared by the row control and the edge tab.
	   Keep the 18:14 ratio when resizing. */
	--ue-wwh-icon-width: 18px;
	--ue-wwh-icon-height: 14px;

	/* Copy-link controls beside headings. Visible at rest so readers
	   discover them; full strength on hover and keyboard focus. */
	--ue-wwh-anchor-opacity: 0.3;

	/* Internal; do not edit */
	--ue-wwh-z-tab: 90;
	--ue-wwh-z-panel: 9000;
	--ue-wwh-top-offset: 0px;
	--ue-wwh-scrollbar: 0px;
}

/* Prevent delayed scroll anchoring from correcting a canonical fragment after
 * the publication bar has been inserted ahead of the page content. */
.ue-wwh-publication-page {
	overflow-anchor: none;
}

/* ================================================================
 * Layering
 *
 * The plugin has no authority over a theme's z-index scale, so the two values
 * above are local to the publication UI. Reference points:
 *
 *   WordPress admin bar        99999 (100000 below 782px)
 *   Ordinary page content      auto
 *
 * The edge tab uses logical properties, so it sits on the right in LTR and
 * on the left in RTL.
 * ================================================================ */

.admin-bar .ue-wwh-tab,
.admin-bar .ue-wwh-panel {
	--ue-wwh-top-offset: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ue-wwh-tab,
	.admin-bar .ue-wwh-panel {
		--ue-wwh-top-offset: 46px;
	}
}

/* ---------------------------------------------------------------- Chapter bar */

/*
 * The band has no vertical padding of its own. The chapter links and the
 * hamburger carry it instead, so their hover backgrounds fill the band edge
 * to edge, with no rounded corners and no gap above or below.
 */

.ue-wwh-bar {
	background: var(--ue-wwh-bar-bg, #f5f5f5);
	font-size: var(--ue-wwh-bar-size, 1em);
	color: var(--ue-wwh-bar-color, #111111);
}

.ue-wwh-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 var(--ue-wwh-bar-gap);
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ue-wwh-bar-max, 1200px);
	margin-inline: auto;
	padding-inline: var(--ue-wwh-bar-inset, 2.5em);
}

.ue-wwh-chapters,
.ue-wwh-chapters__list,
.ue-wwh-chapters__item {
	display: flex;
	align-items: stretch;
}

.ue-wwh-chapters__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ue-wwh-publication.ue-wwh-bar .ue-wwh-chapters__link {
	display: flex;
	align-items: center;
	padding: var(--ue-wwh-bar-pad-block, 0.55em) var(--ue-wwh-chapter-pad-inline, 0.55em);
	color: var(--ue-wwh-bar-color, #111111);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.ue-wwh-publication.ue-wwh-bar .ue-wwh-chapters__link:hover,
.ue-wwh-publication.ue-wwh-bar .ue-wwh-chapters__link[aria-current] {
	background: var(--ue-wwh-chapter-active-bg, #e2e2e2);
	color: var(--ue-wwh-bar-hover-color, #111111);
}

/* ---------------------------------------------------------------- Index control */

/*
 * A bare hamburger that matches the chapter links. The word INDEX is kept in
 * the markup and hidden visually, because the control still needs a name for
 * assistive technology.
 */

.ue-wwh-publication.ue-wwh-bar .ue-wwh-open {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	background: none;
	border: 0;
	border-radius: 0;
	padding: var(--ue-wwh-bar-pad-block, 0.55em) var(--ue-wwh-chapter-pad-inline, 0.55em);
	color: var(--ue-wwh-bar-color, #111111);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.ue-wwh-publication.ue-wwh-bar .ue-wwh-open:hover,
.ue-wwh-publication.ue-wwh-bar .ue-wwh-open[aria-expanded="true"] {
	background: var(--ue-wwh-chapter-active-bg, #e2e2e2);
	color: var(--ue-wwh-bar-hover-color, #111111);
}

.ue-wwh-open__label,
.ue-wwh-tab__label,
.ue-wwh-close__label,
.ue-wwh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ue-wwh-open__icon,
.ue-wwh-tab__icon {
	flex: 0 0 auto;
	width: var(--ue-wwh-icon-width);
	height: var(--ue-wwh-icon-height);
	background:
		linear-gradient(currentColor, currentColor) left top / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) left center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
}

/* ---------------------------------------------------------------- Edge tab */

.ue-wwh-tab {
	position: fixed;
	inset-inline-end: 0;
	top: calc(var(--ue-wwh-top-offset) + var(--ue-wwh-tab-top));
	z-index: var(--ue-wwh-z-tab);
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	gap: 0.4em;
	background: var(--ue-wwh-tab-bg);
	color: var(--ue-wwh-tab-color);
	border: var(--ue-wwh-tab-border-width) solid var(--ue-wwh-tab-border-color);
	border-inline-end: 0;
	border-radius: 0;
	padding: 0.9em 0.55em;
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.ue-wwh-tab:hover {
	background: var(--ue-wwh-tab-hover-bg);
	color: var(--ue-wwh-tab-hover-color);
}

.ue-wwh-tab.is-visible {
	opacity: 1;
}

/* ---------------------------------------------------------------- Panel */

/*
 * Without JavaScript the panel is an ordinary block at the end of the page and
 * every index link works. The overlay behaviour is added only after the script
 * has installed the critical dialog controls. A script failure therefore
 * leaves the readable server-rendered index in place.
 */

.ue-wwh-panel {
	margin: 3em 0 0;
	border-top: 1px solid var(--ue-color-border, rgba(0, 0, 0, 0.25));
	padding-top: 2em;
}

.ue-wwh-panel__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ue-content-width, 1200px);
	margin-inline: auto;
	background: var(--ue-wwh-index-bg, #f5f5f5);
	color: var(--ue-wwh-index-color, #111111);
	padding: 0 1.5em 2.5em;
}

.ue-wwh-js .ue-wwh-panel {
	position: fixed;
	inset: 0;
	z-index: var(--ue-wwh-z-panel);
	display: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.6);
}

.ue-wwh-js .ue-wwh-panel.is-open {
	display: block;
}

.ue-wwh-js .ue-wwh-panel__inner {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(30em, 100%);
	max-width: none;
	margin: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ue-wwh-index-bg, #f5f5f5);
	color: var(--ue-wwh-index-color, #111111);
	padding: 0 1.5em 2.5em;
}

/*
 * The head stays in view while the index scrolls under it. The negative
 * inline margin lets its background span the panel's own padding, so nothing
 * shows through at the edges.
 */

.ue-wwh-panel__head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75em;
	background: var(--ue-wwh-index-bg, #f5f5f5);
	margin-inline: -1.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding: calc(1.5em + var(--ue-wwh-top-offset)) 1.5em 0.75em;
}

/* ---------------------------------------------------------------- Filter */

/*
 * Hidden in the markup and revealed by the script, so a reader without
 * JavaScript is not shown a field that cannot do anything.
 */

.ue-wwh-search {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex: 1 1 auto;
	background: var(--ue-wwh-search-bg, #ffffff);
	padding: 0.35em 0.6em;
}

.ue-wwh-search:focus-within {
	background: var(--ue-wwh-search-focus-bg, #eeeeee);
}

.ue-wwh-search[hidden] {
	display: none;
}

.ue-wwh-search__icon {
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
	opacity: 0.6;
}

.ue-wwh-search__icon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	width: 2px;
	height: 0.45em;
	background: currentColor;
	transform: rotate(-45deg);
	transform-origin: top left;
}

.ue-wwh-search .ue-wwh-search__field {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--ue-wwh-index-color, #111111);
	caret-color: var(--ue-wwh-index-color, #111111);
	font: inherit;
	-webkit-text-fill-color: var(--ue-wwh-index-color, #111111);
	box-shadow: none;
}

.ue-wwh-search .ue-wwh-search__field:focus {
	outline: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ue-wwh-search .ue-wwh-search__field:focus {
	outline: 0;
	background: var(--ue-wwh-search-focus-bg, #eeeeee);
	border: 0;
	box-shadow: none;
}

.ue-wwh-search:focus-within .ue-wwh-search__icon {
	opacity: 1;
}

.ue-wwh-search__field::placeholder {
	color: var(--ue-wwh-index-color, #111111);
	-webkit-text-fill-color: var(--ue-wwh-index-color, #111111);
	opacity: 0.45;
}

.ue-wwh-search__field:hover,
.ue-wwh-search__field:focus,
.ue-wwh-search__field:active {
	color: var(--ue-wwh-index-color, #111111);
	-webkit-text-fill-color: var(--ue-wwh-index-color, #111111);
	transition: none;
}

.ue-wwh-search__field:-webkit-autofill,
.ue-wwh-search__field:-webkit-autofill:hover,
.ue-wwh-search__field:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ue-wwh-index-color, #111111);
	-webkit-box-shadow: 0 0 0 1000px var(--ue-wwh-search-bg, #ffffff) inset;
	caret-color: var(--ue-wwh-index-color, #111111);
	transition: background-color 9999s ease;
}

.ue-wwh-search__field:autofill {
	-webkit-text-fill-color: var(--ue-wwh-index-color, #111111);
	caret-color: var(--ue-wwh-index-color, #111111);
}

.ue-wwh-search__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ue-wwh-index__list > .is-filtered-out {
	display: none;
}

.ue-wwh-close {
	display: none;
}

.ue-wwh-js .ue-wwh-close {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0.1em 0.3em;
	color: var(--ue-wwh-index-link-color, #111111);
	font-size: 1.8em;
	line-height: 1;
	cursor: pointer;
}

.ue-wwh-close:hover {
	background: var(--ue-wwh-index-link-hover-bg, #e2e2e2);
	color: var(--ue-wwh-index-link-hover-color, #111111);
}

.ue-wwh-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ue-wwh-index__group {
	margin: 1.6em 0 0.6em;
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ue-wwh-index-color, #111111);
	opacity: 0.55;
}

.ue-wwh-index__group:first-child {
	margin-top: 0;
}

.ue-wwh-index__item--h3 {
	padding-inline-start: 1.4em;
	font-size: 0.94em;
}

.ue-wwh-index__link {
	display: flex;
	gap: 0.5em;
	padding: 0.3em 0;
	color: var(--ue-wwh-index-link-color, #111111);
	text-decoration: none;
	line-height: 1.4;
}

.ue-wwh-index__item.is-current-part .ue-wwh-index__link {
	color: var(--ue-wwh-index-link-color, #111111);
}

.ue-wwh-index__link:hover,
.ue-wwh-index__item.is-current-part .ue-wwh-index__link:hover {
	background: var(--ue-wwh-index-link-hover-bg, #e2e2e2);
	color: var(--ue-wwh-index-link-hover-color, #111111);
}

.ue-wwh-index__link.is-active-section {
	border-inline-start: 2px solid var(--ue-color-accent, #555555);
	margin-inline-start: -0.7em;
	padding-inline-start: 0.5em;
}

.ue-wwh-index__link .ue-num {
	flex: 0 0 auto;
	color: var(--ue-wwh-index-color, #111111);
	opacity: 0.5;
	font-variant-numeric: tabular-nums;
}

.ue-wwh-panel__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	margin-top: 2em;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding-top: 1.25em;
}

.ue-wwh-panel__action {
	color: var(--ue-wwh-index-link-color, #111111);
}

.ue-wwh-panel__action:hover {
	color: var(--ue-wwh-index-link-hover-color, #111111);
}

/* ---------------------------------------------------------------- Copy link */

.ue-anchor {
	margin-inline-start: 0.45em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 400;
	line-height: 1;
	padding: 0;
	opacity: var(--ue-wwh-anchor-opacity, 0.3);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ue-anchor:hover,
.ue-anchor:focus-visible {
	opacity: 1;
}

.ue-wwh-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Scroll lock */

html.ue-wwh-locked {
	overflow: hidden;
	padding-inline-end: var(--ue-wwh-scrollbar, 0px);
}

/* ---------------------------------------------------------------- Previous / next */

.ue-wwh-adjacent {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1em;
	margin-block: 3em 1em;
	border-top: 1px solid var(--ue-color-border, rgba(0, 0, 0, 0.25));
	padding-top: 1.25em;
}

.ue-wwh-adjacent__link {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	color: inherit;
	text-decoration: none;
}

.ue-wwh-adjacent__link--next {
	text-align: end;
}

.ue-wwh-adjacent__direction {
	font-size: 0.85em;
	font-weight: 600;
}

.ue-wwh-adjacent__title {
	font-size: 1.05em;
}

/* ---------------------------------------------------------------- Focus */

.ue-wwh-open:focus-visible,
.ue-wwh-tab:focus-visible,
.ue-wwh-close:focus-visible,
.ue-wwh-chapters__link:focus-visible,
.ue-wwh-index__link:focus-visible,
.ue-wwh-panel__action:focus-visible,
.ue-wwh-adjacent__link:focus-visible,
.ue-anchor:focus-visible {
	outline: var(--ue-focus-width, 2px) solid var(--ue-color-accent, #555555);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ue-wwh-tab,
	.ue-anchor {
		transition: none;
	}
}