/* ============================================================
   Hive Solutions — Contact page
   ============================================================ */

/* ---------- Hero ---------- */

.contact-hero .lead { max-width: 42rem; }

/* ---------- Two-column layout ---------- */

.contact-main { padding-top: clamp(1.5rem, 4vw, 3rem); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- Form card ---------- */

.contact-form-card { padding: clamp(1.75rem, 4vw, 2.5rem); }
.contact-form-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
}
.contact-form-title { margin-bottom: 0.4rem; }
.contact-form-card .contact-form-sub {
  font-size: 0.95rem;
  color: var(--text-3);
  margin-bottom: 1.9rem;
}

.field label .req { color: var(--amber-400); }
.field label .opt { color: var(--text-3); font-weight: 400; }

select.input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a7a7b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}

.btn-block { width: 100%; margin-top: 0.5rem; }

.contact-form-card .form-note {
  margin-top: 1rem;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Validation ---------- */

.input-error {
  border-color: rgba(255, 107, 107, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.13) !important;
  animation: fieldShake 0.34s var(--ease-out);
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  50% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}

/* ---------- Aside cards ---------- */

.contact-aside {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.contact-mail-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--amber-300);
  word-break: break-all;
  transition: color 0.25s;
}
.contact-mail-link:hover { color: var(--amber-200); }

.contact-aside .contact-mail-note {
  margin-top: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-3);
}

.lang-chip { margin-top: 1.1rem; }

/* ---------- Check-bullet list ---------- */

.check-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.2rem;
}
.check-list li {
  position: relative;
  padding-left: 2.3rem;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.4);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--amber-300);
  border-bottom: 2px solid var(--amber-300);
  transform: rotate(43deg);
}

/* ---------- FAQ ---------- */

.faq-wrap { max-width: 46rem; }

/* Submission feedback banners (?sent=1 / ?error=...) */
.form-banner {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.6rem;
  border: 1px solid;
}
.form-banner p { margin: 0.35rem 0 0; font-size: 0.92rem; }
.form-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-banner-success { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.07); }
.form-banner-success strong { color: #4ade80; }
.form-banner-error { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.07); }
.form-banner-error strong { color: #f87171; }

/* Honeypot field - kept out of sight and out of the tab order */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}