/**
 * US Transceivers - Breadcrumbs Styles
 */

/* Breadcrumb Container */
.breadcrumbs {
    background: var(--background-gray, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 15px 0;
    margin-bottom: 30px;
    font-size: 14px;
}

.breadcrumbs .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* Breadcrumb Links */
.breadcrumbs a {
    color: var(--text-dark, #484848);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs a:hover {
    color: var(--accent-red, #ea272f);
}

/* Home Icon */
.breadcrumbs i.fa-home {
    margin-right: 5px;
    color: var(--primary-blue, #304b92);
}

/* Breadcrumb Separator */
.breadcrumb-separator {
    margin: 0 10px;
    color: var(--text-light, #6b7280);
    user-select: none;
}

/* Current Page */
.breadcrumb-current {
    color: var(--primary-blue, #304b92);
    font-weight: 600;
}

/* Schema.org Markup */
.breadcrumbs [itemprop="itemListElement"] {
    display: inline;
}

.breadcrumbs [itemprop="item"] {
    display: inline-flex;
    align-items: center;
}

.breadcrumbs [itemprop="name"] {
    display: inline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .breadcrumbs {
        font-size: 12px;
        padding: 10px 0;
        margin-bottom: 20px;
    }

    .breadcrumb-separator {
        margin: 0 5px;
    }

    .breadcrumbs .container {
        gap: 3px;
    }

    /* Truncate long breadcrumb items on mobile */
    .breadcrumbs a [itemprop="name"],
    .breadcrumb-current {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    .breadcrumbs i.fa-home {
        margin-right: 3px;
    }
}

@media (max-width: 480px) {
    .breadcrumbs {
        font-size: 11px;
        padding: 8px 0;
        margin-bottom: 15px;
    }

    .breadcrumb-separator {
        margin: 0 3px;
    }

    .breadcrumbs a [itemprop="name"],
    .breadcrumb-current {
        max-width: 100px;
    }
}