/*!
 * Sticky Breadcrumbs.
 *
 * The trail is a bare row of text: no background, no border, no shadow box. It
 * shrinks to fit its own content so it never blocks anything and never draws a
 * strip across the page. Readability over a photo comes from an outline drawn
 * with text-shadow, not from a panel.
 *
 * Every value the settings screen controls arrives as a custom property in one
 * small inline block, so this file stays a static, cacheable asset.
 *
 * Selectors lead with #sbc-bar on purpose: class specificity never accumulates
 * past an id, so one selector beats any theme rule without an !important arms
 * race, and the site owner's own CSS still wins because WordPress prints
 * Additional CSS after all enqueued styles.
 *
 * Placement uses PHYSICAL right and left on purpose. Logical start and end read
 * as clever until someone has to be told that "start" is the right edge on an
 * Arabic site; right means right, on every site.
 */

#sbc-bar {
	color: var(--sbc-text, #1d2327);
	font-size: var(--sbc-fs, 14px);
	font-weight: var(--sbc-fw, 600);
	line-height: 1.5;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Reset. :where() keeps this low enough that the user's own rules override it. */
#sbc-bar :where(ol, li) {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
	text-indent: 0;
}

#sbc-bar :where(li)::before,
#sbc-bar :where(li)::after {
	content: none;
}

#sbc-bar :where(a) {
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Owning the layout

   The trail sizes and places itself from its own text, which only works while
   every part of it stays where this file put it. One rule pasted into
   Appearance > Customise > Additional CSS is enough to end that, and Additional
   CSS is printed AFTER every enqueued stylesheet. The class people find in the
   inspector is .sbc-list, so the rule they write is

       .sbc-list { position: absolute; top: 1px; right: 20px; }

   The list leaves the flow, the trail's own box has nothing left in it to
   measure and collapses to no height, and the trail lands hard against the top
   of the content area whatever the settings say. A theme rule on `nav ol` does
   the same thing by accident.

   So the plugin states these properties rather than leaving them to whatever
   the page happens to say. Every selector below carries the #sbc-bar id plus at
   most one class, which outweighs any rule written against the classes alone
   however late it is printed, and stays below every mode rule further down this
   file so those keep the properties they own. The list is only the properties
   that can move a box out of flow, resize it, or turn it on its side; colour,
   type and spacing are a site owner's business and are left alone. Anyone who
   really does mean to move a piece of the trail still wins with their own id or
   with !important.
   -------------------------------------------------------------------------- */

#sbc-bar {
	box-sizing: border-box;
	float: none;
	clear: none;
	contain: none;
	/* The geometry below is written in logical properties, so a writing mode
	   inherited from the page would turn the trail on its side. */
	writing-mode: horizontal-tb;
	min-inline-size: 0;
	block-size: auto;
	min-block-size: 0;
	max-block-size: none;
}

#sbc-bar .sbc-list,
#sbc-bar .sbc-item,
#sbc-bar .sbc-link,
#sbc-bar .sbc-current,
#sbc-bar .sbc-sep,
#sbc-bar .sbc-text {
	box-sizing: border-box;
	position: static;
	inset: auto;
	float: none;
	clear: none;
	z-index: auto;
	transform: none;
	writing-mode: horizontal-tb;
	margin: 0;
	inline-size: auto;
	min-inline-size: 0;
	max-inline-size: none;
	block-size: auto;
	min-block-size: 0;
	max-block-size: none;
}

/* Wrapping, not a forced single line.
 *
 * min-inline-size: max-content would keep the trail on one line and push it
 * straight off a phone screen, with nothing to scroll and nothing to wrap. A
 * trail that folds onto a second line is always readable; one that runs off the
 * edge is not. */
#sbc-bar .sbc-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Enough that two crumbs on stacked lines are still separate targets to a
	   thumb; 2px was not. */
	row-gap: 6px;
	box-sizing: border-box;
}

#sbc-bar .sbc-item {
	margin-bottom: -19px !important;
	display: inline-flex;
	align-items: center;
	/* A single very long title still has to give way rather than overflow. */
	min-inline-size: 0;
}

/* break-word, not anywhere.
 *
 * The two look identical until the box is squeezed. `anywhere` lets a break
 * inside a word count towards the smallest size the box will report, so a
 * container that has gone wrong can shrink the trail to one character per line
 * -- which is exactly what the collapse described above looked like on screen.
 * With `break-word` the smallest the trail will ever report is its longest
 * word, so the worst case stays readable, and a genuinely over-long title still
 * breaks rather than running off the edge.
 *
 * The isolation is for right-to-left pages: a Latin title inside an Arabic
 * paragraph keeps its own punctuation only if it is its own bidi run, or
 * "Contact Us!" reads as "!Contact Us". */
#sbc-bar .sbc-text {
	overflow-wrap: break-word;
	unicode-bidi: isolate;
}

#sbc-bar .sbc-link {
	color: var(--sbc-link, #2271b1);
}

#sbc-bar .sbc-link:hover,
#sbc-bar .sbc-link:focus {
	color: var(--sbc-link, #2271b1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

#sbc-bar .sbc-current {
	color: var(--sbc-text, #1d2327);
}

#sbc-bar .sbc-sep {
	color: var(--sbc-sep, #646970);
	padding-inline: 8px;
	-webkit-user-select: none;
	user-select: none;
}

/* The ring is drawn twice on purpose. The link colour is the site owner's to
   choose, and the trail is often over a photograph with no panel behind it --
   white on a pale sky is the case that started this. text-shadow, which is what
   keeps the words themselves legible there, never applies to an outline, so the
   second ring is painted in the outline colour and shows on both sides of the
   first. One of the two is visible whatever is behind it. */
#sbc-bar a:focus-visible {
	outline: 2px solid var(--sbc-link, #2271b1);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--sbc-outline, #000);
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   The outline. Four one-pixel shadows, one per corner, which is what makes
   white text stay legible on a light photo without a panel behind it.
   -------------------------------------------------------------------------- */

#sbc-bar.sbc-outline {
	text-shadow:
		-1px -1px 0 var(--sbc-outline, #000),
		1px -1px 0 var(--sbc-outline, #000),
		-1px 1px 0 var(--sbc-outline, #000),
		1px 1px 0 var(--sbc-outline, #000);
}

/* Stated on the row itself, in both states, not only on the element around it.
   A shadow inherits, and inheritance loses to any declaration at all, so a
   stray `.sbc-list { text-shadow: ... }` elsewhere would paint an outline the
   settings screen has no way to turn off -- while there is a tick box on that
   screen whose whole job is to turn it off. */
#sbc-bar .sbc-list {
	text-shadow: none;
}

#sbc-bar.sbc-outline .sbc-list {
	text-shadow:
		-1px -1px 0 var(--sbc-outline, #000),
		1px -1px 0 var(--sbc-outline, #000),
		-1px 1px 0 var(--sbc-outline, #000),
		1px 1px 0 var(--sbc-outline, #000);
}

/* --------------------------------------------------------------------------
   Optional background, drawn around the trail text only.
   -------------------------------------------------------------------------- */

#sbc-bar.sbc-has-bg .sbc-list {
	background: var(--sbc-text-bg, transparent);
	padding: 6px 12px;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Placement

   absolute  Over the page and scrolling away with it. The default.
   fixed     Pinned to the window.
   static    Back in the normal flow.
   content   Automatically embedded before or after singular page content.

   In the right and left modes only ONE horizontal edge is set, which is what
   lets the box shrink to fit its text instead of stretching across the page.
   -------------------------------------------------------------------------- */

#sbc-bar.sbc-pos-absolute,
#sbc-bar.sbc-pos-fixed {
	top: var(--sbc-top, 120px);
	z-index: var(--sbc-z, 9999);
	inline-size: max-content;
	/* The box starts --sbc-side in from one edge, so that distance plus a little
	   breathing room has to come off the width it is allowed. Subtracting only
	   the breathing room is what pushed the trail off a phone screen. */
	max-inline-size: calc(100% - var(--sbc-side, 20px) - 16px);
}

#sbc-bar.sbc-pos-absolute {
	position: absolute;
}

#sbc-bar.sbc-pos-fixed {
	position: fixed;
}

/* Physical right and left, not logical start and end. "Right" then means the
   right edge of the screen on every site, which is what someone setting this
   actually expects, and it removes the need to explain that start is the right
   edge on a right-to-left site. */
#sbc-bar.sbc-pos-absolute.sbc-side-right,
#sbc-bar.sbc-pos-fixed.sbc-side-right {
	right: var(--sbc-side, 20px);
	left: auto;
}

#sbc-bar.sbc-pos-absolute.sbc-side-left,
#sbc-bar.sbc-pos-fixed.sbc-side-left {
	left: var(--sbc-side, 20px);
	right: auto;
}

/* Both edges set plus auto inline margins is the standard way to centre an
   out-of-flow box without knowing its width. */
#sbc-bar.sbc-pos-absolute.sbc-side-center,
#sbc-bar.sbc-pos-fixed.sbc-side-center {
	left: 0;
	right: 0;
	margin-inline: auto;
	max-inline-size: calc(100% - 16px);
}

#sbc-bar.sbc-pos-static,
#sbc-bar.sbc-pos-content {
	position: relative;
	/* Relative and offset is the one combination that moves a box while leaving
	   the space it came from behind, so the offsets are stated here too: a
	   stray `top` elsewhere would otherwise drag the whole trail with it. */
	inset: auto;
	display: flex;
	inline-size: 100%;
	max-inline-size: var(--sbc-max, none);
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

/* The embedded trail is injected INSIDE the entry content, which already
   carries the theme's own gutter. Repeating it here indents the trail past
   every paragraph it sits above, which is the one thing a trail inside the
   content must not do. --sbc-max stays: "Content max width" is documented as
   applying to automatic content placement. */
#sbc-bar.sbc-pos-content {
	padding-inline: 0;
}

/* Content placement is physical left/centre/right even on RTL sites. Physical
   auto margins move the list without changing its inherited text direction. */
#sbc-bar.sbc-pos-content .sbc-list,
#sbc-bar.sbc-pos-static .sbc-list {
	inline-size: fit-content;
	max-inline-size: 100%;
}

#sbc-bar.sbc-align-left .sbc-list,
#sbc-bar.sbc-pos-static.sbc-side-left .sbc-list {
	margin-left: 0;
	margin-right: auto;
}

#sbc-bar.sbc-align-center .sbc-list,
#sbc-bar.sbc-pos-static.sbc-side-center .sbc-list {
	margin-left: auto;
	margin-right: auto;
}

#sbc-bar.sbc-align-right .sbc-list,
#sbc-bar.sbc-pos-static.sbc-side-right .sbc-list {
	margin-left: auto;
	margin-right: 0;
}

/* Top and bottom describe document order, not viewport coordinates. */
#sbc-bar.sbc-valign-top {
	margin-block-end: 2rem;
}

#sbc-bar.sbc-valign-bottom {
	margin-block-start: 2rem;
}


/* --------------------------------------------------------------------------
   Overlay

   The embedded trail is placed by the_content, which is what puts it below the
   header and inside the content column -- and that part is right. What it also
   does, in the flow, is push the page down by its own height, which is wrong
   over a full-bleed hero: the trail belongs ON the picture, not above it.

   So in this mode the element keeps its place in the flow and gives up its
   height. It becomes a zero-height marker at exactly the point the content
   begins, and the trail is positioned out of it. Nothing on the page moves.

   This is also the only content mode where the distance, side and stacking
   settings mean anything, because it is the only one with a box to offset:
   `top` is measured down from where the content starts, not from the top of
   the document, so it does not have to be re-guessed every time the header
   changes height.

   With the trail appended instead of prepended, the marker sits at the END of
   the content, so a negative distance lifts it back over the last section.
   That is why the field accepts negative values.
   -------------------------------------------------------------------------- */

#sbc-bar.sbc-pos-content.sbc-overlay {
	display: block;
	block-size: 0;
	min-block-size: 0;
	margin-block: 0;
	padding-inline: 0;
	z-index: var(--sbc-z, 9999);
}

#sbc-bar.sbc-pos-content.sbc-overlay .sbc-list {
	position: absolute;
	top: var(--sbc-top, 0px);
	margin: 0;
	inline-size: max-content;
	/* The trail starts --sbc-side in from one edge, so that distance plus a
	   little breathing room has to come off the width it is allowed. */
	max-inline-size: calc(100% - var(--sbc-side, 20px) - 16px);
}

/* Physical right and left, as everywhere else in this file: "right" is the
   right of the screen on an Arabic site too. */
#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-right .sbc-list {
	right: var(--sbc-side, 20px);
	left: auto;
}

#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-left .sbc-list {
	left: var(--sbc-side, 20px);
	right: auto;
}

#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-center .sbc-list {
	left: 0;
	right: 0;
	margin-inline: auto;
	max-inline-size: calc(100% - 16px);
}

/* In-page anchors have to clear a pinned bar. The class is only ever added by
   the measuring script, which loads only when automatic measuring is on, so the
   markup is asked directly as well: it already says the bar is pinned.

   Two rules and not one selector list, deliberately. A browser that does not
   know :has() throws away the whole list it appears in, which would take the
   class rule down with it. */
html.sbc-has-fixed {
	scroll-padding-top: calc(var(--sbc-top, 120px) + 60px);
}

html:has(#sbc-bar.sbc-pos-fixed) {
	scroll-padding-top: calc(var(--sbc-top, 120px) + 60px);
}

/* --------------------------------------------------------------------------
   Phones

   A phone header is far shorter than a desktop one, so the same distance from
   the top lands the trail somewhere else entirely. Both the offset and the
   type size get their own value.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	#sbc-bar {
		font-size: var(--sbc-fs-sm, 13px);
	}

	/* Same selectors as the desktop rules and later in the file, so these win by
	   source order without needing extra weight. */
	#sbc-bar.sbc-pos-absolute,
	#sbc-bar.sbc-pos-fixed {
		top: var(--sbc-top-sm, var(--sbc-top, 120px));
		max-inline-size: calc(100% - var(--sbc-side-sm, 12px) - 12px);
	}

	#sbc-bar.sbc-pos-absolute.sbc-side-right,
	#sbc-bar.sbc-pos-fixed.sbc-side-right {
		right: var(--sbc-side-sm, 12px);
	}

	#sbc-bar.sbc-pos-absolute.sbc-side-left,
	#sbc-bar.sbc-pos-fixed.sbc-side-left {
		left: var(--sbc-side-sm, 12px);
	}

	#sbc-bar.sbc-pos-absolute.sbc-side-center,
	#sbc-bar.sbc-pos-fixed.sbc-side-center {
		max-inline-size: calc(100% - 12px);
	}

	#sbc-bar .sbc-sep {
		padding-inline: 5px;
	}

	#sbc-bar.sbc-pos-static {
		padding-inline: 14px;
	}

	/* The phone distances, for the one content mode that has an offset to
	   apply them to. Same selectors as the desktop rules above, so these win by
	   source order without needing extra weight. */
	#sbc-bar.sbc-pos-content.sbc-overlay {
		padding-inline: 0;
	}

	#sbc-bar.sbc-pos-content.sbc-overlay .sbc-list {
		top: var(--sbc-top-sm, var(--sbc-top, 0px));
		max-inline-size: calc(100% - var(--sbc-side-sm, 12px) - 12px);
	}

	#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-right .sbc-list {
		right: var(--sbc-side-sm, 12px);
	}

	#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-left .sbc-list {
		left: var(--sbc-side-sm, 12px);
	}

	#sbc-bar.sbc-pos-content.sbc-overlay.sbc-align-center .sbc-list {
		max-inline-size: calc(100% - 12px);
	}

	#sbc-bar .sbc-link,
	#sbc-bar .sbc-current {
		display: inline-flex;
		align-items: center;
		min-block-size: 40px;
	}

	#sbc-bar.sbc-hide-mobile {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Forced colours

   High-contrast modes repaint the text in a system colour and drop text-shadow
   entirely, but they leave the photograph behind it alone. The outline this
   design leans on is gone and nothing has replaced it, so here, and only here,
   the trail takes the panel it otherwise refuses. System colours only, so it
   still obeys whichever contrast theme the reader chose.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
	#sbc-bar .sbc-list {
		background: Canvas;
		padding: 4px 10px;
	}

	#sbc-bar a:focus-visible {
		outline-color: Highlight;
	}
}

/* --------------------------------------------------------------------------
   Print: an out-of-flow bar either clips to page one or repeats on every page.
   -------------------------------------------------------------------------- */

@media print {
	#sbc-bar {
		display: block !important;
		position: static !important;
		inset: auto !important;
		inline-size: auto !important;
		max-inline-size: none !important;
		block-size: auto !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	/* The overlay mode lifts the trail out of the element above; on paper it has
	   to come back, or it prints on top of the first paragraph. */
	#sbc-bar .sbc-list {
		position: static !important;
		inset: auto !important;
		inline-size: auto !important;
		max-inline-size: none !important;
	}

	#sbc-bar .sbc-link,
	#sbc-bar .sbc-current,
	#sbc-bar .sbc-sep {
		color: #000 !important;
	}

	#sbc-bar .sbc-list {
		background: none !important;
		padding: 0 !important;
	}
}