/* ==========================================================================
   high5 – kontaktný formulár (úvod + Kontakt)
   ========================================================================== */

/* Formulár */
.form { position: relative; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__interests { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__legend { padding: 0; margin-bottom: 1.1rem; color: var(--c-mint); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 3.2rem;
	padding: 0 1.15rem;
	border: 1px solid rgb(241 246 244 / 0.22);
	border-radius: 16px;
	color: var(--c-paper);
	cursor: pointer;
	user-select: none;
	transition: border-color 0.3s, background-color 0.3s;
}

.chip--wide { flex-basis: 100%; }

.chip input { position: absolute; opacity: 0; pointer-events: none; }

.chip__box {
	position: relative;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 1.5px solid rgb(241 246 244 / 0.6);
	border-radius: 3px;
	transition: background-color 0.25s, border-color 0.25s;
}

.chip__box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.5px;
	width: 5px;
	height: 9px;
	border: solid var(--c-ink-900);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.25s var(--ease-out);
}

.chip:hover { border-color: rgb(107 206 187 / 0.6); }
.chip:has(input:checked) { border-color: var(--c-mint); background: rgb(107 206 187 / 0.1); }
.chip input:checked + .chip__box { background: var(--c-mint); border-color: var(--c-mint); }
.chip input:checked + .chip__box::after { transform: rotate(45deg) scale(1); }
.chip:has(input:focus-visible) { outline: 2px solid var(--c-mint); outline-offset: 3px; }

.form__hint { margin-top: 0.9rem; font-family: var(--f-display); font-size: calc(var(--fs-micro) * 1.1); letter-spacing: 0.06em; color: var(--c-slate-400); }

.form__fields {
	display: grid;
	gap: 0.8rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 2.6rem);
}

@media (min-width: 600px) { .form__fields { grid-template-columns: 1fr 1fr; } }

.field { position: relative; }

.field__input {
	width: 100%;
	height: 3.9rem;
	padding: 1.45rem 1.4rem 0.45rem;
	border: 1px solid rgb(241 246 244 / 0.22);
	border-radius: 16px;
	background: rgb(6 22 32 / 0.25);
	color: var(--c-paper);
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.field__input:hover { border-color: rgb(241 246 244 / 0.4); }
.field__input:focus { border-color: var(--c-mint); box-shadow: 0 0 0 4px rgb(107 206 187 / 0.12); background: rgb(6 22 32 / 0.45); }
.field__input:user-invalid { border-color: #ff8d7a; }

.field__label {
	position: absolute;
	left: 1.45rem;
	top: 50%;
	translate: 0 -50%;
	font-family: var(--f-display);
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
	color: var(--c-slate-400);
	pointer-events: none;
	transition: top 0.3s var(--ease-out), font-size 0.3s var(--ease-out), color 0.3s;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
	top: 1.05rem;
	font-size: var(--fs-micro);
	color: var(--c-mint);
}

.field--area { margin-top: 1rem; }
.field--area .field__input { height: auto; min-height: 8rem; padding-top: 1.9rem; resize: vertical; }
.field--area .field__label { top: 1.6rem; }
.field--area .field__input:focus + .field__label,
.field--area .field__input:not(:placeholder-shown) + .field__label { top: 1rem; }

.form__message { margin-top: 1.4rem; }
.form__message summary {
	display: inline-flex;
	gap: 0.6rem;
	list-style: none;
	cursor: pointer;
	color: var(--c-mint);
	letter-spacing: 0.14em;
}
.form__message summary::-webkit-details-marker { display: none; }
.form__message summary span { display: inline-block; transition: transform 0.4s var(--ease-out); }
.form__message[open] summary span { transform: rotate(45deg); }

.form__submit { margin-top: 1.6rem; }
.form__button { width: min(100%, 18.3rem); min-height: 3.2rem; font-size: var(--fs-btn); }
.form__button[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.form__consent { margin-top: 1.1rem; font-size: calc(var(--fs-small) * 0.88); color: var(--c-slate-400); }
.form__consent a { text-decoration: underline; text-underline-offset: 0.2em; }
.form__consent a:hover { color: var(--c-mint); }

.form__status:not(:empty) {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	background: rgb(107 206 187 / 0.12);
	color: var(--c-mint);
}

.form__status.is-error { background: rgb(255 141 122 / 0.12); color: #ff9f8f; }

.chip { border-radius: var(--radius); border-color: rgb(241 246 244 / 0.28); background: var(--c-ink-900); }
.field__input { border-radius: var(--radius); border-color: rgb(241 246 244 / 0.16); background: var(--c-ink-900); }