/**
 * Language-specific responsive adjustments
 * 
 * This stylesheet contains adjustments for different languages to prevent overlaps
 * and handle text length differences properly.
 */

/* General language adjustments */
.nav-item {
    white-space: normal !important; /* Allow wrapping */
    padding: 0.25rem 0.5rem;
}

.btn, 
.nav-link,
.dropdown-item {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
}

/* German-specific adjustments */
html[lang="de"] .navbar-nav {
    flex-wrap: wrap !important;
}

html[lang="de"] .navbar-nav .nav-item {
    margin-bottom: 0.25rem;
}

html[lang="de"] .btn {
    font-size: 0.9em; /* Slightly smaller font for buttons in German */
}

html[lang="de"] .btn-sm {
    font-size: 0.8em;
    padding: 0.2rem 0.4rem;
}

html[lang="de"] .dropdown-item {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Long text adjustments for languages with longer words/phrases */
html[lang="de"] .text-truncate,
html[lang="nl"] .text-truncate,
html[lang="fi"] .text-truncate {
    max-width: 95%;
    display: inline-block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    html[lang="de"] .navbar-nav .nav-link,
    html[lang="fi"] .navbar-nav .nav-link,
    html[lang="nl"] .navbar-nav .nav-link,
    html[lang="pl"] .navbar-nav .nav-link {
        font-size: 0.9em;
        padding: 0.3rem 0.5rem;
    }
    
    /* More extreme reduction for very small screens */
    @media (max-width: 576px) {
        html[lang="de"] .navbar-nav .nav-link {
            font-size: 0.85em;
        }
    }
}

/* Tailwind-compatible classes for card and flex components */
html[lang="de"] .card-title,
html[lang="nl"] .card-title,
html[lang="fi"] .card-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
}

/* Ensure flexbox items don't overflow in German */
html[lang="de"] .flex,
html[lang="de"] .d-flex {
    flex-wrap: wrap !important;
}

/* Adjustments for any RTL languages */
html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}