/* Translation System Styles */

/* Hide/Show language-specific content */
.lang-hidden {
    display: none !important;
}

.lang-visible {
    display: block !important;
}

/* For inline elements like spans within paragraphs */
span.lang-hidden {
    display: none !important;
}

span.lang-visible {
    display: inline !important;
}

/* For any element that might need special handling */
[data-lang].lang-hidden {
    display: none !important;
}

[data-lang].lang-visible {
    display: block !important;
}

/* Language switcher button states */
.language-switcher button.active {
    font-weight: bold;
    transform: scale(1.05);
}

/* Smooth transitions for language switching */
[data-lang] {
    transition: opacity 0.3s ease-in-out;
}

.lang-hidden {
    opacity: 0;
}

.lang-visible {
    opacity: 1;
}

/* Special handling for different element types */
div.lang-visible, p.lang-visible, section.lang-visible, article.lang-visible,
header.lang-visible, footer.lang-visible, nav.lang-visible, main.lang-visible,
aside.lang-visible, h1.lang-visible, h2.lang-visible, h3.lang-visible,
h4.lang-visible, h5.lang-visible, h6.lang-visible, ul.lang-visible,
ol.lang-visible, li.lang-visible, dd.lang-visible, dt.lang-visible,
dl.lang-visible, figure.lang-visible, figcaption.lang-visible,
blockquote.lang-visible, hr.lang-visible, pre.lang-visible {
    display: block !important;
}

/* For inline elements */
span.lang-visible, strong.lang-visible, em.lang-visible,
b.lang-visible, i.lang-visible, u.lang-visible, s.lang-visible,
small.lang-visible, code.lang-visible, mark.lang-visible, time.lang-visible,
label.lang-visible, input.lang-visible, textarea.lang-visible {
    display: inline !important;
}

/* Special handling for links - make them fill their container */
a.lang-visible {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* For dropdown items specifically */
.dropdown-item span.lang-visible {
    display: inline !important;
}

/* For inline-block elements */
img.lang-visible, button.lang-visible, select.lang-visible {
    display: inline-block !important;
}

/* For table elements */
table.lang-visible {
    display: table !important;
}

tr.lang-visible {
    display: table-row !important;
}

td.lang-visible, th.lang-visible {
    display: table-cell !important;
}

thead.lang-visible, tbody.lang-visible, tfoot.lang-visible {
    display: table-row-group !important;
}

col.lang-visible {
    display: table-column !important;
}

colgroup.lang-visible {
    display: table-column-group !important;
}

/* Make dropdown items fully clickable */
.dropdown-item {
    position: relative;
}

.dropdown-item span {
    pointer-events: none; /* Prevent spans from interfering with clicks */
}

/* Ensure the entire dropdown item area is clickable */
.navbar-nav .nav-link {
    position: relative;
}

.navbar-nav .nav-link span {
    pointer-events: none; /* Prevent spans from interfering with clicks */
}

/* Fix button clickability with translation spans */
.btn {
    position: relative;
}

.btn span[data-lang] {
    pointer-events: none; /* Prevent spans from interfering with clicks */
}

/* Service cards alignment */
.service-card {
    display: flex;
    flex-direction: column;
}

.service-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-card .service-description {
    flex-grow: 1;
}

.service-card .btn {
    margin-top: auto;
}

/* Fix for fixed navbar overlapping with section anchors */
.services-section {
    scroll-margin-top: 80px; /* Adjust based on navbar height */
}

.why-choose-section {
    scroll-margin-top: 80px; /* Adjust based on navbar height */
}

.cta-section {
    scroll-margin-top: 80px; /* Adjust based on navbar height */
}

/* Dropdown arrow styling */
.dropdown-arrow {
    margin-left: 5px;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav-link.dropdown-toggle:hover .dropdown-arrow,
.nav-link.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Fix breadcrumb alignment and text wrapping */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 0.5rem;
    color: #6c757d;
}

.breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}

.breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
    white-space: nowrap;
}

.breadcrumb-item a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

/* Footer alignment fixes */
.footer address p {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.footer address p i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.footer .copyright {
    white-space: nowrap;
}

/* Ensure footer contact info stays on same line */
@media (max-width: 576px) {
    .footer address p {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .footer address p i {
        margin-bottom: 0.25rem;
    }
}