// =============================================================================
// components/_navigation.scss
// Bulma navbar customisation + mobile dropdown corrections.
// =============================================================================

// Navbar item links.
.navbar-item,
.navbar-link {
	color: var(--color-text);
	transition: color var(--transition-base), background-color var(--transition-base);

	&:hover,
	&:focus-visible {
		background-color: transparent;
		color: var(--color-primary);
	}
}

// Dropdown.
.navbar-dropdown {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: var(--card-shadow);

	.navbar-item {
		padding: 0.5rem 1rem;

		&:hover {
			background-color: var(--color-surface);
		}
	}

	.navbar-divider {
		background-color: var(--color-border);
	}
}

// Breadcrumb.
.breadcrumb {
	margin: var(--space-3) 0;
	font-size: 0.9rem;

	a {
		color: var(--color-text);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		transition: color var(--transition-base);

		&:hover {
			color: var(--color-primary);
		}
	}

	li.is-active a {
		color: #6b7280;
	}
}

// Post navigation.
.nav-links {
	.nav-previous,
	.nav-next {
		a {
			display: inline-flex;
			flex-direction: column;
			text-decoration: none;
			max-width: 300px;
			color: var(--color-text);
			transition: color var(--transition-base);

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	.nav-subtitle {
		font-size: 0.8rem;
		color: #6b7280;
	}

	.nav-title {
		font-weight: 600;
	}
}