/* Страница контактов. Токены и шрифты — из main.css, тут только раскладка формы. */

.qh-contact{
	max-width:1080px;
	padding-top:110px;
	padding-bottom:80px;
}

.qh-contact__head{ margin-bottom:34px; }
.qh-contact__lede{
	color:var(--text-muted);
	font-size:16px;
	max-width:52ch;
	margin:14px 0 0;
}

/* Форма шире справочной колонки: писать людям приходится чаще, чем читать. */
.qh-contact__grid{
	display:grid;
	grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
	gap:34px;
	align-items:start;
}
@media (max-width:900px){
	.qh-contact{ padding-top:96px; }
	.qh-contact__grid{ grid-template-columns:1fr; gap:26px; }
}

/* ── форма ─────────────────────────────────────────────────────────────── */
.qh-contact__form-wrap{
	background:var(--bg-elevated);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:26px;
}
@media (max-width:600px){ .qh-contact__form-wrap{ padding:20px 17px; } }

.qh-form__row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}
@media (max-width:600px){ .qh-form__row{ grid-template-columns:1fr; gap:0; } }

.qh-field{ margin:0 0 16px; }
.qh-field label{
	display:block;
	font-size:13px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--text);
	margin-bottom:7px;
}
.qh-field__hint{
	font-weight:400;
	color:var(--text-faint);
	letter-spacing:0;
}

.qh-field input,
.qh-field select,
.qh-field textarea{
	width:100%;
	background:var(--bg-card);
	border:1px solid var(--border);
	border-radius:8px;
	color:var(--text);
	font-family:inherit;
	font-size:15px;
	line-height:1.5;
	padding:12px 13px;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.qh-field textarea{ resize:vertical; min-height:150px; }
.qh-field input::placeholder,
.qh-field textarea::placeholder{ color:var(--text-faint); }

.qh-field input:focus,
.qh-field select:focus,
.qh-field textarea:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px rgba(255,47,99,.16);
}

/* Стрелка у select: свою рисуем сами, иначе в тёмной теме она чёрная на чёрном. */
.qh-field select{
	appearance:none;
	-webkit-appearance:none;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239c9ca6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 13px center;
	background-size:11px;
	padding-right:36px;
}
.qh-field select option{ background:var(--bg-card); color:var(--text); }

/* Ловушка для ботов: убрана с экрана, но остаётся в DOM и доступна роботам. */
.qh-trap{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.qh-form__foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	margin-top:6px;
}
.qh-form__legal{
	color:var(--text-faint);
	font-size:12.5px;
	max-width:34ch;
}
.qh-form__legal a{ color:var(--text-muted); text-decoration:underline; white-space:nowrap; }
.qh-form__legal a:hover{ color:var(--text); }

/* ── статус отправки ───────────────────────────────────────────────────── */
.qh-note{
	margin:0 0 20px;
	padding:13px 15px;
	border-radius:8px;
	font-size:14.5px;
	line-height:1.55;
	border:1px solid transparent;
}
.qh-note--ok{
	background:rgba(240,185,94,.10);
	border-color:rgba(240,185,94,.35);
	color:#f3d6a4;
}
.qh-note--bad{
	background:var(--accent-soft);
	border-color:rgba(255,47,99,.38);
	color:#ffbccb;
}

/* ── правая колонка ────────────────────────────────────────────────────── */
.qh-contact__side{
	display:flex;
	flex-direction:column;
	gap:16px;
}

.qh-side-card{
	background:var(--bg-card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:20px;
}
.qh-side-card--quiet{ background:transparent; }

.qh-side-card h2{
	font-family:'Anton',sans-serif;
	font-size:14px;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--text-faint);
	margin:0 0 12px;
}
.qh-side-card p{ margin:0 0 8px; font-size:14.5px; color:var(--text-muted); }
.qh-side-card p:last-child{ margin-bottom:0; }

.qh-side-mail{
	color:var(--accent);
	font-size:16px;
	font-weight:600;
	word-break:break-word;
}
.qh-side-mail:hover{ text-decoration:underline; }
.qh-side-note{ font-size:13.5px; color:var(--text-faint); line-height:1.6; }

.qh-side-list{ list-style:none; margin:0; padding:0; }
.qh-side-list li{
	font-size:14px;
	line-height:1.6;
	color:var(--text-muted);
	padding:11px 0;
	border-top:1px solid var(--border);
}
.qh-side-list li:first-child{ border-top:none; padding-top:0; }
.qh-side-list li:last-child{ padding-bottom:0; }
.qh-side-list strong{
	display:block;
	color:var(--text);
	font-weight:600;
	font-size:14px;
	margin-bottom:2px;
}
.qh-side-list a{ color:var(--accent); }
.qh-side-list a:hover{ text-decoration:underline; }
