/**
 * Portfolio category filter navigation.
 *
 * Restyles the `.isotope-filter` nav rendered by the Classic Elementor Addons
 * portfolio widget into the Adcon pill navigation. Scoped to `.portfolio-wrapper`
 * so the service/team/event widgets keep their own filter styling.
 *
 * The `!important` flags are only where Bootstrap utility classes on the widget's
 * own markup (`.d-block`) or theme decorations declared with `!important` have to
 * be neutralised.
 */

/**
 * Palette uses the two site tokens: the brand primary (#222D65, Elementor global
 * "Πρωτεύων") for the resting pill, and the accent cyan (#00ADEF, the same colour as
 * the portfolio image overlay) for both the hover and the selected state.
 */

.portfolio-wrapper .isotope-filter {
	--adcon-filter-brand: #222d65;
	--adcon-filter-accent: #00adef;
	--adcon-filter-bg: var(--adcon-filter-brand);
	--adcon-filter-color: #ffffff;
	--adcon-filter-hover-bg: var(--adcon-filter-accent);
	--adcon-filter-hover-color: #ffffff;
	--adcon-filter-active-bg: var(--adcon-filter-accent);
	--adcon-filter-active-border: var(--adcon-filter-accent);
	--adcon-filter-active-color: #ffffff;
	--adcon-filter-rule: rgba(34, 45, 101, 0.6);
	--adcon-filter-gap: 8px;
	--adcon-filter-radius: 2px;
	--adcon-filter-padding: 11px 20px;
	--adcon-filter-font-size: 17px;

	margin-top: 0;
	margin-bottom: 40px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--adcon-filter-rule);
}

/* `.nav` is flex, `.d-block` forces it back to block with !important. */
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--adcon-filter-gap);
	padding-left: 0;
	list-style: none;
}

.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li {
	display: flex;
	margin: 0;
	padding: 0;
}

.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li > a.isotope-filter-item {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--adcon-filter-padding);
	border: 1px solid var(--adcon-filter-bg);
	border-radius: var(--adcon-filter-radius);
	background-color: var(--adcon-filter-bg);
	color: var(--adcon-filter-color);
	font-size: var(--adcon-filter-font-size);
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Hover / focus keeps the pill and only lifts the label. */
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li > a.isotope-filter-item:hover,
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li > a.isotope-filter-item:focus {
	border-color: var(--adcon-filter-hover-bg);
	background-color: var(--adcon-filter-hover-bg);
	color: var(--adcon-filter-hover-color);
}

.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li.active > a.isotope-filter-item,
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li.active > a.isotope-filter-item:hover,
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li.active > a.isotope-filter-item:focus {
	border-color: var(--adcon-filter-active-border);
	background-color: var(--adcon-filter-active-bg);
	color: var(--adcon-filter-active-color);
}

/* Brand navy, so the ring stays visible on the navy, cyan and page backgrounds alike. */
.portfolio-wrapper .isotope-filter ul.nav.m-auto.d-block > li > a.isotope-filter-item:focus-visible {
	outline: 2px solid var(--adcon-filter-brand);
	outline-offset: 2px;
}

/* Theme/addon underline + dot decorations do not belong on a pill. */
.portfolio-wrapper .isotope-filter ul.nav li a::before,
.portfolio-wrapper .isotope-filter ul.nav li a::after {
	display: none !important;
	content: none !important;
}

/* Responsive: same layout, tighter pills. */
@media only screen and (max-width: 1024px) {
	.portfolio-wrapper .isotope-filter {
		--adcon-filter-font-size: 16px;
		--adcon-filter-padding: 10px 16px;
		--adcon-filter-gap: 7px;

		margin-bottom: 35px;
		padding-bottom: 25px;
	}
}

@media only screen and (max-width: 767px) {
	.portfolio-wrapper .isotope-filter {
		--adcon-filter-font-size: 15px;
		--adcon-filter-padding: 9px 14px;
		--adcon-filter-gap: 6px;

		margin-bottom: 30px;
		padding-bottom: 20px;
	}
}

@media only screen and (max-width: 480px) {
	.portfolio-wrapper .isotope-filter {
		--adcon-filter-font-size: 14px;
		--adcon-filter-padding: 8px 12px;
	}
}