/**
 * Polylang Switcher Flags - IPMFlow Design System Integration
 *
 * @package   PestTrendAnalysis
 * @copyright 2025 Havasi Archibald
 * @license   GPL-2.0-or-later
 * @since     1.0.0
 */

.polylang-switcher-flags ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ipm-spacing-sm); /* Consistent spacing from design system */
}

.polylang-switcher-flags ul li {
    margin: 0;
    padding: 0;
    line-height: 1; /* Prevent extra space around images */
}

.polylang-switcher-flags ul li a {
    display: inline-block;
    padding: var(--ipm-spacing-xs); /* Add some padding around the image link */
    text-decoration: none;
    border: var(--ipm-border-width) solid transparent;
    border-radius: var(--ipm-border-radius);
    transition: var(--ipm-transition);
    background-color: transparent; /* Use a transparent background by default */
    box-shadow: none; /* Cleaner look, shadow applied on hover */
}

.polylang-switcher-flags ul li a:hover,
.polylang-switcher-flags ul li a:focus {
    border-color: var(--ipm-primary-color);
    transform: scale(1.08) translateY(-2px); /* Slightly more subtle transform */
    box-shadow: var(--ipm-shadow-hover);
    background-color: var(--ipm-hover-bg);
    outline: none; /* Remove default focus outline */
}

.polylang-switcher-flags ul li.current-lang a {
    border-color: var(--ipm-primary-color);
    box-shadow: var(--ipm-shadow);
    background-color: var(--ipm-bg-secondary);
    cursor: default;
}

.polylang-switcher-flags ul li.current-lang a:hover,
.polylang-switcher-flags ul li.current-lang a:focus {
    transform: none; /* No scale for current language */
    box-shadow: var(--ipm-shadow); /* Keep shadow consistent on hover for current item */
}

.polylang-switcher-flags ul li img {
    display: block;
    width: 24px;
    height: auto;
    border-radius: calc(var(--ipm-border-radius) / 2); /* Consistent, smaller radius */
    box-shadow: var(--ipm-shadow); /* Consistent shadow */
    transition: var(--ipm-transition);
    filter: brightness(1) contrast(1); /* Reset filter for a cleaner base look */
}

.polylang-switcher-flags ul li a:hover img,
.polylang-switcher-flags ul li a:focus img {
    filter: none; /* Remove filter on hover for clarity */
    box-shadow: var(--ipm-shadow-lg); /* Elevate image on hover */
}

/* Responsive Adjustments for a Better Mobile Experience */

@media (max-width: 768px) {
    /* The #app-header-extras-container rules are generic and should ideally reside
       in the main stylesheet. Keeping them here as per original file structure. */
    #app-header-extras-container {
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .language-switcher-label {
        font-size: var(--ipm-font-size-sm); /* Use design system font size */
    }

    .polylang-switcher-flags ul {
        gap: var(--ipm-spacing-xs); /* Smaller gap for small screens */
    }

    .polylang-switcher-flags ul li img {
        width: 20px; /* Smaller flags on mobile */
    }

    .polylang-switcher-flags ul li a {
        padding: 2px; /* Reduce padding on mobile */
    }
}