/* ============================================================
   Contact Info Column — stylesheet
   Lightweight: no resets, no grid framework, pure flex
   ============================================================ */

/* CSS custom properties (overridden per-instance via inline style) */
.cic-wrap {
    --cic-icon:  #0073aa;
    --cic-label: #333333;
    --cic-value: #555555;

    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
    font-family:    inherit;
    line-height:    1.5;
}

/* --- Single row (icon + text block) ------------------------- */
.cic-item {
    display:     flex;
    align-items: flex-start;
    gap:         0.85rem;
}

/* --- Icon wrapper ------------------------------------------- */
.cic-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           2.2rem;
    height:          2.2rem;
    border-radius:   50%;
    background:      color-mix(in srgb, var(--cic-icon) 12%, transparent);
    color:           var(--cic-icon);
    margin-top:      0.1rem;          /* optical alignment with first text line */
}

.cic-icon svg {
    width:  1.1rem;
    height: 1.1rem;
    stroke: currentColor;
}

/* --- Text block --------------------------------------------- */
.cic-text {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.cic-label {
    display:       block;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--cic-label);
}

.cic-value {
    display:   block;
    font-size: 0.95rem;
    color:     var(--cic-value);
}

.cic-link {
    color:           var(--cic-value);
    text-decoration: none;
    transition:      color 0.2s ease, opacity 0.2s ease;
}

.cic-link:hover,
.cic-link:focus {
    color:   var(--cic-icon);       /* hover uses icon accent color */
    opacity: 0.85;
    outline: none;
}

/* --- Alignment helpers (set via inline text-align on .cic-wrap) */
.cic-wrap[style*="text-align:center"] .cic-item,
.cic-wrap[style*="text-align: center"] .cic-item {
    justify-content: center;
}

.cic-wrap[style*="text-align:right"] .cic-item,
.cic-wrap[style*="text-align: right"] .cic-item {
    justify-content: flex-end;
}

/* --- No-icon mode: keep text flush left / center / right ---- */
.cic-item:not(:has(.cic-icon)) .cic-text {
    width: 100%;
}

/* --- WPB backend editor: prevent layout collapse ------------ */
.vc_element .cic-wrap {
    pointer-events: none;
}