/**
 * =========================================
 * HAPPYHEALTH ACCESSIBILITY LAYER (hh-accessibility.css)
 * =========================================
 *
 * Purpose: Structural accessibility additions. No visual design here —
 * purely WCAG 2.1 AA compliance infrastructure.
 *
 * Load LAST in all base templates (after hh-theme.css and app-creative.min.css)
 * so these rules take precedence over Hyper theme defaults.
 *
 * Contents:
 *   0. Hyper theme variable overrides (CRITICAL — Hyper defines these at ~2.5:1)
 *   1. Skip-to-content link
 *   2. Focus-visible ring (keyboard navigation)
 *   3. Reduced motion support
 *   4. Windows High Contrast Mode support
 *   5. ARIA live region (screen reader announcements)
 * =========================================
 */


/* =========================================
   0. HYPER THEME VARIABLE OVERRIDES
   The Hyper theme minified CSS defines --ct-body-color as rgb(145,156,167)
   (~2.5:1 contrast) and --ct-secondary-color similarly. Our hh-theme.css
   fallback values never fire because Hyper always provides the variable.
   We override them here directly so all theme components pick up the
   accessible colours automatically.
   ========================================= */
:root {
    /* Body text: was rgb(145,156,167) ~2.5:1 → now #595959 7.0:1 AAA on white */
    --ct-body-color: #595959;
    --ct-body-color-rgb: 89, 89, 89;

    /* Secondary / muted text: was ~#98a6ad ~2.5:1 → now #5c6b72 5.3:1 AA on white */
    --ct-secondary-color: #5c6b72;
    --ct-text-muted: #5c6b72;

    /* Headings: Hyper sometimes uses a separate heading colour variable */
    --ct-headings-color: #2d3748;

    /* Tailwind grey-400/500 variants used in some V2 templates */
    --tw-color-gray-400: #5c6b72;  /* was #9ca3af ~2.8:1 */
    --tw-color-gray-500: #595959;  /* was #6b7280 ~4.6:1 */

    /* Horizontal nav links: was #8a949f ~3.2:1 → now #4e5d6a ~6.0:1 AA on white */
    --ct-navbar-light-color: #4e5d6a;
    --ct-navbar-light-hover-color: #2d3748;
    --ct-navbar-light-active-color: #1a202c;

    /* Nav link base (used by all nav-link elements) */
    --ct-nav-link-color: #4e5d6a;
    --ct-nav-link-hover-color: #2d3748;
}

/* Explicit body colour rule — sets the base inherited value.
   Any element with an explicit color rule will override this. */
body {
    color: #595959;
}

/* Muted / secondary text — targets Bootstrap and Hyper utility classes */
.text-muted,
.text-secondary,
small {
    color: #5c6b72 !important;
}

/* Detail labels in hh-theme (uppercase section labels) */
.detail-label {
    color: #5c6b72 !important;
}

/* Table header muted text */
.table-minimal thead th {
    color: #5c6b72 !important;
}

/* =========================================
   NAVBAR / TOPNAV LINK COLOURS
   Variable overrides alone are not sufficient because Hyper may have
   hardcoded rules with higher specificity. Belt-and-braces direct rules.
   ========================================= */

/* Horizontal topnav (light) navigation links */
.topnav .navbar-nav .nav-link,
.topnav-menu .navbar-nav .nav-link,
.navbar-light .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: #4e5d6a !important;
}

.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link:focus,
.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
    color: #2d3748 !important;
}

.topnav .nav-item.active > a,
.topnav .navbar-nav .nav-link.active,
.navbar-light .nav-link.active {
    color: #0b6c7f !important;
}

/* Tab nav pills — inactive items (e.g. appointment tabs, settings tabs) */
.nav-pills .nav-link:not(.active) {
    color: #4e5d6a;
}

.nav-pills .nav-link:not(.active):hover {
    color: #2d3748;
}

/* Dropdown items in nav */
.topnav .dropdown-item,
.navbar-light .dropdown-item {
    color: #4e5d6a;
}

.topnav .dropdown-item:hover,
.topnav .dropdown-item:focus,
.navbar-light .dropdown-item:hover {
    color: #2d3748;
}


/* =========================================
   1. SKIP-TO-CONTENT LINK
   First focusable element on every page.
   Hidden off-screen until keyboard focus lands on it,
   then slides in at the top-left corner.
   ========================================= */
.skip-to-content {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
    white-space: nowrap;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 99999;
    background: #0b6c7f;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}


/* =========================================
   2. FOCUS-VISIBLE RING
   Replaces Hyper theme's box-shadow-only focus, which is
   invisible in Windows High Contrast Mode and suppressed
   by some Hyper component styles.

   Uses :focus-visible (not :focus) so mouse clicks do NOT
   show the ring — only keyboard navigation does.
   ========================================= */

/* Global focus ring */
:focus-visible {
    outline: 3px solid #0b6c7f !important;
    outline-offset: 2px !important;
}

/* Buttons: override Hyper's box-shadow-only :focus state */
.btn:focus-visible,
.btn-pink:focus-visible,
.btn-teal:focus-visible,
.btn-outline-pink:focus-visible,
.btn-outline-teal:focus-visible,
.btn-hh-cta:focus-visible,
.btn-hh-secondary:focus-visible,
.btn-hh-ghost:focus-visible {
    outline: 3px solid #0b6c7f !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Nav links */
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid #0b6c7f !important;
    outline-offset: 2px !important;
}

/* Form controls — complement the universal_form.css fix */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 3px solid #0b6c7f !important;
    outline-offset: 1px !important;
}


/* =========================================
   3. REDUCED MOTION
   Respects the OS-level "Reduce motion" preference.
   Disables all CSS transitions and animations, and
   specifically nullifies hover transforms that are
   used throughout the theme for cards, buttons, and nav items.
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Card hover transform */
    .card:hover,
    .card-bento:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }

    /* Button hover lift */
    .btn:hover {
        transform: none !important;
    }

    /* Sidebar nav-link slide */
    .sidebar .nav-link:hover {
        transform: none !important;
    }

    /* Bootstrap offcanvas and modal transitions */
    .offcanvas,
    .modal,
    .collapse {
        transition: none !important;
    }
}


/* =========================================
   4. WINDOWS HIGH CONTRAST MODE (HCM)
   When the user has enabled Windows High Contrast Mode (or any
   forced-colors OS setting), browsers ignore CSS background/color
   properties. We ensure borders and focus indicators use system
   colours so they remain visible.
   ========================================= */
@media (forced-colors: active) {

    /* Ensure all interactive elements have a visible border */
    .btn,
    .badge,
    .card,
    .card-bento,
    .form-control,
    .form-select,
    .form-check-input {
        border: 1px solid ButtonText;
    }

    /* Solid buttons: restore text contrast */
    .btn-pink,
    .btn-teal,
    .btn-hh-cta,
    .btn-hh-secondary {
        forced-color-adjust: none;
        background-color: ButtonFace;
        color: ButtonText;
        border: 2px solid ButtonText;
    }

    /* Focus rings use the system Highlight colour */
    :focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    /* Skip link */
    .skip-to-content:focus {
        background: Highlight !important;
        color: HighlightText !important;
        outline: 3px solid ButtonText !important;
    }
}


/* =========================================
   5. ARIA LIVE REGION
   Always present in the DOM (added by every base template).
   Screen readers monitor this element and announce any text
   injected into it. A small JS snippet (in the base templates)
   copies Django flash message text into this element so screen
   readers announce success/error messages.
   ========================================= */
.a11y-announcer {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}