/**
 * PF Stack — the software line under the header.
 *
 * Every number in here that is worth tuning arrives as a custom property from
 * the Customizer (see css() in pf-stack.php). Nothing below is a magic value
 * someone is expected to come and edit by hand.
 */

.pf-stack {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pf-stack-gap, 26px);
	margin: 0;

	/* A Kadence header row has no height of its own — it is exactly as tall as
	   what sits in it. Without this the line touches the row above. */
	padding: var(--pf-stack-pad, 10px) 0;
	list-style: none;
	max-width: 100%;

	/* One line is the whole point of the row. When it genuinely will not fit,
	   it scrolls rather than reflowing the header — the bar keeps its height. */
	overflow-x: auto;
	scrollbar-width: none;
}

.pf-stack::-webkit-scrollbar {
	display: none;
}

.pf-stack-wraps {
	flex-wrap: wrap;
	row-gap: calc(var(--pf-stack-gap, 26px) * 0.5);
	overflow-x: visible;
}

.pf-stack-item {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--pf-stack-rest, #8a8394);
	transition: color var(--pf-stack-speed, 150ms) ease;
}

.pf-stack-item:hover,
.pf-stack-item:focus-within {
	color: var(--pf-stack-hover, #b07bd8);
}

/**
 * The mark is painted, not placed: the file is an alpha-only silhouette used as
 * a mask, and the colour underneath is the item's own currentColor. That is what
 * lets one accent hue carry the whole row, and what keeps a rounded app-icon
 * tile from turning up in the header.
 */
.pf-stack-mark {
	display: block;
	height: var(--pf-stack-h, 22px);
	width: calc(var(--pf-stack-h, 22px) * var(--pf-stack-ar, 1));
	background-color: currentColor;
	-webkit-mask: var(--pf-stack-src) no-repeat center / contain;
	mask: var(--pf-stack-src) no-repeat center / contain;
}

/* A row switched off monochrome keeps its own colours and is a picture again.
   So is a row drawing the vendor's own logo — see .pf-stack-mark-logo below. */
img.pf-stack-mark-color {
	height: var(--pf-stack-h, 22px);
	width: auto;
	max-width: none;
	background: none;
	-webkit-mask: none;
	mask: none;
	object-fit: contain;
}

/**
 * The logo as its vendor published it — no mask, no redraw, nothing thrown
 * away. Black and white is a filter applied here, at display time: the same
 * file serves the colour row, and "couleurs" is one class away.
 *
 * Brightness is a control because several of these are glyphs printed on a
 * dark tile, and a dark tile on a near-black canvas is a hole.
 */
img.pf-stack-mark-logo {
	filter: brightness(calc(var(--pf-stack-lift, 1) * var(--pf-stack-row-lift, 1)));
	transition: filter var(--pf-stack-speed, 150ms) ease;
}

.pf-stack-bw img.pf-stack-mark-logo {
	filter: grayscale(1) brightness(calc(var(--pf-stack-lift, 1) * var(--pf-stack-row-lift, 1)));
}

/* Hover hands the logo its own colours back. Without this a black-and-white
   row has no hover at all — the accent has nothing to paint, because nothing
   here is painted with currentColor. */
.pf-stack-bw.pf-stack-reveals .pf-stack-item:hover img.pf-stack-mark-logo,
.pf-stack-bw.pf-stack-reveals .pf-stack-item:focus-within img.pf-stack-mark-logo {
	filter: grayscale(0) brightness(1);
}

.pf-stack-name {
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: currentColor;
}

/**
 * The break between the tools a shot passes through and the ones that sit off
 * to the side. It is a hairline, not a divider: enough to read as a gap, not
 * enough to read as a second section.
 */
.pf-stack-break {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/* the gap already sits on both sides, so only make up the difference */
	margin: 0 calc((var(--pf-stack-break, 44px) - var(--pf-stack-gap, 26px)) / 2);
	color: var(--pf-stack-rest, #8a8394);
}

.pf-stack-break::before {
	content: "";
	display: block;
	width: 1px;
	height: var(--pf-stack-h, 22px);
	background: currentColor;
	opacity: 0.28;
}

@media (prefers-reduced-motion: reduce) {
	.pf-stack-item,
	img.pf-stack-mark-logo {
		transition: none;
	}
}

/* ---------- the block --------------------------------------------------- */

/**
 * The same strip, dropped into a page — see inc/block.php. The footer centres
 * itself because a footer row is the width of the page; a block sits in a
 * column and starts where the text starts, so where it sits is a control.
 *
 * Nothing here restates a value: the block prints the same custom properties
 * the Customizer prints, from its own sidebar.
 */
/**
 * A theme has opinions about a `ul` sitting in content, and Kadence's are
 * `.single-content ul{padding-left:2em}` — two classes deep, so it outranks
 * `.pf-stack` and quietly pushed the whole row 32 px right of the text it was
 * supposed to line up with. Alignment could not work while that was true.
 *
 * Two classes on the same element beat one class plus a tag, so this wins
 * without an !important and without naming a theme class we do not own.
 */
.pf-stack.pf-stack-block {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.pf-stack-justify-left {
	justify-content: flex-start;
	text-align: left;
}

.pf-stack-justify-center {
	justify-content: center;
	text-align: center;
}

.pf-stack-justify-right {
	justify-content: flex-end;
	text-align: right;
}

/* At 28 px the logos are twice the footer's, so the name under them can be
   read at a normal reading distance rather than squinted at. */
.pf-stack-block .pf-stack-name {
	font-size: 11px;
}

/* A name beside its logo, for a short list in a column of text. The gap is
   tied to the mark's height so it stays proportional at any size. */
.pf-stack-labels-beside .pf-stack-item {
	flex-direction: row;
	gap: calc(var(--pf-stack-h, 22px) * 0.32);
}

/**
 * The optional label above the row — "Logiciels", "Outils". Muted, small and
 * uppercase: it names the row, it is not a heading competing with the page.
 */
.pf-stack-heading {
	margin: 0 0 0.8em;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pf-stack-rest, #8a8394);
}