/*
 * 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); }

/*
 * Header chrome CTAs (Blueprint marketing header). The seeded primary nav carries three signature items:
 *   .pf-nav-login — a QUIET outlined sign-in link (→ /app/);
 *   .pf-nav-book  — a SECONDARY (soft primary) "احجز خدمة" button;
 *   .pf-nav-cta   — the PRIMARY amber "ابدأ الآن" button.
 * Token-only (re-skins per preset) + RTL-correct (logical properties only; RTL is the default).
 * Scoped to the header so they never restyle in-content navigation links.
 */
.pf-header .wp-block-navigation .pf-nav-login > a,
.pf-header .wp-block-navigation .pf-nav-book > a,
.pf-header .wp-block-navigation .pf-nav-cta > a {
	display: inline-flex;
	align-items: center;
	gap: var(--pf-space-1);
	padding-block: var(--pf-space-2);
	padding-inline: var(--pf-space-4);
	border-radius: var(--pf-radius-md);
	font-weight: var(--pf-font-weight-medium, 600);
	line-height: var(--pf-line-height-tight, 1.2);
	border: var(--pf-border-width-hairline, 1px) var(--pf-border-style, solid) transparent;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Quiet outlined sign-in — reads as the lowest-emphasis of the three. */
.pf-header .wp-block-navigation .pf-nav-login > a {
	color: var(--pf-color-on-surface);
	border-color: var(--pf-color-border);
	background-color: transparent;
}
.pf-header .wp-block-navigation .pf-nav-login > a:hover,
.pf-header .wp-block-navigation .pf-nav-login > a:focus-visible {
	border-color: var(--pf-color-primary);
	color: var(--pf-color-primary);
}

/* Secondary "احجز خدمة" — soft primary fill, mid emphasis. */
.pf-header .wp-block-navigation .pf-nav-book > a {
	color: var(--pf-color-primary);
	background-color: var(--pf-color-primary-soft);
	border-color: transparent;
}
.pf-header .wp-block-navigation .pf-nav-book > a:hover,
.pf-header .wp-block-navigation .pf-nav-book > a:focus-visible {
	background-color: color-mix(in srgb, var(--pf-color-primary) 22%, transparent);
}

/* Primary amber "ابدأ الآن" — the highest-emphasis CTA (accent = amber/gold token). */
.pf-header .wp-block-navigation .pf-nav-cta > a {
	color: var(--pf-color-on-accent);
	background-color: var(--pf-color-accent);
	border-color: transparent;
}
.pf-header .wp-block-navigation .pf-nav-cta > a:hover,
.pf-header .wp-block-navigation .pf-nav-cta > a:focus-visible {
	background-color: color-mix(in srgb, var(--pf-color-accent) 88%, var(--pf-color-on-surface));
}

/* Visible keyboard focus for all three (AA). */
.pf-header .wp-block-navigation .pf-nav-login > a:focus-visible,
.pf-header .wp-block-navigation .pf-nav-book > a:focus-visible,
.pf-header .wp-block-navigation .pf-nav-cta > a:focus-visible {
	outline: 2px solid var(--pf-color-focus-ring, var(--pf-color-primary));
	outline-offset: 2px;
}

/* 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;
	}
}