/**
 * @package     Joomla.Site
 * @subpackage  Templates.baby-in-brazil
 *
 * @author      Oleg Kosarev (DevOpsolution) <dev.oleg.kosarev@outlook.com>
 * @copyright   (C) 2026 Oleg Kosarev. All Rights Reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @version     1.0.0
 * @since       1.0.0
 */

:root {
    --page-max-width: 1200px;
    --page-min-width: 1200px;
    --root-padding: 15px;
}

/* Scoped utilities for Breadcrumbs */
.mod-breadcrumbs {
    /* Kill default Bootstrap 5 divider since we use custom SVG separator */
    --bs-breadcrumb-divider: '';

    color: var(--text-color);
    background: var(--background-color);
    font-size: 16px;
}

.mod-breadcrumbs .icon {
    display: inline-block;
}

.mod-breadcrumbs .icon svg {
    fill: var(--theme-color);
}

.mod-breadcrumbs .icon--right {
    transform: rotate(-90deg);
}

.mod-breadcrumbs .flex--equal-width {
    -ms-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-shrink: 0;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -ms-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    -webkit-flex-basis: 0;
    flex-basis: 0;
}

.mod-breadcrumbs .space {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

/* Transitions for all children */
.mod-breadcrumbs>* {
    transition: opacity .3s;
}

.mod-breadcrumbs .breadcrumb-item {
    display: inline;
    /* Legacy override, consider removing if flex works better */
}

.breadcrumb__left {
    width: calc((var(--page-max-width) - var(--root-padding) * 4) / 12 * 2 + var(--root-padding) / 2);
}

/* Scoped Patterns */
.mod-breadcrumbs .pattern {
    background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
    background-size: 4px 4px;
    background-position: center left;
}

.mod-breadcrumbs .pattern--cubes {
    height: 24px;
    color: var(--line);
    background-image: radial-gradient(circle at 1px 1px, var(--theme-color) 1px, transparent 0);
    background-size: 4px 4px;
    background-position: center left;
}

.mod-breadcrumbs .pattern--cubes-12 {
    height: 12px;
}

/* Ensure no content in pseudo-element separators */
.mod-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    content: none;
}