/* Container */
.cform-grid-container {
  width: 100%;
  height: 100%;
  padding: 2rem;
}

/* Rows */
.cform-row {
  display: flex;
  gap: 1rem;
}

/* Columns */
.cform-col-half {
  flex: 1;
  min-width: 0;
}

.cform-col-full {
  flex: 1 1 100%;
}

.cform-grid-container p {
  width: 100%;
}

.cform.cform form > div, .cform form > p {
  margin-bottom: 0;
}

.cform-response-output {
  display: none !important;
}

/* Fallback hint below the submit button. Without its own typography the
   paragraph inherits the global page kit's 88px display type. */
.cform-fallback-hint {
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

/* Tablet and Mobile Responsive */
@media (max-width: 1024px) {
  .cform-row {
    flex-direction: column;
  }

  .cform-col-half {
    flex: 1 1 100%;
  }

  .cform-grid-container {
    padding: 1.5rem;
  }
}

/* Mobile Only - Optional tighter spacing */
@media (max-width: 768px) {
  .cform-grid-container {
    padding: 1rem;
  }

  .cform-row {
    gap: 0.75rem;
  }
}

/* Honeypot for bots (api/contact/send.php): kept off-screen, never shown to people. */
.cform-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline validation messages (contact-form.js). Explicit type: the page kit
   would otherwise hand them its 88px display size. */
.cform-not-valid-tip {
  display: block;
  margin-top: 0.35rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: #ff4757;
}

.cform-form-control[aria-invalid="true"] {
  border-color: #ff4757;
  box-shadow: 0 0 0 1px #ff4757;
}

.cform-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}