/* Resource Item Block - Frontend Styles */

/* CSS custom properties for icon (used by this block only) */
:root {
    --planeteria-resource-icon-color: var(--wp--preset--color--secondary, #378add);
    --planeteria-resource-icon-size: var(--wp--preset--spacing--5);
}

.resource-item-icon {
    color: var(--planeteria-resource-icon-color);
    font-size: var(--planeteria-resource-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--wp--preset--spacing--3);
    flex-shrink: 0;
}

.resource-item {
    display: flex;
    align-items: center;
    /* Spacing handled by parent block's gap and WordPress block supports */
}

.resource-item-link {
    display: flex;
    align-items: center;
    text-decoration: underline;
    color: var(--wp--preset--color--primary, currentColor);
    width: 100%;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    /* Padding and margin handled by block supports on .resource-item */
    transition: color 0.2s ease;
}

.resource-item-link:hover {
    color: var(--wp--preset--color--secondary, currentColor);
}

/* Focus state for keyboard navigation (WCAG 2.4.7 - Level AA) */
.resource-item-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--secondary, currentColor);
    outline-offset: 2px;
}

.resource-item-link:hover .resource-item-icon,
.resource-item-link:hover i {
    color: var(--wp--preset--color--secondary, currentColor);
    transition: color 0.2s ease;
}

.resource-item-link:focus-visible .resource-item-icon,
.resource-item-link:focus-visible i {
    color: var(--wp--preset--color--secondary, currentColor);
}

.resource-item-link .resource-item-icon,
.resource-item-link i {
    color: var(--wp--preset--color--primary, currentColor);
    font-size: var(--planeteria-resource-icon-size, 1.25rem);
    margin-right: var(--wp--preset--spacing--3); /* Icon-to-text spacing */
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.resource-item-title {
    flex: 1;
}