/*
 * carigen/contact-form (carigen-core includes/contact-form.php).
 * Card, field and button styles come from the page's generated CSS (mockup
 * .contact-form-box on contact, .contact-form on home); this file adds what the
 * mockup sets inline plus the states only a working form has.
 */

/* Mockup inline styles */
.contact-form > h3 { font-size: 1.15rem; color: #fff; margin-bottom: 20px; }
.contact-form .btn-gold { width: 100%; }
.contact-form-box .btn-gold { width: 100%; padding: 14px; }

/* Visible keyboard focus (the mockup only changes the border colour) */
.wp-block-carigen-contact-form :is(input, select, textarea):focus-visible { box-shadow: 0 0 0 3px rgba(30,143,160,.35); }
.wp-block-carigen-contact-form .btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Honeypot: off screen for people, still in the markup for bots */
.form-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Notice after a submission (receives focus) */
.form-notice { border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: .88rem; line-height: 1.6; }
.form-notice:focus { outline: 3px solid var(--teal); outline-offset: 2px; }
.form-notice.is-success { background: var(--teal-l); border: 1.5px solid #a8e0e8; color: var(--teal-d); }
.form-notice.is-error { background: #fdecea; border: 1.5px solid #f5b8b2; color: #7f1d1d; }
.form-notice ul { margin: 6px 0 0; padding-left: 18px; }
.form-notice a { color: inherit; text-decoration: underline; }

/* Field errors */
.field-error { font-size: .8rem; line-height: 1.5; font-weight: 500; color: #b91c1c; }
.form-group.has-error :is(input, select, textarea) { border-color: #b91c1c; }
.contact-form .field-error { color: #fca5a5; }
.contact-form .form-group.has-error :is(input, select, textarea) { border-color: #fca5a5; }