/* ==========================================================
   PROGRESS — /kontakt/
   Style tylko dla podstrony kontaktowej. NIE dotyka style.css -
   uzywa tych samych tokenow (--navy, --teal, --line, --font-*...),
   zdefiniowanych w :root w style.css, ktory jest zaladowany
   wczesniej w <head>. Doklada tylko jeden nowy, lokalny dla
   tej strony token: --error.
   ========================================================== */
:root{
  --error: #C0392B;
}

/* Strona bez hero, wiec .site-nav dostaje klase is-visible
   bezposrednio w HTML (main.js odslania go dopiero po
   przewinieciu hero, ktorego tu nie ma) - stad dodatkowy
   odstep pod nawigacja na gorze sekcji. */
.contact-section{ padding-top:8rem; }
.contact-section .section__head h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  color:var(--navy); font-size:var(--fs-h2); margin:0 0 var(--space-2);
}
.contact-intro{ color:var(--muted); }
@media (max-width:575.98px){ .contact-section{ padding-top:6.5rem; } }

.contact-form{
  max-width:36rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  margin-top:var(--space-3);
}
.form-field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.35rem; }
.form-field label{
  font-family:var(--font-display); font-weight:500; font-size:.92rem; color:var(--navy);
}
.form-optional{ font-weight:400; color:var(--muted); font-size:.82rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:.75rem .9rem; border:1px solid var(--line); border-radius:.6rem;
  background:var(--paper);
  transition:border-color .15s ease, background-color .15s ease;
  max-width:none;
}
.form-field input:focus,
.form-field textarea:focus{ border-color:var(--teal); background:#fff; }
.form-field textarea{ min-height:9rem; resize:vertical; }
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"]{ border-color:var(--error); }
.form-field-error{
  min-height:1.1em; font-size:.82rem; color:var(--error); margin:0; max-width:none;
}

.form-consent{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.92rem; color:var(--muted); margin-bottom:.4rem;
}
.form-consent input{ margin-top:.2rem; flex:0 0 auto; }
.form-consent label{ max-width:none; }
.form-consent a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
.form-consent a:hover{ color:var(--navy); }

.altcha-status{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--muted);
  margin:1.1rem 0;
}
.altcha-status[hidden]{ display:none; }
.altcha-status__dot{
  width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto;
  background:var(--line);
}
.altcha-status[data-state="solving"] .altcha-status__dot{
  background:var(--teal); animation:altcha-pulse 1.1s ease-in-out infinite;
}
.altcha-status[data-state="ready"] .altcha-status__dot{ background:var(--teal); }
.altcha-status[data-state="error"] .altcha-status__dot{ background:var(--error); animation:none; }
@keyframes altcha-pulse{
  0%,100%{ opacity:.35; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .altcha-status[data-state="solving"] .altcha-status__dot{ animation:none; }
}

.form-submit-row{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.form-status{ font-size:.92rem; min-height:1.3em; margin:0; max-width:none; }
.form-status--success{ color:var(--teal); font-weight:500; }
.form-status--error{ color:var(--error); }

.contact-form .btn-progress--solid:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
}