/**
 * WPPro Header Footer - Icon Style Overrides
 * 
 * This CSS provides styling overrides for the wppro-hf plugin.
 * Core functional fixes (z-index, overflow) are in the plugin itself.
 * 
 * This file handles design/style customizations only.
 * 
 * @since 1.0.0
 */

/* ==========================================================================
   WCAG Accessibility: Focus State Styles
   
   WCAG 2.1 Success Criterion 2.4.7: Focus Visible
   Any keyboard operable user interface must have a visible focus indicator.
   
   These styles ensure that all focusable elements have a clearly visible
   focus state that meets contrast requirements. The blue color scheme
   provides sufficient contrast against most backgrounds.
   
   - Outline: 2px solid blue (#005A9C) for clear visibility
   - Background: Light blue (#B3D4FC) for additional visual emphasis
   
   Note: Some elements may need more specific selectors if these styles
   conflict with existing design. Adjust as needed for your theme.
   
   @since 1.0.0
   ========================================================================== */

/**
 * Global focus styles for all focusable elements
 * Applies to links, buttons, inputs, and any element that receives focus
 */
:focus {
    outline: 2px solid #005A9C; /* Blue outline - meets WCAG contrast requirements */
    background-color: #B3D4FC; /* Light blue background for additional visibility */
}

/**
 * Focus styles with custom class fallback
 * Use .custom-focus-style class for elements that need explicit focus styling
 */
:focus,
.custom-focus-style {
    outline: 2px solid #005A9C; /* Blue outline - meets WCAG contrast requirements */
    background-color: #B3D4FC; /* Light blue background for additional visibility */
}

/* ==========================================================================
   Focus Style Refinements
   
   Additional focus styles for specific elements that may need different
   treatment (e.g., elements where background color change is undesirable)
   ========================================================================== */

/**
 * Focus-visible for modern browsers
 * Only shows focus styles when using keyboard navigation, not mouse clicks
 * This provides better UX while maintaining accessibility
 */
:focus-visible {
    outline: 2px solid #005A9C;
    outline-offset: 2px; /* Slight offset for better visibility */
}

/**
 * Remove default focus ring for mouse users in supported browsers
 * Focus will still show for keyboard users via :focus-visible
 * 
 * IMPORTANT: We exclude wppro-hf plugin elements to preserve their focus behavior
 */
:focus:not(:focus-visible):not([class*="wppro-hf"]):not(.wppro-hf-hide) {
    outline: none;
    background-color: transparent;
}

/* ==========================================================================
   WPPro Header/Footer - Focus & Positioning Fixes
   
   These styles fix keyboard navigation issues with dropdown chevrons:
   1. Ensure parent containers have position:relative for absolute children
   2. Maintain visible focus states on ADA expand buttons
   3. Properly position the hidden expand button when focused
   
   @since 1.1.0
   ========================================================================== */

/**
 * Ensure navbox containers establish positioning context
 * This prevents absolutely positioned children from flying to viewport edges
 */
[class*="navbox"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/**
 * Ensure dropdown trigger buttons have proper focus styling
 * These are desktop button elements that contain the chevron
 */
[class*="navbox"] > button:focus {
    outline: 2px solid #005A9C !important;
    outline-offset: 2px !important;
    background-color: #B3D4FC !important;
    border-radius: 3px;
}

/**
 * Fix the ADA expand button positioning when focused
 * Keep it absolutely positioned within the navbox but visible
 */
.wppro-hf-hide:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    padding: 4px 8px !important;
    margin-left: 4px;
}

/**
 * Ensure the ADA expand button has visible focus
 * Override the global :focus:not(:focus-visible) rule
 */
.wppro-hf-hide:focus {
    outline: 2px solid #005A9C !important;
    outline-offset: 2px !important;
    background-color: #B3D4FC !important;
    border-radius: 3px;
}

/**
 * Ensure the desktop-only ADA button receives proper focus styling
 */
[class*="wppro-hf-ws-only-ada"]:focus {
    outline: 2px solid #005A9C !important;
    outline-offset: 2px !important;
    background-color: #B3D4FC !important;
}

/* ==========================================================================
   Dropdown Arrow Icon Styling
   
   Override: Change dropdown icon from Bootstrap Icons (bi-triangle-fill)
   to a pure CSS chevron/arrow. This approach doesn't require any icon fonts.
   
   The CSS creates a small bordered arrow using the border-trick technique,
   which works in all browsers without external font dependencies.
   
   @since 1.0.0
   ========================================================================== */

/**
 * Hide the default Bootstrap Icons triangle content
 * and set up the container for our CSS arrow
 */
.wppro-hf-flip-icon {
    /* Remove the rotation - we'll create our own arrow */
    transform: none !important;
    
    /* Position and spacing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
    
    /* Size of the arrow container */
    width: 10px;
    height: 10px;
    
    /* No animation */
    font-size: 0 !important;
    
    /* Ensure visibility */
    visibility: visible;
    opacity: 1;
}

/**
 * Flip icon inside the hidden ADA button needs explicit visibility
 */
.wppro-hf-hide .wppro-hf-flip-icon {
    display: inline-flex !important;
    visibility: visible !important;
}

/**
 * When the ADA button is focused, keep the icon visible
 */
.wppro-hf-hide:focus .wppro-hf-flip-icon {
    display: inline-flex !important;
    visibility: visible !important;
}

/**
 * Hide the original Bootstrap Icons content
 * by making it invisible and replacing with CSS arrow
 */
.wppro-hf-flip-icon::before {
    /* Hide the original icon character */
    content: '' !important;
    display: none !important;
}

/**
 * Create a CSS chevron/arrow using borders
 * This technique creates a "V" shape pointing down
 */
.wppro-hf-flip-icon::after {
    content: '';
    display: block;
    
    /* Arrow size - adjust for larger/smaller arrow */
    width: 5px;
    height: 5px;
    
    /* Create the arrow shape using borders */
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    
    /* Rotate 45deg to point downward */
    transform: rotate(45deg);
    
    /* Inherit text color */
    border-color: currentColor;
    
    /* Offset slightly up since rotation pushes it down */
    margin-top: -2px;
}

/* ==========================================================================
   Animated Underline Effect for Links
   
   A sleek animated underline that slides in from the left on hover.
   Uses CSS transforms and pseudo-elements for smooth 60fps animation.
   
   The underline:
   - Starts with 0 width (invisible)
   - Expands to full width on hover
   - Animates from left to right
   - Uses currentColor to match link text color
   
   @since 1.0.0
   ========================================================================== */

/**
 * Global animated underline for ALL links (Desktop Only)
 * 
 * IMPORTANT: We do NOT set display: inline-block or width: fit-content globally
 * as this breaks mobile navigation. The underline animation works without them.
 */
@media (min-width: 769px) {
    /* Base link setup - position relative for ::after positioning */
    a {
        position: relative;
        text-decoration: none;
    }

    /* The animated underline pseudo-element */
    a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px; /* Underline thickness */
        background-color: currentColor; /* Matches the link text color */
        transform: scaleX(0);
        transform-origin: left center; /* Animate from left side */
        transition: transform 0.3s ease-out;
    }

    /* Hover/Focus state - expand the underline */
    a:hover::after,
    a:focus::after {
        transform: scaleX(1);
    }

    /* Exclude certain links from animated underline */
    a.btn::after,
    a.button::after,
    a.no-underline::after,
    a[class*="skip-link"]::after,
    .logo a::after,
    [class*="wppro-hf-logo"] a::after,
    a[class*="social"]::after,
    a img::after {
        display: none;
    }
}

/* ==========================================================================
   Underline Animation Variants (Desktop Only)
   
   Alternative animation styles you can use by adding classes to links.
   ========================================================================== */

@media (min-width: 769px) {
    /**
     * Center-out animation - underline expands from center
     * Add class "underline-center" to use this variant
     */
    a.underline-center::after {
        transform-origin: center center;
    }

    /**
     * Right-to-left animation - underline slides in from right
     * Add class "underline-right" to use this variant
     */
    a.underline-right::after {
        transform-origin: right center;
    }

    /**
     * Thicker underline variant
     * Add class "underline-thick" for a bolder look
     */
    a.underline-thick::after {
        height: 3px;
    }

    /**
     * Exclude certain links from animated underline
     * Buttons, images, and skip links don't need underlines
     */
    a.btn::after,
    a.button::after,
    a.no-underline::after,
    a[class*="skip-link"]::after,
    a img + ::after {
        display: none;
    }

    /* ==========================================================================
       Mega Menu Width Override
       
       Forces 3-column mega menus to a consistent width.
       Uses attribute selector to match ANY headerUID prefix.
       ========================================================================== */
    [class*="wppro-hf-megamenu-3-col"] {
        width: 1000px !important;
    }
}