/**
 * ============================================================================
 * ACCESSIBILITY UTILITIES
 * Priya Glam Studio & Academy
 * ============================================================================
 *
 * WCAG-oriented utility classes for screen-reader content, keyboard focus,
 * touch targets and user preference support.
 *
 * The main `.skip-to-content` component is intentionally defined in
 * base/global.css so it has one source of truth.
 * ============================================================================
 */


/* ============================================================================
   SCREEN-READER ONLY
   ============================================================================ */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/**
 * Visually hidden until keyboard focus enters the element.
 *
 * Example:
 * <a class="sr-only-focusable" href="#main-content">Skip to content</a>
 */

.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ============================================================================
   KEYBOARD FOCUS UTILITIES
   ============================================================================ */

.focus-ring:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: var(--focus-offset);

    border-radius: var(--radius-sm);
}

.focus-ring-inset:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: -3px;
}


/* ============================================================================
   MINIMUM TOUCH TARGET
   ============================================================================ */

/**
 * WCAG 2.2-friendly helper for compact icon buttons and controls.
 */

.touch-target {
    min-width: 44px;
    min-height: 44px;
}


/* ============================================================================
   ACCESSIBLE DISABLED STATE
   ============================================================================ */

.is-aria-disabled,
[aria-disabled="true"].is-aria-disabled {
    cursor: not-allowed;

    opacity: var(--opacity-disabled);

    pointer-events: none;
}


/* ============================================================================
   TARGET / ANCHOR VISIBILITY
   ============================================================================ */

.skip-target,
:target {
    scroll-margin-top:
        calc(var(--header-height) + var(--spacing-lg));
}


/* ============================================================================
   MOTION OVERRIDE UTILITY
   ============================================================================ */

/**
 * Use only when a specific interactive element must remain completely static.
 */

.no-motion,
.no-motion *,
.no-motion *::before,
.no-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}


/* ============================================================================
   HIGH CONTRAST PREFERENCE
   ============================================================================ */

@media (prefers-contrast: more) {
    .focus-ring:focus-visible,
    .focus-ring-inset:focus-visible {
        outline-width: 3px;
    }
}


/* ============================================================================
   WINDOWS FORCED-COLORS MODE
   ============================================================================ */

@media (forced-colors: active) {
    .focus-ring:focus-visible,
    .focus-ring-inset:focus-visible {
        outline: 2px solid Highlight;
    }

    .btn-whatsapp {
        border: 1px solid ButtonText;
    }
}