/* ==========================================================
   CADD R8.5 - GLOBAL FINAL UI STANDARD
   ========================================================== */

:root{
    --cadd-avatar-bg:#122336;
    --cadd-avatar-text:#E5C98D;
    --cadd-avatar-border:rgba(216,180,106,.35);
    --cadd-avatar-shadow:0 8px 28px rgba(0,0,0,.20);
}

/*
 * Global initials/avatar treatment.
 * Images remain compatible: this defines the surface behind them.
 */

.avatar,
.user-avatar,
.profile-avatar,
.portfolio-avatar,
[class*="-avatar"],
[class*="avatar-"],
[data-avatar]{
    background-color:var(--cadd-avatar-bg) !important;
    color:var(--cadd-avatar-text) !important;
    border-color:var(--cadd-avatar-border) !important;
    box-shadow:var(--cadd-avatar-shadow);
}

.avatar > *,
.user-avatar > *,
.profile-avatar > *,
.portfolio-avatar > *,
[class*="-avatar"] > *,
[class*="avatar-"] > *,
[data-avatar] > *{
    color:inherit;
}

/*
 * Initials must never inherit black text from a generic component.
 */

.avatar strong,
.avatar span,
.user-avatar strong,
.user-avatar span,
.profile-avatar strong,
.profile-avatar span,
.portfolio-avatar strong,
.portfolio-avatar span,
[class*="avatar"] strong,
[class*="avatar"] span{
    color:var(--cadd-avatar-text) !important;
}

/*
 * Active primary navigation:
 * navy surface + clear text + champagne indicator.
 */

header [aria-current="page"],
header .active,
header .is-active,
nav [aria-current="page"]{
    color:#F4F1E8 !important;
    background-color:rgba(216,180,106,.055) !important;
}

/*
 * Preserve keyboard visibility.
 */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid #E5C98D;
    outline-offset:3px;
}

@media(max-width:900px){
    .avatar,
    .user-avatar,
    .profile-avatar,
    .portfolio-avatar,
    [class*="-avatar"],
    [class*="avatar-"],
    [data-avatar]{
        box-shadow:
            0 6px 20px rgba(0,0,0,.18);
    }
}

/* CADD_R8_ACCOUNT_AVATAR_CONTRAST
   Account avatar in navigation/header:
   champagne surface + deep navy initials.
   Content/profile avatars keep navy + champagne.
*/

header .avatar,
header .user-avatar,
header .profile-avatar,
header [class*="-avatar"],
header [class*="avatar-"],
header [data-avatar],
nav .avatar,
nav .user-avatar,
nav .profile-avatar,
nav [class*="-avatar"],
nav [class*="avatar-"],
nav [data-avatar]{
    background:#D8B46A !important;
    color:#07111F !important;
    border-color:#E5C98D !important;
    box-shadow:
        0 0 0 3px rgba(216,180,106,.12),
        0 6px 18px rgba(0,0,0,.20) !important;
}

header .avatar *,
header .user-avatar *,
header .profile-avatar *,
header [class*="avatar"] *,
header [data-avatar] *,
nav .avatar *,
nav .user-avatar *,
nav .profile-avatar *,
nav [class*="avatar"] *,
nav [data-avatar] *{
    color:#07111F !important;
}

/* Keep portfolio/content avatar on canonical premium treatment */

main .portfolio-avatar,
main [class*="portfolio"] [class*="avatar"],
main [data-avatar].portfolio-avatar{
    background:#122336 !important;
    color:#E5C98D !important;
    border-color:rgba(216,180,106,.35) !important;
}

main .portfolio-avatar *,
main [class*="portfolio"] [class*="avatar"] *{
    color:#E5C98D !important;
}