/* PGRI Tabs — shared by editor and front end so they render identically. */

.mw-tabs .mw-tablist {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
	align-items: flex-end;
	border-bottom: 2px solid #e4e9e4;
	margin-bottom: 1.6rem;
}

.mw-tabs .mw-tab-btn {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	margin-bottom: -2px;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 1.15rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, .42);
	padding: .55rem .95rem;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s;
}

.mw-tabs .mw-tab-btn:hover { color: #004d32; }

.mw-tabs .mw-tab-btn[aria-selected="true"],
.mw-tabs .mw-tab-btn.is-active {
	color: #004d32;
	border-bottom-color: #8bc641;
}

.mw-tabs .mw-tab-btn:focus-visible {
	outline: 2px solid #8bc641;
	outline-offset: 2px;
	border-radius: 4px;
}

/* editor: the label RichText sits inside the button */
.mw-tabs .mw-tab-btn span { display: inline-block; }

/* the "+" add-tab affordance (editor only) */
.mw-tabs .mw-tab-add {
	appearance: none;
	background: none;
	border: 1px dashed #c4ccc4;
	color: #6b776b;
	cursor: pointer;
	border-radius: 6px;
	font-size: 1rem;
	line-height: 1;
	padding: .35rem .6rem;
	margin: 0 0 2px .35rem;
	align-self: center;
}

/* Front end: stack every panel in ONE grid cell so the container is always as
   tall as the tallest panel. Switching tabs then causes no layout shift.
   Inactive panels stay in the cell (visibility:hidden keeps their box, so the
   height is stable) but drop out of the tab order + accessibility tree. */
.mw-tabs.is-enhanced .mw-tabs__panels {
	display: grid;
}
.mw-tabs.is-enhanced .mw-tabs__panels > .mw-tab-panel {
	grid-area: 1 / 1;
	min-width: 0;
}
.mw-tabs.is-enhanced .mw-tabs__panels > .mw-tab-panel:not( .is-active ) {
	visibility: hidden;
}

/* enhanced (editor always; front end after JS): hide inactive panels + the
   in-panel label heading (it has been promoted into the tab button). */
.mw-tabs.is-enhanced .mw-tab-panel[hidden] { display: none; }
.mw-tabs.is-enhanced .mw-tab-panel > .mw-tab-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* no-JS fallback: stacked, labelled sections */
.mw-tabs:not(.is-enhanced) .mw-tab-panel {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e4e9e4;
}
.mw-tabs:not(.is-enhanced) .mw-tab-panel:last-child { border-bottom: 0; }