/*
Theme Name: Fluent Commerce
Theme URI: https://fluentcommerce.com
Author: andrew.burman
Author URI: https://fluentcommerce.com
Description: Custom theme for the Fluent Commerce WordPress site.
Version: 1.0.35
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fluent-commerce
*/

:root {
	--fc-bg: #ffffff;
	--fc-accent: #0891b2;
	--fc-text: #111827;
	--fc-muted: #64748b;

	/*
	 * Spacing scale — the single source of truth for spacing site-wide.
	 * Reference these tokens instead of hardcoding rems, so the whole site's
	 * rhythm can be retuned by editing these values.
	 *
	 *   --fc-space-lg : vertical gap BETWEEN sections (page rhythm, via margin).
	 *   --fc-space-xl : gap for the page top/bottom and major section groups.
	 *   --fc-space-md : internal padding INSIDE a section (breathing room).
	 *   --fc-space-sm : tight gaps within a component.
	 */
	--fc-space-sm: 1rem;
	--fc-space-md: 1.5rem;
	--fc-space-lg: 4rem;
	--fc-space-xl: 6rem;

	/*
	 * Brand refresh (2026) — from the Figma design system.
	 *
	 * Added alongside the original tokens rather than replacing them, so the
	 * existing pages keep rendering exactly as before while the new home page
	 * builds on these. The two sets will converge once the refresh rolls out
	 * site-wide.
	 *
	 * The design has no colour variables of its own; these names come from the
	 * two colours it actually uses everywhere — near-black ink on off-white
	 * paper — which invert per section rather than being "text" and "bg".
	 */
	--fc-ink: #121212;
	--fc-paper: #eeeeee;
	--fc-void: #000000;
	--fc-violet: #9055ee;

	/* Muted variants, used for supporting copy on each ground. */
	--fc-ink-60: rgba(18, 18, 18, 0.6);
	--fc-ink-80: rgba(18, 18, 18, 0.8);
	--fc-ink-93: rgba(18, 18, 18, 0.93);
	--fc-paper-80: rgba(238, 238, 238, 0.8);
	--fc-paper-20: rgba(238, 238, 238, 0.2);
	--fc-white-60: rgba(255, 255, 255, 0.6);

	/*
	 * Typefaces. Instrument Serif sets display headings, Instrument Sans does
	 * body and UI, Trispace is reserved for uppercase captions and buttons.
	 * Loaded in functions.php; fallbacks keep the layout close if they fail.
	 */
	--fc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--fc-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fc-font-caption: "Trispace", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	 * Type scale. The design is a single 1920px frame, so the upper bound of
	 * each clamp is the exact Figma value and the lower bound is our own
	 * judgement for small screens — there are no mobile frames to match.
	 * Letter-spacing is expressed in em (the design's -1%) so it tracks the
	 * font size as it scales.
	 */
	--fc-text-h1: clamp(2.5rem, 5vw, 4.5rem); /* 72px */
	--fc-text-h2: clamp(2.125rem, 4.3vw, 3.875rem); /* 62px */
	--fc-text-h4: clamp(1.5rem, 2.2vw, 2rem); /* 32px */
	--fc-text-h5: clamp(1.25rem, 1.7vw, 1.5rem); /* 24px */
	--fc-text-body: 1.125rem; /* 18px */

	/* Height of the brand nav, shared so the hero's fill height can't drift. */
	--fc-nav-h: 85px;
}

/*
 * Mobile: large desktop gaps feel excessive on small screens, so step the
 * between-section tokens down. Everything referencing them scales at once.
 */
@media (max-width: 781px) {
	:root {
		--fc-space-lg: 2.5rem;
		--fc-space-xl: 3.5rem;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--fc-bg);
	color: var(--fc-text);
	line-height: 1.6;
}

.fc-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--fc-space-xl) var(--fc-space-md);
}

/*
 * Section rhythm — the space BETWEEN sections.
 *
 * Every top-level section (direct child of .fc-wrap) gets the same gap above
 * it; the first one's is removed so the page starts flush with the wrapper
 * padding. Margins are used (not padding) because adjacent margins collapse
 * into a single gap, keeping the rhythm even no matter which patterns are
 * assembled or in what order.
 */
.fc-wrap > * {
	margin-top: var(--fc-space-lg);
}

.fc-wrap > *:first-child {
	margin-top: 0;
}

/*
 * Keep text-only sections at a comfortable reading measure even though the
 * wrapper is now wide for marketing sections (grids, media rows use the full
 * width). Constrained groups without a special class are capped here.
 */
.fc-hero-block,
.fc-cta,
.fc-wrap > .wp-block-group {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* The CTA banner reads centered, so keep its own text width tidy. */
.fc-cta {
	max-width: 40rem;
}

.fc-badge {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--fc-accent);
	color: var(--fc-bg);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fc-title {
	font-size: 2.5rem;
	margin: 1rem 0 0.5rem;
	line-height: 1.1;
}

.fc-accent {
	color: var(--fc-accent);
}

.fc-meta {
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.fc-card {
	padding: var(--fc-space-md);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
}

.fc-card dt {
	color: var(--fc-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fc-card dd {
	margin: 0.15rem 0 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fc-card dd:last-child {
	margin-bottom: 0;
}

a {
	color: var(--fc-accent);
}

/* --- Contact form --------------------------------------------------------- */

.fc-form {
	display: flex;
	flex-direction: column;
	max-width: 420px;
}

.fc-label {
	color: var(--fc-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.4rem;
}

.fc-input {
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	background: var(--fc-bg);
	color: var(--fc-text);
	font-size: 1rem;
}

.fc-input:focus {
	outline: none;
	border-color: var(--fc-accent);
}

/* Spacing below each field, so the rule still holds if a second one is ever
   added. The submit button carries its own top margin. */
.fc-form .fc-input {
	margin-bottom: 1.1rem;
}

/* Consent checkbox. Not an .fc-input, so it carries its own spacing; the label
   wraps the control so the text is part of the hit area. align-items: start keeps
   the box on the first line when the text wraps to two. */
.fc-check {
	display: flex;
	align-items: start;
	gap: 0.6rem;
	margin-bottom: 0.25rem;
	color: var(--fc-text);
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.fc-check input {
	/* Nudged down to sit on the text baseline rather than the line box top. */
	margin-top: 0.15rem;
	flex: none;
	accent-color: var(--fc-accent);
}

.fc-submit {
	margin-top: 1.25rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 8px;
	background: var(--fc-accent);
	color: var(--fc-bg);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	align-self: flex-start;
}

.fc-submit:hover {
	filter: brightness(1.1);
}

/* Honeypot: kept in the DOM for bots, hidden from humans and AT. */
.fc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fc-notice {
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
}

.fc-notice--ok {
	border-color: var(--fc-accent);
	background: #ecfeff;
}

.fc-notice--err {
	border-color: #dc2626;
	background: #fef2f2;
}

/* --- Home: feature cards -------------------------------------------------- */

.fc-features {
	display: grid;
	gap: var(--fc-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-top: var(--fc-space-md);
}

.fc-features .fc-card {
	margin-top: 0;
}

/* --- FC Hero block -------------------------------------------------------- */

.fc-hero-block {
	/* Vertical spacing is owned by the .fc-wrap section rhythm. */
	margin: 0;
}

/*
 * Columns layout (grids + media rows). Defined explicitly so sections render
 * side-by-side even if core block-library CSS isn't loaded, and so we control
 * the mobile stacking breakpoint.
 */
.wp-block-columns {
	display: flex;
	gap: var(--fc-space-md);
	align-items: stretch;
}

.wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}

.wp-block-columns > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 781px) {
	.wp-block-columns {
		flex-direction: column;
	}
}

/* Locked landing: feature columns reuse the card styling. */
.fc-features-cols {
	margin-top: var(--fc-space-md);
}

.fc-features-cols .fc-card {
	margin-top: 0;
}

/* --- Full locked home: CTA banner ---------------------------------------- */

.fc-cta {
	/* Between-section gap is owned by the rhythm rule; keep only side auto-margins
	   (set above for centering the text width). Internal padding uses tokens. */
	padding: var(--fc-space-lg) var(--fc-space-md);
	border: 1px solid var(--fc-accent);
	border-radius: 12px;
	background: #ecfeff;
	text-align: center;
}

.fc-cta .fc-title {
	margin-top: 0;
}

/* --- Full locked home: alternating image/text rows ----------------------- */

.fc-media-row {
	/* Between-section gap is owned by the rhythm rule; this is the gap between
	   the media and text columns within the row. */
	gap: var(--fc-space-lg);
}

/* Placeholder look for the image column before an image is chosen. */
.fc-media-col .fc-media-img,
.fc-media-col .wp-block-image {
	margin: 0;
}

.fc-media-col img {
	border-radius: 12px;
	display: block;
	width: 100%;
	height: auto;
}

.fc-media-text .fc-accent {
	margin-top: 0;
}

/*
 * --- Site header + primary nav -------------------------------------------
 *
 * Nothing here: the header and footer are the same on every page now, and their
 * styles live in assets/home.css alongside the rest of the 2026 chrome (which
 * loads site-wide for that reason). The old .fc-site-header / .fc-brand /
 * .fc-nav rules were removed with the second header file that rendered them.
 * ------------------------------------------------------------------------- */