/*
Theme Name: Big Digital Factory
Theme URI: https://bigdigital.gr/factory
Author: Big Digital Marketing
Description: Factory child theme for Greek SMB sites. Carries the design-token schema (theme.json), pattern library, and template parts. Parent: Kadence (free). Per-site brand values are supplied from intake via sites/<client>/theme-overrides/ — the demo tokens shipped here are NEVER used on a client build.
Template: kadence
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: bigdigital-factory
*/

/*
 * Pattern & element CSS (Sessions 2–5). Token-bound ONLY — never raw hex, px,
 * or font names. Loaded on the front end and in the editor (add_editor_style),
 * so patterns preview correctly while authoring. Every value below resolves to
 * a theme.json token via var().
 */

/* --- Service / content cards (services-grid) -------------------------------
 * The card's whole visual is token-driven (see custom.card in theme.json):
 * 'flat' by default, swappable to 'elevated' per-site by repointing the card
 * tokens — this markup never changes. */
.bd-card {
	height: 100%;
	background-color: var(--wp--custom--color--surface);
	border: var(--wp--custom--card--border-width) solid var(--wp--custom--card--border-color);
	border-radius: var(--wp--custom--card--radius);
	box-shadow: var(--wp--custom--card--shadow);
}

.bd-card:hover,
.bd-card:focus-within {
	box-shadow: var(--wp--custom--card--shadow-hover);
}

@media (prefers-reduced-motion: no-preference) {
	.bd-card {
		transition: box-shadow 0.2s ease;
	}
}

.bd-card__icon {
	display: inline-flex;
	color: var(--wp--preset--color--brand-primary);
}

.bd-card__icon svg {
	width: var(--wp--preset--spacing--lg);
	height: var(--wp--preset--spacing--lg);
}

/* --- Confirmation icon (page-thank-you) ------------------------------------
 * Decorative success glyph (aria-hidden). Uses the validated success token. */
.bd-confirm-icon {
	display: inline-flex;
	color: var(--wp--preset--color--state-success);
}

.bd-confirm-icon svg {
	width: var(--wp--preset--spacing--xl);
	height: var(--wp--preset--spacing--xl);
}

/* --- Contact (contact-split) -----------------------------------------------
 * .bd-media-frame: a rounded, hairline-framed media box for the privacy-safe
 * static map (locally-hosted image — no third-party call before consent; the
 * live consent-gated iframe is a per-site [CONFIG] choice).
 * .bd-formslot: a dashed placeholder where the JetFormBuilder block is inserted
 * at assembly — core can't emit an accessible form with notifications, so the
 * pattern marks the seam honestly rather than faking one. All token-bound. */
.bd-media-frame img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--lg);
}

.bd-formslot {
	border: var(--wp--custom--border-width--thick) dashed var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
}

/* --- Pricing tiers (pricing-tiers) -----------------------------------------
 * Each tier reuses .bd-card. The featured tier is a token MODIFIER (brand-primary
 * thick border) — emphasis is a token, not a separate pattern. The brand border is
 * validated as a UI boundary (>=3:1) in contrast-pairings.json. Price and badge
 * are token-bound type accents. */
.bd-pricing__price {
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--tight);
}

.bd-pricing--featured {
	border-color: var(--wp--preset--color--brand-primary);
	border-width: var(--wp--custom--border-width--thick);
}

.bd-pricing__badge {
	color: var(--wp--preset--color--brand-primary);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* --- FAQ accordion (faq-accordion) -----------------------------------------
 * Native <details>/<summary>; we only add a hairline-framed row and a clear
 * pointer affordance on the summary. All token-bound. */
.bd-faq__item {
	border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.bd-faq__item > summary {
	cursor: pointer;
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* --- Footer (footer-default) -----------------------------------------------
 * Hairline top rule + a divided bottom bar. Border drawn here rather than via
 * the (locked) block border UI, so the markup stays valid against theme.json. */
.bd-footer {
	border-top: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border);
}

.bd-footer__bar {
	padding-top: var(--wp--preset--spacing--md);
	border-top: var(--wp--custom--border-width--hairline) solid var(--wp--custom--color--border);
}

/* --- Hero media (hero-split) ------------------------------------------------ */
.bd-hero-media img {
	border-radius: var(--wp--custom--radius--lg);
}

/* --- Avatar (team-grid, testimonials) --------------------------------------
 * Square source cropped to a circle. Used for team photos and testimonial
 * author thumbnails; the image's own alt carries (or intentionally omits, when
 * the name sits adjacent) its accessible name. */
.bd-avatar img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--pill);
}

/* --- Spotlight quote (testimonials-spotlight) ------------------------------
 * A centered featured quote: drop core's left rule/indent so it reads centered. */
.bd-quote-lg {
	border: 0;
	padding-left: 0;
}

.bd-quote-lg cite {
	display: block;
	margin-top: var(--wp--preset--spacing--sm);
	color: var(--wp--custom--color--text-muted);
}

/* ---------------------------------------------------------------------------
 * Kadence --global-palette bridge — VERIFIED on live Kadence 1.5.0 (Session 3
 * render-QA). Kadence-rendered chrome (Customizer header/footer builder, Kadence
 * blocks) is styled from --global-paletteN, independent of our theme.json. We map
 * those onto the factory tokens so the chrome inherits the same brand. Pairs with
 * the wp_theme_json_data_theme filter in functions.php, which re-asserts our
 * palette over Kadence's so the tokens below are defined in the first place.
 * Loaded after Kadence's own :root, so these win. global-palette1..8 are Kadence's
 * accent→neutral ramp; 9 is its lightest. (Kadence defines 1..15; 10..15 are rarely
 * surfaced in chrome and inherit Kadence defaults until a site needs them.)
 *
 * The font vars are the same story: Kadence sets --global-body-font-family to its
 * system stack (headings inherit), overriding our theme.json typography. Bridge
 * them to the factory font tokens so chrome + body + headings all use Inter.
 * Verified Session 3 — without this, the page renders in the OS system font. */
:root {
	--global-palette1: var(--wp--preset--color--brand-primary);
	--global-palette2: var(--wp--preset--color--brand-primary-hover);
	--global-palette3: var(--wp--preset--color--base-900);
	--global-palette4: var(--wp--preset--color--base-700);
	--global-palette5: var(--wp--preset--color--base-500);
	--global-palette6: var(--wp--preset--color--base-300);
	--global-palette7: var(--wp--preset--color--base-100);
	--global-palette8: var(--wp--preset--color--base-50);
	--global-palette9: var(--wp--preset--color--base-0);

	--global-body-font-family: var(--wp--preset--font-family--body);
	--global-heading-font-family: var(--wp--preset--font-family--heading);
}