/*
 * Kouider — Jetpack Contact Form (red & black glassmorphism)
 * Styles the contact form placed in .k-contact-form on the homepage.
 * Mirrors .k-pass-row inputs, .k-contact-chip glass cards, .k-btn red pills.
 */

/* --- Section spacing (top + bottom) --- */
.k-contact-form {
  margin: clamp(2.5rem, 6vw, 5rem) 0;
}
.k-contact-form::before {
  content: "// send a message";
  display: block;
  color: var(--wp--preset--color--k-red-bright);
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}

/* --- Glass card + full-width chain ---
   Jetpack sets the block to flex-column with align-items:flex-start, which
   shrink-wraps the fields. Force stretch + explicit widths all the way down. */
.k-contact-form .jetpack-contact-form-container,
.k-contact-form .jetpack-contact-form__form {
  width: 100%;
  max-width: 100%;
}
.k-contact-form .wp-block-jetpack-contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  gap: 18px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.k-contact-form .wp-block-jetpack-contact-form .grunion-field-wrap {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  align-self: stretch !important;
}

/* --- Field wrappers: labels above inputs, full width --- */
.k-contact-form .wp-block-jetpack-contact-form .grunion-field-label,
.k-contact-form .wp-block-jetpack-contact-form .wp-block-jetpack-label {
  display: block;
  width: 100%;
  margin-bottom: .45rem;
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--wp--preset--color--k-muted);
}
.k-contact-form .grunion-label-required {
  color: var(--wp--preset--color--k-red-bright);
  font-weight: 800;
}

/* --- Inputs --- */
.k-contact-form .wp-block-jetpack-contact-form input[type="text"],
.k-contact-form .wp-block-jetpack-contact-form input[type="email"],
.k-contact-form .wp-block-jetpack-contact-form textarea {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--wp--preset--color--k-white);
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .95rem;
  letter-spacing: .04em;
  outline: none;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.k-contact-form .wp-block-jetpack-contact-form textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}
.k-contact-form .wp-block-jetpack-contact-form input::placeholder,
.k-contact-form .wp-block-jetpack-contact-form textarea::placeholder {
  color: rgba(255,255,255,.25);
}
.k-contact-form .wp-block-jetpack-contact-form input:focus,
.k-contact-form .wp-block-jetpack-contact-form textarea:focus {
  border-color: rgba(255,38,56,.6);
  box-shadow: 0 0 0 3px rgba(255,38,56,.15);
  background: rgba(255,38,56,.03);
}
.k-contact-form .wp-block-jetpack-contact-form input:focus-visible,
.k-contact-form .wp-block-jetpack-contact-form textarea:focus-visible {
  outline: none;
}

/* --- Submit button (red pill, matches .k-btn / .k-pass-row button) --- */
.k-contact-form .wp-block-jetpack-contact-form .form-button-submit {
  width: 100%;
}
.k-contact-form .wp-block-jetpack-contact-form .form-button-submit .wp-block-button__link,
.k-contact-form .wp-block-jetpack-contact-form button[type="submit"] {
  padding: 12px 30px;
  border: none;
  border-radius: 999px;
  background: var(--wp--preset--color--k-red);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,38,56,.3);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.k-contact-form .wp-block-jetpack-contact-form .form-button-submit .wp-block-button__link:hover,
.k-contact-form .wp-block-jetpack-contact-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,38,56,.45);
  background: var(--wp--preset--color--k-red-bright);
}

/* --- Validation / state messages --- */
.k-contact-form .contact-form__input-error {
  margin-top: .4rem;
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--wp--preset--color--k-red-bright);
}
.k-contact-form .wp-block-jetpack-contact-form .contact-form-submission,
.k-contact-form .wp-block-jetpack-contact-form .grunion-form-success {
  margin-top: .5rem;
  padding: 12px 16px;
  border: 1px solid rgba(255,38,56,.35);
  border-radius: 10px;
  background: rgba(255,38,56,.06);
  color: var(--wp--preset--color--k-white);
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: .84rem;
}

/* --- Mobile --- */
@media (max-width: 781px) {
  .k-contact-form .wp-block-jetpack-contact-form {
    padding: 20px 18px;
  }
}