/*
 * Chiggle Academy — Fluent Forms brand skin (v0.11.19).
 *
 * Restyles the three embedded FluentCRM capture forms (rendered by the
 * Fluent Forms sibling plugin — see PRE_LAUNCH_CHECKLIST §5.5):
 *   - id=3  Newsletter Signup        → footer band  (.ca-footer-newsletter)
 *   - id=4  Templates Free Preview   → /templates/   (.ca-leadmagnet)
 *   - id=5  AI Prompts Free Preview  → /llm-prompts/ (.ca-leadmagnet)
 *
 * Enqueued globally (the footer form is sitewide) after footer.css. We
 * own the visual layer entirely rather than overriding Fluent Forms'
 * default skin: FF's render-time asset enqueue is unreliable for the
 * wp_footer-rendered newsletter form, so this file is self-sufficient
 * and does NOT depend on fluentform-public-default.css being present.
 *
 * Fluent Forms 5.x public markup (stable across 4.x–5.x):
 *   form.fluentform > .ff-el-group > .ff-el-input--label label
 *                                   > .ff-el-input--content input.ff-el-form-control
 *   .ff-el-group.ff_submit_btn_wrapper button.ff-btn-submit
 *   .ff-name-field .ff-t-container .ff-t-cell  (multi-input name row)
 *   .ff-el-is-error input / .error             (validation)
 *   .ff-message-success / .ff_submit_success   (post-submit)
 */

/* ===================================================================
 * Shared baseline — applies in every context.
 * =================================================================== */
.fluentform {
	font-family: var(--font-body);
	margin: 0;
}
.fluentform .ff-el-group {
	margin-bottom: 16px;
}
.fluentform .ff-el-group:last-of-type {
	margin-bottom: 0;
}
.fluentform .ff-el-input--label label {
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 6px;
	display: inline-block;
}
.fluentform .ff-el-input--label .ff-el-is-required.asterisk-right:after,
.fluentform .ff-el-input--label .ff-el-is-required:before {
	color: var(--coral);
}

/* Inputs */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform .ff-el-form-control,
.fluentform textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.4;
	padding: 13px 16px;
	border: 1.5px solid var(--gray-300);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--charcoal);
	transition: border-color 0.18s, box-shadow 0.18s;
	-webkit-appearance: none;
	appearance: none;
}
.fluentform input::placeholder,
.fluentform textarea::placeholder {
	color: var(--gray-400);
	opacity: 1;
}
.fluentform input:focus,
.fluentform .ff-el-form-control:focus,
.fluentform textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(255, 155, 3, 0.25);
}

/* Multi-input name row (forms 4 + 5 collect First + Last). */
.fluentform .ff-name-field .ff-t-container,
.fluentform .ff-t-container {
	display: flex;
	gap: 14px;
	margin: 0 -7px;
}
.fluentform .ff-name-field .ff-t-cell,
.fluentform .ff-t-container .ff-t-cell {
	flex: 1 1 0;
	padding: 0 7px;
}

/* Submit button — mirrors the site .ca-btn gold CTA. */
.fluentform .ff-el-group.ff_submit_btn_wrapper,
.fluentform .ff_submit_btn_wrapper {
	margin-bottom: 0;
}
.fluentform .ff-btn-submit,
.fluentform button.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 14px 28px;
	border: none;
	border-radius: var(--radius-sm);
	background: var(--gold);
	color: var(--navy);
	cursor: pointer;
	transition: background 0.18s, transform 0.12s;
	-webkit-appearance: none;
	appearance: none;
}
.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn:hover {
	background: var(--gold-hover);
}
.fluentform .ff-btn-submit:active,
.fluentform button.ff-btn:active {
	transform: translateY(1px);
}
.fluentform .ff-btn-submit:focus-visible,
.fluentform button.ff-btn:focus-visible {
	outline: 3px solid rgba(255, 155, 3, 0.4);
	outline-offset: 2px;
}

/* Validation + system messages */
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-is-error textarea {
	border-color: var(--coral);
}
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error {
	color: var(--coral);
	font-size: 0.8rem;
	margin-top: 5px;
}
.ff-message-success,
.fluentform_success .ff-message-success,
.ff_submit_success {
	background: var(--green-pale);
	color: var(--green);
	border: 1px solid rgba(46, 125, 50, 0.3);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* ===================================================================
 * Context A — footer free-preview opt-in band (.ca-footer-newsletter;
 * class kept as a CSS hook — it now hosts form 6, not the newsletter).
 *
 * v0.11.21: defined-card treatment for strong separation. The OUTER
 * element stays --navy-deep (blends with the footer); the INNER is a
 * contained, rounded --navy-light card with a gold top cap, border +
 * drop shadow, so it visibly sits ON the footer as its own panel.
 * In-band copy + inputs brightened for readability. */
.ca-footer-newsletter {
	background: var(--navy-deep);
	padding: 40px var(--container-padding) 52px;
}
.ca-footer-newsletter-inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px 48px;
	background: var(--navy-light);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
}
.ca-footer-newsletter-copy {
	max-width: 460px;
}
.ca-footer-newsletter-eyebrow {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
}
.ca-footer-newsletter-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.25;
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.ca-footer-newsletter-sub {
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
}
/* Inline <code> inside the newsletter sub-copy (e.g. ".docx"). UA-default
 * code background is near-white (#eceff3), which combined with the
 * surrounding rgba(255,255,255,0.82) inherited text colour computes to
 * ~1.1:1 — surfaced by the v0.11.73 axe lesson scan (the footer renders
 * site-wide so it fails everywhere; the lesson-page test was just where
 * we caught it). Restyle as a brand-tinted chip with explicit white text
 * for AAA on the navy-light card behind it. v0.11.77. */
.ca-footer-newsletter-sub code {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.92em;
}

/* The form: First Name + Email + submit on one row.
 *
 * Form-agnostic (the band hosted form 3, now form 6 — selectors must
 * not hard-code a form id). Some Fluent Forms templates (e.g. "Inline
 * Opt-in", form 3's old template) inject a per-form body <style> that
 * absolutely-positions the submit (`position:absolute; top:5px;
 * right:5px`) to overlay it on the input — fine for a narrow widget,
 * a button-over-field overlap on our wide band. We force every FF form
 * in this band to a clean flex row and neutralise any such injected
 * positioning. Flex children live inside <form><fieldset> (NOT the
 * .fluentform wrapper), so the flex container is the fieldset.
 * !important + the 2-class `.ca-footer-newsletter .fluentform`
 * ancestor beat the equal-or-lower-specificity, later-in-DOM inline
 * rule. */
.ca-footer-newsletter .fluentform,
.ca-footer-newsletter .fluentform form {
	position: static !important;
}
.ca-footer-newsletter .fluentform fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	border: 0;
	margin: 0;
	padding: 0;
}
/* Flex items = the email .ff-el-group AND form 6's First-Name
 * composite, which FF renders NOT as a .ff-el-group but as
 * `.ff-field_container.ff-name-field-wrapper > .ff-t-container >
 * .ff-t-cell > .ff-el-group`. Both must size equally beside the
 * fixed-width submit. */
.ca-footer-newsletter .fluentform .ff-el-group,
.ca-footer-newsletter .fluentform .ff-name-field-wrapper {
	flex: 1 1 200px;
	margin-bottom: 0;
}
/* Collapse the name composite's inner grid to a plain full-width
 * column so its input lines up flush with the email field (drop the
 * global .ff-t-container flex + negative margin). */
.ca-footer-newsletter .fluentform .ff-name-field-wrapper .ff-t-container {
	display: block;
	margin: 0;
	gap: 0;
}
.ca-footer-newsletter .fluentform .ff-name-field-wrapper .ff-t-cell,
.ca-footer-newsletter .fluentform .ff-name-field-wrapper .ff-el-group {
	width: 100%;
	margin: 0;
	flex: 1 1 auto;
}
.ca-footer-newsletter .fluentform .ff-el-group.ff_submit_btn_wrapper.top_merged,
.ca-footer-newsletter .fluentform .ff-el-group.ff_submit_btn_wrapper {
	position: static !important;
	top: auto !important;
	right: auto !important;
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
}
/* Heading carries the label — hide FF's own label accessibly. */
.ca-footer-newsletter .fluentform .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ca-footer-newsletter .fluentform input[type="email"],
.ca-footer-newsletter .fluentform input[type="text"],
.ca-footer-newsletter .fluentform .ff-el-form-control {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
}
.ca-footer-newsletter .fluentform input::placeholder {
	color: rgba(255, 255, 255, 0.66);
}
.ca-footer-newsletter .fluentform input:focus {
	border-color: var(--gold);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 3px rgba(255, 155, 3, 0.3);
}
/* Force the gold CTA on the dark band. Forms with a "Custom" button
 * style (form 6, form 3) inject a body <style>
 * (`form.fluent_form_N .wpf_has_custom_css.ff-btn-submit`, 0,0,3,1 +
 * later in DOM) painting the button navy-on-navy with a white/blue
 * hover — low contrast on the navy band + off-brand. Beat it
 * form-agnostically with !important. */
.ca-footer-newsletter .fluentform .ff-btn-submit,
.ca-footer-newsletter .fluentform .ff-btn-submit:hover,
.ca-footer-newsletter .fluentform .ff-btn-submit:focus {
	white-space: nowrap;
	background-color: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--navy) !important;
}
.ca-footer-newsletter .fluentform .ff-btn-submit:hover {
	background-color: var(--gold-hover) !important;
	border-color: var(--gold-hover) !important;
}
.ca-footer-newsletter .ff-message-success {
	background: rgba(255, 255, 255, 0.06);
	color: var(--gold-pale);
	border-color: rgba(255, 255, 255, 0.18);
}

/* ===================================================================
 * Context B — lead-magnet card (.ca-leadmagnet) on the library pages.
 * Light card on the offwhite /templates/ + /llm-prompts/ pages,
 * inserted between the hero and the first phase grid.
 * =================================================================== */
.ca-leadmagnet {
	max-width: 760px;
	margin: 36px auto 8px;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-top: 4px solid var(--gold);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 32px 36px;
}
.ca-leadmagnet-head {
	text-align: center;
	margin-bottom: 22px;
}
.ca-leadmagnet-eyebrow {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin: 0 0 8px;
}
.ca-leadmagnet-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--navy);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.ca-leadmagnet-sub {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--gray-500);
	margin: 0 auto;
	max-width: 520px;
}
.ca-leadmagnet .fluentform .ff-el-input--label label {
	color: var(--navy);
}
.ca-leadmagnet .fluentform .ff-btn-submit {
	width: 100%;
	margin-top: 4px;
}
.ca-leadmagnet-fineprint {
	text-align: center;
	font-size: 0.78rem;
	color: var(--gray-400);
	margin: 16px 0 0;
}

/* ===================================================================
 * Responsive
 * =================================================================== */
@media (max-width: 900px) {
	.ca-footer-newsletter {
		padding: 28px 20px 36px;
	}
	.ca-footer-newsletter-inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 28px;
	}
}
@media (max-width: 600px) {
	.ca-footer-newsletter .fluentform {
		flex-direction: column;
		align-items: stretch;
	}
	.ca-footer-newsletter .fluentform .ff-el-group,
	.ca-footer-newsletter .fluentform .ff-el-group.ff_submit_btn_wrapper {
		flex: 1 1 auto;
	}
	.ca-footer-newsletter .fluentform .ff-btn-submit {
		width: 100%;
	}
	.ca-footer-newsletter-inner {
		padding: 26px 22px;
	}
	.ca-leadmagnet {
		padding: 26px 22px;
		margin: 28px 16px 4px;
	}
	.fluentform .ff-name-field .ff-t-container,
	.fluentform .ff-t-container {
		flex-direction: column;
		gap: 16px;
		margin: 0;
	}
	.fluentform .ff-name-field .ff-t-cell,
	.fluentform .ff-t-container .ff-t-cell {
		padding: 0;
	}
}