/**
 * Contact page — the details panel and the Fluent Forms embed.
 *
 * Loaded only on the page carrying the contact shortcode.
 *
 * Fluent Forms ships its own stylesheet and it is not subtle: system-font
 * labels, blue #1a7efb controls, red #f56c6c validation. None of that belongs
 * next to the rest of this storefront. It is rebranded in two layers — its own
 * custom properties for anything it tokenises, plain rules for anything it
 * hardcodes. See the note above the Fluent Forms section.
 *
 * @package   Kyrex\Storefront
 * @copyright 2026 Kyrex
 * @license   GPL-2.0-or-later
 */

/* ── Contact channels ──────────────────────────────────────────────
   Phone, WhatsApp and email, whichever of them the client has filled in.
   A card rather than a list: this is the fastest route to a person and
   should look like the shortcut it is. */

.kyrex-contact-panel {
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-lg);
	padding: 1.5rem;
	margin: 0 0 2.5rem;
}

.kyrex-contact-panel__channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.125rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.kyrex-contact-panel__label {
	display: block;
	font-family: var(--kyrex-font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kyrex-charcoal-muted);
	margin-bottom: 0.25rem;
}

/* Underlined, not underline-on-hover: on a contact page these are the
   controls, not incidental prose links. Gold-deep because plain
   --kyrex-gold is 2.90:1 on this surface and fails as text. */
.kyrex-contact-panel__value {
	font-family: var(--kyrex-font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--kyrex-gold-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	word-break: break-word;
}

.kyrex-contact-panel__value:hover {
	color: var(--kyrex-charcoal);
}

.kyrex-contact-panel__value:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
	border-radius: var(--kyrex-radius-sm);
}

.kyrex-contact-panel__fact {
	font-family: var(--kyrex-font-body);
	font-size: 0.875rem;
	color: var(--kyrex-charcoal-muted);
	margin: 0.5rem 0 0;
}

.kyrex-contact-panel__fact:first-child {
	margin-top: 0;
}

/*
 * The rule belongs to the *gap between* the channels and the facts, so it is
 * drawn only when both exist. Hung off .kyrex-contact-panel__fact
 * unconditionally, it rendered as a stray hairline floating above "Where we
 * work" whenever no phone or email was set yet — which is exactly the state
 * the site ships in.
 */
.kyrex-contact-panel__channels + .kyrex-contact-panel__fact {
	margin-top: 1.125rem;
	padding-top: 1.125rem;
	border-top: 1px solid var(--kyrex-border);
}

.kyrex-contact-panel__fact strong {
	color: var(--kyrex-charcoal);
	margin-right: 0.5rem;
}

/* Administrator-only scaffolding notice. Deliberately looks like an admin
   message and not like page content. */
.kyrex-contact-panel__notice {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--kyrex-charcoal-muted);
	background-color: #F4EFE6;
	border-left: 3px solid var(--kyrex-gold);
	padding: 0.75rem 1rem;
	margin: 0;
}

/* ── Fluent Forms, rebranded ───────────────────────────────────────
   Fluent Forms defines six custom properties on `:root`:

     --fluentform-primary: #1a7efb   --fluentform-secondary: #606266
     --fluentform-danger:  #f56c6c   --fluentform-border-color: #dadbdd
     --fluentform-border-radius: 7px --fluentform-input-select-height: auto

   Redefining them here is the whole ballgame, and finding that out cost a
   round trip: the required asterisk kept computing to rgb(245,108,108) no
   matter how many classes were stacked in front of `label::after`, because
   specificity was never the lever — the colour was a variable. `:root` is
   (0,0,1); `.fluentform` is (0,1,0) and inherits down to everything inside
   the form, so one block rebrands what a dozen overrides could not.

   The per-component rules below still exist for the things Fluent Forms
   hardcodes rather than tokenises: fonts, spacing, tracking. */

.fluentform {
	--fluentform-primary: var(--kyrex-gold-deep);
	--fluentform-secondary: var(--kyrex-charcoal-muted);
	--fluentform-danger: var(--kyrex-wine);
	--fluentform-border-color: var(--kyrex-border);
	--fluentform-border-radius: var(--kyrex-radius-sm);
}

.fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.fluentform .ff-el-input--label label {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kyrex-charcoal);
	margin-bottom: 0.375rem;
}

.fluentform .ff-el-form-control {
	font-family: var(--kyrex-font-body);
	font-size: 1rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-radius: var(--kyrex-radius-sm);
	padding: 0.75rem 0.875rem;
	box-shadow: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.fluentform .ff-el-form-control:hover {
	border-color: var(--kyrex-gold-soft);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--kyrex-gold-deep);
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 1px;
	box-shadow: none;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--kyrex-charcoal-muted);
	opacity: 0.75;
}

.fluentform textarea.ff-el-form-control {
	line-height: 1.6;
	resize: vertical;
}

.fluentform .ff-el-help-message {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	color: var(--kyrex-charcoal-muted);
	margin-top: 0.375rem;
}

/* Errors: wine rather than the plugin's red, and a real border change —
   colour alone is not a signal everyone can perceive. */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--kyrex-wine);
	border-width: 2px;
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	color: var(--kyrex-wine);
	margin-top: 0.375rem;
}

/* Submit — the same filled brass control as every other primary button on
   the site, so "Send enquiry" and "Place order" read as the same species. */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style {
	font-family: var(--kyrex-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background-color: var(--kyrex-gold);
	color: var(--kyrex-charcoal);
	border: 1px solid var(--kyrex-gold);
	border-radius: var(--kyrex-radius-sm);
	padding: 0.9375rem 1.875rem;
	box-shadow: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_btn_style:hover {
	background-color: var(--kyrex-gold-soft);
	border-color: var(--kyrex-gold-soft);
	color: var(--kyrex-charcoal);
}

.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff_btn_style:focus-visible {
	outline: 2px solid var(--kyrex-charcoal);
	outline-offset: 2px;
}

.fluentform .ff-message-success {
	font-family: var(--kyrex-font-body);
	font-size: 1rem;
	color: var(--kyrex-charcoal);
	background-color: var(--kyrex-surface);
	border: 1px solid var(--kyrex-border);
	border-left: 3px solid var(--kyrex-emerald);
	border-radius: var(--kyrex-radius-sm);
	padding: 1rem 1.25rem;
}

/* Two columns for the name row at desktop, one on a phone. */
@media (min-width: 40rem) {
	.fluentform .ff-t-container {
		gap: 1rem;
	}
}