/**
 * Documentation pages: the one line "you are here" bar.
 *
 * Loaded only on the Documentation page template, so the selectors do not repeat that
 * condition: the enqueue is the scoping.
 */

#ncp-doc-trail {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 8px );
	border-bottom: 1px solid #e3e6ea;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
	font-size: 0.875rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;

	/* Out of the way until there is something to say, which is anywhere below the first heading. */
	transform: translateY( -100% );
	transition: transform 0.18s ease;
}

#ncp-doc-trail.is-visible {
	transform: none;
}

#ncp-doc-trail a {
	color: #0b69ae;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;

	/* Shrinkable, so the line negotiates only when it actually has to. */
	flex: 0 1 auto;
	min-width: 0;
}

#ncp-doc-trail a:hover,
#ncp-doc-trail a:focus {
	text-decoration: underline;
}

/*
 * The heading you are actually under gets the room. Its ancestors are capped and allowed to
 * ellipsis, because some of these headings run to sixty characters and three of them side by
 * side will not fit on a phone, or on a laptop come to that.
 */
/*
 * WHO GIVES UP CHARACTERS FIRST, rather than a cap on how many anyone may have.
 *
 * This was max-width: 28%, which truncated an ancestor whether or not anything needed the
 * room: on a 2000px window a crumb was clipped at about 560px with a thousand pixels of the
 * bar sitting empty beside it. A cap cannot tell "there is competition for this line" from
 * "there is not", and flex-shrink can.
 *
 * So everything keeps its natural width until the line overflows, and then the ancestors
 * yield, twenty times faster than the heading you are actually under, which is the one worth
 * reading in full. The floor stops an ancestor shrinking to a bare ellipsis, which says less
 * than nothing: below that it is better to show a few characters of it.
 */
#ncp-doc-trail a:not( :last-child ) {
	flex-shrink: 20;
	min-width: 4em;
}

#ncp-doc-trail a:last-child {
	flex-shrink: 1;
	color: #1d2327;
	font-weight: 600;
}

#ncp-doc-trail .sep {
	flex: 0 0 auto;
	color: #8c8f94;
}

/*
 * ON A PHONE THE TRAIL STACKS INSTEAD OF TRUNCATING.
 *
 * Side by side, three crumbs on a 390px screen leave each ancestor about 70px, which is "The
 * VAT..." and tells nobody anything: the truncation eats the very thing the bar exists to
 * show. A phone has vertical room and no horizontal room, so the trail takes the room it has.
 *
 * One line per level, up to three, each indented under the last. The separators go: an indent
 * says the same thing without spending a character on it. Three lines comes to roughly 70px,
 * and only inside the four sections that have h4 at all.
 */
@media ( max-width: 767px ) {
	#ncp-doc-trail {
		flex-direction: column;
		align-items: stretch;
		gap: 1px;
		padding: 8px 12px;
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	#ncp-doc-trail .sep {
		display: none;
	}


	/*
	 * nth-of-type, not nth-child: the separators are still siblings even when hidden, so
	 * counting children would indent the wrong lines.
	 */
	#ncp-doc-trail a:nth-of-type( 2 ) {
		padding-left: 12px;
	}

	#ncp-doc-trail a:nth-of-type( 3 ) {
		padding-left: 24px;
	}

	/* The ancestors step back so the heading you are actually under reads first. */
	#ncp-doc-trail a:not( :last-child ) {
		font-size: 0.75rem;
		color: #50575e;
	}
}

/*
 * ANCHORS MUST CLEAR THE BAR.
 *
 * Easy Table of Contents already puts an anchor inside every heading, so the contents list
 * and any shared link scroll a heading to the very top of the viewport, which is now where
 * this bar lives. Without this the heading you asked for is the one thing hidden behind it.
 * Sized to the bar plus a little air, and larger on a phone where the bar can run to three
 * lines.
 *
 * .ez-toc-section IS THE ONE THAT MATTERS. The anchor is an empty span inside the heading,
 * so the span is what the browser scrolls to and the span is what carries the margin. Put it
 * on the heading alone, as I did first, and nothing moves.
 */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content .ez-toc-section {
	scroll-margin-top: 4rem;
}

@media ( max-width: 767px ) {
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content .ez-toc-section {
		scroll-margin-top: 6.5rem;
	}
}

/* Somebody who has asked for less motion should not be shown a sliding bar. */
@media ( prefers-reduced-motion: reduce ) {
	#ncp-doc-trail {
		transition: none;
	}
}

/* Logged in, the admin bar owns the top of the viewport. */
body.admin-bar #ncp-doc-trail {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar #ncp-doc-trail {
		top: 46px;
	}
}