/**
 * PHG Breadcrumb Global Style (v2 - adaptive bg)
 *
 * Default: GOLD ĐẬM (works trên LIGHT bg như Privacy, Lien he, Bao gia)
 * Override: CREAM cho pages có DARK hero (Gioi thieu, Pillar, Du an, Team)
 *
 * Strategy: dùng body.page-id-X explicit để override pages có dark hero.
 *
 * @package PHG
 * @since   2026-04-29
 * @updated 2026-04-30 - adaptive bg
 */

/* ===== Container ===== */
.phg-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--phg-font-mono, "JetBrains Mono", "Courier New", monospace);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 auto 28px auto;
    padding: 24px 24px 0 24px;
    max-width: 1200px;
    box-sizing: border-box;
    /* Default color cho light bg */
    color: rgba(184, 146, 63, 0.7);
}

/* ===== List wrapper (semantic <ol>) ===== */
.phg-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== Item ===== */
.phg-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== DEFAULT: gold đậm (light bg) ===== */
.phg-breadcrumb__link {
    color: rgba(184, 146, 63, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.phg-breadcrumb__link:hover,
.phg-breadcrumb__link:focus {
    color: #d4a574;
    text-decoration: none;
}

.phg-breadcrumb__sep {
    color: rgba(184, 146, 63, 0.5);
}

.phg-breadcrumb__current {
    color: #1a1a1a;
    font-weight: 600;
}

/* ===== Mobile responsive ===== */
@media (max-width: 768px) {
    .phg-breadcrumb {
        font-size: 10.5px;
        gap: 6px;
        padding: 16px 16px 0 16px;
        margin-bottom: 20px;
    }
    .phg-breadcrumb__list {
        gap: 6px;
    }
    .phg-breadcrumb__item {
        gap: 6px;
    }
}

/* ============================================================
 * OVERRIDE: CREAM cho pages có DARK hero
 * ============================================================ */

/* Pages có dark hero — phục hồi màu cream */
body.page-id-15 .phg-breadcrumb,
body.page-id-17 .phg-breadcrumb,
body.page-id-18 .phg-breadcrumb,
body.page-id-19 .phg-breadcrumb,
body.page-id-20 .phg-breadcrumb,
body.page-id-2002 .phg-breadcrumb,
body.phg-projects-active .phg-breadcrumb,
body.phg-team-page-active .phg-breadcrumb,
body.phg-knowledge-cluster-active .phg-breadcrumb {
    color: rgba(245, 238, 224, 0.5);
}

body.page-id-15 .phg-breadcrumb__link,
body.page-id-17 .phg-breadcrumb__link,
body.page-id-18 .phg-breadcrumb__link,
body.page-id-19 .phg-breadcrumb__link,
body.page-id-20 .phg-breadcrumb__link,
body.page-id-2002 .phg-breadcrumb__link,
body.phg-projects-active .phg-breadcrumb__link,
body.phg-team-page-active .phg-breadcrumb__link,
body.phg-knowledge-cluster-active .phg-breadcrumb__link {
    color: rgba(245, 238, 224, 0.6);
}

body.page-id-15 .phg-breadcrumb__link:hover,
body.page-id-17 .phg-breadcrumb__link:hover,
body.page-id-18 .phg-breadcrumb__link:hover,
body.page-id-19 .phg-breadcrumb__link:hover,
body.page-id-20 .phg-breadcrumb__link:hover,
body.page-id-2002 .phg-breadcrumb__link:hover,
body.phg-projects-active .phg-breadcrumb__link:hover,
body.phg-team-page-active .phg-breadcrumb__link:hover,
body.phg-knowledge-cluster-active .phg-breadcrumb__link:hover {
    color: #d4a574;
}

body.page-id-15 .phg-breadcrumb__sep,
body.page-id-17 .phg-breadcrumb__sep,
body.page-id-18 .phg-breadcrumb__sep,
body.page-id-19 .phg-breadcrumb__sep,
body.page-id-20 .phg-breadcrumb__sep,
body.page-id-2002 .phg-breadcrumb__sep,
body.phg-projects-active .phg-breadcrumb__sep,
body.phg-team-page-active .phg-breadcrumb__sep,
body.phg-knowledge-cluster-active .phg-breadcrumb__sep {
    color: rgba(184, 146, 63, 0.6);
}

body.page-id-15 .phg-breadcrumb__current,
body.page-id-17 .phg-breadcrumb__current,
body.page-id-18 .phg-breadcrumb__current,
body.page-id-19 .phg-breadcrumb__current,
body.page-id-20 .phg-breadcrumb__current,
body.page-id-2002 .phg-breadcrumb__current,
body.phg-projects-active .phg-breadcrumb__current,
body.phg-team-page-active .phg-breadcrumb__current,
body.phg-knowledge-cluster-active .phg-breadcrumb__current {
    color: #d4a574;
    font-weight: 400;
}