/* ─── Contact Form ────────────────────────────────────────────────────────────
   Formuläret med streckad ram, centrerat inuti site-frame. */
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(300px, 100%);
  border: 1px dashed var(--color-frame);
  padding: 1.5rem;
  background: var(--color-bg);
}

/* Guld-accent lager – som site-frame och photo-card */
.contact-form::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px dashed var(--color-gold);
  clip-path: inset(0 50% 0 0);
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Titel ───────────────────────────────────────────────────────────────────*/
.form-title {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* ─── Fält ────────────────────────────────────────────────────────────────────*/
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-frame); /* Enkel understrykning */
  padding: 0.2rem 0;
  outline: none;
  resize: none;
  transition: border-color var(--transition);
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--color-gold); /* Guld när aktivt */
}

/* ─── Skicka-knapp ────────────────────────────────────────────────────────────*/
.form-submit {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  border: 1px dashed var(--color-frame);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition:
    border-color var(--transition),
    color var(--transition);
}

.form-submit:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}