/*
 * Contact Plugin CSS
 * - Accessible, responsive styles for the contact form
 * - Key selectors you can target for overrides:
 *   .contact-form, .contact-form__form, .form-row, .form-row--actions,
 *   .form-message.success, .form-message.error
 * - To override these styles in a theme, load a stylesheet after the plugin
 *   assets or increase selector specificity.
 */

:root{
      --cf-bg: #ffffff;
      --cf-border: #e6e9ec;
      --cf-accent: #1967d2;
      --cf-accent-600: #145bb5;
      --cf-success: #2ecc71;
      --cf-error: #e74c3c;
      --cf-text: #111827;
      --cf-muted: #6b7280;
      --cf-radius: 8px;
}

.contact-form{
      max-width: 720px;
      margin: 28px auto;
      padding: 22px;
      background: var(--cf-bg);
      border: 1px solid var(--cf-border);
      border-radius: var(--cf-radius);
      box-shadow: 0 4px 18px rgba(15,23,42,0.04);
      color: var(--cf-text);
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.contact-form__form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 18px;
}

.form-row{ display:flex; flex-direction:column; }
.form-row label{ font-weight:600; margin-bottom:6px; color:var(--cf-text); font-size:14px; }
.form-row input,
.form-row textarea{ font-size:14px; padding:10px 12px; border:1px solid var(--cf-border); border-radius:6px; background: #fff; color:var(--cf-text); }
.form-row input:focus,.form-row textarea:focus{ outline:3px solid rgba(25,103,210,0.12); border-color:var(--cf-accent); }
.form-row textarea{ min-height:130px; resize:vertical; }

.form-row--actions{ grid-column: 1 / -1; display:flex; justify-content:flex-end; align-items:center; }

.button.primary{ background: linear-gradient(180deg,var(--cf-accent),var(--cf-accent-600)); color:#fff; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:600; }
.button.primary:hover{ transform:translateY(-1px); }

.form-message{ display:none; padding:10px 12px; border-radius:6px; margin-bottom:12px; font-weight:600; }
.form-message.success{ background:var(--cf-success); color:#fff; }
.form-message.error{ background:var(--cf-error); color:#fff; }

.contact-form .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Make first column span when small screens */
@media (max-width:720px){
      .contact-form__form{ grid-template-columns: 1fr; }
      .form-row--actions{ justify-content:stretch; }
}

/* High contrast and reduced motion support */
@media (prefers-reduced-motion: reduce){
      .button.primary{ transition:none; }
}

/* Utility */
.hidden{ display:none !important; }