/* =========================================================
   INESC Content — 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 {
	/* Brand colors come from the shared token palette (the `inesc-content-tokens`
	   handle). The literals are standalone fallbacks, used only when a
	   consumer renders this bar without that palette loaded. */
	--ic-blue:       var(--ip-blue, #005f80);
	--ic-green:      var(--ip-green, #97ca3d);
	--ic-white:      var(--ip-text-light, #fff);
	--ic-tabs-pad-x: 1rem; /* consumers may override to match their gutter */
	/* --content-edge: left inset that lines the first tab up with the theme's
	   centred content container (Blocksy's --theme-container-width-base /
	   --container-max). Uses container-query units (cqw), which resolve
	   against the nearest size container or, if none, the small viewport. */
  --content-edge: max(0px, calc((100cqw - min(100cqw, var(--theme-container-width-base, 84vw), var(--container-max))) / 2));


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

.inesc-filter-tabs ul {
	list-style: none !important;
	padding: 1.5rem var(--ic-tabs-pad-x) 1.5rem var(--content-edge) !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	justify-content: flex-start;
	align-items: 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 0rem;
	font-size: clamp(1.312rem, 1.0706rem + 0.5030vw, 1.500rem);
	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;
}

/* Accessibility: visible focus ring (scoped, never touches the theme). */
.inesc-filter-tabs a:focus-visible {
	outline: 2px solid var(--ic-green);
	outline-offset: 2px;
}

/* 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;
	}
}