/*
Theme Name: Mortise Block
Theme URI: https://getmortise.com
Author: Lawrence Downes
Description: Block theme for getmortise.com. Compact, professional, block-native — brand colors and fonts (Fraunces display, Instrument Sans body, DM Mono labels) with an amber accent. Built to fit; yours to keep.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mortise-block
*/

/* The theme is driven by theme.json. Only styles that theme.json can't express live here. */

/* Eyebrow label helper (DM Mono, uppercase) for pattern kickers. */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-text);
}

/* Subtle card treatment used by feature/pricing patterns. */
.is-style-card {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
}

/* Brand logo: inline square mark + Cormorant wordmark, recolored by context. */
.site-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; line-height: 1; }
.site-brand .brand-mark { height: 25px; width: 25px; display: block; flex: none; }
.site-brand .brand-word {
	font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.site-footer .site-brand .brand-mark { height: 28px; width: 28px; }
.site-footer .site-brand .brand-word { color: var(--wp--preset--color--bone); }

/* Navigation links: no underline, hover to amber. */
.wp-block-navigation a:where(:not(.wp-element-button)) { text-decoration: none; }
.wp-block-navigation a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--amber-text); }

/* -------------------------------------------------------------------------
   Lead form (mortise-site plugin) — styled to match the block theme.
   The plugin outputs .lead-form / .lead-field / .hero-cta with no CSS of
   its own, so all form styling lives here.
   ------------------------------------------------------------------------- */
.lead-form { margin-top: var(--wp--preset--spacing--40); max-width: 540px; }
.lead-field { margin: 0 0 1.15rem; }

.lead-field > label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.4rem;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	padding: 0.7rem 0.85rem;
	line-height: 1.45;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-form input[type="text"]:focus,
.lead-form input[type="email"]:focus,
.lead-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--amber);
	box-shadow: 0 0 0 3px rgba(193, 125, 60, 0.16);
}

.lead-form textarea { resize: vertical; min-height: 130px; }

/* Consent checkbox: inline, sentence case (override the label defaults above). */
.lead-field.lead-consent > label {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.lead-field.lead-consent input { margin-top: 0.2rem; accent-color: var(--wp--preset--color--amber); flex: none; }

.cf-turnstile { margin: 0.25rem 0 1.15rem; }

/* Submit button: mirrors the theme's button element. */
.lead-form .hero-cta {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
	border: none;
	border-radius: 6px;
	padding: 0.8rem 1.7rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lead-form .hero-cta:hover { background: var(--wp--preset--color--amber-text); }

/* Feedback notice the handler may render above the form. */
.lead-form + .lead-notice,
.mortise-lead-notice { margin-top: var(--wp--preset--spacing--30); font-size: 0.9rem; }