/* =============================================================================
   Kashi Interior — Fluent Forms skin

   Client requirement 4: the forms are generated by Fluent Forms, and this file
   is what makes them indistinguishable from the design.

   Every declaration below is copied from the `style` / `style-focus` /
   `style-hover` attribute of the corresponding element in
   `Kashi Contact.dc.html`, `SiteFooter.dc.html`, `Kashi Blog.dc.html` and
   `Kashi Blog Post.dc.html`. Colour literals are swapped for the --kashi-* token
   whose default IS that literal; nothing else is changed. Anything with no
   counterpart in the design carries a NET-NEW note saying why.

   There are NO media queries here, exactly as in the design. The Name/Email row
   reflows through grid auto-fit, not through a breakpoint.

   Scoping rule: every selector is prefixed `.k-form` or `.k-nl`. No bare `.ff-*`
   selector appears in this file — Fluent Forms may be used for other forms on
   this site and must keep its own styling there.

   Cascade note: this file is enqueued on `wp_footer` priority 5 with
   `fluent-form-styles` / `fluentform-public-default` as filtered dependencies,
   so it always prints after them. Where a rule below still carries `!important`
   or a doubled class it is because Fluent Forms writes that property inline or
   `!important` itself; each such case is called out.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Shared
   -------------------------------------------------------------------------- */

/* NET-NEW: the design draws the trailing arrow as an inline lucide <svg>.
   Fluent Forms re-renders the submit button's label on every state change, so an
   injected element would not survive; a CSS mask does. This is lucide
   `arrow-right` at the design's stroke-width 1.4, unchanged. */
.k-form,
.k-nl {
	--kashi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/*
 * The accessibility fieldset's legend.
 *
 * FF prints it with an inline `display: block` and `height:0!important`, which
 * makes it a zero-height flex item — and a flex item still earns a full 14px
 * `gap` before the first real field. `!important` is required here precisely
 * because the competing declaration is inline.
 */
.k-form form > fieldset > legend.ff_screen_reader_title,
.k-nl form > fieldset > legend.ff_screen_reader_title {
	display: none !important;
}

/*
 * Labels carry the accessible name (the design's own aria-label string) and are
 * hidden visually, never with `display:none`. `display:block` is mandatory: FF's
 * `.ff-el-group.ff-el-form-top .ff-el-input--label` sets `display:block` at
 * (0,3,0), so this rule matches that weight to stay predictable.
 */
.k-form .ff-el-group .ff-el-input--label,
.k-nl .ff-el-group .ff-el-input--label {
	position: absolute;
	display: block;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* FF's stock 20px bottom margin; the design spaces fields with `gap` instead. */
.k-form .ff-el-group,
.k-nl .ff-el-group {
	margin: 0;
}

/* NET-NEW: FF affordances the design has no counterpart for. */
.k-form .ff-el-tooltip,
.k-form .ff-el-progress,
.k-nl .ff-el-tooltip,
.k-nl .ff-el-progress {
	display: none;
}

/* Conditional-logic hiding — FF writes this class and expects it to win. */
.k-form .ff-hidden,
.k-nl .ff-hidden {
	display: none !important;
}

/* -----------------------------------------------------------------------------
   1. Contact form — Kashi Contact.dc.html, "Contact form" section
   -------------------------------------------------------------------------- */

.k-form--contact {
	max-width: 520px;
}

/* The design's <form>: display:flex; flex-direction:column; gap:14px */
.k-form--contact form > fieldset {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 100%;
}

/*
 * The Name/Email row.
 *
 * The design is `display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px`
 * with no breakpoint, so the pair stacks at roughly 314px. FF ships a flex row
 * inside `@media (min-width:768px)` plus a JS-added `.mobile` class carrying
 * `display:block!important` at (0,4,0) — both have to be beaten for the row to
 * reflow where the design says it does rather than at 768px.
 */
.k-form--contact .ff-t-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 0;
}

/* Doubled class to reach (0,4,0) — ties FF's `.mobile:not(.ff_excluded)` rule
   and wins on print order. */
.k-form.k-form--contact .ff-t-container.mobile {
	display: grid !important;
}

/* FF writes `flex-basis: 50%` as an inline style on every cell; only
   `!important` can neutralise it. The rest is (0,3,0) to clear FF's
   `.ff-t-cell:first-of-type` / `:last-of-type` padding rules. */
.k-form.k-form--contact .ff-t-cell {
	flex-basis: auto !important;
	width: auto;
	padding: 0;
	margin-left: 0;
	min-width: 0;
}

.k-form--contact .ff-el-form-control {
	width: 100%;
	border: 1px solid var(--kashi-border);
	background: var(--kashi-white);
	border-radius: 10px;
	padding: 14px 18px;
	font-family: var(--kashi-font-form);
	font-size: 14px;
	color: var(--kashi-text);
	box-shadow: none;
}

.k-form--contact .ff-el-form-control:focus {
	border-color: var(--kashi-gold);
	outline: none;
	box-shadow: none;
}

.k-form--contact .ff-el-form-control::placeholder {
	color: var(--kashi-ph-b);
	opacity: 1;
}

/* The design's textarea is rows="5" with resize:vertical; min-height keeps the
   five-row box when FF's own rows attribute is edited away in the builder. */
.k-form--contact textarea.ff-el-form-control {
	resize: vertical;
	min-height: 132px;
}

/* -- Submit button ---------------------------------------------------------- */

.k-form--contact .ff_submit_btn_wrapper {
	margin: 0;
	text-align: left;
}

.k-form--contact .ff-btn-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--kashi-gold);
	color: var(--kashi-navy-deep);
	border: none;
	font-family: var(--kashi-font-form);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 12px 32px;
	border-radius: 999px;
	cursor: pointer;
	width: auto;
}

.k-form--contact .ff-btn-submit:hover,
.k-form--contact .ff-btn-submit:focus-visible {
	background: var(--kashi-navy-deep);
	color: var(--kashi-white);
}

/* The design's trailing `arrow-right` at 15px. */
.k-form--contact .ff-btn-submit::after {
	content: '';
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--kashi-arrow) center / 15px no-repeat;
	mask: var(--kashi-arrow) center / 15px no-repeat;
}

/* NET-NEW: the sent state. The design has a single button whose label swaps from
   "Send Message" to "Message Sent"; kashi-forms.js does the label, this does the
   colour and stops a second submit. */
.k-form .ff-btn-submit.is-sent {
	background: var(--kashi-navy-deep);
	color: var(--kashi-white);
	pointer-events: none;
}

/* -- Errors ----------------------------------------------------------------- */

.k-form--contact .ff-el-is-error .ff-el-form-control {
	border-color: var(--kashi-error);
}

/*
 * Inline errors. FF appends `<div class="error text-danger">` into
 * `.ff-el-input--content`; the stacked variant wraps its text in
 * `<span class="error-text">`. Both are styled so the two placements match.
 */
.k-form--contact .error,
.k-form--contact .error-text {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 300;
	color: var(--kashi-error);
}

/* NET-NEW: FF's "×" dismiss control has no counterpart in the design. */
.k-form .error-clear,
.k-nl .error-clear {
	display: none;
}

/* -- Success ---------------------------------------------------------------- */

/*
 * The confirmation panel. `samePageFormBehavior` is empty, so the form stays put
 * and this appears beneath it — which is what makes the button's
 * "Send Message" -> "Message Sent" swap worth doing.
 */
.k-form--contact .ff-message-success {
	background: var(--kashi-cream);
	border: 1px solid var(--kashi-hairline);
	border-left: 2px solid var(--kashi-gold);
	border-radius: 4px;
	padding: 22px 26px;
	font-size: 14.5px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--kashi-text-muted);
	box-shadow: none;
	margin-top: 14px;
}

/* -----------------------------------------------------------------------------
   2. Newsletter — shared across all three variants
   -------------------------------------------------------------------------- */

/* The design's pill: an input and a button welded into one rounded row. */
.k-nl form > fieldset {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 100%;
}

/* The design's input carries `flex:1; min-width:0`. In the rendered form the
   flex item is the group that wraps it, so the pair lands here verbatim —
   `flex:1`, not a re-expressed `1 1 auto`. */
.k-nl .ff-el-group {
	margin: 0;
	flex: 1;
	min-width: 0;
	position: relative;
}

.k-nl .ff-el-form-control {
	width: 100%;
	background: var(--kashi-white);
	border: none;
	color: var(--kashi-navy-deep);
	font-family: var(--kashi-font-form);
	border-radius: 999px 0 0 999px;
	box-shadow: none;
}

.k-nl .ff-el-form-control:focus {
	outline: none;
	box-shadow: none;
}

.k-nl .ff_submit_btn_wrapper {
	flex: none;
	margin: 0;
	display: flex;
}

.k-nl .ff-btn-submit {
	border: none;
	background: var(--kashi-gold);
	color: var(--kashi-navy-deep);
	cursor: pointer;
	border-radius: 0 999px 999px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-nl .ff-btn-submit:hover,
.k-nl .ff-btn-submit:focus-visible {
	background: var(--kashi-white);
}

/*
 * The newsletter renders twice on the blog index (band + footer) from a single
 * form record, and FF emits `id="fluentform_{id}_errors"` for each — a duplicate
 * ID. Errors are placed inline instead, and the stack is kept out of the layout.
 */
.k-nl .ff-errors-in-stack {
	display: none;
}

/* Anchored to the group so a message never widens the pill. */
.k-nl .error,
.k-nl .error-text {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 6px;
	font-size: 12px;
	color: var(--kashi-gold);
}

/* NET-NEW: the newsletter sits on the navy band and inside the navy footer, so
   the shared cream success panel would be unreadable there. Kept minimal. */
.k-nl .ff-message-success {
	background: none;
	border: none;
	box-shadow: none;
	margin-top: 10px;
	padding: 0;
	font-size: 13px;
	font-weight: 300;
	color: var(--kashi-gold);
}

/* -----------------------------------------------------------------------------
   3. Newsletter variants

   The three are NOT normalised. In particular the footer button is 44px and the
   blog-post aside button is 46px: that divergence is real in the source and is
   reproduced, not averaged.
   -------------------------------------------------------------------------- */

/* -- 3a. Footer column — SiteFooter.dc.html --------------------------------- */

.k-nl--footer {
	max-width: 260px;
}

.k-nl--footer .ff-el-form-control {
	padding: 12px 14px;
	font-size: 13px;
}

.k-nl--footer .ff-btn-submit {
	width: 44px;
	padding: 0;
	font-size: 0;
}

.k-nl--footer .ff-btn-submit::after {
	content: '';
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--kashi-arrow) center / 16px no-repeat;
	mask: var(--kashi-arrow) center / 16px no-repeat;
}

/* -- 3b. Blog newsletter band — Kashi Blog.dc.html -------------------------- */

/* Outer: the design's `display:flex; justify-content:center` wrapper.
   Inner: the `display:flex; width:100%; max-width:400px` pill, which here is the
   <form> element. */
.k-nl--band {
	display: flex;
	justify-content: center;
}

.k-nl--band form {
	display: flex;
	width: 100%;
	max-width: 400px;
}

.k-nl--band .ff-el-form-control {
	padding: 14px 16px;
	font-size: 13.5px;
}

/* Text label, no arrow — this is the one variant the design writes as words. */
.k-nl--band .ff-btn-submit {
	padding: 0 22px;
	font-family: var(--kashi-font-form);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

/* -- 3c. Blog-post aside — Kashi Blog Post.dc.html -------------------------- */

.k-nl--aside .ff-el-form-control {
	padding: 12px 16px;
	font-size: 13px;
}

.k-nl--aside .ff-btn-submit {
	width: 46px;
	padding: 0;
	font-size: 0;
}

.k-nl--aside .ff-btn-submit::after {
	content: '';
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--kashi-arrow) center / 16px no-repeat;
	mask: var(--kashi-arrow) center / 16px no-repeat;
}

/* -----------------------------------------------------------------------------
   4. Administrator-only fallback card

   NET-NEW: shown in place of a form whose slot has no Fluent Forms ID assigned.
   Never rendered for visitors.
   -------------------------------------------------------------------------- */

.k-form-missing {
	max-width: 520px;
	background: var(--kashi-cream);
	border: 1px solid var(--kashi-hairline);
	border-left: 2px solid var(--kashi-gold);
	border-radius: 4px;
	padding: 22px 26px;
}

.k-form-missing__title {
	font-family: var(--kashi-font-display);
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--kashi-text);
}

.k-form-missing__body {
	font-size: 13.5px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--kashi-text-muted);
	margin: 0 0 16px;
}