/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

.language_list-wrap {
    z-index: 2;
    background-color: #fff;
    border-radius: 20px;
    padding: 1rem 1.2rem;
    display: none;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    /* Mobile-first: scrollable language list */
    max-height: 70vh;
    overflow-y: auto;
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

/* Mobile optimization for language list */
@media (max-width: 768px) {
    .language_list-wrap {
        max-height: 60vh;
        padding: 0.75rem 1rem;
        border-radius: 16px;
    }
}

/* Landscape mode adjustment */
@media (max-height: 500px) and (orientation: landscape) {
    .language_list-wrap {
        max-height: 80vh;
    }
}

.language_list {
    grid-row-gap: .8rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 0;
    padding-left: 0;
    display: flex;
}

.flag-image {
    width: 1.6rem;
}

.translate_feature img {
    max-width: 100%;
    display: inline-block;
}

.hover-underline.lang-select {
    color: #214d8b;
    /* Increased from 0.9rem for better mobile readability */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    /* Better touch target spacing */
    padding: 0.5rem 0;
    display: block;
    text-decoration: none;
    /* Button reset styles for semantic button elements */
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

/* Mobile font size optimization */
@media (max-width: 768px) {
    .hover-underline.lang-select {
        /* iOS native font size for better readability */
        font-size: 1.0625rem;
        /* Larger touch target on mobile */
        padding: 0.625rem 0;
    }
}

.hover-underline {
    cursor: pointer;
}

/* Touch feedback */
.hover-underline.lang-select:active {
    opacity: 0.7;
}

.translate_icon.hide {
    display: none;
}

.translate_icon {
    flex: none;
    justify-content: center;
    width: 1.9rem;
    min-width: 1.9rem;
    height: 2rem;
    min-height: 2rem;
    display: flex;
}


.translate-font-icon {
    font-family: "Font awesome 5 pro 400", sans-serif;
    font-size: 32px;
}

.language_item {
    grid-column-gap: .8rem;
    align-items: center;
    margin-bottom: 0;
    display: flex;
}

.translate_feature li {
    margin-bottom: 5px;
    font-size: 1rem;
}

.translate_feature img {
    display: inline-block;
}

.translate_feature img {
    vertical-align: middle;
    display: inline-block;
    width: 32px;
    height: 32px;

}

.translation-overlay-close {
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0%;
}

.google-translate {
    width: 0;
    min-width: 0;
    overflow: hidden;
}

/**
 * Accessibility: Keyboard Focus Indicators
 * WCAG 2.1 Level AA 2.4.7 Focus Visible
 */

/* Focus indicator for translate button - keyboard only */
.translate_button:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
    /* High contrast mode support */
    outline-color: Highlight;
}

/* Remove outline on mouse click (browser default) */
.translate_button:focus:not(:focus-visible) {
    outline: none;
}

/* Focus indicator for language menu items - keyboard only */
.hover-underline.lang-select:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
    background-color: rgba(34, 113, 177, 0.1);
    /* High contrast mode support */
    outline-color: Highlight;
}

/* Remove outline on mouse click */
.hover-underline.lang-select:focus:not(:focus-visible) {
    outline: none;
}

/* Fallback for older browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    .translate_button:focus,
    .hover-underline.lang-select:focus {
        outline: 3px solid #2271b1;
        outline-offset: 2px;
    }
}

/* High contrast mode enhancement */
@media (prefers-contrast: high) {
    .translate_button:focus-visible,
    .hover-underline.lang-select:focus-visible {
        outline-width: 4px;
        outline-style: solid;
    }
}

/**
 * Loading State Indicators
 * Provides visual feedback during translation
 */

/* Loading spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Translate button loading state */
.translate_button.translating {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

/* Add spinning animation to icon during translation */
.translate_button.translating .translate_icon {
    animation: spin 1s linear infinite;
}

/* Pulse animation for subtle feedback */
@keyframes pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.translate_button.translating {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .translate_button.translating .translate_icon {
        animation: none;
    }
    .translate_button.translating {
        animation: none;
        opacity: 0.7;
    }
}

/**
 * Screen Reader Only (Visually Hidden)
 * WCAG 2.1 Technique C7: Using CSS to hide a portion of content
 * https://www.w3.org/WAI/WCAG21/Techniques/css/C7
 *
 * Makes content accessible to screen readers while visually hidden.
 * Used for ARIA live regions and status announcements.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Allow focusable sr-only elements to be visible when focused */
.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/**
 * =================================================================
 * NEW DISPLAY TYPES STYLES
 * Mobile-first responsive design with WCAG-compliant touch targets
 * =================================================================
 */

/**
 * Header Widget Styles
 */
.gtcw-header-widget {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.gtcw-header-desktop,
.gtcw-header-horizontal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gtcw-header-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.gtcw-icon {
    font-size: 1.25rem;
}

.gtcw-label-text {
    font-size: 0.9rem;
}

.gtcw-select {
    min-height: 48px; /* Mobile-first: 48px */
    min-width: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem; /* Prevent iOS zoom */
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.gtcw-lang-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gtcw-lang-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    font-size: 0.9rem;
}

.gtcw-lang-btn:hover {
    background: #f0f0f0;
    border-color: #2271b1;
}

.gtcw-lang-btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

.gtcw-flag-icon {
    width: 24px;
    height: 16px;
    object-fit: cover;
}

/* Tablet and up */
@media (min-width: 640px) {
    .gtcw-header-widget {
        padding: 1rem 2rem;
    }

    .gtcw-select {
        min-height: 44px; /* Desktop: 44px */
        padding: 0.5rem 1rem;
        max-width: 300px;
        width: auto;
    }

    .gtcw-lang-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/**
 * Shortcode Widget Styles
 */
.gtcw-shortcode-widget {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
}

.gtcw-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.gtcw-shortcode-select {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.gtcw-horizontal-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gtcw-shortcode-btn,
.gtcw-shortcode-btn-vertical {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    font-size: 0.9rem;
    width: 100%; /* Mobile: full width */
}

.gtcw-vertical-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtcw-vertical-list li {
    margin-bottom: 0.5rem;
}

.gtcw-shortcode-btn:hover,
.gtcw-shortcode-btn-vertical:hover {
    background: #f0f0f0;
    border-color: #2271b1;
}

.gtcw-shortcode-btn:focus-visible,
.gtcw-shortcode-btn-vertical:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

/* Tablet and up */
@media (min-width: 640px) {
    .gtcw-shortcode-widget {
        max-width: 500px;
    }

    .gtcw-shortcode-select {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    .gtcw-shortcode-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        width: auto; /* Desktop: auto width */
    }

    .gtcw-shortcode-btn-vertical {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/**
 * WordPress Widget Styles
 */
.gtcw-widget-vertical {
    width: 100%;
}

.gtcw-widget-select {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.gtcw-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gtcw-widget-list li {
    margin-bottom: 0.5rem;
}

.gtcw-widget-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.gtcw-widget-btn:hover {
    background: #f0f0f0;
    border-color: #2271b1;
}

.gtcw-widget-btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

.gtcw-lang-name {
    flex: 1;
}

/* Tablet and up */
@media (min-width: 640px) {
    .gtcw-widget-select {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    .gtcw-widget-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
}

/**
 * Focus Indicators for All New Display Types
 * WCAG 2.1 Level AA 2.4.7 Focus Visible
 */
.gtcw-select:focus-visible,
.gtcw-shortcode-select:focus-visible,
.gtcw-widget-select:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

/* Remove focus outline on mouse click */
.gtcw-select:focus:not(:focus-visible),
.gtcw-lang-btn:focus:not(:focus-visible),
.gtcw-shortcode-select:focus:not(:focus-visible),
.gtcw-shortcode-btn:focus:not(:focus-visible),
.gtcw-widget-select:focus:not(:focus-visible),
.gtcw-widget-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    .gtcw-select:focus,
    .gtcw-lang-btn:focus,
    .gtcw-shortcode-select:focus,
    .gtcw-shortcode-btn:focus,
    .gtcw-widget-select:focus,
    .gtcw-widget-btn:focus {
        outline: 3px solid #2271b1;
        outline-offset: 2px;
    }
}