/* Link Component Global Styles
 *
 * Uses CSS variables defined in variables.css
 * Matches Figma Link component (Default / Hover / Focused / Visited / Disabled).
 * Tokens: --text/link #2d6e8d, --text/brand #17315a, --border/border-focus #2d6e8d,
 *         visited #7a3a7e, neutral/70 #969392.
 *
 * WCAG 2.1 AA Compliance:
 * - Always-visible underline (1.4.1 Use of Color)
 * - Focus-visible 2px ring with 3:1+ contrast (2.4.7 Focus Visible)
 * - Color contrast 4.5:1+ against white (1.4.3 Contrast Minimum)
 *
 * Note: !important is required on color rules to override MudBlazor's
 * mud-primary-text class which sets color via the theme palette.
 */

/* Transition for interactive states */
.dhcs-link:not(.mud-link-disabled) {
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease, text-underline-offset 0.15s ease,
        outline-color 0.15s ease;
}

/* Default state — overrides MudBlazor mud-primary-text */
.dhcs-link {
    color: var(--dhcs-color-text-link) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Hover: --text/brand */
.dhcs-link:not(.mud-link-disabled):hover {
    color: var(--dhcs-color-primary) !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Visited (limited styling per browser :visited rules) */
.dhcs-link:not(.mud-link-disabled):visited {
    color: var(--dhcs-color-text-link-visited) !important;
}

.dhcs-link:not(.mud-link-disabled):visited:hover {
    color: var(--dhcs-color-text-link-visited) !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dhcs-link:not(.mud-link-disabled):focus {
    outline: none;
}

/* Focus visible: 2px ring --border/border-focus (teal), 4px radius — matches Figma Focus column */
.dhcs-link:not(.mud-link-disabled):focus-visible {
    outline: 2px solid var(--dhcs-color-secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Disabled state */
.dhcs-link.mud-link-disabled,
.dhcs-link[aria-disabled="true"] {
    color: var(--dhcs-color-disabled-light) !important;
    cursor: not-allowed;
    text-decoration-color: var(--dhcs-color-disabled-light);
    pointer-events: none;
}