/**
 * LN Bite Jobs - Frontend Styling
 */

.ln-bite-jobs-container {
	margin: 1.5em 0;
}

.ln-bite-jobs-loading {
	padding: 1em;
	text-align: center;
	color: #666;
	font-style: italic;
}

.ln-bite-jobs-error {
	padding: 1em;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	color: #721c24;
}

.ln-bite-jobs-list {
	display: block;
}

.ln-bite-jobs-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ln-bite-jobs-list li {
	margin: 0.5em 0;
	padding: 0.75em 1em;
	border-left: 3px solid #0073aa;
	background-color: #f7f7f7;
	transition: background-color 0.2s ease;
}

.ln-bite-jobs-list li:hover {
	background-color: #e9e9e9;
}

.ln-bite-jobs-list a {
	text-decoration: none;
	color: #0073aa;
	font-weight: 500;
	display: inline;
}

.ln-bite-jobs-list li:hover a {
	color: #005177;
	text-decoration: underline;
}

.ln-bite-jobs-list a::after {
	content: '';
	display: inline-block;
	width: 0.875em;
	height: 0.875em;
	margin-left: 0.35em;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230073aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: baseline;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.ln-bite-jobs-list a:hover::after {
	opacity: 1;
}

.ln-bite-job-link {
	display: flex;
	flex-direction: column;
}

.ln-bite-job-title {
	display: inline;
}

.ln-bite-job-location {
	display: block;
	font-size: 0.85em;
	font-weight: 400;
	color: #666;
	margin-top: 0.25em;
}

.ln-bite-job-link::after {
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.ln-bite-jobs-list li {
	position: relative;
}

/* Responsive design */
@media screen and (max-width: 768px) {
	.ln-bite-jobs-list li {
		padding: 0.5em 0.75em;
		font-size: 0.95em;
	}
}