/* ==========================================================================
   CONTACT page (contact.html)
   Page-specific styles. Requires ../styles.css (global tokens & components).
   ========================================================================== */

@media (min-width: 64rem) {
  .split-contact { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

/* ---------- Contact ---------- */
.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-detail { display: flex; gap: 1rem; }
.contact-detail .badge-circle { width: 3rem; height: 3rem; flex-shrink: 0; background: var(--secondary); color: var(--primary); }
.contact-detail .badge-circle .icon { width: 1.25rem; height: 1.25rem; }
.contact-detail h2 { font-size: 1rem; font-weight: 600; font-family: var(--font-sans); }
.contact-detail .body { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.contact-detail .body a.phone { display: block; min-height: 2.75rem; padding-block: 0.5rem; font-weight: 600; color: var(--primary); }
.contact-detail .body a:hover { text-decoration: underline; }
.contact-detail .body a.mail { color: var(--primary); word-break: break-all; }
.contact-detail .emerg-note { margin-top: 0.5rem; display: block; font-weight: 600; color: var(--emergency); }
.map-card { border-radius: var(--radius-2xl); background: var(--secondary); padding: 1.5rem; }
.map-card > .icon { width: 2rem; height: 2rem; color: var(--primary); }
.map-card h2 { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.map-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.map-card .btn { margin-top: 1.25rem; }

.form-card { scroll-margin-top: 8rem; border: 1px solid var(--border); border-radius: var(--radius-3xl); background: var(--card); padding: 1.5rem; }
@media (min-width: 48rem) { .form-card { padding: 2.25rem; } }
.form-card > h2 { font-size: 1.5rem; font-weight: 600; }
.notice { margin-top: 0.75rem; border-radius: var(--radius-xl); background: var(--accent); color: var(--accent-foreground); padding: 1rem; font-size: 0.875rem; line-height: 1.5; }
.form { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.field label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1; }
.field .control { margin-top: 0.5rem; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 2.75rem; border: 1px solid var(--input); border-radius: var(--radius-md);
  background: transparent; padding: 0.5rem 0.75rem; font-size: 1rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--emergency); }
.form .btn { width: 100%; }
@media (min-width: 40rem) { .form .btn { width: auto; align-self: flex-start; } }
.form-success { margin-top: 2rem; border-radius: var(--radius-2xl); background: var(--secondary); padding: 2rem; text-align: center; }
.form-success .icon { width: 3rem; height: 3rem; margin-inline: auto; color: var(--wellness); }
.form-success h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.form-success p { margin-top: 0.5rem; color: var(--muted-foreground); }