/*
Theme Name: Flos B&B Italia Group
Theme URI: https://www.flosbebitaliagroup.com/
Author: Production Build
Author URI: https://www.productionbuild.de/
Description: Custom WordPress block theme (Full Site Editing) for the Flos B&B Italia Group brochure site. Design tokens are measured from the source site's own compiled stylesheet — see docs/design-tokens.md. i18n-ready for future Polylang.
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.2
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flosbebita
Update URI: false
Tags: block-styles, full-site-editing, blog, one-column, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/*
 * Almost all visual styling for this theme lives in theme.json.
 *
 * This file is for the handful of things theme.json cannot express:
 * media queries, and the markup this theme renders in PHP (breadcrumbs,
 * skip link) rather than through blocks.
 */

/* -------------------------------------------------------------------------
 * Container padding — the one responsive token.
 *
 * theme.json has no media queries, so the root padding is declared there as
 * var(--wp--custom--container-padding) and stepped here. Measured from the
 * source's `.o-container`: 10px below the 1024px breakpoint, 30px at and
 * above it.
 *
 * The `:root:root` selector is deliberate. Global Styles emits the token on
 * `:root` (specificity 0,1,0); doubling the selector to 0,2,0 makes this
 * override win regardless of stylesheet order, which is not otherwise
 * guaranteed between wp_enqueue_global_styles() and this theme's enqueue.
 * ---------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {

	:root:root {
		--wp--custom--container-padding: 30px;
	}
}

/* -------------------------------------------------------------------------
 * Skip link
 * ---------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #000);
}

/* -------------------------------------------------------------------------
 * Breadcrumb
 *
 * Class names follow the source's own (`c-breadcrumb`, `c-button--breadcrumb`)
 * so Phase 7 can diff the rendered markup against the snapshots, and so the
 * animation layer's `js-hook-*` bindings keep working unchanged.
 *
 * The source's trail is always exactly one item — the parent, never the
 * current page — with the arrow to the LEFT of the label. It gets there with
 * `flex-direction: row-reverse` on a label-then-icon DOM order; we keep that
 * DOM order and that rule so the markup matches.
 * ---------------------------------------------------------------------- */

.c-breadcrumb {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-breadcrumb__item {
	margin: 0;
	padding: 0;
}

.c-button--breadcrumb {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: var(--wp--preset--color--muted, #757f7f);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	text-decoration: none;
	transition: color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/*
 * 📏 No hover colour — the source's breadcrumb does not change on hover
 * (measured: stays `rgb(117,127,127)`). `:focus-visible` only; see the same
 * note in `assets/src/theme/chrome/breadcrumbs.css`.
 */
.c-button--breadcrumb:focus-visible {
	color: var(--wp--preset--color--contrast, #000);
}

.c-button--breadcrumb .button__icon {
	display: inline-flex;
	flex: 0 0 auto;
}