/**
 * Link List Element Styles
 *
 * @package Food4Biodiv
 * @subpackage VC_Elements
 * @since 1.0.0
 */

/* ============================================
   Link List Container
   ============================================ */

.f4b-link-list {
	width: 100%;
}

.f4b-link-list__items {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

/* ============================================
   Link Items
   ============================================ */

.f4b-link-list__item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(var(--f4b-color-black), 0.1);
}

.f4b-link-list__item:last-child {
	border-bottom: none;
}

.f4b-link-list__link {
	display: flex;
	align-items: center;
	gap: var(--f4b-spacing-sm);
	padding: var(--f4b-spacing-md) 0;
	text-decoration: none;
	transition: color var(--f4b-transition-fast) ease;
}

.f4b-link-list__link:hover {
	color: rgb(var(--f4b-color-primary));
	text-decoration: none;
}

.f4b-link-list__link:focus {
	outline: 2px solid rgb(var(--f4b-color-primary));
	outline-offset: 2px;
	color: rgb(var(--f4b-color-primary));
}

.f4b-link-list__link:focus:not(:focus-visible) {
	outline: none;
}

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

.f4b-link-list__icon {
	flex-shrink: 0;
	font-size: var(--f4b-font-size-md);
	color: rgb(var(--f4b-color-primary));
	transition: transform var(--f4b-transition-fast) ease;
}

.f4b-link-list__link:hover .f4b-link-list__icon {
	transform: translateX(4px);
}

/* ============================================
   Title
   ============================================ */

.f4b-link-list__title {
	flex: 1;
	font-size: var(--f4b-font-size-md);
	line-height: var(--f4b-line-height-normal);
}

/* ============================================
   Dark Mode Support (.style-dark)
   ============================================ */

.style-dark .f4b-link-list__item {
	border-bottom: 1px solid rgba(var(--f4b-color-white), 0.15);
}

.style-dark .f4b-link-list__link {
	color: rgb(var(--f4b-color-white));
}

.style-dark .f4b-link-list__link:hover {
	color: rgb(var(--f4b-color-white)) !important;
	text-decoration: underline;
}

.style-dark .f4b-link-list__link:focus {
	outline-color: rgb(var(--f4b-color-white));
	color: rgb(var(--f4b-color-white));
}

.style-dark .f4b-link-list__icon {
	color: rgb(var(--f4b-color-white));
}

.style-dark .f4b-link-list__link:hover .f4b-link-list__icon {
	color: rgb(var(--f4b-color-white));
}

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

@media (max-width: 768px) {
	.f4b-link-list__link {
		padding: var(--f4b-spacing-sm) 0;
	}
	
	.f4b-link-list__title {
		font-size: var(--f4b-font-size-base);
	}
	
	.f4b-link-list__icon {
		font-size: var(--f4b-font-size-base);
	}
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.f4b-link-list__link,
	.f4b-link-list__icon {
		transition: none !important;
	}
	
	.f4b-link-list__link:hover .f4b-link-list__icon {
		transform: none !important;
	}
}