@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   Contact Page Specific Styles & Overrides
   ========================================================================== */

.contact-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px var(--edge) 100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 860px) {
  .contact-wrapper {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

/* Form Styling */
.contact-form-container {
  background: var(--white);
  padding: 40px;
  border-radius: var(--radius);
  border: 1px solid rgba(24,32,25,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--charcoal);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--steel-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--stone);
  transition: border-color 0.3s var(--ease);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--charcoal);
  background: var(--white);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

/* .btn-submit rides on the shared .btn base (see styles.css) for its size,
   radius and transition timing, and only overrides colour here so every
   button on the site keeps the same shape. */
.btn-submit {
  width: 100%;
  padding: 18px;
  color: var(--white);
  background: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn-submit:hover {
  background: var(--green);
  transform: translateY(-2px);
}

/* Adjusting the glass block for the contact page */
.contact-info-block {
  margin-top: 0;
  text-align: left;
}

.contact-info-block h3 {
  margin-bottom: 20px;
}

.contact-info-block p {
  margin-bottom: 16px;
  color: var(--charcoal);
}

.contact-info-block strong {
  display: block;
  margin-bottom: 4px;
  color: var(--charcoal);
}