/* ==========================================================================
   DIGITAL INERTIA — UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.glass-panel {
  background: var(--glass);
  border: var(--border-hair);
  border-radius: var(--radius-l);
  backdrop-filter: blur(10px);
}

/* ---------- Form fields (contact page + newsletter share styling) ---------- */
.field {
  position: relative;
  margin-bottom: var(--sp-4);
}
.field label {
  display: block;
  font-size: 0.8rem;
  color: var(--c-light);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--c-white-hair);
  border-radius: var(--radius-m);
  padding: 0.95rem 1.1rem;
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-white-faint);
  background: var(--glass-strong);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-white-faint); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.form-note {
  font-size: 0.8rem;
  color: var(--c-light);
  margin-top: var(--sp-2);
}
.form-status {
  margin-top: var(--sp-3);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-m);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-success { display: block; border: 1px solid var(--c-white-faint); background: var(--glass); }
.form-status.is-error { display: block; border: 1px solid var(--c-white-faint); background: var(--glass); color: var(--c-light); }

/* Focus visibility across the site (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--c-white);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1200;
  background: var(--btn-bg); color: var(--btn-text); padding: 0.8rem 1.2rem;
  border-radius: var(--radius-m);
}
.skip-link:focus { left: var(--gutter); top: var(--sp-2); }