/* =========================================================
   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>
   Colors use the theme's --green / --blue brand variables (not defined by
   this plugin), so the component looks the same on either page.
========================================================= */

.inesc-pagination {
	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(--green) !important;
	background: transparent;
	border: 1px solid var(--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(--green);
	color: 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(--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(--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(--blue) !important;
	border-color: var(--blue);
}

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