/* =========================================================
   INESC Content — pagination
   Numbered, reload-based pagination nav shared by the Posts news
   listing and the Events listing. Consumers add the neutral
   .inesc-pagination classes to their markup:
     <nav class="… inesc-pagination">
       <ul>
         <li><a>1</a></li>
         <li class="inesc-pagination__ellipsis"><span>…</span></li>
         <li class="is-active"><a>3</a></li>
         <li class="inesc-pagination__next"><a>next ›</a></li>
       </ul>
     </nav>
   Self-contained tokens keep the component identical on either page,
   regardless of each plugin's own CSS variable names.
========================================================= */

.inesc-pagination {
	/* 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 nav without that palette loaded. */
	--ic-green:      var(--ip-green, #97ca3d);
	--ic-blue:       var(--ip-blue, #005f80);
	--ic-white:      var(--ip-text-light, #fff);

	margin: 3rem 0 0;
}

.inesc-pagination ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
}

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

.inesc-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	font-size: clamp(1rem, 1.2vw, 1.5rem); /* max 24px */
	font-weight: 400;
	color: var(--ic-green) !important;
	background: transparent;
	border: 1px solid var(--ic-green);
	text-decoration: none !important;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

.inesc-pagination li.is-active a {
	pointer-events: none;
}

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

.inesc-pagination__ellipsis span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 2.4rem;
	color: var(--ic-green);
	font-size: clamp(1rem, 1.2vw, 1.5rem); /* max 24px */
}

.inesc-pagination__next a {
	font-size: clamp(0.9rem, 1vw, 1.25rem); /* max 20px */
	padding: 0 1rem;
	letter-spacing: 0.04em;
	color: var(--ic-blue) !important;
	border-color: var(--ic-blue);
}

.inesc-pagination__next a:hover,
.inesc-pagination__next a:focus {
	background: var(--ic-blue);
	color: var(--ic-white) !important;
}