/* Clean Breadcrumb Implementation for TCL Website - COMPACT VERSION */

/* === BREADCRUMB BASE STYLES === */
.tcl-style-header {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    padding: 12px 0; /* Reduced from 20px */
    margin: 0;
    color: #fff;
    border-bottom: 2px solid #ff9500; /* Reduced from 3px */
    position: relative;
    box-shadow: 0 1px 4px rgba(26, 54, 93, 0.15); /* Reduced shadow */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tcl-style-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.tcl-style-header .header-content {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Reduced from 8px */
}

/* === BREADCRUMB NAVIGATION === */
.tcl-style-header nav {
    margin: 0;
    padding: 0;
    order: 1; /* Breadcrumb comes first */
}

.tcl-style-header .tcl-page-title {
    color: #fff;
    font-size: 1.4rem; /* Slightly reduced from 1.5rem */
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1.2; /* Tighter line height */
    order: 2; /* Title comes after breadcrumb */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* === BREADCRUMB LIST === */
.breadcrumb-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem; /* Reduced from 0.85rem */
    color: rgba(255, 255, 255, 0.9);
    align-items: center;
    flex-wrap: wrap;
}

/* === BREADCRUMB ITEMS === */
.breadcrumb-list li,
.breadcrumb-item {
    display: flex;
    align-items: center;
    position: relative;
    color: rgba(255, 255, 255, 0.9);
}

/* === BREADCRUMB SEPARATORS === */
.breadcrumb-list li:not(:last-child)::after,
.breadcrumb-item:not(:last-child)::after {
    content: '/';
    display: inline-block;
    margin: 0 6px; /* Reduced from 8px */
    color: #ff9500;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* === BREADCRUMB LINKS === */
.breadcrumb-list a,
.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 3px 6px; /* Reduced from 4px 8px */
    border-radius: 3px; /* Slightly smaller */
    font-weight: 500;
}

.breadcrumb-list a:hover,
.breadcrumb-list a:focus,
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 149, 0, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* === ACTIVE BREADCRUMB === */
.breadcrumb-list li.active,
.breadcrumb-list .active,
.breadcrumb-item[aria-current="page"],
.breadcrumb-item.active {
    color: #ff9500;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* === HOME ICON === */
.breadcrumb-list li:first-child a i,
.breadcrumb-item:first-child a i {
    margin-right: 4px; /* Reduced from 5px */
    font-size: 0.85rem; /* Slightly smaller */
    color: #ff9500;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 767px) {
    .tcl-style-header {
        padding: 10px 0; /* Further reduced for mobile */
    }
    
    .tcl-style-header .tcl-page-title {
        font-size: 1.2rem; /* Reduced from 1.3rem */
    }
    
    .tcl-style-header .header-content {
        gap: 4px; /* Reduced gap for mobile */
    }
    
    .breadcrumb-list {
        font-size: 0.7rem; /* Reduced from 0.75rem */
    }
}

@media (max-width: 480px) {
    .tcl-style-header {
        padding: 8px 0; /* Very compact for small screens */
    }
    
    .breadcrumb-list {
        font-size: 0.65rem; /* Further reduced */
    }
    
    .breadcrumb-list li:not(:last-child)::after,
    .breadcrumb-item:not(:last-child)::after {
        margin: 0 3px; /* Very tight spacing */
    }
    
    .tcl-style-header .tcl-page-title {
        font-size: 1.1rem; /* Compact title */
    }
    
    .breadcrumb-list a,
    .breadcrumb-item a {
        padding: 2px 4px; /* Minimal padding on small screens */
    }
}

/* === ACCESSIBILITY === */
.breadcrumb-list a:focus,
.breadcrumb-item a:focus {
    outline: 2px solid #ff9500;
    outline-offset: 2px;
    background-color: rgba(255, 149, 0, 0.2);
}

/* === ANIMATION === */
.tcl-style-header nav {
    animation: breadcrumbFadeIn 0.4s ease-out;
}

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

/* === HIDE CONFLICTING ELEMENTS === */
.breadcrumb-container,
.hero-section.breadcrumb-hero,
.ultra-minimal-header {
    display: none;
}

/* === CLEAN OVERRIDE RULES === */
.tcl-style-header *,
.tcl-style-header *::before,
.tcl-style-header *::after {
    box-sizing: border-box;
}

/* Remove any bootstrap breadcrumb styles that might conflict */
.tcl-style-header .breadcrumb {
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.tcl-style-header .breadcrumb-item + .breadcrumb-item::before {
    display: none;
}

/* === SCREEN READER SUPPORT === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}