/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.5
 Text Domain:  bricks
*/

/* ============================================================================
   Brand context systems
   ============================================================================ */

/*
 * .bg--primary — wine-red surface system (CTA strips, primary-color sections).
 * ACSS doesn't ship .bg--primary; it ships .bg--ultra-light / .bg--light /
 * .bg--dark / .bg--ultra-dark only. This is the project-defined equivalent for
 * the brand's primary color. Mirrors ACSS's wrapper pattern: sets surface
 * background + default text color, then overrides ACSS button --btn-* tokens
 * for the primary-surface context.
 *
 * Apply via the Bricks class picker (marker class registered as `mpdbgp`).
 */
.bg--primary {
	background-color: var(--primary);
	color: var(--white);
}

/* Headings inside primary-surface sections flip to white */
.bg--primary :is(h1, h2, h3, h4, h5, h6) {
	color: var(--white);
}

/* Plain links inside primary-surface — gold hover, white default */
.bg--primary a:not([class*="btn--"]) {
	color: var(--white);
}
.bg--primary a:not([class*="btn--"]):hover {
	color: var(--accent);
}

/*
 * Button overrides inside primary-surface — token-level (mirrors how ACSS
 * does .bg--dark [class*="btn--"]{...}). Solid: white bg + neutral text +
 * gold hover. Outline: white border + white text + white-fill on hover with
 * text flipping to neutral against the white fill.
 */
.bg--primary [class*="btn--"]:not(.btn--outline) {
	--btn-background: var(--white);
	--btn-background-hover: var(--accent);
	--btn-text-color: var(--neutral);
	--btn-text-color-hover: var(--neutral);
	--btn-border-color: var(--white);
	--btn-border-color-hover: var(--accent);
}
.bg--primary [class*="btn--"].btn--outline {
	--btn-background: transparent;
	--btn-background-hover: var(--white);
	--btn-text-color: var(--white);
	--btn-text-color-hover: var(--neutral);
	--btn-border-width: 2px;
	--btn-border-color: var(--white);
	--btn-border-color-hover: var(--white);
}

/* ============================================================================
   Brand utilities
   ============================================================================ */

/*
 * .eyebrow — section-introducing label with a short decorative accent bar.
 * Brand-wide utility; lives here rather than in a Bricks Global Class so the
 * styling is centralized and the matching Bricks Global Class can stay an
 * empty "marker" (selectable in the class picker, no settings of its own).
 *
 * For dark / wine surfaces where the primary text color fails contrast,
 * add the ACSS utility class `text--accent` on the eyebrow to flip the text
 * to gold. The decorative ::before bar stays gold in both contexts.
 */
.eyebrow {
	font-family: var(--heading-font-family);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--primary);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}
.eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--accent);
}

/* ============================================================================
   UA stylesheet resets
   ============================================================================ */

/*
 * Reset UA italic on <address>. HTML5 permits <address> for any contact
 * info block (hours, NAP, etc.); the italic default doesn't fit the brand.
 * Specificity (0,0,1) matches the UA rule; author wins on equal specificity.
 * Targets the element directly so descendants of any wrapper (Bricks
 * shortcode element, container, etc.) reset correctly — inheritance can't
 * override a UA rule that applies directly to the same element.
 */
address {
	font-style: normal;
}

/*
 * Restore pointer cursor on <button> elements. Chromium UA default is
 * cursor:default on <button>; Bricks frontend-light-layer ships
 * `button { cursor: pointer }` but it's inside @layer bricks and can lose to
 * unlayered rules in some contexts (see docs/stack-gotchas → "author rules
 * with equal specificity lose to @layer bricks framework rules"). Unlayered
 * author rule here guarantees the brand-correct cursor for every button
 * site-wide. Disabled buttons keep cursor:default.
 */
button:not([disabled]) {
	cursor: pointer;
}

/* ============================================================================
   WS Form — brand integration
   ============================================================================ */

/*
 * Token-driven override. WS Form's entire visual layer reads from
 * `--wsf-form-*` and `--wsf-field-*` custom properties (see
 * wp-content/plugins/ws-form-pro/public/css/ws-form-public-*.css), scoped
 * under `:where([data-wsf-style-id="X"])` — a 0-specificity declaration root.
 * Overriding those tokens at `.wsf-form` (specificity 0,1,0) wins trivially
 * and cascades through every component rule WS Form ships — buttons, inputs,
 * labels, fieldsets, validation, focus, hover — with no per-selector
 * overrides needed.
 *
 * An earlier draft of this section overrode component selectors directly
 * (.wsf-form .wsf-button-primary etc.) but lost the cascade fight: WS Form's
 * rules are scoped `.wsf-form button.wsf-button.wsf-button-primary` (three
 * classes + a tag = 0,3,1), which beats any three-class selector we write.
 * The token-override approach sidesteps the fight entirely.
 *
 * Two token tiers in use:
 *   1. Root tokens (--wsf-form-color-primary/-base/-accent/-neutral/-danger)
 *      — drive the majority of WS Form's downstream variables via reference
 *      chains in their style_1 declaration root.
 *   2. Component tokens (--wsf-field-button-primary-* etc.) — overridden
 *      where the root cascade doesn't reach. Button hover/focus chain through
 *      pre-derived "-dark-20" / "-dark-40" variants that don't recompute from
 *      our override, so we set them explicitly.
 *
 * The .bg--primary context flips the same token set for wine-red surfaces:
 * white labels, cream-filled inputs, gold focus, cream-on-wine submit that
 * mirrors the .bg--primary [class*="btn--"]:not(.btn--outline) pattern above.
 */

.wsf-form {
	/* Root tokens — most of WS Form's downstream vars chain from these */
	--wsf-form-color-primary: var(--primary);
	--wsf-form-color-base: var(--neutral);
	--wsf-form-color-base-contrast: var(--white);
	--wsf-form-color-accent: var(--primary); /* link color — gold fails contrast as text */
	--wsf-form-color-neutral: color-mix(in srgb, var(--neutral) 55%, transparent);
	--wsf-form-color-danger: var(--primary-semi-dark);
	--wsf-form-grid-gap: var(--space-s);

	/* Field tokens — border defaults to --wsf-form-color-base (near-black);
	   override to the brand-aligned warm beige border */
	--wsf-field-border-color: var(--base-light);
	--wsf-field-border-color-hover: var(--base-light);
	--wsf-field-border-color-focus: var(--primary);

	/* Primary button — base background/border picks up
	   --wsf-form-color-primary through WS Form's reference chain, but
	   hover/focus reference --wsf-form-color-primary-dark-20 / -dark-40
	   (pre-computed in their declaration root) which don't recompute from
	   our override. Override the button hover/focus tokens directly. */
	--wsf-field-button-primary-color-background: var(--primary);
	--wsf-field-button-primary-color-background-hover: var(--primary-hover);
	--wsf-field-button-primary-color-background-focus: var(--primary-hover);
	--wsf-field-button-primary-color: var(--base);
	--wsf-field-button-primary-color-hover: var(--base);
	--wsf-field-button-primary-color-focus: var(--base);
	--wsf-field-button-primary-border-color: var(--primary);
	--wsf-field-button-primary-border-color-hover: var(--primary-hover);
	--wsf-field-button-primary-border-color-focus: var(--primary-hover);
}

/* Label weight — WS Form's default font-weight is inherit; bump for hierarchy.
   Color is already handled by --wsf-form-color-base cascading down. */
.wsf-form .wsf-label {
	font-weight: 500;
}

/* Required marker — WS Form may render it as a span.wsf-required inside
   .wsf-label, or as an <abbr title="required">. Tint either to brand primary. */
.wsf-form .wsf-label .wsf-required,
.wsf-form .wsf-label abbr[title="required"] {
	color: var(--primary);
}

/*
 * .bg--primary context — form on a wine-red surface.
 *
 * Token flips:
 *   - Label/body text becomes white (--wsf-form-color-base).
 *   - Input fill becomes cream (--wsf-form-color-base-contrast → --base).
 *   - Links become gold (still on near-black text isn't a thing here — we're
 *     on wine — and gold reads well over the cream-filled inputs).
 *   - Submit inverts to cream surface with neutral text, hover gold,
 *     matching the existing .bg--primary [class*="btn--"]:not(.btn--outline)
 *     pattern above.
 */
.bg--primary .wsf-form {
	--wsf-form-color-base: var(--white);
	--wsf-form-color-base-contrast: var(--base);
	--wsf-form-color-accent: var(--accent);

	--wsf-field-border-color: var(--base);
	--wsf-field-border-color-hover: var(--base);
	--wsf-field-border-color-focus: var(--accent);

	--wsf-field-button-primary-color-background: var(--white);
	--wsf-field-button-primary-color-background-hover: var(--accent);
	--wsf-field-button-primary-color-background-focus: var(--accent);
	--wsf-field-button-primary-color: var(--neutral);
	--wsf-field-button-primary-color-hover: var(--neutral);
	--wsf-field-button-primary-color-focus: var(--neutral);
	--wsf-field-button-primary-border-color: var(--white);
	--wsf-field-button-primary-border-color-hover: var(--accent);
	--wsf-field-button-primary-border-color-focus: var(--accent);
}