/**
 * IdeaDunes - WCAG AA Accessibility Enhancements
 * Complements the design system without overriding it.
 * Provides focus indicators, screen reader utilities, and
 * respects user preferences (reduced motion, high contrast).
 * Version: 2.0.0
 */

/* ====================================================================
   WCAG AA COLOR TOKENS (reference only — used by design system)
   ==================================================================== */

:root {
    --wcag-focus-ring: #667eea;
    --wcag-focus-offset: 2px;
    --wcag-min-target: 44px; /* Touch-friendly minimum */
}

/* ====================================================================
   FOCUS INDICATORS — KEYBOARD NAVIGATION
   ==================================================================== */

/* Visible focus ring for keyboard users */
:focus-visible {
    outline: 3px solid var(--wcag-focus-ring) !important;
    outline-offset: var(--wcag-focus-offset) !important;
}

/* Remove focus ring for mouse clicks (modern browsers) */
:focus:not(:focus-visible) {
    outline: none;
}

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

.sr-only,
.visually-hidden {
    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;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ====================================================================
   SKIP-TO-CONTENT LINK
   ==================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    background: #6c587b;
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    top: 0;
}

/* ====================================================================
   FOOTER TEXT — LIGHT BACKGROUND CORRECTION
   Footer now uses a light gradient background.
   Text must be dark for WCAG AA contrast.
   ==================================================================== */

.footer-text,
.footer-copy,
.footer-info {
    color: var(--public-muted, #6b7280);  /* 5.9:1 on white */
}

/* Footer bottom bar (dark background) keeps light text */
.footer-bottom .footer-brand a,
.footer-bottom .footer-copyright,
.footer-bottom .footer-legal-link,
.footer-bottom .footer-social a {
    color: rgba(255, 255, 255, 0.9);
}

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

button,
.btn,
[role="button"],
a.nav-link {
    min-height: var(--wcag-min-target);
}

/* ====================================================================
   FORM ACCESSIBILITY ENHANCEMENTS
   ==================================================================== */

label[for] {
    cursor: pointer;
}

/* iOS zoom prevention — inputs must be >= 16px */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */

@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;
    }
}

/* ====================================================================
   HIGH CONTRAST MODE
   ==================================================================== */

@media (prefers-contrast: more) {
    :root {
        --wcag-focus-ring: #000000;
    }

    button,
    .btn {
        border: 3px solid #000000;
    }

    .form-control,
    .form-select,

    /* ====================================================================
       NAVBAR CONTRAST FIX (WCAG AA — required 4.5:1)
       creative.css sets .navbar-default links to rgba(255,255,255,0.7) on
       a transparent background. Before .affix, the body is white so the
       effective contrast is ~1:1.  Fix: give the non-affix navbar a dark
       semi-transparent background so white text is legible everywhere.
       ==================================================================== */
    @media (min-width: 768px) {
        /* Initial (non-scrolled) navbar state: dark overlay → white text 16:1 */
        .navbar-default:not(.affix):not(.navbar-shrink) {
            background-color: rgba(20, 33, 61, 0.92) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }
        .navbar-default:not(.affix):not(.navbar-shrink) .nav > li > a,
        .navbar-default:not(.affix):not(.navbar-shrink) .nav > li > a:focus {
            color: rgba(255, 255, 255, 0.97) !important;
        }
        .navbar-default:not(.affix):not(.navbar-shrink) .nav > li > a:hover {
            color: #ffffff !important;
        }
        /* Dropdown menus always need a solid background + dark text */
        .navbar-default .dropdown-menu {
            background-color: #ffffff !important;
            border-color: rgba(108, 88, 123, 0.2) !important;
        }
        .navbar-default .dropdown-menu > li > a,
        .navbar-default .dropdown-menu > li > a:focus {
            color: #1a1626 !important;  /* 18:1 on white */
        }
        .navbar-default .dropdown-menu > li > a:hover {
            color: #6c587b !important;
            background-color: #f3f0f7 !important;
        }
        /* Affix (scrolled, white bg) — dark text is already set in creative.css
           but reinforce here for specificity */
        .navbar-default.affix .nav > li > a,
        .navbar-default.affix .nav > li > a:focus,
        .navbar-default.navbar-shrink .nav > li > a,
        .navbar-default.navbar-shrink .nav > li > a:focus {
            color: #1a1626 !important;  /* 14:1 on white */
        }
    }
    textarea {
        border: 3px solid #000000;
    }
}