/*
 * Contact template only (page-templates/contact.php). Loaded only on pages
 * using that template. Everything else (type, colours, cards, fields,
 * buttons, links) comes from style.css.
 */

/* Left column: intro and contact details */
.contact-intro{display:flex;flex-direction:column;gap:22px}
.contact-details{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--border)}
.contact-details li{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--border)}
.contact-details .link{font-size:var(--fs-lead);width:fit-content}
.contact-sticker{margin-top:18px}
@media (max-width:900px){.contact-sticker{display:none}}

/* Right column: form card. The heading sat inside the form's 20px gap plus 4px */
.contact-card > .h3{margin-bottom:24px}
.contact-card .ff-btn-submit{width:100%}
.form-note{font-size:var(--fs-small);opacity:.8}

/* After sending, Fluent Forms swaps the form for its confirmation message */
.contact-card .ff-message-success{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.contact-card:has(.ff-message-success) > :is(.h3,.form-note){display:none}