/* ==========================================================================
   Icon Detail List
   ========================================================================== */

.rw-icon-detail-list {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rw-icon-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ==========================================================================
   Icon
   ========================================================================== */

.rw-icon-detail-item__icon {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px; /* optical alignment with first line of text */
}

/* ==========================================================================
   Text
   ========================================================================== */


.rw-icon-detail-item__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.rw-icon-detail-item__text a:hover {
    color: var( --rw-primary );
    text-decoration: underline;
}

/* Dark section override — links stay readable on dark bg */
.rw-dark-section .rw-icon-detail-item__icon {
    color: #ffffff;
}

.rw-dark-section .rw-icon-detail-item__text,
.rw-dark-section .rw-icon-detail-item__text a {
    color: rgba( 255, 255, 255, 0.85 );
}

.rw-dark-section .rw-icon-detail-item__text a:hover {
    color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 640px ) {
    .rw-icon-detail-list {
        gap: 10px;
    }
}