/**
 * Breadcrumb Navigation Styles
 * Moved from breadcrumb.php inline styles for CSP compliance
 */

/* Breadcrumb Container */
.breadcrumb-wrapper {
    display: block;
    width: 100%;
    background-color: #0a0a0a; /* Match page background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0.5rem;
}

/* Light theme breadcrumb background */
body.theme-light .breadcrumb-wrapper {
    background-color: #ffffff !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Breadcrumb altında siyah alan olmasın - Light tema */
html body.theme-light .breadcrumb-wrapper + main,
html body.theme-light .breadcrumb-wrapper ~ main,
html body.theme-light .breadcrumb-wrapper + section,
html body.theme-light .breadcrumb-wrapper ~ section {
    border-top: none !important;
    background-color: #ffffff !important;
}

.breadcrumb-container {
    width: 100%;
    padding: 0.45rem 1.5rem;
    margin: 0;
}

@media (min-width: 768px) {
    .breadcrumb-container {
        padding: 0.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .breadcrumb-container {
        padding: 0.55rem 3rem;
    }
}

@media (min-width: 1280px) {
    .breadcrumb-container {
        padding: 0.55rem 4rem;
    }
}

@media (min-width: 1536px) {
    .breadcrumb-container {
        padding: 0.55rem 6rem;
    }
}

/* Breadcrumb List */
.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--site-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Breadcrumb Item */
.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .breadcrumb-item {
        font-size: 0.875rem;
    }
}

/* Breadcrumb Link */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0.11rem 0;
}

.breadcrumb-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #A89F91 0%, rgba(168, 159, 145, 0.5) 100%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb-link:hover {
    color: #A89F91;
}

.breadcrumb-link:hover::after {
    width: 100%;
}

/* Home Icon */
.breadcrumb-home-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .breadcrumb-home-icon {
        width: 1.125rem;
        height: 1.125rem;
    }
}

.breadcrumb-link:hover .breadcrumb-home-icon {
    transform: scale(1.1);
}

/* Show "Home" text on all devices */
.breadcrumb-home-text {
    display: inline;
}

/* Separator */
.breadcrumb-separator {
    width: 1rem;
    height: 1rem;
    color: rgba(168, 159, 145, 0.4);
    margin: 0 0.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .breadcrumb-separator {
        width: 1.125rem;
        height: 1.125rem;
        margin: 0 0.625rem;
    }
}

.breadcrumb-link:hover + .breadcrumb-separator {
    color: rgba(168, 159, 145, 0.7);
    transform: translateX(2px);
}

/* Current Page (Last Item) */
.breadcrumb-current {
    color: #A89F91;
    font-weight: 500;
    position: relative;
    padding-left: 0.125rem;
}

.breadcrumb-current::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    background-color: #A89F91;
    border-radius: 50%;
    opacity: 0;
    animation: fadeInDot 0.5s ease 0.3s forwards;
}

@keyframes fadeInDot {
    to {
        opacity: 1;
    }
}

/* Animation */
.breadcrumb-wrapper {
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Breadcrumb items stagger animation */
.breadcrumb-item {
    opacity: 0;
    animation: fadeInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.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; }

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    .breadcrumb-wrapper {
        margin-bottom: 0.5rem;
    }
    
    .breadcrumb-container {
        padding: 0.33rem 1rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .breadcrumb-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .breadcrumb-list {
        flex-wrap: nowrap !important;
    }
    
    .breadcrumb-item {
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }
    
    .breadcrumb-home-icon {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
    
    .breadcrumb-separator {
        width: 0.75rem !important;
        height: 0.75rem !important;
        margin: 0 0.25rem !important;
    }
    
    .breadcrumb-current {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .breadcrumb-link {
        gap: 0.25rem !important;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .breadcrumb-item {
        font-size: 0.6875rem;
    }
    
    .breadcrumb-separator {
        margin: 0 0.125rem;
    }
    
    .breadcrumb-current {
        max-width: 100px;
    }
}