/**
 * Text Resize Styles for WCAG 2.2 AA Compliance - SSO Integration
 * Refactored to use HTML element font-size only
 */

/* Base font size is set directly on the HTML element via JavaScript */
/* Default is 100% (16px in most browsers) */
/* All elements inherit font size from HTML element */

/* Text resize controls container */
.topnav .nav-item.text-resize-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background-color: transparent;
  height: 38px; /* Match exact topnav height */
  position: relative;
  margin-right: 10px;
  line-height: 38px;
  width: 200px; /* Fixed width as requested */
  max-width: 200px;
}

/* Text resize buttons - Updated for WCAG 2.2 AA compliance */
.topnav .nav-item.text-resize-controls button {
  background: transparent;
  border: none;
  color: #000000; /* Black for maximum contrast */
  cursor: pointer;
  font-size: 12px;
  margin: 0 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: auto;
  min-width: auto;
  transition: all 0.2s ease;
  vertical-align: middle;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600; /* Added for better visibility */
}

.topnav .nav-item.text-resize-controls button:hover,
.topnav .nav-item.text-resize-controls button:focus {
  color: #BD1A1A; /* Match the red color used in the site */
  text-decoration: underline;
  outline: none;
}

.topnav .nav-item.text-resize-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.topnav .nav-item.text-resize-controls button:disabled:hover,
.topnav .nav-item.text-resize-controls button:disabled:focus {
  color: #0C3F57;
  text-decoration: none;
  outline: none;
}

/* Text size indicator - Updated for WCAG 2.2 AA compliance */
.topnav .nav-item.text-resize-controls .text-size-indicator {
  margin: 0 5px;
  font-size: 12px;
  color: #000000; /* Black for maximum contrast */
  font-weight: 600; /* Added for better visibility */
  width: auto;
  min-width: auto;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
}

/* Icon styles - Updated for WCAG 2.2 AA compliance */
.topnav .nav-item.text-resize-controls .text-resize-icon {
  font-weight: 600; /* Added for better visibility */
  font-size: 2em;
  line-height: 1;
  display: inline-block;
  text-align: center;
  color: #000000; /* Black for maximum contrast */
}

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

/* Make sure the controls are visible and accessible on mobile */
@media screen and (max-width: 768px) {
  .topnav .nav-item.text-resize-controls {
    padding: 0;
    margin-right: 5px;
  }
  
  .topnav .nav-item.text-resize-controls button {
    padding: 0px 2px;
    height: 18px; /* Further reduced for mobile */
    font-size: 9px;
    margin: 0 1px;
  }
  
  .topnav .nav-item.text-resize-controls .text-size-indicator {
    font-size: 9px;
    min-width: 24px;
    margin: 0 1px;
  }
  
  /* Adjust icon size for mobile */
  .topnav .nav-item.text-resize-controls .icon {
    font-size: 10px;
  }
  
  /* Handle very small screens */
  @media screen and (max-width: 480px) {
    .topnav .nav-item.text-resize-controls {
      margin-right: 2px;
    }
    
    .topnav .nav-item.text-resize-controls button {
      padding: 1px 2px;
    }
    
    .topnav .nav-item.text-resize-controls .text-size-indicator {
      min-width: 24px;
    }
  }
}