.small-section-title {
    h6 {
        background: rgba(255, 29, 36, .2);
        padding: 8px 16px;
        width: fit-content;
        border-radius: 12px;
        color: #ff1d24!important;
        text-transform: uppercase;
        font-size: 18px;
        &::before {
            content: "# ";
        }
    }
    p {
        background: rgba(255, 29, 36, .2);
        padding: 8px 16px;
        width: fit-content;
        border-radius: 12px;
        color: #ff1d24!important;
    }
}

.small-section-title-white {
    h6 {
        padding: 8px 16px;
        width: fit-content;
        border-radius: 12px;
        color: #ff1d24!important;
        text-transform: uppercase;
        font-size: 18px;
        &::before {
            content: "# ";
        }
    }
    p {
        background: transparent;
        padding: 8px 16px;
        width: fit-content;
        border-radius: 12px;
        color: white!important;
        font-weight: 600!important;
        position: relative;
        &::before {
            content: " ";
            width: 10px;
            height: 10px;
            background: #ff1d24;
            position: absolute;
            border-radius: 100%;
            top: 10px;
            left: 0px;
        }
    }
}

.one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.two-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.three-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.four-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

span.different-color {
    color: #ff1d24;
}

.post-categories {
  display: flex!important;
  overflow-x: hidden;
  gap: 10px;
}

.post-categories a[rel="tag"] {
  background: rgba(255, 29, 36, 0.2) !important;
  padding: 5px 10px !important;
  border: 1px solid #ff1d24 !important;
  width: fit-content !important;
  border-radius: 12px !important;
  color: #ff1d24 !important;
  text-wrap: nowrap !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/**
 * Breadcrumbs Styles
 * Styles for the breadcrumbs shortcode navigation
 */

/* Main wrapper */
.breadcrumbs-wrapper {
    padding: 15px 0;
    font-size: 14px;
    line-height: 1.4;
}

/* List container */
.breadcrumbs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* Individual breadcrumb item */
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Breadcrumb links */
.breadcrumb-item a {
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.breadcrumb-item a:hover {
    color: #ff1d24;
    background: rgba(255, 29, 36, 0.05);
}

/* Current/active item */
.breadcrumb-item.current-item {
    color: #333;
    font-weight: 500;
}

.breadcrumb-item.current-item .current {
    padding: 4px 8px;
    display: inline-block;
}

/* Separator styles */
.breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    opacity: 0.4;
    color: #999;
}

/* SVG separator specific styles */
.breadcrumb-separator-svg {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-separator-svg svg {
    width: 10px;
    height: auto;
    display: block;
}

.breadcrumb-separator-svg svg path {
    fill: currentColor;
    transition: fill 0.3s ease;
}

/* Schema.org microdata - hidden meta tags */
.breadcrumb-item meta {
    display: none;
}

/* Home link special styling */
.breadcrumb-item:first-child a {
    font-weight: 500;
    color: #ff1d24;
}

.breadcrumb-item:first-child a:hover {
    background: rgba(255, 29, 36, 0.1);
}

/* Dark theme support */
.dark-theme .breadcrumbs-wrapper {
    color: #ccc;
}

.dark-theme .breadcrumb-item a {
    color: #aaa;
}

.dark-theme .breadcrumb-item a:hover {
    color: #ff1d24;
    background: rgba(255, 29, 36, 0.1);
}

.dark-theme .breadcrumb-item.current-item {
    color: #fff;
}

.dark-theme .breadcrumb-separator {
    color: #666;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .breadcrumbs-wrapper {
        font-size: 12px;
        padding: 10px 0;
    }
    
    .breadcrumb-item a {
        padding: 2px 4px;
    }
    
    .breadcrumb-separator {
        margin: 0 2px;
    }
    
    .breadcrumb-separator-svg svg {
        width: 8px;
    }
    
    /* Hide middle items on very small screens, keep home and current */
    @media (max-width: 480px) {
        .breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
            display: none;
        }
        
        .breadcrumb-item:nth-last-child(3)::after {
            content: "...";
            padding: 0 8px;
            color: #999;
        }
    }
}

/* Elementor integration - when used in Elementor widgets */
.elementor-widget .breadcrumbs-wrapper {
    margin: 0;
}

/* Animation on page load */
@keyframes breadcrumbFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.breadcrumbs-wrapper {
    animation: breadcrumbFadeIn 0.5s ease-out;
}

.breadcrumb-item {
    animation: breadcrumbFadeIn 0.5s ease-out backwards;
}

.breadcrumb-item:nth-child(1) { animation-delay: 0.1s; }
.breadcrumb-item:nth-child(2) { animation-delay: 0.15s; }
.breadcrumb-item:nth-child(3) { animation-delay: 0.2s; }
.breadcrumb-item:nth-child(4) { animation-delay: 0.25s; }
.breadcrumb-item:nth-child(5) { animation-delay: 0.3s; }
.breadcrumb-item:nth-child(n+6) { animation-delay: 0.35s; }

/* Debug mode styles */
.breadcrumb-debug {
    margin-top: 20px;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    color: #666;
}

.breadcrumb-debug strong {
    color: #333;
}