/* =========================================================
   INESC Core — filter tabs
   Taxonomy filter tab bar shared by the Posts news listing and the
   Events listing: a blue bar of uppercase links, the active one green.
   Reload-based (each tab is a link). Consumers add the neutral
   .inesc-filter-tabs class to their <nav>:
     <nav class="… inesc-filter-tabs">
       <ul>
         <li class="is-active"><a>ALL</a></li>
         <li><a>Category</a></li>
       </ul>
     </nav>
   The horizontal padding is exposed as --ic-tabs-pad-x so each plugin can
   line the bar up with its own content gutter; the full-width "bleed" (a
   negative margin using the layout's gutter) stays in the consumer's CSS
   because it is layout-specific.
========================================================= */

.inesc-filter-tabs {
	--ic-blue:       #005f80;
	--ic-green:      #97ca3d;
	--ic-white:      #fff;
	--ic-tabs-pad-x: 1rem; /* consumers may override to match their gutter */

	background: var(--ic-blue);
}

.inesc-filter-tabs ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 1rem var(--ic-tabs-pad-x) !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	justify-content: center;
}

.inesc-filter-tabs li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.inesc-filter-tabs a {
	display: inline-block;
	padding: 0.55rem 0.4rem;
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	font-weight: 700;
	color: var(--ic-white) !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	transition: color 0.2s ease;
}

.inesc-filter-tabs a:hover,
.inesc-filter-tabs a:focus,
.inesc-filter-tabs li.is-active a {
	color: var(--ic-green) !important;
}

/* On narrow screens the bar scrolls horizontally instead of wrapping. */
@media (max-width: 600px) {
	.inesc-filter-tabs ul {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
	}
	.inesc-filter-tabs a {
		white-space: nowrap;
	}
}