/* ==========================================================================
   Contact page template
   Desktop: info column + form column, side by side.
   Mobile:  single column — info, then form.
   ========================================================================== */

.contact-page__intro {
  margin-bottom: var(--ovelia-spacing-step-12);
}

.contact-page__intro-content {
  max-width: 42rem;
  color: var(--ovelia-color-text-subtle);
}

.contact-page__intro-content :last-child {
  margin-bottom: 0;
}

.contact-page {
  display: grid;
  gap: var(--ovelia-spacing-step-12);
}

.contact-page__heading {
  margin: 0 0 var(--ovelia-spacing-step-6);
}

.contact-page__details {
  display: flex;
  flex-direction: column;
  gap: var(--ovelia-spacing-step-5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-page__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--ovelia-spacing-step-3);
  color: var(--ovelia-color-text-subtle);
  line-height: var(--ovelia-typography-lineheight-relaxed);
}

.contact-page__detail a {
  color: var(--ovelia-color-ink);
  text-decoration: none;
}

.contact-page__detail a:hover {
  text-decoration: underline;
}

.contact-page__detail .dashicons {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: var(--ovelia-color-ink);
}

@media (min-width: 1024px) {
  .contact-page {
    grid-template-columns: min(20rem, 100%) 1.2fr;
    align-items: start;
    gap: var(--ovelia-spacing-step-24);
  }
}

/* --------------------------------------------------------------------------
   Contact Form 7 — form styling
   -------------------------------------------------------------------------- */

.wpcf7-form p {
  margin: 0 0 var(--ovelia-spacing-step-5);
}

.wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: var(--ovelia-spacing-step-2);
  font-family: var(--ovelia-font-sans);
  font-size: var(--ovelia-typography-fontsize-xs);
  font-weight: var(--ovelia-typography-fontweight-medium);
  letter-spacing: var(--ovelia-tracking-label);
  text-transform: uppercase;
  color: var(--ovelia-color-text-subtle);
}

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100%;
  padding: var(--ovelia-spacing-step-3) var(--ovelia-spacing-step-4);
  border: 1px solid var(--ovelia-color-border);
  border-radius: 0;
  background: transparent;
  color: var(--ovelia-color-ink);
  font: inherit;
  font-weight: var(--ovelia-typography-fontweight-normal);
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.wpcf7-form-control.wpcf7-textarea {
  resize: vertical;
  min-height: 9rem;
}

.wpcf7-form-control::placeholder {
  color: var(--ovelia-color-text-subtle);
  opacity: 1;
}

.wpcf7-form-control:focus {
  border-color: var(--ovelia-color-ink);
}

.wpcf7-form-control.wpcf7-submit {
  border: none;
  cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit:hover {
  background-color: var(--ovelia-colors-stone-800);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--ovelia-spacing-step-2);
  font-size: var(--ovelia-typography-fontsize-xs);
  font-weight: var(--ovelia-typography-fontweight-normal);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ovelia-colors-semantic-error);
}

.wpcf7-response-output {
  margin: var(--ovelia-spacing-step-5) 0 0;
  padding: var(--ovelia-spacing-step-4);
  border: 1px solid var(--ovelia-color-border);
  font-size: var(--ovelia-typography-fontsize-sm);
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--ovelia-colors-sage-500);
  color: var(--ovelia-colors-sage-700);
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
  border-color: var(--ovelia-colors-semantic-error);
  color: var(--ovelia-colors-terracotta-700);
}