/* ============================================================
   CONTACT.CSS — info block + quote request form
============================================================= */

/* Photo background with a dark overlay so the text stays legible.
   The top of the overlay is a touch darker to tame the bright sky. */
.contact {
  position: relative;
  background-image:
    linear-gradient(rgba(13, 13, 13, 0.88), rgba(13, 13, 13, 0.82)),
    url("../assets/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* ---------- Solo layout (form disabled) ---------- */
/* When the quote form is commented out, present the info on its own
   centered column instead of stranded in a half-empty 2-col grid.
   Double class beats the 2-col rule in the desktop media query. */
.contact-grid.contact-grid--solo {
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.contact-grid--solo .contact-info .section-title {
  text-align: center;
}
.contact-grid--solo .contact-lead {
  margin-inline: auto;
}
.contact-grid--solo .contact-list {
  display: inline-flex;
  text-align: left;
}

/* ---------- Left: info ---------- */
.contact-info .section-title {
  text-align: left;
  margin-bottom: 1rem;
}
.contact-lead {
  color: var(--color-gray);
  max-width: 42ch;
  margin-bottom: 2rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background-color: rgba(126, 200, 32, 0.12);
  color: var(--color-green);
}
.contact-icon svg { width: 26px; height: 26px; }

.contact-item > div {
  display: flex;
  flex-direction: column;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray);
}
.contact-value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-white);
  transition: color var(--transition);
}
a.contact-value:hover {
  color: var(--color-green);
}

/* ---------- Right: form ---------- */
.contact-form {
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background-color: var(--color-bg);
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-gray);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* lime focus ring */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(126, 200, 32, 0.25);
}

/* select arrow styling */
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-green) 50%),
    linear-gradient(135deg, var(--color-green) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1.15rem),
    calc(100% - 13px) calc(1.15rem);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* error state */
.field-error {
  display: none;
  font-size: 0.78rem;
  color: #ff5a5a;
}
.field.error input,
.field.error select,
.field.error textarea {
  border-color: #ff5a5a;
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18);
  animation: shake 0.35s ease;
}
.field.error .field-error {
  display: block;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.form-submit {
  margin-top: 0.5rem;
  width: 100%;
}

/* success message */
.form-success {
  background-color: var(--color-surface);
  border: 1px solid var(--color-green);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-green);
  font-size: 1.3rem;
  font-weight: 600;
}
.form-success svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--color-green);
}

/* ============================================================
   RESPONSIVE
============================================================= */
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field.error input,
  .field.error select,
  .field.error textarea {
    animation: none;
  }
}