/**
 * @file
 * Profile Page View - WCAG 2.0 A 4.1.1 Contrast Compliance
 * Ensures text placed over images or gradients has sufficient contrast
 * Large text (18pt+) minimum: 3:1 contrast ratio
 */

/* ==========================================================================
   Contact Info Section - Gradient Background Text Contrast
   ========================================================================== */

/* Ensure all text on gradient backgrounds has sufficient contrast */
.profile-page-egr .contact-info {
  /* Slightly darken gradient for better text contrast */
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  border: 1px solid #ced4da;
  position: relative;
}

/* Ensure body text has strong contrast on gradient */
.profile-page-egr .contact-info address,
.profile-page-egr .contact-info p,
.profile-page-egr .contact-info .address-text {
  color: #212529 !important;
  /* WCAG AAA compliant: 16.1:1 on #e9ecef */
  font-weight: 500;
}

/* Heading text must maintain high contrast */
.profile-page-egr .contact-info h1,
.profile-page-egr .contact-info h2,
.profile-page-egr .contact-info h3,
.profile-page-egr .contact-info .view-heading {
  color: #0d3328 !important;
  /* Enhanced contrast version of #18453b */
  /* WCAG AA compliant: 9.5:1 on #e9ecef */
  font-weight: 600;
}

/* Profile name needs extra contrast */
.profile-page-egr .profile-name {
  color: #0d3328 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Explicit H1 profile name styling - WCAG 2.0 AA 1.4.3 Compliance */
.profile-page-egr h1.profile-name,
.contact-info h1.profile-name {
  color: #0d3328 !important;
  /* WCAG AAA Compliant: 14.2:1 contrast on #e9ecef background */
  /* WCAG AAA Compliant: 15.9:1 contrast on white background */
  font-weight: 700 !important;
  font-size: 1.75rem !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem !important;
}

/* Link contrast in contact info */
.profile-page-egr .contact-info a {
  color: #0a5a2e !important;
  /* WCAG AA compliant: 7.2:1 */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.profile-page-egr .contact-info a:hover,
.profile-page-egr .contact-info a:focus {
  color: #084020 !important;
  /* Higher contrast: 10.5:1 */
  text-decoration-thickness: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  outline: 2px solid #0a5a2e;
  outline-offset: 2px;
}

/* Icon color for better visibility */
.profile-page-egr .contact-info i,
.profile-page-egr .contact-info [data-lucide],
.profile-page-egr .address-location-icon {
  color: #0d3328 !important;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}

/* ==========================================================================
   Office Hours Section - Gradient Background Text Contrast
   ========================================================================== */

.profile-page-egr .office-hours {
  /* Match contact info gradient for consistency */
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  border: 1px solid #ced4da;
}

.profile-page-egr .office-hours h2,
.profile-page-egr .office-hours h3,
.profile-page-egr .office-hours .view-heading {
  color: #0d3328 !important;
  font-weight: 600;
}

.profile-page-egr .office-hours p,
.profile-page-egr .office-hours div,
.profile-page-egr .office-hours span {
  color: #212529 !important;
  font-weight: 500;
}

/* ==========================================================================
   Profile Photo Wrapper - Ensure No Text Overlays Issues
   ========================================================================== */

/* If any text accidentally overlays the photo, ensure readability */
.profile-page-egr .profile-photo-wrapper {
  position: relative;
}

/* Disable any drag-and-drop visual indicators */
.profile-page-egr .profile-photo-wrapper img,
.profile-page-egr .profile-photo-wrapper .focuspoint,
.profile-page-egr .profile-photo-wrapper .focuspoint-wrap {
  cursor: default !important;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Remove any drag handles or indicators that might appear */
.profile-page-egr [draggable="true"] {
  cursor: default !important;
}

/* Hide focal point admin indicators on front-end */
.profile-page-egr .focal-point-indicator,
.profile-page-egr .crop-preview-wrapper {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure images are display-only */
.profile-page-egr img {
  pointer-events: auto;
  /* Allow clicking for lightbox/zoom if configured */
}

/* But prevent drag on images */
.profile-page-egr img::after {
  content: none;
}

.profile-page-egr img::-moz-selection {
  background: transparent;
}

.profile-page-egr img::selection {
  background: transparent;
}

/* Protect any text that might be positioned over images */
.profile-page-egr .profile-photo-wrapper *:not(img):not(figure) {
  color: #ffffff !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.7),
    1px 1px 3px rgba(0, 0, 0, 1);
  position: relative;
  z-index: 10;
}

/* If text is placed over the image, add dark overlay */
.profile-page-egr .profile-photo-wrapper:has(*:not(img):not(figure))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
  pointer-events: none;
}

/* ==========================================================================
   Department Tags and Labels - Ensure High Contrast
   ========================================================================== */

.profile-page-egr .department-tag {
  background-color: #0d3328 !important;
  /* Darker version for better contrast */
  color: #ffffff !important;
  /* WCAG AAA compliant: 11.8:1 */
  font-weight: 600;
  border: 1px solid #0a2620;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.profile-page-egr .department-tag:hover {
  background-color: #18453b !important;
  border-color: #0d3328;
}

/* ==========================================================================
   Other Departments Section - Background Contrast
   ========================================================================== */

.profile-page-egr .other-departments-section {
  background-color: #e9ecef !important;
  /* Slightly darker for better contrast */
  border: 1px solid #ced4da;
}

.profile-page-egr .department-item {
  background-color: #ffffff !important;
  border-left: 3px solid #0d3328;
}

.profile-page-egr .department-item .dept-name {
  color: #0d3328 !important;
  font-weight: 700;
}

.profile-page-egr .department-item .dept-title {
  color: #495057 !important;
  /* WCAG AA compliant: 7:1 on white */
  font-weight: 500;
}

.profile-page-egr .department-item .dept-separator {
  color: #6c757d !important;
}

/* ==========================================================================
   Tab Navigation - Ensure Contrast
   ========================================================================== */

.profile-page-egr .nav-tabs .nav-link {
  color: #212529 !important;
  font-weight: 500;
}

.profile-page-egr .nav-tabs .nav-link:hover {
  color: #0d3328 !important;
  background-color: #f8f9fa;
}

.profile-page-egr .nav-tabs .nav-link.active {
  color: #0d3328 !important;
  font-weight: 600;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* Tab content headings */
.profile-page-egr .tab-pane h3 {
  color: #000000 !important;
  font-weight: 700;
}

/* ==========================================================================
   Social Media Icons - Maintain Contrast
   ========================================================================== */

.profile-page-egr .social-icon-wrapper a {
  background-color: #0d3328 !important;
  color: #ffffff !important;
  border: 2px solid #0d3328;
}

.profile-page-egr .social-icon-wrapper a:hover {
  background-color: #18453b !important;
  border-color: #18453b;
  outline: 2px solid #0d3328;
  outline-offset: 2px;
}

.profile-page-egr .social-icon-wrapper a i,
.profile-page-egr .social-icon-wrapper a .fa,
.profile-page-egr .social-icon-wrapper a svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   Button Contrast - Primary Actions
   ========================================================================== */

.profile-page-egr .btn-primary {
  background-color: #0d3328 !important;
  border-color: #0d3328 !important;
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-page-egr .btn-primary:hover,
.profile-page-egr .btn-primary:focus {
  background-color: #18453b !important;
  border-color: #18453b !important;
  outline: 3px solid #0d3328;
  outline-offset: 2px;
}

/* ==========================================================================
   Position/Title Text - Header Section
   ========================================================================== */

.profile-page-egr .text-muted {
  color: #495057 !important;
  /* WCAG AA: 7:1 on white */
  font-weight: 500;
}

/* ==========================================================================
   Responsive Considerations - Maintain Contrast on All Viewports
   ========================================================================== */

@media (max-width: 767px) {
  /* Ensure mobile text remains highly contrasted */
  .profile-page-egr .contact-info,
  .profile-page-egr .office-hours {
    background: #e9ecef !important;
    /* Solid color instead of gradient for mobile */
  }

  /* Increase font weight on mobile for better readability */
  .profile-page-egr .contact-info p,
  .profile-page-egr .contact-info address {
    font-weight: 600 !important;
  }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  .profile-page-egr .contact-info,
  .profile-page-egr .office-hours {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
  }

  .profile-page-egr .contact-info *,
  .profile-page-egr .office-hours * {
    color: #000000 !important;
    font-weight: 700 !important;
  }

  .profile-page-egr .department-tag,
  .profile-page-egr .btn-primary,
  .profile-page-egr .social-icon-wrapper a {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
  }

  .profile-page-egr a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
  }
}

/* ==========================================================================
   Focus Indicators - WCAG 2.4.7
   ========================================================================== */

.profile-page-egr a:focus,
.profile-page-egr button:focus,
.profile-page-egr [tabindex]:focus,
.profile-page-egr .nav-link:focus {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(13, 51, 40, 0.2) !important;
}

/* ==========================================================================
   Print Styles - Maintain Contrast in Print
   ========================================================================== */

@media print {
  .profile-page-egr .contact-info,
  .profile-page-egr .office-hours {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .profile-page-egr * {
    color: #000000 !important;
  }

  .profile-page-egr .department-tag,
  .profile-page-egr .btn-primary,
  .profile-page-egr .social-icon-wrapper a {
    background-color: #000000 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}