/**
 * Accessibility Styles
 * 
 * WCAG 2.2 AA Compliance
 * - Skip-navigation link (Requirement 9.8)
 * - Focus indicators for all focusable elements (Requirements 9.1, 9.4)
 * - Colour contrast fixes (Requirement 9.3)
 * - Form validation styles (Requirement 9.9)
 * - Keyboard navigation support (Requirement 9.1)
 */

/* ==========================================================================
   1. Skip-navigation link (Requirement 9.8)
   ========================================================================== */

.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 0.75rem 1.5rem;
  background-color: #1a1a2e;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom-right-radius: 4px;
  transition: top 0.2s ease;
}

.skip-nav:focus {
  position: absolute;
  top: 0;
  left: 0;
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
  color: #ffffff;
  text-decoration: none;
}

/* ==========================================================================
   2. Global focus indicators - 2px visible ring with 3:1 contrast (Req 9.4)
   ========================================================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
summary:focus {
  outline: 2px solid #1a5dab;
  outline-offset: 2px;
}

/* For browsers that support :focus-visible, only show outline on keyboard focus */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid #1a5dab;
  outline-offset: 2px;
}

/* ==========================================================================
   3. Colour contrast fixes (Requirement 9.3)
   Override insufficient contrast colours to meet WCAG AA 4.5:1 ratio
   #999999 on white = 2.85:1 (FAIL) → #595959 on white = 7.0:1 (PASS)
   ========================================================================== */

body {
  color: #595959;
}

/* Override theme elements that use #999999 for body text */
.tt-el-caption p,
.tt-el-caption h5,
.tt-el-price .el-desc,
.tt-el-price .el-lists,
.tt-el-icon-list .el-icon-item span {
  color: #595959;
}

/* Footer text contrast fix */
#footer .widget p,
#footer .widget address {
  color: #595959;
}

/* Widget links in footer */
.widget ul li a,
.widget ol li a,
.widget ol li span,
.widget .recent-posts .rp-item h5 a {
  color: #595959;
}

/* Blog/article meta text */
article.blog-item .entry-meta,
article.blog-item .entry-meta a {
  color: #595959;
}

/* Portfolio and misc elements */
.portfolio-item .entry-title .el-cats a,
.footer-call2action .entry-text a {
  color: #595959;
}

/* Form input text (not placeholders - those are acceptable at lower contrast) */
form input:not([type="submit"]),
form textarea,
form select {
  color: #2a2a2a;
}

/* Placeholder text at WCAG-passing contrast (placeholders are not required text) */
form input:not([type="submit"])::placeholder,
form textarea::placeholder {
  color: #767676;
}

/* Comment form elements */
.comments .comment-content,
.comment-respond .comment-notes {
  color: #595959;
}

/* Submenu links need sufficient contrast */
header#header nav ul.menu > li ul li a {
  color: #2a2a2a;
}

/* ==========================================================================
   4. Accessible form validation styles (Requirement 9.9)
   ========================================================================== */

/* Error state for form fields */
.form-field-error input,
.form-field-error select,
.form-field-error textarea {
  border-color: #d32f2f;
  box-shadow: 0 0 0 1px #d32f2f;
}

/* Inline error message */
.form-error-message {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.form-error-message::before {
  content: "⚠ ";
}

/* Success state for form fields */
.form-field-success input,
.form-field-success select,
.form-field-success textarea {
  border-color: #2e7d32;
}

/* Live region for announcing errors to screen readers */
.form-error-summary {
  border: 2px solid #d32f2f;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #fde8e8;
  color: #d32f2f;
}

.form-error-summary h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: #d32f2f;
}

.form-error-summary ul {
  margin: 0;
  padding-left: 1.5rem;
}

.form-error-summary a {
  color: #d32f2f;
  text-decoration: underline;
}

/* ==========================================================================
   5. Visually hidden utility (for screen-reader-only labels)
   ========================================================================== */

.sr-only,
.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;
}

/* ==========================================================================
   6. Keyboard navigation enhancements (Requirement 9.1)
   ========================================================================== */

/* Ensure dropdown menus are keyboard accessible */
header#header nav ul.menu > li:focus-within > ul {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

/* Offcanvas close button should be clearly visible */
.offcanvas .btn-close:focus-visible {
  outline: 2px solid #1a5dab;
  outline-offset: 2px;
  box-shadow: none;
}