/*
 * core/breadcrumbs.
 *
 * The trail itself comes from class-breadcrumbs.php through core's
 * block_core_breadcrumbs_items filter; this file is the look. Core's own
 * separator (a `--separator` custom property holding a character) is replaced
 * by the source's chevron icon.
 *
 * Loaded only on pages that contain a breadcrumbs block.
 */

/* _breadcrumb.scss: polku pysyy yhdellä rivillä. Kapealla ruudulla nykyinen
   sivu kutistuu ja katkeaa kolmeen pisteeseen sen sijaan että polku
   rivittyisi — muuten otsikko-osio kasvaa rivin verran. */
:root .wp-block-breadcrumbs > ol {
	display: flex;
	flex-wrap: nowrap;

	/* clip with a margin, not hidden.

	   The truncation itself happens on the current page item further down, so
	   this is only a safety net against the row overflowing its section. As
	   plain overflow: hidden it also cut the focus ring: the ring sits 4px
	   outside the link, the list is exactly text height, so the top and bottom
	   edges were clipped away and a focused breadcrumb link showed as two bare
	   vertical bars either side of the word. overflow-clip-margin keeps the
	   horizontal safety net while leaving room for the ring. */
	overflow: clip;
	overflow-clip-margin: 4px;
	align-items: center;
	gap: 0.5rem;

	/* _breadcrumb.scss: alamarginaali 2rem. */
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-secondary);
}

/* _breadcrumb.scss: __link ei ole alleviivattu; alleviivaus tulee vasta
   hoverissa. Teeman globaali linkkityyli alleviivaisi sen aina. */
:root .wp-block-breadcrumbs li a {
	text-decoration: none;
}

:root .wp-block-breadcrumbs li a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* _breadcrumb.scss: __separator on 0.75rem kokoinen chevron-kuvake
   (-90 astetta) eikä tekstimerkki; Space Groteskissa \203A piirtyy
   selvästi terävämpänä kuin alkuperäinen. */
:root .wp-block-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Vain nykyinen sivu kutistuu ja katkeaa. */
:root .wp-block-breadcrumbs li:has([aria-current='page']) {
	flex-shrink: 1;
	min-inline-size: 0;
}

:root .wp-block-breadcrumbs li [aria-current='page'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

:root .wp-block-breadcrumbs li + li::before {
	content: '';
	display: inline-block;
	inline-size: 0.75rem;
	block-size: 0.75rem;

	/* Ei omaa marginaalia: kohteen flex-gap antaa jo 0.5 rem molemmin puolin.
	   Yhdessä ne tekivät välistä 16 px, jolloin murupolku ei mahtunut 390 px:n
	   ruudulle ja viimeinen osa katkesi kolmeen pisteeseen. */
	vertical-align: middle;
	background-color: var(--wp--preset--color--text-muted);
	-webkit-mask: var(--vml-chevron-icon) center / contain no-repeat;
	mask: var(--vml-chevron-icon) center / contain no-repeat;
	transform: rotate(-90deg);
}

:root .wp-block-breadcrumbs {
	--vml-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Core draws its separator from a --separator custom property on the wrapper,
   as ::after on every item except the last. The source uses a chevron icon
   drawn as ::before on the following item, so core's character is switched off.
 *
 * The selector has to be li::after, not li + li::after: core puts a separator
   after the *first* item too, and scoping to li + li left it visible. Every
   breadcrumb on the site showed a stray slash after "Etusivu". */
:root .wp-block-breadcrumbs li::after {
	content: none;
}

/* On an article or a story the whole trail is links, a little heavier than in
   the page hierarchy, and the separator is a pipe rather than the chevron —
   Breadcrumb.astro and Breadcrumbs.astro were two components in the source.
   The mask has to be unset explicitly: content alone would leave the icon. */
:root :is(.vml-article, .vml-story) .wp-block-breadcrumbs li a {
	font-weight: 500;
}

:root :is(.vml-article, .vml-story) .wp-block-breadcrumbs li + li::before {
	content: '|';
	inline-size: auto;
	block-size: auto;
	background: none;
	-webkit-mask: none;
	mask: none;
	transform: none;
}

/* On an article the last item links to the category rather than being the
   current page, so the trail is centred. */
:root .vml-article .wp-block-breadcrumbs > ol {
	justify-content: center;
}

/* In a page header the current item picks up the darker brand green. */
:root [class*="is-style-section-page-header"] .wp-block-breadcrumbs li [aria-current='page'] {
	color: var(--wp--preset--color--primary-dark);
}