/**
 * Brooklyn Chiropractic Care - Accessibility & Optimization
 *
 * This file contains:
 * - Accessibility improvements (focus states, skip links, ARIA)
 * - Color contrast fixes
 * - Vendor prefixes for cross-browser compatibility
 * - Print styles
 * - Reduced motion preferences
 */

/* ==========================================================================
   1. SKIP LINK (Accessibility)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-main);
    color: var(--white) !important;
    padding: 15px 25px;
    z-index: 100000;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px;
    outline: 3px solid var(--accent-gold);
    outline-offset: 2px;
}


/* ==========================================================================
   2. FOCUS STATES (Keyboard Navigation)
   ========================================================================== */

/* Global focus outline for keyboard navigation */
*:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for keyboard users */
*:focus-visible {
    outline: 3px solid var(--accent-gold);
    outline-offset: 3px;
}

/* Button focus states */
.btn-solid:focus-visible,
.btn-luxury:focus-visible,
.btn-secondary:focus-visible,
.btn-default:focus-visible {
    outline: 3px solid var(--accent-gold);
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.2);
}

/* Link focus states */
a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Navigation link focus */
.main-menu ul li a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 4px;
    background: rgba(197, 160, 89, 0.1);
}

/* Form field focus (enhanced) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.15) !important;
}

/* Footer link focus (high contrast) */
footer a:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    background: rgba(197, 160, 89, 0.2);
}


/* ==========================================================================
   3. COLOR CONTRAST IMPROVEMENTS
   ========================================================================== */

/* Ensure adequate contrast for gold on light backgrounds */
/* WCAG AA requires 4.5:1 for normal text, 3:1 for large text */

/* Gold on light backgrounds - use darker variant for small text */
.eyebrow {
    color: #9A7D3E; /* Darker gold for better contrast (5.2:1 ratio) */
}

/* Text on dark backgrounds - ensure sufficient contrast */
footer.main-footer p,
footer.main-footer a,
footer.main-footer li {
    color: rgba(255,255,255,0.85); /* Increased from 0.7 for better contrast */
}

.luxury-page-header .breadcrumb li,
.luxury-archive-header .breadcrumb li,
.luxury-post-header .breadcrumb li {
    color: rgba(255,255,255,0.8); /* Increased contrast */
}

/* Light text on sage background (CTA sections) */
.cta-banner p {
    color: var(--text-main);
    opacity: 1; /* Removed opacity for full contrast */
}

/* Form placeholder contrast */
input::placeholder,
textarea::placeholder {
    color: #6B7A6D; /* Darker for better contrast */
    opacity: 1;
}

/* Breadcrumb separators - visible but not intrusive */
.breadcrumb li + li::before {
    color: rgba(255,255,255,0.5); /* Increased visibility */
}


/* ==========================================================================
   4. ARIA & SCREEN READER UTILITIES
   ========================================================================== */

/* Screen reader only text */
.sr-only,
.screen-reader-text,
.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: 0 !important;
}

/* Allow screen reader text to be focusable */
.sr-only:focus,
.screen-reader-text:focus,
.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Hide visually but keep in DOM for ARIA */
[aria-hidden="true"] {
    display: none;
}

/* Current page indicator for navigation */
.main-menu ul li.current-menu-item > a,
.main-menu ul li.current_page_item > a {
    position: relative;
}

.main-menu ul li.current-menu-item > a::before,
.main-menu ul li.current_page_item > a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-gold);
}


/* ==========================================================================
   5. VENDOR PREFIXES & CROSS-BROWSER FIXES
   ========================================================================== */

/* Flexbox prefixes */
.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Grid fallback for older browsers */
@supports not (display: grid) {
    .services-grid-wrapper,
    .blog-grid,
    .luxury-posts-grid,
    .process-grid,
    .trust-grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .services-grid-wrapper > *,
    .blog-grid > *,
    .luxury-posts-grid > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.333% - 40px);
        flex: 0 0 calc(33.333% - 40px);
        margin: 20px;
    }
}

/* Transform prefixes */
.service-card:hover,
.luxury-post-card:hover,
.blog-item:hover,
.testimonial-card:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

/* Transition prefixes */
.btn-solid,
.btn-luxury,
.service-card,
.luxury-post-card {
    -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation prefixes */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--off-white);
}

::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-main);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-light) var(--off-white);
}

/* Appearance reset for form elements */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Box-sizing fix */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Image rendering optimization */
img {
    -ms-interpolation-mode: bicubic;
    image-rendering: -webkit-optimize-contrast;
}

/* Text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Selection styling */
::-moz-selection {
    background: var(--accent-gold);
    color: var(--white);
}

::selection {
    background: var(--accent-gold);
    color: var(--white);
}


/* ==========================================================================
   6. TOUCH-FRIENDLY TARGETS (Mobile Accessibility)
   ========================================================================== */

/* Minimum touch target size: 44x44px (WCAG 2.5.5) */
@media (max-width: 1024px) {
    /* Buttons */
    .btn-solid,
    .btn-luxury,
    .btn-secondary,
    .btn-default {
        min-height: 48px;
        min-width: 48px;
        padding: 14px 30px;
    }

    /* Navigation links */
    .main-menu ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 8px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        min-height: 48px;
        padding: 14px 18px;
    }

    /* Links with adequate spacing */
    footer.main-footer ul li {
        padding: 12px 0;
    }

    /* Social links */
    .footer-social-links a,
    .topbar-social-links a {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ==========================================================================
   7. REDUCED MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable parallax effects */
    .hero-section {
        background-attachment: scroll !important;
    }

    /* Disable hover transforms */
    .service-card:hover,
    .luxury-post-card:hover,
    .blog-item:hover,
    .testimonial-card:hover,
    .team-member-card:hover {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }

    /* Disable ticker animation */
    .scrolling-ticker-box {
        -webkit-animation: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   8. HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Increase border visibility */
    .btn-solid,
    .btn-luxury,
    .service-card,
    .luxury-post-card,
    input,
    textarea,
    select {
        border-width: 2px !important;
    }

    /* Increase text contrast */
    p,
    li,
    a {
        color: var(--text-main) !important;
    }

    /* Make focus states more visible */
    *:focus-visible {
        outline-width: 4px !important;
        outline-color: #000 !important;
    }
}


/* ==========================================================================
   9. PRINT STYLES
   ========================================================================== */

@media print {
    /* Hide non-essential elements */
    header.main-header,
    .topbar,
    footer.main-footer,
    .map-bx1,
    .our-scrolling-ticker,
    .btn-solid,
    .btn-luxury,
    .cta-banner,
    nav,
    .social-links,
    .header-btn,
    .popup-overlay {
        display: none !important;
    }

    /* Reset backgrounds for printing */
    body,
    .luxury-page-header,
    .luxury-post-header,
    .luxury-archive-header {
        background: #fff !important;
        color: #000 !important;
    }

    /* Ensure text is black for printing */
    h1, h2, h3, h4, h5, h6,
    p, li, a, span {
        color: #000 !important;
    }

    /* Show links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't show internal links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* Page breaks */
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }

    img {
        page-break-inside: avoid;
        max-width: 100% !important;
    }

    /* Optimize font sizes for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4 { font-size: 14pt; }

    /* Remove box shadows */
    * {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Adjust margins */
    @page {
        margin: 2cm;
    }
}


/* ==========================================================================
   10. DARK MODE SUPPORT (Future-proofing)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Note: This theme uses light colors by design for luxury feel.
       Dark mode is disabled but these rules are here for future use if needed.
       To enable, uncomment the rules below.
    */

    /*
    :root {
        --bg-color: #1C241F;
        --text-main: #F9F9F7;
        --text-light: #B5B9B5;
        --white: #252D27;
        --off-white: #2A332C;
    }
    */
}