/* Blog Toolbar Styles - Mobile First */

/* Base styles - Mobile */
.blog-toolbar {
	background-color: var(--grey-primary);
	padding: var(--spacing-md) 2px var(--spacing-xl) 2px;
	color: var(--primary-violet-dark);
}

.blog-toolbar-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* Hide default clear button */
.search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Breadcrumbs */
.blog-breadcrumbs {
	margin-bottom: var(--spacing-sm);
	display: none; /* Hide on mobile by default */
}

/* Show breadcrumbs in blog-toolbar context */
.blog-breadcrumbs .breadcrumbs {
	display: block;
}

.blog-breadcrumbs .breadcrumb-list {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-breadcrumbs .breadcrumb-item {
	font-family: var(--font-family-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--breadcrumbs-text);
	text-transform: uppercase;
}

.blog-breadcrumbs .breadcrumb-item a {
	font-weight: 500;
	color: var(--breadcrumbs-text);
	text-decoration: none;
	transition: color 0.3s ease;
	text-transform: uppercase;
}

.blog-breadcrumbs .breadcrumb-item.current {
	font-weight: 500;
	text-transform: uppercase;
}

.blog-breadcrumbs .breadcrumb-separator {
	display: flex;
	align-items: center;
}

.blog-breadcrumbs .separator-icon {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

/* Toolbar Controls */
.blog-toolbar-controls {
	display: none;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* Filter Buttons */
.blog-filters {
	width: 100%;
	display: none;
	flex-wrap: wrap;
	gap: 1px;
}

.filter-btn {
	font-family: var(--font-family-primary);
	font-size: 14px;
	font-weight: 500;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--primary-violet-dark);
	border-radius: 4px;
	background-color: transparent;
	color: var(--primary-violet-dark);
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	text-align: center;
	margin-top: 10px;
	margin-right: 10px;
}

.filter-btn:hover {
	background-color: var(--primary-violet-dark);
	color: var(--white-primary);
}

.filter-btn.active {
	background: var(--dark-to-light-violet-gradient);
	color: var(--white-primary);
	border-color: var(--primary-violet-dark);
}

/* Search Form */
.blog-search {
	width: 100%;
}

.search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.search-field {
	font-family: var(--font-family-primary);
	font-size: 14px;
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	padding-right: 40px;
	border: 1px solid var(--primary-violet-dark);
	border-radius: var(--border-radius-sm);
	background-color: var(--white-primary);
	color: var(--primary-violet-dark);
	outline: none;
	transition: border-color 0.3s ease;
}

.search-field:focus {
	border-color: var(--primary-violet-light);
}

.search-field::placeholder {
	color: transparent; /* Hide default placeholder */
}

/* Custom placeholder positioned next to search icon */
.search-placeholder {
	position: absolute;
	right: 40px; /* Position next to search icon */
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

.placeholder-text {
	font-family: var(--font-family-primary);
	font-size: 14px;
	color: var(--primary-violet-dark);
	opacity: 0.8;
	transition: opacity 0.3s ease;
}

/* Hide placeholder when input has value or is focused */
.search-field:not(:placeholder-shown) + .search-placeholder .placeholder-text,
.search-field:focus + .search-placeholder .placeholder-text {
	opacity: 0;
}

.search-submit {
	position: absolute;
	right: var(--spacing-sm);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--primary-violet-dark);
	cursor: pointer;
	padding: var(--spacing-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
}

.search-submit:hover {
	color: var(--primary-violet-light);
}

.search-submit svg {
	width: 16px;
	height: 16px;
}

@media (min-width: 390px) {
	.blog-filters {
		width: 90%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 1px;
	}

	.filter-btn {
		margin-top: 5px;
		margin-right: 5px;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.blog-toolbar {
		padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
	}

	.blog-filters {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.filter-btn {
		flex: 1;
		min-width: 0;
	}

	.blog-search {
		min-width: 200px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.blog-toolbar {
		padding: var(--spacing-md) 3rem var(--spacing-sm) 3.5rem;
		max-height: fit-content;
		overflow: hidden;
	}

	.blog-toolbar-content {
		gap: var(--spacing-lg);
	}

	/* Show breadcrumbs on tablet and desktop */
	.blog-breadcrumbs {
		display: block;
	}

	.blog-breadcrumbs .breadcrumbs {
		display: block;
		padding-top: 0; /* Nadpisuje globalny padding-top: 3rem */
		transform: translateX(-1rem);
	}

	.blog-toolbar-controls {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--spacing-lg);
	}

	.blog-filters {
		display: none;
		flex-direction: row;
		gap: var(--spacing-lg);
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	/* Reset grid positioning for larger screens */
	.filter-btn:nth-child(1),
	.filter-btn:nth-child(2),
	.filter-btn:nth-child(3),
	.filter-btn:nth-child(4) {
		grid-row: auto;
		grid-column: auto;
	}

	.filter-btn {
		flex: none;
		text-align: center;
		white-space: nowrap;
		min-width: auto;
	}

	.blog-search {
		min-width: 250px;
		max-width: 300px;
		flex-shrink: 0;
	}

	.blog-breadcrumbs .breadcrumb-item {
		font-size: 14px;
	}

	.blog-breadcrumbs .breadcrumb-item a {
		font-size: 14px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.blog-toolbar-controls {
		align-items: center;
		justify-content: flex-end;
	}

	.blog-search {
		min-width: 280px;
		max-width: 550px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.blog-toolbar {
		padding: var(--spacing-md) 1rem var(--spacing-sm) 1.5rem;
	}

	.blog-toolbar-content {
		padding-left: 0.5rem;
	}
}

@media (min-width: 1400px) {
	.blog-toolbar {
		padding: var(--spacing-md) 2.25rem var(--spacing-sm) 1rem;
	}
	
	.blog-toolbar-content {
		padding-left: 1.25rem;
	}
	
	.blog-breadcrumbs {
		margin-left: 0.25rem;
	}
}

@media (min-width: 1800px) {
	.blog-toolbar {
		padding: var(--spacing-md) 1.25rem var(--spacing-sm) 1rem;
	}
	.blog-breadcrumbs {
		margin-left: 0.85rem;
	}
	
	.blog-toolbar-content {
		padding-left: 0.8rem;
	}
}