/* 
 * Accessibility Improvements for BRIGHT Theme
 * This file addresses WCAG compliance issues and can be applied site-wide
 */

/* 1.4.1 - Color Usage - Ensure color is not the only way to distinguish elements */

/* Links distinction - Add underline to differentiate from plain text */
a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* Remove underline for navigation and button-like links */
.hmenu a,
.submenuel,
.pinkb,
.moreb,
.logo a,
.brcrurl,
nav a,
.nav a {
    text-decoration: none;
}

/* Add visual indicators for active menu items beyond color */
.currentpage,
.current-menu-item a {
    font-weight: 600;
    position: relative;
}



/* Form validation errors - Add icons and patterns beyond color */
.error {
    position: relative;
}

/* Remove the side exclamation mark - keep only the one in error text */

.error .opprightfinput {
    border-bottom-color: #e74c3c !important;
    border-bottom-width: 2px !important;
}

.error .opprffieldh::after {
    content: ' (Required)';
    font-weight: normal;
    font-size: 14px;
    color: #e74c3c;
}

/* Button consistency - Ensure clickable vs non-clickable distinction */
.pinkb {
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
}

.pinkb:not([disabled]):not(.disabled) {
    border-color: currentColor;
}

.pinkb[disabled],
.pinkb.disabled,
.custom-form-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.pinkb[disabled]::after,
.pinkb.disabled::after,
.custom-form-btn-disabled::after {
    content: '🚫';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

/* 2.4.7 - Visible Focus States for keyboard navigation */

/* Focus indicator base styles */
*:focus {
    outline: 3px solid #4D86FF;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #4D86FF;
}

/* Form elements focus */
.opprightfinput:focus {
    outline: none;
    border-bottom-color: #4D86FF !important;
    border-bottom-width: 2px !important;
    box-shadow: 0 1px 0 0 #4D86FF, 0 0 0 2px rgba(77, 134, 255, 0.2);
}

/* Improve label positioning - move higher when focused to avoid overlap */
.opprfinpc:focus-within .opprfplacehtext,
.opprfinpc.focus .opprfplacehtext {
    top: 5px !important;
    font-size: 10px !important;
    color: #4D86FF !important;
    background: #fff;
    padding: 0 2px;
    z-index: 10;
}

/* Ensure labels remain clickable and accessible */
label.opprfplacehtext {
    cursor: text;
    pointer-events: auto;
    transition: all 0.3s ease;
}



/* Improve focus for form containers - remove double border effect */
.opprfinpc:focus-within {
    position: relative;
}

/* Remove the container border that was causing double border effect */

/* Button styling improvements - prevent shrinking and improve hover */
.pinkb,
button,
input[type="submit"],
input[type="button"] {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    transform: none !important; /* Prevent any scaling effects */
}

.pinkb:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: none !important; /* Prevent scaling on hover */
    background-color: #3758E1 !important;
    color: white !important;
    border-color: #3758E1 !important;
}

/* Button focus - clean, no white border when neutral */
.pinkb:focus {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
    background-color: rgba(77, 134, 255, 0.1);
    transform: none !important;
}

/* Link focus */
a:focus {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
    background-color: rgba(77, 134, 255, 0.1);
    border-radius: 2px;
}

/* Navigation improvements - clear focus and hover without underlines */
.hmenu a,
nav a,
.menu a {
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hmenu a:hover {
    text-decoration: none !important;
    background-color: rgba(77, 134, 255, 0.1);
    border-radius: 4px;
    color: #4D86FF;
}

.hmenu a:focus,
.submenuel:focus {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
    background-color: rgba(77, 134, 255, 0.1);
    border-radius: 4px;
    text-decoration: none !important;
}

/* Checkbox focus styling */
.checkbc input:focus + label span {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4D86FF;
    border-color: #4D86FF;
}

/* Radio button focus - simple and clean styling */
.radiobc input:focus + label span {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
    box-shadow: none;
}

/* Remove any conflicting radio button focus styles */
.radiobc input:focus {
    outline: none;
}

/* Select dropdown focus */
.custom-select:focus {
    outline: 2px solid #4D86FF;
    outline-offset: 1px;
    border-color: #4D86FF;
}

/* File input focus */
.inputfile-1:focus + label {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
    background-color: rgba(77, 134, 255, 0.1);
}

/* Slider focus (for slick slider elements) */
.slick-slide:focus,
.slick-dots li button:focus {
    outline: 2px solid #4D86FF;
    outline-offset: 2px;
}

/* Universal focus indicators for ALL interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus {
    outline: 2px solid #4D86FF !important;
    outline-offset: 2px !important;
    background-color: rgba(77, 134, 255, 0.1) !important;
    border-radius: 3px;
}

/* Specific focus for "My Home3" button */
.pinkb:focus,
#myHome3Button:focus {
    outline: 2px solid #4D86FF !important;
    outline-offset: 2px !important;
    background-color: rgba(77, 134, 255, 0.2) !important;
    box-shadow: none !important; /* Remove any white border */
}

/* Slider and offer links focus */
.slick-slide a:focus,
.offer-link:focus,
.movie-channels a:focus {
    outline: 3px solid #4D86FF !important;
    outline-offset: 3px !important;
    background-color: rgba(77, 134, 255, 0.15) !important;
}

/* Skip to content link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #4D86FF;
    color: white;
    padding: 8px;
    z-index: 100000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

.skip-link:focus {
    top: 6px;
    outline: 2px solid #fff;
}

/* Additional error state improvements - beyond color only */
.error .opprfplacehtext {
    color: #e74c3c;
}

/* Error indication beyond color - add visual icons and text markers */
.field-error-message::before {
    content: "⚠️ ";
    margin-right: 5px;
}

.error .opprfplacehtext::after {
    content: " (Error)";
    font-size: 11px;
    font-weight: normal;
}

/* Active menu item indication beyond color */
.hmenu .currentpage a,
.hmenu .current-menu-item > a {
    font-weight: 700 !important;
    position: relative;
}

/* Remove any triangles/arrows from current page items */
.currentpage::before,
.current-menu-item::before,
.hmenurighttopel.currentpage::before,
.hmenu .currentpage::before,
.hmenu .currentpage a::before {
    content: none !important;
    display: none !important;
}

/* Top-right menu current page highlighting */
.hmenurighttopel.currentpage,
.hmenurighttop .currentpage {
    color: #7BA7FF !important; /* Lighter blue for current page */
    font-weight: 600 !important;
}

/* Keep darker blue on hover */
.hmenurighttopel.currentpage:hover,
.hmenurighttop .currentpage:hover {
    color: #4D86FF !important; /* Darker blue on hover */
}

/* Link distinction - ensure all links are clearly distinguishable */
a:not(.hmenu a):not(.pinkb):not(.btn):not(.button):not([role="button"]) {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* Button vs non-clickable element distinction */
.pinkb,
button,
input[type="submit"],
input[type="button"],
[role="button"] {
    border: 2px solid currentColor !important;
    cursor: pointer !important;
}

/* Non-clickable elements that look like buttons but aren't */
.disabled,
[aria-disabled="true"],
.non-clickable {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    border: 2px solid #ccc !important;
}

.disabled::after,
[aria-disabled="true"]::after,
.non-clickable::after {
    content: " (Disabled)";
    font-size: 11px;
}

/* Form field instructions - subtle hints */
.field-instructions {
    margin-top: 2px;
    color: #999;
    font-size: 11px;
    line-height: 1.2;
    font-style: italic;
    opacity: 0.8;
}

.field-instructions small {
    display: block;
}

/* Show instructions more prominently when field is focused */
.opprfinpc:focus-within .field-instructions {
    color: #666;
    opacity: 1;
}

.field-error-message {
    margin-top: 5px;
    padding: 8px 12px;
    background-color: #fdf2f2;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    color: #e74c3c;
    font-size: 14px;
    line-height: 1.4;
}

.field-error-message::before {
    content: '⚠ ';
    font-weight: bold;
    margin-right: 4px;
}

/* Fieldset styling for radio/checkbox groups - clean, consistent appearance */
.form-fieldset {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 20px 0;
    background-color: transparent;
}

.form-fieldset legend {
    padding: 0;
    font-weight: 600;
    color: #333;
    width: 100%;
    margin-bottom: 15px;
}

.form-fieldset .velielaisazinamiestitle {
    margin: 0 0 15px 0;
    padding: 0;
    background: transparent;
    border: none;
}

.form-fieldset .velielaisazinamiestitle h4 {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.required-indicator {
    display: block;
    color: #e74c3c;
    font-weight: normal;
    font-size: 12px;
    margin-top: 5px;
}

/* Error state for fieldsets - subtle error indication */
.form-fieldset.error {
    border: none;
    background-color: transparent;
    position: relative;
}

.form-fieldset.error legend {
    color: #e74c3c;
}

.form-fieldset.error .velielaisazinamiestitle h4 {
    color: #e74c3c;
}

/* Improve visibility of required fields */
.obl .opprfplacehtext:after,
.required-indicator::before {
    content: '* ';
    color: #e74c3c;
    font-weight: bold;
}

/* Ensure consistent error colors across all elements */
.error input[type="checkbox"]:focus + label span {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e74c3c;
}

.error input[type="radio"]:focus + label span {
    outline-color: #e74c3c;
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    .error::before {
        background-color: #000;
        color: #fff;
        padding: 2px 4px;
        border-radius: 2px;
    }
    
    *:focus {
        outline-width: 4px;
    }
    
    .radiobc input:focus + label span {
        outline-width: 3px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .opprfplacehtext {
        transition: none;
    }
    
    .animate,
    .animated,
    .animated2,
    .animated3 {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles - ensure form structure is visible */
@media print {
    .error {
        border: 2px solid #000 !important;
    }
    
    .error::before {
        content: 'ERROR: ';
        color: #000;
    }
    
    .currentpage::before,
    .current-menu-item a::before {
        content: '[CURRENT] ';
        font-weight: bold;
    }
}

/* LIGHTHOUSE FIXES */

/* Fix 1: Header button contrast for Lighthouse compliance */
#js-my-home3,
.pinkb,
.mansviasatb {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border: 2px solid #003d82 !important;
    font-weight: 500;
    padding: 8px 20px !important;
    border-radius: 25px !important; /* Restore oval shape */
    transition: all 0.3s ease !important; /* Smooth transitions */
    text-decoration: none !important;
}

#js-my-home3:hover,
.pinkb:hover,
.mansviasatb:hover {
    background-color: #2780e3 !important; /* Brighter blue on hover */
    color: #ffffff !important;
    border-color: #0056b3 !important;
}

#js-my-home3:active,
.pinkb:active,
.mansviasatb:active {
    background-color: #0056b3 !important; /* Return to normal on click */
}

#js-my-home3:focus,
.pinkb:focus,
.mansviasatb:focus {
    outline: 3px solid #4D86FF !important;
    outline-offset: 2px !important;
}

/* Form submit button styling - remove white border and match hover effect */
.form-submit-btn,
input[type="submit"],
button[type="submit"],
.submit-button {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border: none !important; /* Remove white border */
    font-weight: 500;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.form-submit-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.submit-button:hover {
    background-color: #2780e3 !important; /* Same brightening effect */
    color: #ffffff !important;
}

.form-submit-btn:focus,
input[type="submit"]:focus,
button[type="submit"]:focus,
.submit-button:focus {
    outline: 3px solid #4D86FF !important;
    outline-offset: 2px !important;
}

/* Fix 2: Improve link accessibility for social media icons */
a[href*="facebook"],
a[href*="youtube"],
a[href*="twitter"],
a[href*="instagram"] {
    position: relative;
}

/* Add text labels for icon-only links */
a[href*="facebook"]:not([aria-label]):after {
    content: "Facebook";
    position: absolute;
    left: -9999px;
}

a[href*="youtube"]:not([aria-label]):after {
    content: "YouTube";
    position: absolute;
    left: -9999px;
}

/* Screen reader only text for search form labels */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}