/* Contact details – icon in a circle, small label over the value. */

.contact-details {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-details__item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin: 0;
}

.contact-details__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--color-oak);
    background: var(--color-graphite);

    & .icon { width: 22px; height: 22px; }
}

.contact-details__label {
    display: block;
    font: var(--text-12as);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-slate);
}

.contact-details__value {
    display: block;
    margin-block-start: 2px;
    font: var(--text-20ar);
    font-weight: 500;
    color: var(--color-graphite);
    text-decoration: none;
}

a.contact-details__value {
    color: var(--color-cedar);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-cedar-dark); }

    .section--dark & { color: var(--color-oak); }
}

.contact-details__note {
    display: block;
    font: var(--text-15ar);
    color: var(--color-slate);
}