/* =========================================================
   INESC Content — filter tabs
   Taxonomy filter tab bar shared by the Posts news listing and the
   Events listing: a segmented row of bordered uppercase buttons (blue
   label on white), the active one filled green; hover fills green with a
   white label.
   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>
   This file is the single source of truth for the bar — look, padding,
   height, margins and mobile behaviour. Modules (events.css, posts.css)
   must not restyle it: change it here and every listing follows.
========================================================= */

.inesc-filter-tabs {
	background: transparent;
}

@media (max-width: 768px) {
	.inesc-filter-tabs {
		margin: 0 0 1.5rem;
	}
}

/* Segmented control: one row of bordered buttons sharing their borders,
   rounded only at the two outer ends. Adjacent buttons overlap by 1px
   (negative margin) so every divider is a single line, also when the row
   wraps. */
.inesc-filter-tabs ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 1.5rem var(--website-margin) 0.5rem !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: flex-start;
	align-items: stretch;
}

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

.inesc-filter-tabs li + li {
	margin-left: -1px !important;
}

.inesc-filter-tabs a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--blue);
	background: white;
	font-size: clamp(1rem, 0.8714rem + 0.2679vw, 1.125rem);
	font-weight: 700;
	color: var(--blue) !important;
	text-decoration: none !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.inesc-filter-tabs li:first-child a {
	border-radius: 4px 0 0 4px;
}

.inesc-filter-tabs li:last-child a {
	border-radius: 0 4px 4px 0;
}

.inesc-filter-tabs li:only-child a {
	border-radius: 4px;
}

/* Active tab: green fill, blue label (as in the design). */
.inesc-filter-tabs li.is-active a {
	z-index: 1;
	background: var(--green);
}

/* Hover / keyboard focus: green fill, white label (also on the active tab). */
.inesc-filter-tabs a:hover,
.inesc-filter-tabs a:focus-visible {
	z-index: 1;
	background: var(--green);
	color: white !important;
}

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

/* On narrow screens the bar scrolls horizontally instead of wrapping.
   Scroll hint: the edge that still hides tabs gets a blue fade (~36px,
   blue to transparent, over the tabs), so it is obvious the bar can be
   swiped. The JS in INESC_Content_UI::render_tabs() toggles
   .has-more-start / .has-more-end on the <ul> and the <nav> from the scroll
   position (no fade at an edge already reached) and scrolls the active tab
   into view on load. Without JS the bar simply has no fade.
   The fades are drawn by the <nav>'s ::before/::after (the <ul> scrolls,
   so its own pseudo-elements would scroll away); top/bottom match the
   <ul> padding so they cover only the tabs. */
@media (max-width: 600px) {
	.inesc-filter-tabs {
		--inesc-tabs-fade: 36px;
		position: relative;
	}
	.inesc-filter-tabs ul {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.inesc-filter-tabs ul::-webkit-scrollbar {
		display: none;
	}
	.inesc-filter-tabs::before,
	.inesc-filter-tabs::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		bottom: 0.5rem;
		width: var(--inesc-tabs-fade);
		pointer-events: none;
		z-index: 3;
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	.inesc-filter-tabs::before {
		left: 0;
		background: linear-gradient(to right, var(--blue), transparent);
	}
	.inesc-filter-tabs::after {
		right: 0;
		background: linear-gradient(to left, var(--blue), transparent);
	}
	.inesc-filter-tabs.has-more-start::before,
	.inesc-filter-tabs.has-more-end::after {
		opacity: 1;
	}
	.inesc-filter-tabs a {
		white-space: nowrap;
	}
}