/* ==========================================================
   KOKO Enterprise
   Brand Meta
   ========================================================== */

/*--------------------------------------------------------------
# Brand Meta Panel
--------------------------------------------------------------*/

.brand-meta{
    position:sticky;
    top:110px;

    padding:2.5rem;

    background:#ffffff;

    border:1px solid var(--color-border);
    border-radius:16px;

    box-shadow:
        0 16px 40px rgba(0,0,0,.05);
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/

.brand-meta-title{
    margin:0 0 2rem;

    color:var(--color-primary);

    font-family:var(--font-heading);
    font-size:1.5rem;
    font-weight:600;
    line-height:1.25;
}

/*--------------------------------------------------------------
# Meta List
--------------------------------------------------------------*/

.brand-meta-list{
    margin:0;
}

/*--------------------------------------------------------------
# Meta Item
--------------------------------------------------------------*/

.brand-meta-item{
    display:grid;
    gap:.4rem;

    padding:1.25rem 0;

    border-bottom:1px solid var(--color-border);
}

.brand-meta-item:first-child{
    padding-top:0;
}

.brand-meta-item:last-child{
    padding-bottom:0;
    border-bottom:0;
}

/*--------------------------------------------------------------
# Meta Label
--------------------------------------------------------------*/

.brand-meta-item dt{
    margin:0;

    color:var(--color-text-light);

    font-size:.75rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.16em;
    text-transform:uppercase;
}

/*--------------------------------------------------------------
# Meta Value
--------------------------------------------------------------*/

.brand-meta-item dd{
    margin:0;

    color:var(--color-primary);

    font-size:1rem;
    font-weight:500;
    line-height:1.6;
}

/*--------------------------------------------------------------
# Website Link
--------------------------------------------------------------*/

.brand-meta-website a{
    display:inline-flex;
    align-items:center;
    gap:.5rem;

    color:var(--color-accent);

    font-weight:600;
    text-decoration:none;

    transition:
        color .25s ease,
        gap .25s ease;
}

.brand-meta-website a:hover{
    gap:.8rem;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.brand-meta a:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
    border-radius:4px;
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width:992px){

    .brand-meta{
        position:static;
        top:auto;

        padding:2rem;
    }

}

@media (max-width:576px){

    .brand-meta{
        padding:1.5rem;
        border-radius:12px;
    }

    .brand-meta-title{
        font-size:1.35rem;
    }

}