/**
 * Plakatbutikk — main stylesheet entry.
 *
 * Cascade layer order (lowest → highest priority within theme CSS):
 * reset → base → layout → components → navigation → woocommerce → utilities
 *
 * Design tokens primarily live in theme.json.
 * Extra tokens (shadows, z-index, transitions) are defined in base.css.
 */

@layer reset, base, layout, components, navigation, woocommerce, utilities;

@import url("reset.css") layer(reset);
@import url("base.css") layer(base);
@import url("layout.css") layer(layout);
@import url("components.css") layer(components);
@import url("navigation.css") layer(navigation);
@import url("woocommerce.css") layer(woocommerce);
@import url("utilities.css") layer(utilities);

/*
 * Skip link — outside cascade layers so it always wins over core/link styles.
 * Visually hidden until keyboard focus (WCAG).
 */
.pb-skip-link {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.pb-skip-link:focus,
.pb-skip-link:focus-visible {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	background: var(--wp--preset--color--primary, #2c1810);
	color: var(--wp--preset--color--secondary, #f7e7ce);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	outline: 2px solid var(--wp--preset--color--accent, #b0512e);
	outline-offset: 2px;
}