/* CertiForm public form styles
 * Accessible, responsive, self-contained styles for the public forms
 * Scope: styles target the public form container (#certi-form) and related widgets
 */
:root{
  --cf-bg: #ffffff;
  --cf-foreground: #1e1e1e;
  --cf-muted: #6b6b6b;
  --cf-accent: #075985; /* teal/blue accent with good contrast */
  --cf-accent-contrast: #ffffff;
  --cf-error: #b91c1c; /* red */
  --cf-focus: 3px solid rgba(7,89,133,0.15);
  --cf-radius: 6px;
  --cf-gap: 12px;
}

/* Mobile-first single-column layout */
#certi-form, form[id^="certi-"] {
  box-sizing: border-box;
  max-width: 760px; /* slightly narrower so the form reads comfortably in wide content areas */
  width: 100%;
  margin: 0 auto;
  padding: 18px;
  background: var(--cf-bg);
  color: var(--cf-foreground);
  font-size: 16px;
  line-height: 1.35;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

form[id^="certi-"] .certi-form-row,
form[id^="certi-"] .form-group {
  display: block;
  margin-bottom: 18px; /* increased spacing between fields */
}
/* Ensure consistent spacing for the common markup used in templates */
/* Top-level spacing for fields and groupings: ensure generous vertical rhythm */
form[id^="certi-"] > div,
form[id^="certi-"] fieldset,
form[id^="certi-"] .certi-group,
form[id^="certi-"] .form-group,
form[id^="certi-"] .certi-form-row {
  margin-bottom: 22px !important;
}
  /* Radio labels: stack and give breathing room */
  form[id^="certi-"] label.certi-radio-label,
  form[id^="certi-"] .certi-group label,
  form[id^="certi-"] [role="radiogroup"] label {
    /* Radio option labels should be readable but not as heavy as form labels */
    display: block !important;
    margin: 8px 0 !important;
    font-weight: 600 !important; /* lighter than main labels */
    color: var(--cf-foreground) !important;
    font-size: 1rem !important;
  }
  form[id^="certi-"] input[type="radio"] { margin-right: 8px !important; }

/* Uniform label styling for consistency */
/* Stronger scoping to prevent theme overrides (Blocksy, Twenty Twenty-Five) */
form[id^="certi-"] label,
form[id^="certi-"] fieldset.certi-group label,
form[id^="certi-"] .certi-form-row label {
  display: block;
  margin-bottom: 12px !important;
  font-weight: 700 !important; /* ensure bold labels */
  color: var(--cf-foreground) !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

/* ID-specific overrides: highest plugin-side specificity to counter aggressive theme rules */
#certi-form label,
#certi-feedback-form label,
#certi-verify-form label {
  display: block !important;
  margin-bottom: 10px !important;
  font-weight: 700 !important;
  color: var(--cf-foreground) !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

#certi-form label > span[aria-hidden="true"],
#certi-feedback-form label > span[aria-hidden="true"],
#certi-verify-form label > span[aria-hidden="true"] {
  color: var(--cf-error) !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}

/* Make legend and section headings visually consistent with labels */
form[id^="certi-"] legend, form[id^="certi-"] fieldset legend, form[id^="certi-"] #participant-info-legend, form[id^="certi-"] #candidate-info-legend { 
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 8px;
}

/* Required marker styling (covers plain spans and dedicated marker class) */
/* Strongly target required markers inside plugin forms so theme CSS doesn't override */
form[id^="certi-"] .certi-required-marker,
form[id^="certi-"] label > span[aria-hidden="true"],
form[id^="certi-"] label.required::after,
form[id^="certi-"] label[data-required]::after {
  color: var(--cf-error) !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
}

/* Fallback: append an asterisk via ::after for labels marked required */
form[id^="certi-"] label.required::after,
form[id^="certi-"] label[data-required]::after {
  content: ' *';
  color: var(--cf-error) !important;
  font-weight: 700;
}

/* Required marker: only mark optional fields to reduce clutter when possible */
label .cf-optional {
  font-weight: 400;
  color: var(--cf-muted);
  margin-left: 6px;
  font-size: 0.95em;
}

form[id^="certi-"] input[type="text"],
form[id^="certi-"] input[type="email"],
form[id^="certi-"] input[type="tel"],
form[id^="certi-"] input[type="date"],
form[id^="certi-"] select,
form[id^="certi-"] textarea,
form[id^="certi-"] input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px; /* large tap target */
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--cf-radius);
  background: #fff;
  color: var(--cf-foreground);
  font-size: 1rem;
}

form[id^="certi-"] textarea { min-height: 120px; resize: vertical; }

form[id^="certi-"] input:focus, form[id^="certi-"] select:focus, form[id^="certi-"] textarea:focus {
  outline: none !important;
  box-shadow: var(--cf-focus) !important;
  border-color: var(--cf-accent) !important;
}

/* Ensure consistent vertical rhythm inside plugin forms: theme may set input margins to 0 */
form[id^="certi-"] input[type="text"],
form[id^="certi-"] input[type="email"],
form[id^="certi-"] input[type="tel"],
form[id^="certi-"] select,
form[id^="certi-"] textarea {
  margin-bottom: 18px !important;
}

/* Ensure fieldset groups have space above and below to separate visually from surrounding fields */
form[id^="certi-"] fieldset.certi-group {
  margin-top: 18px !important;
  margin-bottom: 26px !important;
  padding: 12px !important;
}

/* Error states */
.error, form[id^="certi-"] [aria-invalid="true"] {
  border-color: var(--cf-error) !important;
  box-shadow: 0 0 0 3px rgba(185,28,28,0.08);
}

form[id^="certi-"] [id^="err-"] {
  color: var(--cf-error) !important;
  font-size: 0.95em;
  margin-top: 6px;
}

  /* Legend-style headings used in feedback template: ensure their asterisk is red and spacing preserved */
  form[id^="certi-"] div[id$="-legend"],
  form[id^="certi-"] legend {
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    color: var(--cf-foreground) !important;
  }
  form[id^="certi-"] div[id$="-legend"] span,
  form[id^="certi-"] legend span {
    color: var(--cf-error) !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
  }

  /* Specific: make APSCA legend exactly match label spacing and size */
  /* Make APSCA legend match other label sizes and resist theme overrides */
  form[id^="certi-"] fieldset.certi-group > legend#apsca-legend,
  form[id^="certi-"] fieldset.certi-group > legend {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    font-size: 1.0625rem !important; /* 17px on base 16px */
    color: var(--cf-foreground) !important;
  }

/* Top-level notices */
#certi-notice {
  padding: 10px 12px;
  border-radius: var(--cf-radius);
  margin-bottom: 14px;
  display: none;
}
#certi-notice.success { background: rgba(4,120,87,0.08); color: #065f46; }
#certi-notice.error   { background: rgba(185,28,28,0.06); color: var(--cf-error); }

/* Small inline SVG icons for success and error notices. Kept decorative but presentationally helpful. */
#certi-notice::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}
#certi-notice.success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23065f46'><path d='M12 0a12 12 0 1 0 0 24A12 12 0 0 0 12 0zm-1.2 17.4l-4.2-4.2 1.7-1.6 2.5 2.5 5.5-6 1.7 1.4-7.2 8.5z'/></svg>");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}
#certi-notice.error::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b91c1c'><path d='M11 7h2v6h-2V7zm0 8h2v2h-2v-2z'/><path d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0z'/></svg>");
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

/* Buttons inside plugin forms only */
form[id^="certi-"] button, form[id^="certi-"] .cf-btn {
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--cf-accent-contrast);
  background: var(--cf-accent);
  text-align: center;
  min-height: 44px;
}
form[id^="certi-"] button:focus, form[id^="certi-"] .cf-btn:focus { box-shadow: var(--cf-focus); }

form[id^="certi-"] button[disabled], form[id^="certi-"] .cf-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Secondary link-style button */
.cf-btn-link {
  background: transparent;
  color: var(--cf-accent);
  padding: 8px 10px;
  border-radius: 6px;
}

/* Gov ID delete control styling */
#gov_id_delete {
  display: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--cf-accent);
  color: var(--cf-accent-contrast);
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-top: 8px;
}
#gov_id_delete:focus { outline: none; box-shadow: var(--cf-focus); }

/* Progress UI */
.cf-progress { margin-top: 6px; }
form[id^="certi-"] .cf-progress .progress { background: #f3f4f6; border-radius: 6px; overflow: hidden; height: 10px; }
form[id^="certi-"] .cf-progress .cf-progress-bar { height: 10px; background: var(--cf-accent); width: 0%; transition: width 160ms linear; }
form[id^="certi-"] .cf-progress .cf-progress-text { display: inline-block; margin-top: 6px; color: var(--cf-muted); font-size: 0.85em; vertical-align: middle; }
.cf-progress .cf-progress-text.large { font-size: 1.0em; }

/* small spacing helpers used by the UI */
.cf-small { font-size: 0.85em; }
.cf-mt-2 { margin-top: 6px; }

/* Accessibility helpers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Radio groups: readable spacing and inline labels */
form[id^="certi-"] [role="radiogroup"], form[id^="certi-"] [role="group"] { margin-bottom: 12px; }
form[id^="certi-"] input[type="radio"] { margin-right: 8px; }
form[id^="certi-"] label > input[type="radio"] { margin-right: 8px; }

/* Ensure inline section headings (used in feedback template) match label size */
form[id^="certi-"] .cf-section-title,
form[id^="certi-"] [id$="-legend"] strong,
form[id^="certi-"] div[id$="-legend"] strong {
  font-weight: 700;
  font-size: 1rem;
}

/* Target the legend container divs used in feedback template (they include <strong>) */
form[id^="certi-"] div[id$="-legend"] {
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-bottom: 8px !important;
  color: var(--cf-foreground) !important;
}

/* Fieldsets for logical grouping */
form[id^="certi-"] fieldset.certi-group { border: 1px solid #e6e6e6; padding: 16px; border-radius: 8px; margin-bottom: 18px; }
form[id^="certi-"] fieldset.certi-group legend { font-weight: 700; padding: 0 6px; font-size: 1rem; }

/* Responsive adjustments */
@media (min-width: 640px) {
  #certi-form, form[id^="certi-"] { padding: 22px; }
  .cf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (min-width: 1024px) {
  #certi-form, form[id^="certi-"] { font-size: 17px; }
}

/* Ensure color contrast for links inside form */
#certi-form a, form[id^="certi-"] a { color: var(--cf-accent); }

/* Submit button container and alignment helpers */
.certi-form-footer, .certi-form-actions { margin-top: 18px; }
.certi-form-actions button, .certi-form-actions .cf-btn { display: inline-block; }

/* Ensure file input wrapper and progress don't create large stacked numbers */
.cf-progress .cf-progress-text { white-space: nowrap; }


/* Submit button styling and alignment for plugin forms */
form[id^="certi-"] button[type="submit"],
#certi_submit,
#certi-feedback-submit-btn {
  background: var(--cf-accent);
  color: var(--cf-accent-contrast);
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
  margin-top: 12px;
}
#certi_submit:focus, #certi-feedback-submit-btn:focus { box-shadow: var(--cf-focus); outline: none; }

/* Small form footer helper */
.certi-form-footer { margin-top: 18px; font-size: 0.95em; color: var(--cf-muted); }

/* Make focus visible for keyboard users on file input wrapper */
input[type="file"]:focus { box-shadow: var(--cf-focus); }

/* Share page / verify page styles (appended) */
.certi-share-card, .certi-verify-card {
  max-width: 760px;
  margin: 18px auto;
  padding: 18px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: var(--cf-bg);
}
.certi-share-card h1 { margin: 0 0 12px 0; font-size: 1.25rem; }
.certi-info-row { margin-bottom: 8px; }
.certi-info-row strong { display: inline-block; width: 160px; font-weight:700; }
.certi-share-actions { margin-top: 12px; }
.certi-share-actions a,
.certi-share-actions button { display:inline-block; margin-right:8px; padding:8px 12px; border-radius:6px; text-decoration:none; }
.certi-share-actions button { border:none; background:var(--cf-accent); color:var(--cf-accent-contrast); cursor:pointer; }

/* Verify form card */
#certi-verify-form { max-width: 520px; margin: 18px auto; padding: 18px; border: 1px solid #e6e6e6; border-radius: 8px; background: var(--cf-bg); }
#certi-verify-form input[type="text"] { width:100%; padding:10px; margin-bottom:12px; }
#certi-verify-btn { background: var(--cf-accent); color: var(--cf-accent-contrast); padding:10px 14px; border-radius:6px; border:none; cursor:pointer; }

@media print {
  .certi-share-actions, #certi-form, .certi-verify-card { display:none; }
}