/**
 * WCAG 2.1 AA Accessibility Styles for Born to Give Child Theme
 * Focus indicators, skip links, screen reader utilities, and improved form accessibility
 */

/* ==========================================================================
   Skip Links - WCAG 2.4.1 (Level A)
   ========================================================================== */

.skip-links {
    position: absolute;
    top: -999px;
    left: -999px;
    z-index: 999999;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0 0 2px 2px;
}

.skip-link:focus {
    position: absolute;
    left: 6px;
    top: 7px;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 999999;
    clip: auto !important;
    clip-path: none;
}

/* ==========================================================================
   Screen Reader Text - WCAG 1.3.1 (Level A)
   ========================================================================== */

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    border: 0;
    padding: 0;
    margin: 0;
}

.screen-reader-text:focus {
    background-color: #000;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #fff;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   Focus Indicators - WCAG 2.4.7 (Level AA)
   ========================================================================== */

/* General focus styles */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus,
.button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.8);
}

/* High contrast focus for better visibility */
@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus,
    .btn:focus,
    .button:focus {
        outline: 3px solid #000;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000;
    }
}

/* Menu focus styles */
.sf-menu a:focus,
.dd-menu a:focus,
.primary-navigation a:focus {
    background-color: rgba(0, 115, 170, 0.1);
    outline: 2px solid #0073aa;
    outline-offset: -2px;
}

/* Mobile menu toggle focus */
#menu-toggle:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    background-color: rgba(0, 115, 170, 0.1);
}

/* Form elements focus enhancement */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

/* ==========================================================================
   Form Accessibility Improvements - WCAG 1.3.1, 3.3.2 (Level A)
   ========================================================================== */

/* Restore form labels visibility - Critical fix */
.nf-field-label,
.nf-field-label label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    color: #333 !important;
}

/* Required field indicators */
.required-field::after {
    content: " *";
    color: #d63638;
    font-weight: bold;
}

/* Form validation styles */
.wpcf7-not-valid {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}

.wpcf7-validation-errors {
    background-color: #fcf2f2;
    border: 1px solid #d63638;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    color: #d63638;
}

/* Improve placeholder contrast */
::placeholder {
    color: #666;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #666;
    opacity: 1;
}

::-moz-placeholder {
    color: #666;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #666;
    opacity: 1;
}

/* ==========================================================================
   Navigation Accessibility - WCAG 2.1.1, 4.1.2 (Level A)
   ========================================================================== */

/* Mega menu accessibility */
.mega-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-item:hover .mega-menu-wrapper,
.menu-item:focus-within .mega-menu-wrapper {
    visibility: visible;
    opacity: 1;
}

/* Dropdown indicators */
/*
.menu-item-has-children > a::after {
    content: "\f107";
    font-family: "FontAwesome";
    margin-left: 5px;
    font-size: 0.8em;
}
    */

/* Current page indication */
.current-menu-item > a,
.current-menu-parent > a {
    background-color: rgba(0, 115, 170, 0.1);
    font-weight: bold;
}

/* Mobile menu improvements */
@media (max-width: 767px) {
    .primary-navigation {
        display: none;
    }
    
    .primary-navigation.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border: 1px solid #ddd;
        z-index: 9999;
    }
    
    .sf-menu,
    .dd-menu {
        flex-direction: column;
    }
    
    .sf-menu li,
    .dd-menu li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
}

/* ==========================================================================
   Button and Interactive Elements - WCAG 2.1.1 (Level A)
   ========================================================================== */

/* Minimum touch target size - WCAG 2.5.5 (Level AAA but recommended) */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
}

/* Button states */
button:hover,
.btn:hover,
.button:hover {
    background-color: #0073aa;
    color: #fff;
}

button:active,
.btn:active,
.button:active {
    transform: translateY(1px);
}

button:disabled,
.btn:disabled,
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Color Contrast Improvements - WCAG 1.4.3 (Level AA)
   ========================================================================== */

/* Ensure text has sufficient contrast */
.text-muted {
    color: #666 !important; /* Better contrast than default Bootstrap */
}

/* Link color improvements */
a {
    color: #0073aa;
}

a:hover,
a:focus {
    color: #005177;
}

/* ==========================================================================
   Responsive Text and Zoom - WCAG 1.4.4, 1.4.10 (Level AA)
   ========================================================================== */

/* Ensure text can scale to 200% without horizontal scrolling */
@media (max-width: 1280px) {
    body {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* Prevent horizontal scrolling at high zoom levels */
/*
* {
    max-width: 100%;
}
*/

img,
video {
    height: auto;
}

/* ==========================================================================
   Motion and Animation - WCAG 2.3.3 (Level AAA)
   ========================================================================== */

/* Respect user's motion preferences */
@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 Support
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Enhanced contrast for high contrast mode */
    .site-header {
        border-bottom: 2px solid #000;
    }
    
    .sf-menu li,
    .dd-menu li {
        border: 1px solid #000;
    }
    
    input,
    textarea,
    select {
        border: 2px solid #000;
    }
}

/* ==========================================================================
   Print Styles - Basic accessibility for printed content
   ========================================================================== */

@media print {
    .skip-links,
    .social-navigation,
    #menu-toggle,
    .cart-module {
        display: none !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
}

/* ===== CONTACT FORM 7 ACCESSIBILITY ===== */

/* Form labels - ensure proper styling and visibility */
.wpcf7 label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* Required field indicator */
.wpcf7 .required {
    color: #d63384;
    font-weight: bold;
    margin-left: 2px;
}

/* Form field spacing */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Focus indicators for form fields */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-color: #005fcc;
}

/* Fieldset and legend styling for radio groups */
.wpcf7 fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.wpcf7 legend {
    font-weight: 600;
    color: #333;
    padding: 0 10px;
    font-size: 14px;
}

/* Radio and checkbox styling */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

.wpcf7 input[type="radio"]:focus,
.wpcf7 input[type="checkbox"]:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Checkbox and radio labels */
.wpcf7 .wpcf7-list-item label,
.wpcf7 .wpcf7-checkbox label,
.wpcf7 .wpcf7-radio label {
    display: inline;
    margin-left: 5px;
    font-weight: normal;
    cursor: pointer;
}

/* Error message styling */
.wpcf7-not-valid-tip {
    color: #d63384;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Success message accessibility */
.wpcf7-mail-sent-ok {
    color: #198754;
    font-weight: 600;
    border: 2px solid #198754;
    padding: 10px;
    border-radius: 4px;
    background-color: #d1eddd;
}

/* Error message accessibility */
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam {
    color: #d63384;
    font-weight: 600;
    border: 2px solid #d63384;
    padding: 10px;
    border-radius: 4px;
    background-color: #f8d7da;
}

/* Screen reader only descriptions */
.sr-only,
.cf7-field-description.sr-only,
.cf7-free-text-label.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;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Free text field styling */
.wpcf7-free-text {
    margin-left: 10px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.wpcf7-free-text:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.wpcf7-free-text:not(:disabled) {
    background-color: #fff;
    border-color: #007cba;
}

.wpcf7-free-text:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-color: #005fcc;
}

/* Free text label when visible */
.cf7-free-text-label:not(.sr-only) {
    display: block;
    margin: 5px 0 3px 25px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Radio button with free text styling */
.wpcf7-list-item.has-free-text {
    margin-bottom: 10px;
}

.wpcf7-list-item.has-free-text label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 5px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpcf7 label {
        color: #000;
        font-weight: bold;
    }
    
    .wpcf7 .required {
        color: #000;
        background-color: #ffff00;
        padding: 1px 3px;
    }
    
    .wpcf7 fieldset {
        border: 2px solid #000;
        background-color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wpcf7 * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   External Links & Image Links Accessibility - WCAG 2.4.4 (Level A)
   ========================================================================== */

/* Enhanced focus state for image links that open in new tab */
a[target="_blank"] img,
a[target="_new"] img {
    transition: opacity 0.2s ease-in-out;
}

a[target="_blank"]:focus img,
a[target="_new"]:focus img {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    opacity: 0.9;
}

/* Focus state for WPBakery image wrapper links */
a.vc_single_image-wrapper:focus {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}

a.vc_single_image-wrapper:focus img {
    opacity: 0.9;
}

/* External link processed indicator (for image links) */
a.external-link-processed[target="_blank"]:focus,
a.external-link-processed[target="_new"]:focus {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
}

/* Screen reader text for external image links */
a[target="_blank"] .external-link-text,
a[target="_new"] .external-link-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Visual indicator for text links with external icon */
.external-link-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

/* High contrast mode support for image links */
@media (prefers-contrast: high) {
    a[target="_blank"]:focus,
    a[target="_new"]:focus,
    a.vc_single_image-wrapper:focus {
        outline: 4px solid;
        outline-offset: 3px;
    }
}

/* Reduced motion support for image link transitions */
@media (prefers-reduced-motion: reduce) {
    a[target="_blank"] img,
    a[target="_new"] img,
    a.vc_single_image-wrapper img {
        transition: none;
    }
}

/* ==========================================================================
   Image-Only Links Accessibility - WCAG 2.4.4 (Level A)
   Enhanced styles for media-box, grid-featured-img, post-thumbnails
   ========================================================================== */

/* General image-only link focus states */
/* Exclude logo and hero areas from these styles */
a.image-link-processed:focus:not(.site-logo a):not(.default-logo):not(.default-retina-logo):not(.sticky-logo):not(.sticky-retina-logo):not(.hero-area a) {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}

a.image-link-processed:focus:not(.site-logo a):not(.default-logo):not(.default-retina-logo):not(.sticky-logo):not(.sticky-retina-logo):not(.hero-area a) img {
    opacity: 0.9;
    /* Removed transform: scale to avoid layout issues */
    transition: opacity 0.2s ease-in-out;
}

/* Specific styles for media-box and grid-featured-img */
a.media-box:focus,
a.grid-featured-img:focus {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}

a.media-box:focus img,
a.grid-featured-img:focus img {
    opacity: 0.9;
}

/* Post thumbnail links */
a.post-thumbnail:focus,
a.wp-post-image:focus {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
}

/* Hover effects for image-only links */
/* Exclude logo from hover effects */
a.image-link-processed:not(.default-logo):not(.default-retina-logo):not(.sticky-logo):not(.sticky-retina-logo):hover img,
a.media-box:hover img,
a.grid-featured-img:hover img,
a.post-thumbnail:hover img {
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}

/* High contrast mode support for image-only links */
@media (prefers-contrast: high) {
    a.image-link-processed:focus,
    a.media-box:focus,
    a.grid-featured-img:focus,
    a.post-thumbnail:focus {
        outline: 4px solid;
        outline-offset: 3px;
    }
}

/* Reduced motion support for image-only links */
@media (prefers-reduced-motion: reduce) {
    a.image-link-processed:not(.default-logo):not(.default-retina-logo):not(.sticky-logo):not(.sticky-retina-logo) img,
    a.media-box img,
    a.grid-featured-img img,
    a.post-thumbnail img {
        transition: none;
    }
}

/* Ensure specific image-only links are keyboard accessible */
/* Note: Excluding generic .image-link-processed to avoid conflicts with logo and hero areas */
a.media-box,
a.grid-featured-img,
a.post-thumbnail {
    display: inline-block;
    position: relative;
}

/* ==========================================================================
   Lightbox Accessibility - WCAG 2.4.4 (Level A), 2.4.9 (Level AAA)
   ========================================================================== */

/* Enhanced focus state for lightbox links */
a[data-lightbox]:focus,
a[rel^="lightbox"]:focus,
a.lightbox-accessibility-processed:focus {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}

/* Ensure lightbox links are visually distinct on hover */
a[data-lightbox]:hover img,
a[rel^="lightbox"]:hover img,
a.lightbox-accessibility-processed:hover img {
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out;
}

/* Screen reader text for lightbox links */
a[data-lightbox] .screen-reader-text,
a[rel^="lightbox"] .screen-reader-text,
a.lightbox-accessibility-processed .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

/* High contrast mode support for lightbox links */
@media (prefers-contrast: high) {
    a[data-lightbox]:focus,
    a[rel^="lightbox"]:focus,
    a.lightbox-accessibility-processed:focus {
        outline: 4px solid;
        outline-offset: 3px;
    }
}

/* Reduced motion support for lightbox transitions */
@media (prefers-reduced-motion: reduce) {
    a[data-lightbox]:hover img,
    a[rel^="lightbox"]:hover img,
    a.lightbox-accessibility-processed:hover img {
        transition: none;
    }
}

/* Lightbox modal controls accessibility */
.lb-close,
.lb-cancel,
.lb-prev,
.lb-next {
    position: relative;
}

/* Enhanced focus states for lightbox controls */
.lb-close:focus,
.lb-cancel:focus,
.lb-prev:focus,
.lb-next:focus {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 115, 170, 0.5) !important;
}

/* Screen reader text within lightbox controls */
.lb-close .screen-reader-text,
.lb-cancel .screen-reader-text,
.lb-prev .screen-reader-text,
.lb-next .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

/* Ensure lightbox controls are visible and accessible */
.lb-close,
.lb-cancel {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* High contrast mode for lightbox controls */
@media (prefers-contrast: high) {
    .lb-close:focus,
    .lb-cancel:focus,
    .lb-prev:focus,
    .lb-next:focus {
        outline: 4px solid #fff !important;
        outline-offset: 3px !important;
    }
}

/* Ensure lightbox dialog role is properly styled */
[role="dialog"].lightbox,
[role="dialog"].lb-overlay,
[role="dialog"].lb-outerContainer {
    position: fixed;
    z-index: 9999;
}

/* Improve visibility of lightbox controls on dark backgrounds */
.lb-close,
.lb-cancel,
.lb-prev,
.lb-next {
    color: #fff;
    text-decoration: none;
}

.lb-close:hover,
.lb-cancel:hover,
.lb-prev:hover,
.lb-next:hover {
    opacity: 0.8;
}