/**
 * cfsp-patterns.css — styling for the plugin-owned contact patterns.
 *
 * The patterns carry NO theme tokens. Their structure (layout, spacing via the
 * WP-core spacing scale, WP-default shadows) lives in the block markup; every
 * theme-specific value (brand color, card surface, muted tone, mono label font)
 * comes through a `--cfsp-pat-*` Custom Property with a built-in fallback. So
 * the patterns look right standalone on ANY theme, and a theme can make them
 * pixel-match its palette by mapping those variables (see the host theme's
 * cfsp-forms-bridge.css). Loaded editor + front by the plugin.
 */

/* Eyebrow / kicker label — small uppercase brand-colored mono label. */
.cfsp-eyebrow {
	color: var(--cfsp-pat-accent, #2563eb);
	font-family: var(--cfsp-pat-eyebrow-font, var(--cfsp-pat-mono, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace));
	font-size: var(--cfsp-pat-label-size, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Seal variant — the same eyebrow but in the display face (hotel/hospitality). */
.cfsp-eyebrow--display {
	--cfsp-pat-eyebrow-font: var(--cfsp-pat-display, inherit);
}

/* Seal label in the display face that INHERITS the surrounding text color
   (heritage micro-labels: "Address", "Reception"). Unlike .cfsp-eyebrow it is
   not brand-colored — pair with .cfsp-muted when a quieter tone is wanted. */
.cfsp-seal {
	font-family: var(--cfsp-pat-display, inherit);
	font-size: var(--cfsp-pat-label-size, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Mono meta text (addresses, status, directions) — not uppercased. */
.cfsp-meta {
	font-family: var(--cfsp-pat-mono, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace);
	font-size: var(--cfsp-pat-label-size, 0.75rem);
}

/* Brand-colored text + links. */
.cfsp-accent,
.cfsp-accent a {
	color: var(--cfsp-pat-accent, #2563eb);
}

/* Secondary / muted copy. Falls back to a muted shade of the inherited text. */
.cfsp-muted {
	color: var(--cfsp-pat-muted, color-mix(in srgb, currentColor 62%, transparent));
}

/* White surface fill, no border (e.g. one half of a split card). */
.cfsp-surface {
	background: var(--cfsp-pat-card-bg, #ffffff);
}

/* Raised card/panel — white surface + hairline border. Radius/shadow stay on
   the block (portable literals / WP-default shadow presets). */
.cfsp-card {
	background: var(--cfsp-pat-card-bg, #ffffff);
	border: 1px solid var(--cfsp-pat-hairline, rgba(0, 0, 0, 0.12));
}

/* Brand-filled panel (e.g. the nonprofit credibility column) — brand bg with
   contrasting light content forced onto its descendants. */
.cfsp-panel-brand {
	background: var(--cfsp-pat-brand-bg, #2563eb);
	color: var(--cfsp-pat-on-brand, #ffffff);
}
.cfsp-panel-brand :where(h1, h2, h3, h4, h5, h6, p, a, li, strong) {
	color: inherit;
}

/* Inverted dark panel (e.g. the SaaS "talk to us" rail). */
.cfsp-panel-dark {
	background: var(--cfsp-pat-dark-bg, #0e1116);
	color: var(--cfsp-pat-on-dark, #ffffff);
}
.cfsp-panel-dark :where(h1, h2, h3, h4, h5, h6, p, a, li, strong) {
	color: inherit;
}

/* Inside a brand/dark panel the inherited text is light, so "muted" must be a
   lighter tone of THAT (not the page's fixed muted token) to stay legible. */
.cfsp-panel-brand .cfsp-muted,
.cfsp-panel-dark .cfsp-muted {
	color: color-mix(in srgb, currentColor 72%, transparent);
}

/* Light text laid over a dark cover/photo overlay. */
.cfsp-on-media {
	color: var(--cfsp-pat-on-dark, #ffffff);
}