/*
 * Shared visual components for SSSP informational pages
 * (Collaboration, Ethics, DORA, Contact). Uses the site's brand
 * palette defined in style.css (--primary/--secondary/--light/--dark).
 */

/* ===== Icon badges ===== */
.info-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(4, 59, 71, .08);
    color: var(--primary, #043b47);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-icon.round {
    border-radius: 50%;
}

.info-icon.sm {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

/* ===== Section titles ===== */
.info-section-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.info-section p,
.info-section li {
    font-size: 1.02rem;
    line-height: 1.8;
    color: #3a3f4b;
}

/* ===== Fact card (icon + label + value rows) ===== */
.fact-card {
    border-radius: 14px;
    overflow: hidden;
}

.fact-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #eee;
}

.fact-item:last-child {
    border-bottom: none;
}

.fact-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--secondary, #999999);
    font-weight: 600;
    margin-bottom: 2px;
}

.fact-value {
    font-weight: 600;
    color: var(--dark, #111111);
    word-break: break-word;
}

.fact-value a {
    color: var(--primary, #043b47);
}

/* ===== Step / responsibility list ===== */
.info-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-step-list li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .5rem 0;
}

.info-step-list li i {
    color: var(--primary, #043b47);
    margin-top: .3rem;
    flex-shrink: 0;
}

/* ===== Callout ===== */
.info-callout {
    background: linear-gradient(135deg, rgba(4, 59, 71, .06), rgba(4, 59, 71, .14));
    border-left: 4px solid var(--primary, #043b47);
    border-radius: 12px;
    padding: 2rem;
}

/* ===== Badge / chip cards (e.g. partner institutions, commitments) ===== */
.info-chip-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

.info-chip-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ===== Value / core-value cards ===== */
.value-card {
    height: 100%;
    border-radius: 14px;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #eee;
    transition: transform .18s ease, box-shadow .18s ease;
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* ===== Accordion (ethics standards by publication type) ===== */
.info-accordion .accordion-item {
    border: 1px solid #eee;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 1rem;
}

.info-accordion .accordion-button {
    font-weight: 600;
    background: #fff;
}

.info-accordion .accordion-button:not(.collapsed) {
    color: var(--primary, #043b47);
    background: rgba(4, 59, 71, .06);
    box-shadow: none;
}

.info-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(4, 59, 71, .25);
}

.info-accordion .role-block {
    border-radius: 10px;
    background: var(--light, #f2f8fe);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.info-accordion .role-block:last-child {
    margin-bottom: 0;
}

.info-accordion .role-title {
    font-weight: 700;
    color: var(--primary, #043b47);
    margin-bottom: .5rem;
}