/* 90 Contact (#poptavka): the form; the browser validates until 90-contact.js takes over. */

/* oxblood alone is too dark on ink; lifted towards the text colour it clears 4.5:1 */
.ar-contact { --ar-contact-alarm: color-mix(in srgb, var(--wp--preset--color--oxblood) 55%, var(--wp--custom--color--text-inverse)); }

.ar-contact__grid { display: grid; gap: var(--wp--preset--spacing--60); }

@media (min-width: 960px) {
  .ar-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: clamp(2.5rem, 5vw, 5rem); }
}

.ar-contact__panel { padding: clamp(1rem, 3vw, 2rem); background-color: var(--wp--preset--color--carbon); }
.ar-contact__form { display: grid; gap: 1.25rem; }

@media (min-width: 600px) {
  .ar-contact__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-contact__wide { grid-column: 1 / -1; }
}

.ar-contact__field { display: grid; align-content: start; gap: 0.5rem; }
.ar-contact .is-required::after { content: " *"; content: " *" / ""; }

.ar-contact__control {
  width: 100%; min-height: 48px; padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ar-fg-muted) 60%, transparent); /* 3:1 on the panel */
  border-radius: var(--wp--custom--corner--md); background-color: var(--wp--preset--color--ink);
  transition: border-color var(--ar-hover);
}

textarea.ar-contact__control { min-height: 8rem; resize: vertical; }
.ar-contact__control:hover { border-color: var(--ar-fg-muted); }
.ar-contact__control[aria-invalid="true"] { border-color: var(--ar-contact-alarm); }
.ar-contact__error { color: var(--ar-contact-alarm); font-size: var(--wp--preset--font-size--small); }

/* consent: box beside its sentence, link and error beneath */
.ar-contact__check { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.ar-contact__check > :not(input) { grid-column: 2; }
.ar-contact__check input { width: 1.5rem; height: 1.5rem; margin: 0.65rem 0 0; accent-color: var(--wp--preset--color--chartreuse); }
.ar-contact__check label { padding-block: 0.75rem; color: var(--ar-fg-soft); }
.ar-contact__check a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--ar-fg-soft); }

.ar-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ar-contact .ar-btn:disabled { opacity: 0.55; pointer-events: none; }

/* the live region stays rendered while empty, so it announces */
.ar-contact__status:not(:empty) {
  padding: 0.9rem 1.1rem; border: 1px solid var(--ar-line-strong); color: var(--ar-fg);
  background-color: color-mix(in srgb, var(--ar-fg) 6%, transparent);
}