/**
 * Global Utilities & Fixes for ChooseAI.link
 * This file contains utility classes and fixes that should be applied globally
 */

/* === PREVENT FLASH OF UNSTYLED CONTENT (FOUC) === */
html.dark {
    visibility: hidden;
}

html.dark.theme-ready,
html:not(.dark) {
    visibility: visible;
}

/* === IMPROVED FOCUS ACCESSIBILITY === */
*:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* === UTILITY CLASSES === */
.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;
}

/* === PERFORMANCE OPTIMIZATIONS === */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* === PRINT STYLES === */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a::after {
        content: " (" attr(href) ")";
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    :root {
        --border-primary: #000000;
        --text-muted: #000000;
    }
    
    html.dark {
        --border-primary: #ffffff;
        --text-muted: #ffffff;
    }
}

/* === COMPONENT SPECIFIC FIXES === */
.tool-card img[src=""],
.tool-card img:not([src]),
.tool-card img[src="#"] {
    display: none;
}

/* === CUSTOM SCROLLBAR FOR WEBKIT === */
@supports (scrollbar-width: thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--text-muted) transparent;
    }
}

/* === LOADING STATE IMPROVEMENTS === */
.loading-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* === MOBILE IMPROVEMENTS === */
@media (max-width: 768px) {
    .hero-bg h1 {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .step {
        padding: 1.5rem;
    }
    
    .tool-card {
        padding: 1rem;
    }
}

/* === MOTION PREFERENCES === */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .loading,
    .theme-transitioning * {
        animation: none !important;
        transition: none !important;
    }
}

/* === FORM IMPROVEMENTS === */
input[type="text"]:invalid,
input[type="email"]:invalid,
textarea:invalid {
    border-color: var(--error);
}

input[type="text"]:invalid:focus,
input[type="email"]:invalid:focus,
textarea:invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* === BUTTON IMPROVEMENTS === */
button:disabled,
.role-btn:disabled,
.task-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* === LINK IMPROVEMENTS === */
a:not([class]) {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
}

a:not([class]):hover {
    text-decoration-color: var(--accent-primary);
}

/* === TABLE IMPROVEMENTS === */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
}

th {
    background-color: var(--bg-secondary);
    font-weight: 600;
}