/* ==========================================================================
   geo-contact.css — the "Write to us" section of the Contacts page
   (templates/about/contact.html, views.contacts). Loaded by that page only, on top
   of geo-interior.css (which keeps the contact details + map grid). Scoped to
   .geo-write*; tokens from geo-chrome.css.
   ========================================================================== */

.geo-write {
	display: grid;
	grid-template-columns: minmax(300px, 380px) 1fr;
	background: var(--geo-card-bg);
	border: 1px solid var(--geo-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
	overflow: hidden;
	scroll-margin-top: calc(var(--geo-nav-h, 60px) + 16px);   /* #write-to-us lands clear of the fixed nav */
	margin-top: 8px;   /* + the column's 8 px gap = the 16 px between the two cards above */
}

/* ----- left: what it is ----- */
.geo-write-intro {
	padding: 26px 26px 28px;
	background: linear-gradient(160deg, #eef7fc 0%, #f6f9fc 100%);
	border-right: 1px solid var(--geo-border);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.geo-write-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--geo-accent);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 19px;
	box-shadow: 0 8px 18px rgba(40, 171, 227, .28);
}
.geo-write-intro h2 {
	margin: 4px 0 0;
	font-family: var(--geo-font-head);
	font-size: 21px;
	font-weight: 800;
	color: var(--geo-ink);
}
.geo-write-intro p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--geo-ink-soft); }
.geo-write-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.geo-write-points li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: #4b5a6b; }
.geo-write-points .bi { color: var(--geo-link); font-size: 15px; margin-top: 1px; flex: none; }

/* ----- right: the form ----- */
.geo-write-body { padding: 24px 26px 26px; min-width: 0; }
.geo-write-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.geo-write-label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .3px;
	color: var(--geo-ink);
}
.geo-write-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.geo-write-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* topic = a radio styled as a chip; the input stays focusable for the keyboard */
.geo-write-chip { position: relative; margin: 0; cursor: pointer; }
.geo-write-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.geo-write-chip span {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #d4dde6;
	border-radius: 17px;
	background: #fff;
	font-size: 13px;
	color: var(--geo-ink-soft);
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.geo-write-chip:hover span { border-color: var(--geo-accent); }
.geo-write-chip input:checked + span {
	background: rgba(40, 171, 227, .12);
	border-color: var(--geo-accent);
	color: var(--geo-link);
	font-weight: 700;
}
.geo-write-chip input:focus-visible + span { outline: 2px solid var(--geo-accent); outline-offset: 2px; }

.geo-write-field { display: flex; flex-direction: column; min-width: 0; }
.geo-write-field textarea,
.geo-write-field input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d4dde6;
	border-radius: 8px;
	background: #fff;
	font: 14px/1.5 var(--geo-font-body);
	color: var(--geo-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.geo-write-field textarea { resize: vertical; min-height: 140px; }
.geo-write-field textarea:focus,
.geo-write-field input[type="email"]:focus {
	outline: none;
	border-color: var(--geo-accent);
	box-shadow: 0 0 0 3px rgba(40, 171, 227, .18);
}
.geo-write-field [aria-invalid="true"] { border-color: #d98c8c; }
.geo-write-under { display: flex; gap: 12px; align-items: flex-start; margin-top: 5px; }
.geo-write-counter {
	margin-left: auto;
	font-size: 12px;
	color: #98a6b5;
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}
.geo-write-counter.is-near { color: #b45309; font-weight: 700; }
.geo-write-help { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #6b7a8c; }
.geo-write-help a { color: var(--geo-link); font-weight: 600; }
.geo-write-error { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: #b42323; }
.geo-write-under .geo-write-error { margin-top: 0; }

.geo-write-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.geo-write-send,
.geo-write-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 22px;
	border-radius: 8px;
	font: 700 14px/1 var(--geo-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* .geo-write a.*: the sign-in buttons are links, and geo-interior.css colours every `.geo-main a` */
.geo-write-send,
.geo-write a.geo-write-send { border: 0; background: var(--geo-accent); color: var(--geo-accent-ink); }
.geo-write-send:hover,
.geo-write a.geo-write-send:hover { background: var(--geo-accent-hover); color: var(--geo-accent-ink); text-decoration: none; }
.geo-write-ghost,
.geo-write a.geo-write-ghost { border: 1px solid #d4dde6; background: #fff; color: var(--geo-ink-soft); }
.geo-write-ghost:hover,
.geo-write a.geo-write-ghost:hover { border-color: var(--geo-accent); color: var(--geo-link); text-decoration: none; }
.geo-write-send:focus-visible,
.geo-write-ghost:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }

.geo-write-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid #b7e0c2;
	background: #ecf8ef;
	color: #1f6b35;
	font-size: 13.5px;
	line-height: 1.5;
}
.geo-write-body > .geo-write-alert { margin-bottom: 16px; }
.geo-write-alert.is-error,
.geo-write-alert.is-warning { border-color: #f0c7c7; background: #fdf2f2; color: #9b1c1c; }
.geo-write-alert .bi { font-size: 16px; margin-top: 1px; flex: none; }

/* ----- a visitor: sign in first ----- */
.geo-write-signin {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	max-width: 520px;
}
.geo-write-signin > .bi { font-size: 22px; color: var(--geo-link); }
.geo-write-signin p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--geo-ink-soft); }
.geo-write-signin .geo-write-signin-title { font-family: var(--geo-font-head); font-size: 17px; font-weight: 800; color: var(--geo-ink); }
.geo-write-signin .geo-write-actions { margin: 6px 0 4px; }

@media (max-width: 900px) {
	.geo-write { grid-template-columns: 1fr; }
	.geo-write-intro { border-right: 0; border-bottom: 1px solid var(--geo-border); }
}
@media (max-width: 575px) {
	.geo-write-intro, .geo-write-body { padding: 20px 16px; }
	.geo-write-send, .geo-write-ghost { width: 100%; justify-content: center; }
}