/* ========================================
   SHARED COMPONENTS - Reusable UI Elements
======================================== */

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

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #dd230f;
  color: #fff;
}

.btn-primary:hover {
  background:#cd3423;
  text-decoration: none;
}

.btn-secondary {
  background: #6c757d;
  color: #fff;
}

.btn-secondary:hover {
  background: #545b62;
  text-decoration: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(221, 35, 15, 0.3);
}

/* Form Components */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #1a2a3a;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  max-width: 325px; 
  margin: auto;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  font-size: 1rem;
  background: #f8fafb;
  transition: border-color 0.2s;
}

.form-control:focus {
  outline: none;
}

.form-control:focus-visible {
  border-color: #dd230f;
  box-shadow: 0 0 0 2px rgba(221, 35, 15, 0.2);
}

.form-control::placeholder {
  color: #6c757d;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23dd230f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
  font-weight: 500;
}

select.form-control:hover {
  border-color: #dd230f;
  background-color: #fff;
}

select.form-control:focus {
  outline: none;
}

select.form-control:focus-visible {
  border-color: #dd230f;
  box-shadow: 0 0 0 2px rgba(221, 35, 15, 0.2);
  background-color: #fff;
}

/* Options keep dark text + normal weight even while the closed select is in
   its grey placeholder state below (they'd otherwise inherit it). */
select.form-control option {
  padding: 0.5rem;
  color: #1a2a3a;
  font-weight: 400;
}

/* A <select> can't have ::placeholder — its empty-value option ("Province
   (Optional)" etc.) renders as regular selected text, which shows darker and
   bolder than the placeholder text in the sibling inputs. While the
   placeholder option is the one selected, match the input placeholder style
   (.form-control::placeholder above); picking a real value returns the
   select to normal text styling. Browsers without :has() keep the old look. */
select.form-control:has(option[value='']:checked) {
  color: #6c757d;
  font-weight: 400;
}

.form-field input.is-valid,
.form-field select.is-valid,
.form-control.is-valid {
  border-color: #28a745;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-field input.is-invalid,
.form-field select.is-invalid,
.form-control.is-invalid {
  border-color: #dc3545;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

/* Shared validate-as-you-go: form group layout + feedback text (petition & donation) */
.form-grid .form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.form-grid .form-group .form-control {
  margin: 0;
}
/* Reserve one line so feedback doesn't shift layout when it appears */
.form-grid .form-group-feedback {
  font-size: 0.95em;
  margin: 0.1em 0 0;
  max-width: 325px;
  min-height: 1.25em;
  text-align: left;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.form-grid .form-group-feedback:not(:empty) {
  opacity: 1;
}
.form-grid .form-group-feedback--valid {
  color: #28a745;
}
.form-grid .form-group-feedback--error {
  color: #dc3545;
}
.form-grid .form-group-feedback .email-typo-suggestion,
.form-grid .form-group-feedback .email-typo-keep {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
.form-grid .form-group-feedback .email-typo-suggestion {
  font-weight: 600;
}
.form-grid .form-group-feedback .email-typo-keep {
  margin-left: 0.35em;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .form-grid .form-group-feedback {
    max-width: 100%;
  }
}

/* Checkboxes and Radio buttons */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 325px; 
  margin: auto;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  margin-top: 0.25rem;
  accent-color: #dd230f;
}

.form-check label {
  margin-bottom: 0;
  font-weight: normal;
}

/* Required Field Indicator */
.required-asterisk {
  color: #dc3545;
  font-weight: bold;
}

/* Alert Messages */
.alert {
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.alert-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.alert-error,
.alert-danger {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.alert-warning {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}

.alert-info {
  background-color: #cce7ff;
  border: 1px solid #89cdf1;
  color: #0c5460;
}

/* Inbound funnel confirmation — first line of prose (JS-injected); not an alert banner */
.ctf-inbound-context-lead {
  margin: 0 0 1rem;
  padding: 0;
  font-size: inherit;
  line-height: 1.6;
  font-weight: 600;
  color: #1a2a3a;
}

/* Form Messages */
.form-messages {
  padding: 1rem;
  border-radius: 4px;
  margin-top: 1rem;
}

.form-messages.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.form-messages.error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.form-messages p {
  margin: 0;
  font-weight: 500;
}

.form-messages ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
}

.form-messages li {
  margin: 0.25rem 0;
}

/* Cards */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.card.ctf-template {
  position: relative;
  max-width: 900px;
  width: calc(100% - 2rem);
  margin: 0.5rem auto;
  padding: 1rem;
}

.card-header {
  border-bottom: 1px solid #e1e8ed;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.card-title {
  margin-bottom: 0;
  font-size: 1.25rem;
}

/* Content Blocks */
.content-block {
  background: linear-gradient(135deg, #f8fafb 0%, #e1e8ed 100%);
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 12px;
}

.content-block.warning {
  background: #fff8e1;
}

.content-block.success {
  background: #e8f5e8;
}

.content-block.error {
  background: #ffebee;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #dd230f;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Form Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
  max-width: 700px;
  margin: auto;
}

.form-grid .form-group {
  margin-bottom: 0.5rem;
}

.form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

/* Template Image Float */
.template-image-float img,
.petition-image img,
.survey-image img,
.newsroom-image img {
  max-width: 250px;
  height: auto;
  float: left;
  margin-right: 2em;
  border-radius: 6px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

/* Template Header */
.template-header h1,
.petition-template h1,
.survey-template h1,
.newsroom-template h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
  text-align: center;
}

/* Template Form Submit Button */
.template-form button[type="submit"],
.petition-form button[type="submit"],
.survey-form button[type="submit"] {
  margin-top: 0.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .error-message {
    font-size: 0.8rem;
  }

  .form-field input.is-valid,
  .form-field input.is-invalid,
  .form-field select.is-valid,
  .form-field select.is-invalid,
  .form-control.is-valid,
  .form-control.is-invalid {
    background-size: calc(0.6em + 0.3rem) calc(0.6em + 0.3rem);
    background-position: right calc(0.3em + 0.15rem) center;
  }

  .form-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .form-grid .form-control {
    max-width: 100%;
  }
  
  .btn {
    width: 100%;
    text-align: center;
  }
  
  .card {
    padding: 1rem;
  }
  
  .content-block {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 700px) {
  .template-image-float img,
  .petition-image img,
  .survey-image img,
  .newsroom-image img {
    float: none;
    display: block;
    width: min(100%, 360px);
    margin: 0 auto 1rem;
  }
}

/* Form pages: extra scroll runway below the footer on mobile/tablet so
   virtual keyboards don't permanently hide submit buttons or page-end
   content. Gated by body.ctf-keyboard-scroll-padding (functions.php). */
@media (max-width: 1024px) {
  body.ctf-keyboard-scroll-padding .site-footer {
    padding-bottom: min(50vh, 320px);
  }
}