/**
 * HD Breadcrumbs.
 *
 * Every selector lives under `.hd-bc`, and the stylesheet is only enqueued on
 * requests that actually render a bar, so this cannot reach anything else on
 * the site — no body-class scoping needed, and no site's approved pages are
 * at risk.
 *
 * Colors come in as custom properties (see hd_breadcrumbs_config()'s palette),
 * so retuning for a new site is data, not a fork of this file. The values
 * below are fallbacks only.
 */

.hd-bc {
	--hd-bc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--hd-bc-ink: #2f3437;
	--hd-bc-ink-soft: rgba(47, 52, 55, 0.5);
	--hd-bc-accent: #b85c38;
	--hd-bc-accent-soft: rgba(184, 92, 56, 0.13);
	--hd-bc-surface: #ffffff;
	--hd-bc-line: rgba(47, 52, 55, 0.16);
	--hd-bc-chip: rgba(107, 90, 62, 0.09);
	--hd-bc-sep: rgba(47, 52, 55, 0.32);
	--hd-bc-current-bg: #2f3437;
	--hd-bc-current-fg: #ffffff;

	/* The dropdown follows the bar unless a variant says otherwise. */
	--hd-bc-panel-bg: #ffffff;
	--hd-bc-panel-fg: var(--hd-bc-ink);
	--hd-bc-panel-line: var(--hd-bc-line);
	--hd-bc-panel-soft: rgba(47, 52, 55, 0.07);

	font-family: var(--hd-bc-font);
}
.hd-bc br { display: none; } /* wpautop insurance */

.hd-bc-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- bar --- */
.hd-bc-trail {
	display: flex;
	align-items: stretch;
	/* Wraps rather than scrolls or squeezes. "overflow-x: auto" is not an
	   option: it forces overflow-y to compute as auto too, which clips the
	   category menu inside the trail. And letting the boxes shrink chops
	   "Home" down to three pixels of H long before the bar is out of room.
	   So boxes keep their natural width and the trail takes a second line
	   when it needs one — the chevrons keep the reading order legible. */
	flex-wrap: nowrap;
	column-gap: 0;
	row-gap: 8px;
	margin: 0;
	padding: 2px 0;
	list-style: none;
}
.hd-bc-trail > li {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* On a wide screen the article box is the only thing allowed to give — it
   shrinks and ellipsizes rather than push a headline onto a second row. */
.hd-bc-trail > li:last-child { flex: 0 1 auto; min-width: 17ch; }

@media (max-width: 1024px) {
	.hd-bc-trail { flex-wrap: wrap; }
	.hd-bc-trail > li:last-child { flex: 0 0 auto; }
}

/* Variants differ only in the space around them, and in palette. */
.hd-bc--top { margin: 0 0 30px; }
.hd-bc--bottom {
	margin: 44px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--hd-bc-line);
}
.hd-bc--footer { margin: 0; }

/* ---------------------------------------------------------------- box --- */
.hd-bc-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 15px 6px 8px;
	background: var(--hd-bc-surface);
	border: 1px solid var(--hd-bc-line);
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.hd-bc a.hd-bc-box:hover,
.hd-bc a.hd-bc-box:focus-visible {
	border-color: var(--hd-bc-accent);
	transform: translateY(-1px);
	outline: none;
}
.hd-bc a.hd-bc-box:focus-visible { box-shadow: 0 0 0 3px var(--hd-bc-accent-soft); }

/* The icon chip. */
.hd-bc-ico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--hd-bc-ink);
	background: var(--hd-bc-chip);
	border-radius: 7px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hd-bc-ico svg { width: 18px; height: 18px; display: block; }

.hd-bc-txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}
.hd-bc-lvl {
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hd-bc-ink-soft);
}
.hd-bc-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hd-bc-ink);
}

.hd-bc a.hd-bc-box:hover .hd-bc-name,
.hd-bc a.hd-bc-box:focus-visible .hd-bc-name,
.hd-bc .hd-bc-box--split:hover .hd-bc-name { color: var(--hd-bc-accent); }

.hd-bc a.hd-bc-box:hover .hd-bc-ico,
.hd-bc a.hd-bc-box:focus-visible .hd-bc-ico,
.hd-bc .hd-bc-box--split:hover .hd-bc-ico {
	color: var(--hd-bc-accent);
	background: var(--hd-bc-accent-soft);
}

/* Progressive emphasis: each step down the trail sits a little heavier than
   the one before, so depth reads by weight as well as position. */
.hd-bc-item:nth-child(1) .hd-bc-name { opacity: 0.72; }
.hd-bc-item:nth-child(3) .hd-bc-name { opacity: 0.9; }

/* You are here. */
.hd-bc-box--current {
	background: var(--hd-bc-current-bg);
	border-color: var(--hd-bc-current-bg);
	max-width: 38ch;
}
.hd-bc-box--current .hd-bc-ico {
	color: var(--hd-bc-current-fg);
	background: rgba(255, 255, 255, 0.14);
}
.hd-bc-box--current .hd-bc-lvl { color: var(--hd-bc-current-fg); opacity: 0.62; }
.hd-bc-box--current .hd-bc-name {
	color: var(--hd-bc-current-fg);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------- separator --- */
.hd-bc-sep {
	flex: 0 0 auto;
	align-self: center;
	width: 22px;
	height: 8px;
	position: relative;
}
.hd-bc-sep::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -4px;
	border-right: 2px solid var(--hd-bc-sep);
	border-bottom: 2px solid var(--hd-bc-sep);
	transform: rotate(-45deg);
}

/* ------------------------------------------------- category + its menu --- */
.hd-bc-item--menu { position: relative; }

.hd-bc-box--split {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}
.hd-bc-boxlink {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 6px 13px 6px 8px;
	text-decoration: none;
}
.hd-bc-more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	padding: 0;
	background: var(--hd-bc-panel-soft);
	border: 0;
	border-left: 1px solid var(--hd-bc-line);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.hd-bc-more:hover,
.hd-bc-more[aria-expanded="true"] { background: var(--hd-bc-accent-soft); }
.hd-bc-more:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--hd-bc-accent);
}
.hd-bc-caret {
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid var(--hd-bc-ink);
	border-bottom: 2px solid var(--hd-bc-ink);
	transform: rotate(45deg);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.hd-bc-more:hover .hd-bc-caret { border-color: var(--hd-bc-accent); }
.hd-bc-more[aria-expanded="true"] .hd-bc-caret {
	margin-top: 3px;
	transform: rotate(225deg);
	border-color: var(--hd-bc-accent);
}

.hd-bc-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	min-width: 268px;
	max-height: 320px;
	padding: 10px;
	overflow-y: auto;
	background: var(--hd-bc-panel-bg);
	border: 1px solid var(--hd-bc-panel-line);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
	/* Deliberately NOT fading in from opacity 0. If the reveal class ever
	   fails to land (a transition that never starts in a backgrounded tab,
	   say), an un-faded panel is still fully readable — a stalled fade is an
	   invisible menu. Only the 4px slide is animated. */
	transform: translateY(-4px);
	transition: transform 0.18s ease;
}
.hd-bc-menu.is-open { transform: translateY(0); }

/* A bar sitting at the bottom of the page opens its menu upward. */
.hd-bc--bottom .hd-bc-menu,
.hd-bc--footer .hd-bc-menu {
	top: auto;
	bottom: calc(100% + 8px);
	transform: translateY(4px);
}
.hd-bc--bottom .hd-bc-menu.is-open,
.hd-bc--footer .hd-bc-menu.is-open { transform: translateY(0); }

.hd-bc-menuh {
	margin: 2px 6px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hd-bc-panel-fg);
	opacity: 0.55;
}
.hd-bc-menulist { margin: 0; padding: 0; list-style: none; }
.hd-bc-menulist li { margin: 0; padding: 0; list-style: none; }

.hd-bc-menuleft {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.hd-bc-menuico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	opacity: 0.75;
}
.hd-bc-menuico svg { width: 17px; height: 17px; display: block; }
.hd-bc-menuitem.is-on .hd-bc-menuico { opacity: 1; }

.hd-bc-menuitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hd-bc-panel-fg);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.hd-bc-menuitem:hover,
.hd-bc-menuitem:focus-visible {
	background: var(--hd-bc-accent-soft);
	color: var(--hd-bc-accent);
	outline: none;
}
.hd-bc-menuitem.is-on { background: var(--hd-bc-accent); color: #ffffff; }
.hd-bc-menuitem.is-on:hover,
.hd-bc-menuitem.is-on:focus-visible { background: var(--hd-bc-accent); color: #ffffff; filter: brightness(0.92); }

.hd-bc-menucount {
	min-width: 22px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	color: var(--hd-bc-panel-fg);
	background: var(--hd-bc-panel-soft);
	border-radius: 999px;
	opacity: 0.75;
}
.hd-bc-menuitem.is-on .hd-bc-menucount {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.22);
	opacity: 1;
}

/* -------------------------------------------------------- back to ... --- */
.hd-bc-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hd-bc-accent);
	text-decoration: none;
	background: var(--hd-bc-accent-soft);
	border: 1px solid var(--hd-bc-accent);
	border-radius: 8px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hd-bc-back:hover,
.hd-bc-back:focus-visible {
	background: var(--hd-bc-accent);
	color: #ffffff;
	transform: translateX(-2px);
	outline: none;
}
.hd-bc-backarrow {
	width: 7px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------- band --- */
/* A full-width strip that carries the footer's own ground color, so the bar
   reads as the top of the footer even though it is rendered just above it.
   Only emitted on requests that have a bar, so pages without one keep their
   markup byte-for-byte unchanged. */
.hd-bc-band {
	background: var(--hd-bc-band-bg, #2f3437);
	padding: var(--hd-bc-band-pad, 30px) 6%;
}
.hd-bc-band > .hd-bc {
	max-width: var(--hd-bc-band-max, 1216px);
	margin: 0 auto;
}

/* ============================================== the dark footer variant === */
/* A footer is dark on every site this ships to, so the whole palette flips
   rather than the boxes fighting the ground they sit on. The current box
   takes the accent here — a charcoal fill would vanish into the footer. */
/* Doubled class on purpose. The per-site palette arrives as an inline style
   on `.hd-bc`, which is appended AFTER this file — same specificity, later
   wins, and the variant silently loses. `.hd-bc.hd-bc--footer` outranks it. */
.hd-bc.hd-bc--footer {
	--hd-bc-ink: #ffffff;
	--hd-bc-ink-soft: rgba(255, 255, 255, 0.58);
	--hd-bc-surface: rgba(255, 255, 255, 0.05);
	--hd-bc-line: rgba(255, 255, 255, 0.18);
	--hd-bc-chip: rgba(255, 255, 255, 0.1);
	--hd-bc-sep: rgba(255, 255, 255, 0.34);
	--hd-bc-current-bg: var(--hd-bc-accent);
	--hd-bc-current-fg: #ffffff;
	--hd-bc-panel-bg: #383e41;
	--hd-bc-panel-fg: #ffffff;
	--hd-bc-panel-line: rgba(255, 255, 255, 0.16);
	--hd-bc-panel-soft: rgba(255, 255, 255, 0.12);
}
.hd-bc--footer .hd-bc-box--current { border-color: var(--hd-bc-accent); }
.hd-bc--footer .hd-bc-box--current .hd-bc-ico { background: rgba(255, 255, 255, 0.2); }
.hd-bc--footer .hd-bc-back {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.28);
}
.hd-bc--footer .hd-bc-back:hover,
.hd-bc--footer .hd-bc-back:focus-visible {
	background: var(--hd-bc-accent);
	border-color: var(--hd-bc-accent);
}

/* -------------------------------------------------------------- small --- */
@media (max-width: 640px) {
	.hd-bc-sep { width: 16px; }
	.hd-bc-box { min-height: 44px; padding: 5px 12px 5px 7px; gap: 8px; }
	.hd-bc-boxlink { padding: 5px 11px 5px 7px; gap: 8px; }
	.hd-bc-ico { width: 28px; height: 28px; border-radius: 6px; }
	.hd-bc-ico svg { width: 16px; height: 16px; }
	.hd-bc-name { font-size: 13px; }
	.hd-bc-box--current { max-width: 26ch; }
	.hd-bc-menu { min-width: 220px; }
	.hd-bc--top { margin-bottom: 24px; }
}

/* Motion is opt-in, never imposed. */
@media (prefers-reduced-motion: reduce) {
	.hd-bc-box,
	.hd-bc-ico,
	.hd-bc-more,
	.hd-bc-caret,
	.hd-bc-menu,
	.hd-bc-menuitem,
	.hd-bc-back { transition: none !important; }

	.hd-bc a.hd-bc-box:hover,
	.hd-bc-back:hover { transform: none !important; }
	.hd-bc-menu { transform: none !important; }
}