/*
Theme Name: Astra Child
Template: astra
*/

/* Contenedor principal: Ocupa el 100% de la pantalla */
.mp-breadcrumbs-container {
    width: 100%;
    display: block;
    clear: both;
    padding: 12px 0;
    background-color: #fffaf5; /* Un fondo naranja muy sutil para dar calidez */
    border-bottom: 2px solid #ff9800; /* Línea naranja vibrante en la base */
    margin-bottom: 20px;
}

/* Contenido interno: Centrado y alineado con el layout de Astra */
.mp-breadcrumbs-content {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
    font-size: 14px;
    font-family: inherit; /* Usa la misma fuente que tu tema */
}

/* Estilo de los enlaces */
.mp-breadcrumbs-content a {
    text-decoration: none;
    color: #e67e22; /* Naranja principal */
    transition: color 0.2s ease-in-out;
    font-weight: 500;
}

/* Efecto al pasar el ratón */
.mp-breadcrumbs-content a:hover {
    color: #d35400; /* Naranja más oscuro al hacer hover */
    text-decoration: underline;
}

/* Estilo de los separadores (las flechas ›) */
.mp-breadcrumbs-content span {
    margin: 0 10px;
    color: #f39c12; /* Naranja medio */
    font-weight: bold;
}

/* Texto de la página actual (no es enlace) */
.mp-breadcrumbs-content .current {
    font-weight: 600;
    color: #444; /* Gris oscuro para que se lea bien */
}

/* Bajamos el nivel del breadcrumb */
.mp-breadcrumbs-container {
    position: relative;
    z-index: 10; /* Un valor bajo */
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #eee;
}


/* 2. Tu breadcrumb con z-index bajo */
.mp-breadcrumbs-container {
    position: relative;
    z-index: 10; /* Mucho menor que el 9999 del menú */
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #eee;
}

/* 3. Ocultar si el BODY tiene la clase de header transparente */
/* Astra Builder usa estas clases habitualmente */
body.ast-theme-transparent-header .mp-breadcrumbs-container,
body.ast-transparent-header-enabled .mp-breadcrumbs-container {
    display: none !important;
}