/**
 * Self-Help Remote Assistance Upload Styles
 * WCAG 2.1 AA Compliant
 */

/* Verification messages */
.self-help-verification-message {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
}

.self-help-verification-message h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #1b1b1b;
}

/* Alert messages - accessible */
.alert {
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  border: 2px solid;
  border-radius: 4px;
  font-size: 1.125rem;
}

.alert-success {
  background-color: #d4edda;
  border-color: #28a745;
  color: #155724;
}

.alert-info {
  background-color: #d1ecf1;
  border-color: #17a2b8;
  color: #0c5460;
}

.alert-warning {
  background-color: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

/* Admin table styles */
.self-help-submissions-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.self-help-submissions-table th,
.self-help-submissions-table td {
  padding: 0.75rem;
  border: 1px solid #dfe1e2;
  text-align: left;
}

.self-help-submissions-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.self-help-submissions-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.self-help-submissions-table tr:hover {
  background-color: #e6f2ff;
}

/* Responsive table */
@media screen and (max-width: 768px) {
  .self-help-submissions-table {
    font-size: 0.875rem;
  }

  .self-help-submissions-table th,
  .self-help-submissions-table td {
    padding: 0.5rem;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .alert {
    border-width: 3px;
  }

  .self-help-submissions-table th,
  .self-help-submissions-table td {
    border: 2px solid currentColor;
  }
}

/* Focus indicators */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #005ea2;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .self-help-submissions-table {
    page-break-inside: avoid;
  }

  .alert {
    border: 2px solid #000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* Webform page container styling - match other pages */
.webform-submission-self-help-remote-assistance-add-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Ensure proper spacing around webform */
.jcc-section.jcc-section--container {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 64em) {
  .jcc-section.jcc-section--container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Form field styling for consistency */
.webform-submission-self-help-remote-assistance-add-form .form-item {
  margin-bottom: 1.5rem;
}

.webform-submission-self-help-remote-assistance-add-form label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.webform-submission-self-help-remote-assistance-add-form input[type="text"],
.webform-submission-self-help-remote-assistance-add-form input[type="email"],
.webform-submission-self-help-remote-assistance-add-form input[type="tel"],
.webform-submission-self-help-remote-assistance-add-form input[type="file"] {
  width: 100%;
  max-width: 600px;
  padding: 0.5rem;
  border: 1px solid #71767a;
  border-radius: 0;
}

.webform-submission-self-help-remote-assistance-add-form input[type="text"]:focus,
.webform-submission-self-help-remote-assistance-add-form input[type="email"]:focus,
.webform-submission-self-help-remote-assistance-add-form input[type="tel"]:focus {
  outline: 2px solid #005ea2;
  outline-offset: 0;
  border-color: #005ea2;
}

/* Submit button styling */
.webform-submission-self-help-remote-assistance-add-form .form-actions {
  margin-top: 2rem;
}

.webform-submission-self-help-remote-assistance-add-form .webform-button--submit {
  background-color: #005ea2;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

.webform-submission-self-help-remote-assistance-add-form .webform-button--submit:hover {
  background-color: #0050d8;
}

.webform-submission-self-help-remote-assistance-add-form .webform-button--submit:focus {
  outline: 2px solid #005ea2;
  outline-offset: 2px;
}

/* Radio buttons styling */
.webform-submission-self-help-remote-assistance-add-form .form-type-radio {
  display: inline-block;
  margin-right: 2rem;
}

/* Webform page - ensure proper page width and alignment */
.page-node-type-webform .jcc-section--container,
.path-webform .jcc-section--container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 64em) {
  .page-node-type-webform .jcc-section--container,
  .path-webform .jcc-section--container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Ensure webform itself doesn't exceed container */
.webform-submission-form {
  max-width: 100%;
}

/* Page title styling */
.path-webform .page-title {
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #1b1b1b;
}

/* Description text */
.path-webform .webform-description {
  margin-bottom: 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Force proper layout for self-help webform page */
body.path-self-help-webform #main-wrapper,
body.path-self-help-webform .layout-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body.path-self-help-webform #content,
body.path-self-help-webform .region-content {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 64em) {
  body.path-self-help-webform #content,
  body.path-self-help-webform .region-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Ensure breadcrumb is visible */
body.path-self-help-webform .usa-breadcrumb {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2rem;
}

@media (max-width: 64em) {
  body.path-self-help-webform .usa-breadcrumb {
    padding: 1rem;
  }
}

/* Phone number description - fix contrast */
#edit-phone-number--description,
.webform-submission-self-help-remote-assistance-add-form .description {
  color: #000000;
}