/* =========================================================================
   BASIC-256 Contact page (template-contact.php)
   Builds on landing.css (tokens, header/footer, buttons) and release-notes.css
   (the .b256-rn hero band and body wrapper).

   Most of the length here is Fluent Forms: the plugin ships styling aimed at
   a light default theme, and the page needs it to look like the rest of the
   site rather than like a plugin embedded in it.
   ========================================================================= */

/* ---- Layout ------------------------------------------------------------
   Channels first in the source order because they are the better answer for
   most visitors; on a wide screen the form sits beside them rather than
   below, so neither reads as an afterthought. */
.b256-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.b256-contact h2 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--text);
}

.b256-contact .channels-intro,
.b256-contact .form-intro {
	color: #475569;
	font-size: 15.5px;
	margin: 0 0 26px;
	max-width: 42em;
}

/* ---- Public channels --------------------------------------------------- */
.channel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}

.channel {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.channel-ico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.channel-ico.ico-blue   { color: var(--blue);   background: rgba(37, 99, 235, 0.10); }
.channel-ico.ico-green  { color: #16a34a;       background: rgba(34, 197, 94, 0.12); }
.channel-ico.ico-purple { color: var(--purple); background: rgba(139, 92, 246, 0.12); }
.channel-ico.ico-orange { color: #d97706;       background: rgba(245, 158, 11, 0.14); }

.channel-body h3 {
	font-size: 16.5px;
	font-weight: 700;
	margin: 2px 0 6px;
	line-height: 1.3;
}
.channel-body h3 a {
	color: var(--text);
	text-decoration: none;
	transition: color .15s ease;
}
.channel-body h3 a:hover { color: var(--blue); }
.channel-body p {
	color: #475569;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

/* ---- Form panel -------------------------------------------------------- */
.contact-form-block {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.06);
}

.contact-form { margin-top: 4px; }

.form-privacy {
	color: #64748b;
	font-size: 13px;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.form-fallback {
	color: #475569;
	font-size: 15px;
	margin: 0;
}

/* ---- Fluent Forms overrides -------------------------------------------
   Scoped under .b256-contact so nothing here leaks onto any other form the
   site might grow later (a newsletter block, a survey). */
.b256-contact .fluentform .ff-el-group { margin-bottom: 20px; }

.b256-contact .fluentform .ff-el-input--label label {
	font-size: 14px;
	font-weight: 650;
	color: var(--text);
	margin-bottom: 7px;
}

/* The plugin marks required fields with a bare red asterisk and no text.
   Keep the asterisk but give it a title in the markup-free way available
   here: colour it like the rest of the muted UI so it reads as a hint, not
   an error state on a field the visitor has not touched yet. */
.b256-contact .fluentform .ff-el-is-required.asterisk-right label:after,
.b256-contact .fluentform .ff-el-is-required.asterisk-left label:before {
	color: #dc2626;
	margin-left: 3px;
}

.b256-contact .fluentform .ff-el-form-control {
	width: 100%;
	background: var(--bg-light-2);
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--text);
	line-height: 1.5;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.b256-contact .fluentform .ff-el-form-control::placeholder {
	color: #94a3b8;
}

.b256-contact .fluentform .ff-el-form-control:focus {
	outline: none;
	background: #fff;
	border-color: var(--blue-2);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.b256-contact .fluentform textarea.ff-el-form-control {
	min-height: 150px;
	resize: vertical;
}

/* Help text under a field. */
.b256-contact .fluentform .ff-el-help-message {
	color: #64748b;
	font-size: 12.5px;
	margin-top: 6px;
	line-height: 1.5;
}

/* Validation errors. */
.b256-contact .fluentform .error-text,
.b256-contact .fluentform .text-danger {
	color: #dc2626;
	font-size: 13px;
	margin-top: 6px;
}
.b256-contact .fluentform .ff-el-form-control.error,
.b256-contact .fluentform .has-error .ff-el-form-control {
	border-color: #dc2626;
	background: rgba(220, 38, 38, 0.03);
}

/* Submit button — matched to .btn-primary in landing.css rather than left
   as the plugin's default blue, which is a different blue. */
.b256-contact .fluentform .ff-btn-submit,
.b256-contact .fluentform .ff_btn_style {
	background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 650;
	font-family: inherit;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}
.b256-contact .fluentform .ff-btn-submit:hover,
.b256-contact .fluentform .ff_btn_style:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
}
.b256-contact .fluentform .ff-btn-submit:focus-visible,
.b256-contact .fluentform .ff_btn_style:focus-visible {
	outline: 2px solid var(--blue-2);
	outline-offset: 3px;
}

/* Success message after submitting. */
.b256-contact .ff-message-success {
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #166534;
	border-radius: 12px;
	padding: 18px 20px;
	font-size: 15px;
	line-height: 1.6;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.b256-contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.contact-form-block { padding: 26px 22px; }
}