/**
 * Accessibility Styles for The7 Child Theme
 * WCAG 2.1 Level AA Compliance
 * 
 * @version 1.0.0
 * @author  GitHub Copilot
 * @date    2025-09-30
 */

/* ============================================================================
   1. SKIP LINKS - WCAG 2.4.1 Bypass Blocks
   ========================================================================= */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000;
    display: block;
    padding: 15px 25px;
    background-color: #21759b;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus,
.skip-link:active {
    top: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* ============================================================================
   2. FOCUS INDICATORS - WCAG 2.4.7 Focus Visible
   ========================================================================= */

/* Wzmocnienie widoczności focus dla wszystkich interaktywnych elementów */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
.wpb_tabs_nav a:focus,
.wpb_accordion_header:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Focus-visible dla nowoczesnych przeglądarek */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Usunięcie outline dla kliknięć myszą (tylko dla focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Specjalne style dla przycisków */
button:focus,
.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* ============================================================================
   3. SLIDER REVOLUTION ACCESSIBILITY - WCAG 2.2.2
   ========================================================================= */

/* Kontrolki play/pause dla slidera */
.rev-accessibility-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 5px;
}

.rev-pause-btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.rev-pause-btn:hover,
.rev-pause-btn:focus {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

.rev-pause-btn[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.3);
}

/* Ukrycie kontrolek na małych ekranach jeśli potrzeba */
@media (max-width: 768px) {
    .rev-accessibility-controls {
        top: 5px;
        right: 5px;
    }
    
    .rev-pause-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ============================================================================
   4. WPBAKERY TABS ACCESSIBILITY - WCAG 4.1.2
   ========================================================================= */

/* Poprawione style dla tabs */
.wpb_tabs_nav li a {
    position: relative;
}

.wpb_tabs_nav li a:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: -3px !important;
    z-index: 10;
}

.wpb_tabs_nav li.ui-tabs-active a {
    font-weight: 700;
}

/* Dodanie wizualnego wskaźnika dla aktywnej zakładki */
.wpb_tabs_nav li.ui-tabs-active a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
}

/* Panel z zakładkami - zapewnienie widoczności focus */
.wpb_tab:focus {
    outline: 2px dashed #005fcc;
    outline-offset: 5px;
}

/* ============================================================================
   5. WPBAKERY ACCORDION ACCESSIBILITY - WCAG 4.1.2
   ========================================================================= */

/* Wskaźniki wizualne dla accordionu */
.wpb_accordion_header {
    cursor: pointer;
    position: relative;
    padding-right: 40px;
}

/* Ikona stanu (rozwinięty/zwinięty) */
.wpb_accordion_header::after {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.wpb_accordion_wrapper.ui-state-active .wpb_accordion_header::after {
    content: '−';
}

.wpb_accordion_header:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* ============================================================================
   6. CONTACT FORM 7 ACCESSIBILITY - WCAG 3.3.1, 3.3.3
   ========================================================================= */

/* Pola formularza z błędami */
.wpcf7-form-control[aria-invalid="true"] {
    border: 2px solid #d32f2f !important;
    background-color: #fff5f5 !important;
}

.wpcf7-form-control[aria-invalid="true"]:focus {
    outline: 3px solid #d32f2f !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25) !important;
}

/* Komunikaty o błędach */
.wpcf7-response-output {
    border: 2px solid;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

.wpcf7-validation-errors {
    border-color: #d32f2f !important;
    background-color: #fff5f5 !important;
    color: #d32f2f !important;
}

.wpcf7-mail-sent-ok {
    border-color: #2e7d32 !important;
    background-color: #f1f8f4 !important;
    color: #2e7d32 !important;
}

/* Etykiety pól wymaganych */
.wpcf7-form label .required,
.comment-form label .required {
    color: #d32f2f;
    font-weight: bold;
}

/* ============================================================================
   7. SEARCH FORM ACCESSIBILITY
   ========================================================================= */

/* Przycisk submit w searchform */
.searchform .submit {
    background: transparent;
    border: 2px solid #333;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.searchform .submit:hover,
.searchform .submit:focus {
    background: #333;
    color: #fff;
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.searchform .submit svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ============================================================================
   8. IMAGES AND MEDIA ACCESSIBILITY
   ========================================================================= */

/* Zapewnienie że wszystkie obrazy mają odpowiednie atrybuty */
img:not([alt]) {
    border: 3px solid #ff9800 !important; /* Pomarańczowa ramka dla brakujących alt */
}

/* Ukrycie dekoracyjnych obrazów dla czytników ekranu */
img[alt=""],
img[role="presentation"] {
    border: none !important;
}

/* ============================================================================
   9. NAVIGATION ACCESSIBILITY
   ========================================================================= */

/* Główne menu nawigacyjne */
nav[role="navigation"] a:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    background: rgba(0, 95, 204, 0.1);
}

/* Podmenu */
.sub-menu,
.submenu {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   10. HIGH CONTRAST MODE SUPPORT
   ========================================================================= */

/* Wsparcie dla trybu wysokiego kontrastu w Windows */
@media (prefers-contrast: high) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 5px solid currentColor !important;
        outline-offset: 3px !important;
    }
}

/* ============================================================================
   11. REDUCED MOTION SUPPORT - WCAG 2.3.3
   ========================================================================= */

/* Respektowanie preferencji użytkownika dot. animacji */
@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;
    }
    
    .rev-pause-btn {
        transition: none !important;
    }
}

/* ============================================================================
   12. PRINT STYLES - Accessibility for printed documents
   ========================================================================= */

@media print {
    .skip-link,
    .rev-accessibility-controls,
    .rev-pause-btn {
        display: none !important;
    }
    
    /* Wyświetlanie linków w nawiasach */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Nie pokazuj linków dla skip-links i anchor links */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
}

/* ============================================================================
   13. UTILITY CLASSES
   ========================================================================= */

/* Klasa dla elementów widocznych tylko dla czytników ekranu */
.sr-only,
.screen-reader-text,
.assistive-text {
    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;
}

/* Widoczność przy focus */
.sr-only:focus,
.screen-reader-text:focus,
.assistive-text:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: #21759b !important;
    color: #fff !important;
    z-index: 100000 !important;
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

/* Klasa dla ukrywania wizualnie ale dostępnych dla AT */
.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;
}

/* ============================================================================
   14. ADDITIONAL IMPROVEMENTS
   ========================================================================= */

/* Zapewnienie wystarczającego miejsca na klikanie/tapowanie - WCAG 2.5.5 */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wpb_tabs_nav a,
.wpb_accordion_header {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Poprawiony kontrast dla disabled elementów */
input:disabled,
button:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Zapewnienie czytelności tekstu na tle */
body {
    line-height: 1.5;
}

p,
li {
    line-height: 1.6;
}

/* Zwiększenie kontrastu dla linków */
a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a:hover,
a:focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ============================================================================
   18. SEARCH FORM BUTTONS FIX - WCAG 2.1.1, 4.1.2
   ========================================================================= */

/**
 * Fix dla mini-widget-searchform (header search)
 * Zamiana <a> na <button> wymaga reset stylów przycisku
 * + zachowanie wyglądu identycznego jak dla <a>
 */

/* Reset default button styles dla search buttons */
.searchform button.submit,
.mini-widget-searchform button.submit,
.searchform button.search-icon,
.mini-widget-searchform button.search-icon {
    /* Remove default button appearance */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    
    /* Inherit text styles */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    text-align: inherit;
    
    /* Maintain layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Remove default button spacing */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Ensure icons inside buttons are properly styled */
.searchform button.submit i,
.mini-widget-searchform button.submit i,
.searchform button.search-icon i,
.mini-widget-searchform button.search-icon i {
    pointer-events: none; /* Click goes to button, not icon */
}

/* Focus state for search buttons */
.searchform button.submit:focus,
.mini-widget-searchform button.submit:focus,
.searchform button.search-icon:focus,
.mini-widget-searchform button.search-icon:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Hover state inheritance from parent theme */
.searchform button.submit:hover,
.mini-widget-searchform button.submit:hover,
.searchform button.search-icon:hover,
.mini-widget-searchform button.search-icon:hover {
    /* Parent theme hover styles will apply via CSS cascade */
}

/* Screen reader text for buttons */
.searchform button .screen-reader-text,
.mini-widget-searchform button .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
}

/* Popup search - button type="button" dla toggle */
.mini-widget-searchform button.submit[type="button"] {
    /* Toggle button (opens popup) - not submit */
    /* Inherits all reset styles from above */
}

/* Popup search - button type="submit" dla actual search */
.mini-widget-searchform .popup-search-wrap button.search-icon[type="submit"] {
    /* Submit button inside popup */
    /* Inherits all reset styles from above */
}

/* High contrast mode support for buttons */
@media (prefers-contrast: high) {
    .searchform button.submit:focus,
    .mini-widget-searchform button.submit:focus,
    .searchform button.search-icon:focus,
    .mini-widget-searchform button.search-icon:focus {
        outline-width: 4px !important;
    }
}

/* Touch target size for mobile - WCAG 2.5.5 */
@media (max-width: 768px) {
    .searchform button.submit,
    .mini-widget-searchform button.submit,
    .searchform button.search-icon,
    .mini-widget-searchform button.search-icon {
        min-width: 44px;
        min-height: 44px;
        padding: 8px; /* Adds to touch target */
    }
}

/* ============================================================================
   SECTION 19: SCROLL-TO-TOP BUTTON - Replace <a> with <button>
   ========================================================================= */

/**
 * Scroll-to-top button converted from <a href="#"> to <button type="button">
 * This section ensures button.scroll-top inherits all parent theme styles
 * that were designed for a.scroll-top
 *
 * WCAG: 4.1.2 (A) - Name, Role, Value
 * Functions: #27 (the7child_fix_scroll_top_button)
 */

/* Button reset for scroll-top - inherit parent theme <a> styles */
button.scroll-top {
    /* Remove default button styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    
    /* Inherit parent theme positioning and display */
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Remove default button appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Inherit text styles from parent theme */
    text-decoration: none;
    line-height: inherit;
    text-align: center;
    
    /* Ensure proper width/height inheritance */
    width: inherit;
    height: inherit;
    
    /* z-index and opacity will inherit from parent theme .scroll-top class */
}

/* Hover state - inherit from parent theme */
button.scroll-top:hover {
    /* Parent theme hover styles will apply via CSS cascade */
    /* No additional styles needed - parent theme handles it */
}

/* Focus state for keyboard navigation - WCAG 2.4.7 */
button.scroll-top:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Active state (when clicking/tapping) */
button.scroll-top:active {
    /* Optional: slight scale effect for feedback */
    transform: scale(0.95);
}

/* Ensure SVG and icons inside button are properly styled */
button.scroll-top svg,
button.scroll-top i,
button.scroll-top::before {
    /* Inherit parent theme icon styles */
    pointer-events: none; /* Click goes to button, not icon */
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    button.scroll-top:focus {
        outline-width: 4px !important;
        outline-color: currentColor !important;
    }
}

/* Touch target size for mobile - WCAG 2.5.5 */
@media (max-width: 768px) {
    button.scroll-top {
        /* Parent theme already sets 40x40px minimum */
        /* Ensure it meets WCAG 44x44px */
        min-width: 44px;
        min-height: 44px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button.scroll-top {
        transition: none !important;
    }
    
    button.scroll-top:active {
        transform: none !important; /* No scale animation */
    }
}

/* Print - hide scroll-to-top button */
@media print {
    button.scroll-top {
        display: none !important;
    }
}

/* Elementor icon variant (scroll-top-elementor-icon) */
button.scroll-top-elementor-icon {
    /* Inherit all button.scroll-top styles */
    /* Parent theme CSS will handle specific icon styles */
}

button.scroll-top-elementor-icon:before {
    /* Ensure icon displays correctly in button */
    display: inline-block;
}

/* ============================================================================
   SECTION 20: WPBAKERY/THE7 BUTTONS - Replace <a href="#"> with <button>
   ========================================================================= */

/**
 * WPBakery Button shortcode converted from <a href="#"> to <button type="button">
 * This section ensures button.dt-btn inherits all parent theme styles
 * that were designed for a.dt-btn
 *
 * WCAG: 4.1.2 (A) - Name, Role, Value
 * Functions: #28 (the7child_fix_wpbakery_buttons)
 */

/* Button reset for WPBakery/The7 buttons - inherit parent theme <a> styles */
button.dt-btn,
button.default-btn-shortcode,
button.dt-btn-s,
button.dt-btn-m,
button.dt-btn-l,
button.btn-link,
button.dt-btn-link {
    /* Remove default button styles */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    
    /* Remove default button appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Inherit text styles from parent theme */
    text-decoration: none;
    line-height: inherit;
    text-align: inherit;
    
    /* Maintain layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Inherit box model from parent theme .dt-btn class */
    box-sizing: border-box;
    vertical-align: middle;
    
    /* Allow text wrapping (some buttons have long text) */
    white-space: normal;
    word-wrap: break-word;
}

/* Ensure nested elements inherit properly */
button.dt-btn span,
button.default-btn-shortcode span,
button.dt-btn i,
button.default-btn-shortcode i {
    pointer-events: none; /* Click goes to button, not children */
}

/* Hover state - inherit from parent theme */
button.dt-btn:hover,
button.default-btn-shortcode:hover {
    /* Parent theme hover styles will apply via CSS cascade */
    /* No additional styles needed - parent theme handles it */
}

/* Focus state for keyboard navigation - WCAG 2.4.7 */
button.dt-btn:focus,
button.default-btn-shortcode:focus,
button.dt-btn-s:focus,
button.dt-btn-m:focus,
button.dt-btn-l:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25) !important;
}

/* Active state (when clicking/tapping) */
button.dt-btn:active,
button.default-btn-shortcode:active {
    /* Optional: slight scale effect for feedback */
    transform: scale(0.98);
}

/* Full width button variant */
button.full-width-btn {
    width: 100% !important;
    display: flex !important;
}

/* Icon alignment variants */
button.ico-right-side {
    flex-direction: row-reverse;
}

/* Animation compatibility */
button.animation-builder {
    /* Ensure animations work on buttons */
    /* Parent theme animation CSS will handle it */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button.dt-btn:focus,
    button.default-btn-shortcode:focus {
        outline-width: 4px !important;
        outline-color: currentColor !important;
    }
}

/* Touch target size for mobile - WCAG 2.5.5 */
@media (max-width: 768px) {
    button.dt-btn,
    button.default-btn-shortcode {
        /* Ensure minimum touch target */
        min-height: 44px;
        padding: 10px 15px; /* Add padding if needed */
    }
    
    /* Small buttons on mobile still need 44px height */
    button.dt-btn-s {
        min-height: 44px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button.dt-btn,
    button.default-btn-shortcode {
        transition: none !important;
    }
    
    button.dt-btn:active,
    button.default-btn-shortcode:active {
        transform: none !important; /* No scale animation */
    }
}

/* Print - hide interactive buttons */
@media print {
    button.dt-btn,
    button.default-btn-shortcode {
        /* Keep visible but indicate it's non-interactive in print */
        border: 1px dashed #ccc !important;
    }
}

/* Link-style buttons (dt-btn-link) */
button.dt-btn-link,
button.btn-link {
    /* These are styled as links, not traditional buttons */
    /* Inherit link styles from parent theme */
    display: inline;
    padding: 0;
    min-height: auto;
}

button.dt-btn-link:focus,
button.btn-link:focus {
    /* Link-style focus indicator */
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* 3D button variant */
button.btn-3d {
    /* Parent theme handles 3D effect */
    /* Just ensure button reset doesn't break it */
}

/* Shadow button variant */
button.btn-shadow {
    /* Parent theme handles shadow */
}

/* Flat button variant */
button.btn-flat {
    /* Parent theme handles flat style */
}

/* ============================================================================
   SECTION 21: Ultimate VC Addons - Fix Malformed Attributes
   ============================================================================
   
   BUG #12: Accessibility Checker error "The element was not found on the page."
   
   PROBLEM:
   Ultimate VC Addons generates elements with malformed data-responsive-json-new
   attributes that contain unencoded JSON. This breaks HTML parsing.
   
   Example malformed HTML:
   <div class="uvc-sub-heading ult-responsive" 
        data-responsive-json-new='{"font-size":"desktop:20px;"}'>
   
   The double quotes inside the single-quoted attribute break parsing.
   
   SOLUTION:
   Function #29 fixes the HTML encoding via output buffer.
   This CSS ensures elements remain visible during the fix process.
   
   WCAG: 4.1.1 (A) Parsing
   ========================================================================= */

/* Ensure Ultimate VC elements are visible and accessible */
.ult-responsive,
.uvc-heading,
.uvc-main-heading,
.uvc-sub-heading {
    /* Ensure text is readable */
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* Prevent layout issues from malformed attributes */
    max-width: 100%;
}

/* Heading containers */
.uvc-heading {
    /* Ensure proper spacing */
    margin-bottom: 1em;
}

/* Main headings */
.uvc-main-heading {
    /* Ensure visibility */
    display: block;
    
    /* Proper text handling */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Sub-headings */
.uvc-sub-heading {
    /* Ensure visibility */
    display: block;
    margin-top: 0.5em;
    
    /* Proper text handling */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .ult-responsive,
    .uvc-heading,
    .uvc-main-heading,
    .uvc-sub-heading {
        /* Ensure text remains readable */
        color: inherit;
        background: inherit;
    }
}

/* Print styles */
@media print {
    .ult-responsive,
    .uvc-heading,
    .uvc-main-heading,
    .uvc-sub-heading {
        /* Ensure headings are visible in print */
        page-break-inside: avoid;
        orphans: 3;
        widows: 3;
    }
}

/* ============================================================================
   SECTION 22: Ultimate VC Hotspot Tooltips - Button Reset
   ============================================================================
   
   BUG #13: Accessibility Checker error "Tag kotwicy bez prawidłowego href"
   
   PROBLEM:
   Ultimate VC Addons Hotspot shortcode generates tooltip triggers as:
   <a href="#" class="ult-hotspot-tooltip">...</a>
   
   These are interactive triggers, not navigation links.
   Function #30 converts them to semantic <button> elements.
   
   SOLUTION:
   This CSS resets button styles to match the original <a> appearance,
   ensuring visual consistency while improving semantics and accessibility.
   
   WCAG: 4.1.2 (A) Name, Role, Value
   ========================================================================= */

/* Reset button appearance for hotspot tooltip buttons */
button.ult-hotspot-tooltip,
button.ult-tooltipstered {
    /* Remove default button styling */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    
    /* Inherit text styles */
    font: inherit;
    color: inherit;
    text-align: inherit;
    
    /* Remove button appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Cursor */
    cursor: pointer;
    
    /* Display */
    display: inline-block;
    
    /* Remove text decoration */
    text-decoration: none;
}

/* Nested content should not be clickable */
button.ult-hotspot-tooltip *,
button.ult-tooltipstered * {
    pointer-events: none;
}

/* Icon wrapper inside hotspot button */
button.ult-hotspot-tooltip .ult-just-icon-wrapper,
button.ult-tooltipstered .ult-just-icon-wrapper {
    /* Maintain original layout */
    display: block;
    width: 100%;
    height: 100%;
}

/* Focus state - keyboard accessibility */
button.ult-hotspot-tooltip:focus,
button.ult-tooltipstered:focus {
    /* Clear, visible outline */
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    
    /* Box shadow for extra visibility */
    box-shadow: 0 0 0 1px rgba(0, 95, 204, 0.3);
}

/* Active state - visual feedback */
button.ult-hotspot-tooltip:active,
button.ult-tooltipstered:active {
    /* Subtle scale for feedback */
    transform: scale(0.95);
}

/* Hover state - inherit parent styles */
button.ult-hotspot-tooltip:hover,
button.ult-tooltipstered:hover {
    /* Parent theme handles hover effects via .ult-hotspot-tooltip class */
    /* No need to override */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button.ult-hotspot-tooltip:focus,
    button.ult-tooltipstered:focus {
        /* Stronger outline in high contrast */
        outline-width: 4px;
        outline-color: currentColor;
    }
}

/* Touch device support - larger hit area */
@media (max-width: 768px) {
    button.ult-hotspot-tooltip,
    button.ult-tooltipstered {
        /* Minimum touch target size (WCAG 2.5.5 AAA) */
        min-width: 44px;
        min-height: 44px;
        
        /* Center icon if smaller than min size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button.ult-hotspot-tooltip,
    button.ult-tooltipstered,
    button.ult-hotspot-tooltip:active,
    button.ult-tooltipstered:active {
        /* Disable animations */
        transition: none;
        transform: none;
    }
}

/* Print styles */
@media print {
    button.ult-hotspot-tooltip,
    button.ult-tooltipstered {
        /* Indicate non-interactive element in print */
        border: 1px dashed #ccc;
    }
    
    /* Show tooltip content in print */
    button.ult-hotspot-tooltip .hotspot-tooltip-content,
    button.ult-tooltipstered .hotspot-tooltip-content {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================================================
   SECTION 23: Load More Button Fix (Bug #15)
   ========================================================================= */

/**
 * BUG #15: "Wczytaj więcej" button uses <a href="javascript:void(0);">
 * 
 * WCAG VIOLATIONS:
 * - 4.1.2 (A) Name, Role, Value
 * - F42 Failure - Using href="javascript:" without proper semantics
 * 
 * SOLUTION:
 * Convert <a class="button-load-more"> to <button class="button-load-more">
 * JavaScript in accessibility.js handles conversion.
 * CSS ensures button looks and behaves like original link.
 * 
 * SOURCE: dt-the7/inc/helpers/post-navigation.php, line 181
 */

/* Reset button appearance to match link styling */
button.button-load-more {
    /* Remove default button styles */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    
    /* Remove button appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Cursor */
    cursor: pointer;
    
    /* Display */
    display: inline-block;
    
    /* Text */
    text-align: inherit;
    text-decoration: none;
    
    /* Inherit all styles from parent theme */
    /* The7 theme styles a.button-load-more, these apply to button too */
}

/* Ensure nested elements work correctly */
button.button-load-more * {
    pointer-events: none; /* Click goes to button, not children */
}

/* Focus styles - CRITICAL for keyboard accessibility */
button.button-load-more:focus {
    /* Use theme's focus styles if available, otherwise provide basic one */
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

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

button.button-load-more:focus-visible {
    /* Show focus outline for keyboard users */
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Hover state */
button.button-load-more:hover {
    /* Inherit hover styles from theme */
    /* Theme CSS for a.button-load-more:hover applies here */
}

/* Active/pressed state */
button.button-load-more:active {
    /* Inherit active styles from theme */
}

/* Disabled state (when loading more posts) */
button.button-load-more:disabled,
button.button-load-more.button-lazy-loading {
    cursor: wait;
    opacity: 0.6;
    pointer-events: none;
}

/* Loading animation (preserve theme's animation) */
button.button-load-more.button-lazy-loading .stick {
    /* Theme animates these spans, preserve functionality */
    animation: inherit;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button.button-load-more:focus,
    button.button-load-more:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* Touch device support */
@media (max-width: 768px) {
    button.button-load-more {
        /* Minimum touch target size (WCAG 2.5.5 AAA) */
        min-width: 44px;
        min-height: 44px;
        
        /* Center content if smaller than min size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    button.button-load-more,
    button.button-load-more *,
    button.button-load-more .stick {
        /* Disable all animations */
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles */
@media print {
    button.button-load-more {
        /* Hide in print (not functional on paper) */
        display: none;
    }
}

/* ============================================================================
   SECTION 24: YouTube Iframe Accessibility (Bug #20)
   ========================================================================= */

/**
 * BUG #20: YouTube iframes without transcript/caption information
 * 
 * WCAG VIOLATIONS:
 * - 1.2.1 (A) Audio-only and Video-only (Prerecorded)
 * - 1.2.2 (A) Captions (Prerecorded)
 * - 1.2.3 (A) Audio Description or Media Alternative
 * 
 * SOLUTION:
 * Add visible notice informing users about caption/transcript availability
 * Enable captions by default (cc_load_policy=1 in URL)
 */

.youtube-accessibility-notice {
    /* Layout */
    margin: 1em 0;
    padding: 1em;
    
    /* Visual */
    background-color: #f8f9fa;
    border-left: 4px solid #0066cc;
    
    /* Typography */
    font-size: 0.9em;
    line-height: 1.6;
    color: #333;
}

.youtube-accessibility-notice p {
    margin: 0;
}

.youtube-accessibility-notice strong {
    color: #0066cc;
    font-weight: 600;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .youtube-accessibility-notice {
        background-color: #1a1a1a;
        border-left-color: #4a9eff;
        color: #e0e0e0;
    }
    
    .youtube-accessibility-notice strong {
        color: #4a9eff;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .youtube-accessibility-notice {
        border-width: 3px;
        border-left-color: currentColor;
    }
}

/* Print styles */
@media print {
    .youtube-accessibility-notice {
        /* Show in print - important accessibility info */
        border: 1px solid #000;
        page-break-inside: avoid;
    }
}

/* Responsive - smaller screens */
@media (max-width: 768px) {
    .youtube-accessibility-notice {
        font-size: 0.85em;
        padding: 0.8em;
    }
}

/* ============================================================================
   SECTION 25: Fancy Date Link Removal (Bug #21)
   ========================================================================= */

/**
 * BUG #21: Fancy date element should not be a link
 * 
 * PROBLEM: .fancy-date contains <a> linking to date archive
 * This is visual/decorative element, not navigation
 * Date is already linked in post meta elsewhere
 * 
 * SOLUTION:
 * JavaScript converts <a> to <span>
 * CSS ensures non-interactive appearance
 */

/* Ensure fancy-date span (converted from link) looks correct */
.fancy-date span {
    /* Remove any link-like appearance */
    cursor: default;
    text-decoration: none;
}

/* Remove hover effects that might still apply */
.fancy-date span:hover {
    /* No hover effect - it's not interactive */
    text-decoration: none;
    cursor: default;
}

/* Preserve theme's visual styling */
.fancy-date[data-wcag-fixed] {
    /* Already converted - no changes to visual appearance needed */
}

/* ============================================================================
   SECTION 26: WPBakery Icon Element External Link Fix (Bug #22)
   ========================================================================= */

/**
 * BUG #22: External link icon overlaps WPBakery icon element
 * 
 * PROBLEM: .vc_icon_element has main icon displayed outside link
 * Our external-link-icon is inside <a> and overlaps the main icon
 * 
 * HTML structure:
 * <div class="vc_icon_element-inner">
 *     <span class="vc_icon_element-icon fas fa-download"></span> ← Main icon (outside link)
 *     <a class="vc_icon_element-link">
 *         <span class="external-link-icon">...</span> ← Our icon (overlaps!)
 *     </a>
 * </div>
 * 
 * SOLUTION:
 * Position external-link-icon outside the main icon area
 * Display below the icon or to the side
 */

/* WPBakery Icon Element - External Link Icon Positioning */
.vc_icon_element .vc_icon_element-link {
    /* Make link positioned context for absolute positioning */
    position: relative;
    display: inline-block;
}

.vc_icon_element .vc_icon_element-link .external-link-icon {
    /* Position absolutely - bottom right of the icon container */
    position: absolute !important;
    bottom: -8px !important;
    right: -8px !important;
    
    /* Remove default inline styles */
    display: inline-block !important;
    margin: 0 !important;
    
    /* Ensure it's above other content */
    z-index: 10;
    
    /* Optional: Add background for better visibility */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 2px;
}

.vc_icon_element .vc_icon_element-link .external-link-icon svg {
    /* Keep SVG compact */
    display: block !important;
    margin: 0 !important;
}

/* For large icons - position below */
.vc_icon_element-size-lg .vc_icon_element-link .external-link-icon {
    margin-top: 12px !important;
}

/* For small icons - smaller spacing */
.vc_icon_element-size-sm .vc_icon_element-link .external-link-icon {
    margin-top: 4px !important;
}

.vc_icon_element-size-sm .vc_icon_element-link .external-link-icon svg {
    width: 10px !important;
    height: 10px !important;
}

/* Ensure screen reader text doesn't interfere with layout */
.vc_icon_element .vc_icon_element-link .screen-reader-text {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hover state - ensure icon is visible */
.vc_icon_element .vc_icon_element-link:hover .external-link-icon {
    opacity: 1;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .vc_icon_element .vc_icon_element-link .external-link-icon svg {
        /* Ensure icon is visible in high contrast */
        outline: 1px solid currentColor;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .vc_icon_element .vc_icon_element-link .external-link-icon {
        margin-top: 6px !important;
    }
}

/* ============================================================================
   END OF ACCESSIBILITY STYLES
   ========================================================================= */