/*
 * PF Base — below-the-fold / non-critical polish. Loaded deferred (after first paint) so it never
 * blocks LCP. Logical properties ONLY (RTL is the default; LTR is the mirror) — no margin-left/right,
 * no left:/right: in flow layout. Tokens only; no raw colors.
 */

/* Containers honor the token layout sizes (theme.json already maps these; this is belt-and-braces). */
.pf-header .wp-block-navigation { gap: var(--pf-space-4); }

/* Cards / raised surfaces. */
.pf-card,
.wp-block-group.is-style-card {
	background-color: var(--pf-color-surface-raised);
	border: var(--pf-border-width-hairline) var(--pf-border-style) var(--pf-color-border);
	border-radius: var(--pf-radius-lg);
	padding: var(--pf-space-5);
	box-shadow: var(--pf-shadow-sm);
}

/* Lazy media below the fold (the theme adds loading="lazy" via WP core; this avoids layout shift). */
:where(.entry-content, main) img:not(.pf-eager) {
	content-visibility: auto;
}

/* Status chips — RTL-correct, token-driven (jobs/quotes/invoices lifecycle, Blueprint §6.3). */
.pf-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--pf-space-1);
	padding-block: var(--pf-space-1);
	padding-inline: var(--pf-space-3);
	border-radius: var(--pf-radius-pill);
	font-size: var(--pf-font-size-sm);
	font-weight: var(--pf-font-weight-medium);
	line-height: var(--pf-line-height-tight);
}
.pf-chip--success { background-color: var(--pf-color-success); color: var(--pf-color-on-primary); }
.pf-chip--warning { background-color: var(--pf-color-warning); color: var(--pf-color-on-primary); }
.pf-chip--danger { background-color: var(--pf-color-danger); color: var(--pf-color-on-primary); }
.pf-chip--muted { background-color: var(--pf-color-surface-raised); color: var(--pf-color-muted); }

/* Mirror directional icons in RTL (back/forward, chevrons) — logical via :dir(). */
:where([dir="rtl"]) .pf-icon-directional { transform: scaleX(-1); }

/* Tables: identity column anchored at the start (right in RTL), numerics at the end. */
table th, table td { text-align: start; }
table td.pf-numeric, table th.pf-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* WooCommerce product grid spacing harmonized to tokens. */
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
	gap: var(--pf-space-5);
}

/* Forms: comfortable, >=44px controls for field use. */
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
	min-block-size: 44px;
	padding-inline: var(--pf-space-3);
	border: var(--pf-border-width-hairline) var(--pf-border-style) var(--pf-color-border);
	border-radius: var(--pf-radius-md);
	background-color: var(--pf-color-surface);
	color: var(--pf-color-on-surface);
}

/* Responsive: single-column grids on mobile (<=480). */
@media (max-width: 480px) {
	.wp-block-post-template.is-layout-grid,
	.wp-block-columns {
		grid-template-columns: 1fr !important;
	}
}