/**
 * Componente: Breadcrumbs Blog
 * Estilos para breadcrumbs exclusivos del blog.
 *
 * Estructura:
 * .breadcrumbs-blog
 *   .breadcrumbs-blog__list
 *     .breadcrumbs-blog__item
 *       .breadcrumbs-blog__link / .breadcrumbs-blog__current
 *       .breadcrumbs-blog__separator
 */

/* ===========================================
   Reset de estilos de Materialize en <nav>
   
   MOTIVO: Materialize aplica estilos globales a <nav>:
   - background-color: #ee6e73 (rojo)
   - color: #fff
   - height: 56px / line-height: 56px
   - box-shadow (via .z-depth-1, nav)
   - width: 100%
   
   Usamos `!important` porque Materialize tiene alta
   especificidad. Solo afecta a .breadcrumbs-blog,
   NO a otros <nav> del sitio.
   =========================================== */
nav.breadcrumbs-blog {
    /* Neutralizar Materialize - !important necesario por especificidad */
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    width: auto !important;
    color: inherit !important;
    border: none !important;
    
    /* Estilos propios del componente */
    margin: 32px 0 24px 0;
    padding: 0;
}

/* ===========================================
   Contexto: Single Post (sin .container)
   En single, el breadcrumb está directo en el .container
   del template, mismo padding que el article content.
   =========================================== */
.single nav.breadcrumbs-blog {
    padding-left: 30px;
    padding-right: 30px;
}

/* ===========================================
   Lista de crumbs
   =========================================== */
.breadcrumbs-blog__list {
    display: flex;
    flex-wrap: nowrap; /* Una sola línea en desktop */
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden; /* Evitar desborde */
}

.breadcrumbs-blog__item {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap; /* Evitar saltos de línea */
    flex-shrink: 0; /* No colapsar items */
}

/* Último item puede truncarse si es muy largo */
.breadcrumbs-blog__item:last-child {
    flex-shrink: 1;
    min-width: 0;
}

/* ===========================================
   Separador
   =========================================== */
.breadcrumbs-blog__separator {
    display: inline-block;
    margin: 0 8px;
    color: #999;
    font-size: 14px;
    font-weight: 300;
}

/* ===========================================
   Links
   =========================================== */
.breadcrumbs-blog__link {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs-blog__link:hover,
.breadcrumbs-blog__link:focus {
    color: #8a0003;
    text-decoration: underline;
}

/* SVG icon en el link de Inicio */
.breadcrumbs-blog__link svg {
    color: #888;
    transition: color 0.2s ease;
}

.breadcrumbs-blog__link:hover svg {
    color: #8a0003;
}

/* ===========================================
   Elemento actual (último crumb)
   =========================================== */
.breadcrumbs-blog__current {
    color: #1d1d1b;
    font-weight: 500;
    /* Truncar si es muy largo */
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================
   Responsive: Mobile
   =========================================== */
@media (max-width: 600px) {
    nav.breadcrumbs-blog {
        margin-bottom: 16px;
        margin-top: 24px;
    }

    .breadcrumbs-blog__list {
        flex-wrap: wrap; /* En mobile sí puede hacer wrap */
    }

    .breadcrumbs-blog__item {
        font-size: 12px;
        white-space: normal; /* Permitir wrap en mobile */
    }

    .breadcrumbs-blog__separator {
        margin: 0 6px;
    }

    .breadcrumbs-blog__current {
        max-width: 200px;
    }
}