/**
* ERROR PREVENTION CSS
* Prevents common CSS errors automatically
*/

/* ============================================
  PREVENT INVISIBLE LINKS
  ============================================ */

/* Ensure links are always visible */
a:not(.btn):not(.social-icon) {
    color: var(--link-color, #0066cc) !important;
    text-decoration: underline;
}

a:not(.btn):not(.social-icon):visited {
    color: var(--link-visited-color, #551a8b) !important;
}

/* Prevent links from being same color as background */
a:not(.btn):not(.social-icon):not([style*="color"]) {
    color: var(--link-color, #0066cc);
}

/* ============================================
  PREVENT OVERFLOW CLIPPING
  ============================================ */

/* Ensure navigation links aren't clipped */
.nav-links,
.navbar a,
.bottom-nav-bar a {
    position: relative;
    z-index: 1;
}

/* Prevent parent overflow from clipping children */
.navbar,
.bottom-nav-bar,
footer {
    overflow: visible !important;
}

/* ============================================
  ENSURE FOCUS STYLES
  ============================================ */

/* Always show focus for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--primary-color, #0066cc) !important;
    outline-offset: 2px !important;
}

/* ============================================
  PREVENT Z-INDEX ISSUES
  ============================================ */

/* Consistent z-index scale */
.navbar {
    z-index: 1000 !important;
}

.modal,
.popup,
.overlay {
    z-index: 2000 !important;
}

.sidebar {
    z-index: 1500 !important;
}

.bottom-nav-bar {
    z-index: 1000 !important;
}

/* ============================================
  PREVENT MOBILE VIEWPORT ISSUES
  ============================================ */

/* Use modern viewport units */
@media (max-width: 768px) {
    .full-height {
        height: 100dvh; /* Dynamic viewport height */
        min-height: 100svh; /* Small viewport height fallback */
    }
}

/* ============================================
  ENSURE CONTRAST
  ============================================ */

/* Minimum contrast for text */
body,
p,
span,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color, #333);
    background-color: var(--background-color, #fff);
}

/* Ensure links have sufficient contrast */
a {
    color: var(--link-color, #0066cc);
}

/* ============================================
  PREVENT LAYOUT SHIFTS
  ============================================ */

/* Reserve space for images */
img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Reserve space for fonts */
body {
    font-family: var(--font-family, system-ui, sans-serif);
}

/* ============================================
  EDGE-SPECIFIC FIXES
  ============================================ */

/* Ensure links are visible in Edge */
@supports (-ms-ime-align: auto) {
    a {
        color: #0066cc !important;
        text-decoration: underline !important;
    }
}

/* Fix for Edge hardware acceleration issues */
.navbar,
.bottom-nav-bar {
    transform: translateZ(0);
    will-change: transform;
}

/* ============================================
  PREVENT TOUCH TARGET ISSUES
  ============================================ */

/* Ensure minimum touch target size */
a,
button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
}

/* ============================================
  PREVENT VISITED LINK INVISIBILITY
  ============================================ */

/* Safe visited link styles */
a:visited {
    color: var(--link-visited-color, #551a8b);
}

/* Prevent visited links from becoming invisible */
a:visited:not([style*="color"]) {
    color: var(--link-visited-color, #551a8b) !important;
}