/**
 * Utilities Component Styles
 *
 * This file contains utility classes for common patterns including:
 * - Accessibility helpers (visually hidden, skip links)
 * - UI components (welcome message, more news link)
 */

@layer utilities {
    /* ========================================
       Accessibility Utilities
       ======================================== */

    /* Visually hidden but accessible to screen readers */
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Skip link for keyboard navigation */
    .skip-link {
        position: absolute;
        inset-block-start: -40px;
        inset-inline-start: 0;
        background: var(--color-primary);
        color: var(--color-text-bright);
        padding: var(--space-2) var(--space-3);
        z-index: var(--z-modal);
        transition: inset-block-start var(--transition-fast);
    }

    .skip-link:focus {
        inset-block-start: 0;
    }

    /* ========================================
       UI Utilities
       ======================================== */

    /* Welcome message for logged-in users */
    .welcome-message {
        padding: var(--space-3);
        margin-block-start: var(--space-5);
        background-color: var(--color-bg-card);
        border-radius: var(--radius-sm);
    }

    /* More news link styling */
    .more-news-link {
        text-align: center;
        margin-block-start: var(--space-5);
    }

    .more-news-link a {
        display: inline-block;
        padding: var(--space-2) var(--space-4);
        background-color: var(--color-primary);
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast);
    }

    .more-news-link a:hover {
        background-color: var(--color-primary-dark);
        text-decoration: none;
    }
}