/* Pursglove archive, version 1.1.0.
   Built on the college theme's own components so the archive reads as part
   of the Prior site: split-section page header, eyebrow, split-heading,
   sidebar-section and sidebar-link-list (as on course pages), topic-card,
   news-card, the theme's search form and prose rhythm (main-content-area).
   Only what the theme does not already provide is styled here, always with
   the theme tokens: --primary, --primary-fill, --ink, --ink-mid, --bg-mid,
   --bg-deep, --border, --measure and the --sp scale. Corners are 2px on
   panels and 4px on photographs, as elsewhere on the site. */

/* Page header ------------------------------------------------------------ */

/* The theme's split-section pads top and bottom; the archive body follows
   straight on, so the bottom padding goes (the shell adds its own). */
.split-section.pga-hero {
	padding-bottom: 0;
}

.pga-hero__text {
	max-width: 46rem;
}

.pga-hero .split-body {
	max-width: var(--measure, 34rem);
}

/* Layout ----------------------------------------------------------------- */

.pga-shell {
	padding-block: var(--sp-4, 2.5rem) var(--sp-5, 4rem);
}

.pga-layout {
	display: grid;
	gap: var(--sp-3, 1.5rem);
}

@media (min-width: 64rem) {
	.pga-layout {
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: var(--sp-5, 4rem);
		align-items: start;
	}
}

/* Section navigation: the course page sidebar panel ----------------------- */

.pga-sidenav__panel {
	border-radius: 2px;
}

.pga-sidenav__panel .sidebar-section-title {
	margin-bottom: 0.75rem;
}

@media (min-width: 64rem) {
	.pga-sidenav {
		position: sticky;
		top: calc(80px + var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100vh - 100px - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* On small screens the panel folds behind a topic-card style button. */
.pga-sidenav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 0.875rem 1.25rem;
	background: var(--bg-mid, #F5F3F0);
	border-left: 3px solid var(--primary-fill, #8229F0);
	border-radius: 2px;
	color: var(--primary, #8229F0);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.pga-sidenav__toggle::-webkit-details-marker {
	display: none;
}

.pga-sidenav__toggle::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.pga-sidenav__details[open] > .pga-sidenav__toggle::after {
	content: "\2212";
}

/* Desktop: the panel is always shown, so the button goes. */
@media (min-width: 64rem) {
	.pga-sidenav__toggle {
		display: none;
	}
}

@media (max-width: 63.99rem) {
	.pga-sidenav__details[open] > .pga-sidenav__toggle {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.pga-sidenav__panel {
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-left: 3px solid var(--primary-fill, #8229F0);
		padding-top: 0.25rem;
	}
	.pga-sidenav__panel .sidebar-section-title {
		display: none;
	}
}

.pga-sidenav__home {
	margin: 0 0 0.55rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--border-light, rgba(30, 21, 48, 0.06));
	font-size: 0.82rem;
}

.pga-sidenav__home a {
	color: var(--primary, #8229F0);
	text-decoration: none;
}

.pga-sidenav .pga-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pga-sidenav .sidebar-link-list a {
	gap: 0.75rem;
}

.pga-sidenav .sidebar-link-list a span:first-child {
	min-width: 0;
}

/* Second and third levels: indented, no arrows, no rules between rows. */
.pga-sidenav .pga-nav-list .pga-nav-list {
	margin: 0.5rem 0 0.1rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--border, rgba(30, 21, 48, 0.1));
}

.pga-sidenav .pga-nav-list .pga-nav-list li {
	border: 0;
	padding: 0.2rem 0;
}

.pga-sidenav .pga-nav-list .pga-nav-list a {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ink, rgba(30, 21, 48, 0.82));
	text-decoration: none;
}

.pga-sidenav a:hover span:first-child,
.pga-sidenav .pga-nav-list .pga-nav-list a:hover,
.pga-sidenav__home a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pga-sidenav .sidebar-link-list a:hover {
	opacity: 1;
}

.pga-sidenav a[aria-current="page"],
.pga-sidenav .pga-nav-list .pga-nav-list a[aria-current="page"] {
	font-weight: 700;
	color: var(--ink, rgba(30, 21, 48, 0.82));
}

.pga-sidenav .is-ancestor > a {
	font-weight: 600;
}

.pga-sidenav a:focus-visible {
	outline: 3px solid var(--primary-fill, #8229F0);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Body ------------------------------------------------------------------- */

.pga-body {
	min-width: 0;
}

/* The body takes the course page main column type (main-content-area),
   without that column's own padding: the grid gap does that job here. The
   theme spaces every child of .container with an !important top margin,
   so the id is needed to take it off the body and its first child. */
#main-content .pga-layout > .pga-body.main-content-area {
	padding: 0;
	margin-top: 0 !important;
}

#main-content .pga-layout > .pga-body > :first-child {
	margin-top: 0 !important;
}

.pga-body > :where(p, ul, ol, dl, h2, h3, h4, .wp-block-details, .error-404__search, .pga-filter) {
	max-width: var(--measure, 34rem);
}

.pga-body img {
	height: auto;
	max-width: 100%;
	border-radius: 4px;
}

.pga-body .wp-block-image {
	margin: 0;
}

/* A photograph on its own in the text column keeps to the text measure. */
.pga-body > .wp-block-image:not(.alignleft):not(.alignright) {
	max-width: var(--measure, 34rem);
}

.pga-body > .wp-block-image.alignright {
	float: right;
	margin: 0 0 var(--sp-3, 1.5rem) var(--sp-4, 2.5rem);
	max-width: 40%;
}

.pga-body > :is(.wp-block-image.alignright, .wp-block-image.alignleft) img {
	width: auto;
}

.pga-body > .wp-block-image.alignleft {
	float: left;
	margin: 0 var(--sp-4, 2.5rem) var(--sp-3, 1.5rem) 0;
	max-width: 40%;
}

.pga-body::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 40rem) {
	.pga-body > .wp-block-image.alignright,
	.pga-body > .wp-block-image.alignleft {
		float: none;
		margin: 0 0 var(--sp-3, 1.5rem);
		max-width: 100%;
	}
	.pga-body > .wp-block-image.alignright img,
	.pga-body > .wp-block-image.alignleft img {
		width: 100% !important;
	}
}

/* Photograph entries: image beside its caption, as in the split sections
   used across the site. Panoramas and very wide images sit above. */
.pga-body > .archive-item {
	clear: both;
	padding-top: var(--sp-4, 2.5rem);
	border-top: 1px solid var(--border, rgba(30, 21, 48, 0.1));
}

.pga-body .archive-item > * {
	margin: 0;
	max-width: var(--measure, 34rem);
}

.pga-body .archive-item > * + * {
	margin-top: var(--sp-2, 1rem);
}

.pga-body .archive-item > .wp-block-image {
	max-width: none;
}

@media (min-width: 48rem) {
	.pga-body .archive-item:not(.archive-item--wide) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--sp-4, 2.5rem);
		align-items: start;
	}
	.pga-body .archive-item:not(.archive-item--wide) > * {
		grid-column: 2;
	}
	.pga-body .archive-item:not(.archive-item--wide) > .wp-block-image {
		grid-column: 1;
		grid-row: 1 / span 30;
	}
	.pga-body .archive-item:not(.archive-item--wide) > .wp-block-image + * {
		margin-top: 0;
	}
}

.pga-body .archive-item :where(h2, h3) {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ink, rgba(30, 21, 48, 0.82));
}

.pga-body .archive-item p {
	line-height: 1.75;
}

/* Expandable sections: the topic-card panel with a disclosure. */
.pga-body .wp-block-details {
	background: var(--bg-mid, #F5F3F0);
	border-left: 3px solid var(--primary-fill, #8229F0);
	border-radius: 2px;
	padding: 0;
}

.pga-body .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 1.1rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary, #8229F0);
	cursor: pointer;
	list-style: none;
}

.pga-body .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.pga-body .wp-block-details > summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.pga-body .wp-block-details[open] > summary::after {
	content: "\2212";
}

.pga-body .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--primary-fill, #8229F0);
	outline-offset: 2px;
}

.pga-body .wp-block-details > :not(summary) {
	margin: 0 1.5rem 1rem;
}

.pga-body .wp-block-details :where(h2, h3, h4) {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, rgba(30, 21, 48, 0.82));
}

.pga-body .wp-block-details > :last-child {
	margin-bottom: 1.5rem;
}

.pga-body .wp-block-details .wp-block-image.alignright {
	float: right;
	margin-left: 1.5rem;
	max-width: 40%;
}

.pga-body .wp-block-details::after {
	content: "";
	display: table;
	clear: both;
}

/* Tables keep the theme's table style. The theme lets table text break
   anywhere (overflow-wrap: anywhere), which splits catalogue numbers and
   short words one letter per line in narrow columns, so here words are kept
   whole and a wide table scrolls inside its own box instead. The theme's
   rule carries the #main-content id, so these do too. */
#main-content .pga-body figure.wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

#main-content .pga-body figure.wp-block-table:focus-visible {
	outline: 3px solid var(--primary-fill, #8229F0);
	outline-offset: 2px;
}

#main-content .pga-body figure.wp-block-table :is(th, td) {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	vertical-align: top;
}

#main-content .pga-body figure.wp-block-table :is(th, td):first-child {
	white-space: nowrap;
}

#main-content .pga-body figure.wp-block-table.archive-filterable table {
	min-width: 44rem;
}

#main-content .pga-body figure.wp-block-table.archive-filterable thead th {
	position: sticky;
	top: 0;
	background: var(--bg, #FFFFFF);
}

/* Search and table filter use the theme's search form. The theme's field
   border is 1.2:1; here it is darkened to meet the 3:1 WCAG minimum for
   form controls. */
.pga-search {
	margin-block: var(--sp-4, 2.5rem) !important;
}

.pga-search .error-404__search-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pga-search .error-404__search-input,
.pga-filter__input {
	flex: 1 1 14rem;
	min-width: 0;
	border-color: var(--ink-light, #6D6575);
}

.pga-search .error-404__search-input:focus-visible,
.pga-filter__input:focus-visible {
	outline: 3px solid var(--primary-fill, #8229F0);
	outline-offset: 2px;
}

.pga-filter {
	margin-block: var(--sp-3, 1.5rem) var(--sp-2, 1rem);
}

.pga-filter__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.pga-filter__input {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ink-light, #6D6575);
	border-radius: 2px;
	font: inherit;
	font-size: 1rem;
	background: var(--bg, #FFFFFF);
	color: var(--ink, rgba(30, 21, 48, 0.82));
}

.pga-filter__hint {
	margin: 0.25rem 0 0 !important;
	font-size: 0.8125rem;
	color: var(--ink-mid, #61596B);
}

@media (min-width: 48rem) {
	.pga-filter__hint {
		display: none;
	}
}

.pga-filter__count {
	margin: 0.5rem 0 0 !important;
	font-size: 0.8125rem;
	color: var(--ink-mid, #61596B);
}

/* Child page listings ------------------------------------------------------ */

/* Card grids, lists and tables start below any floated photograph. */
.pga-body > :is(.news-grid, .topic-card-grid, .pga-children-list, .wp-block-table, .archive-item) {
	clear: both;
}

.pga-body > .pga-children-list {
	max-width: none;
	columns: 15rem 3;
	column-gap: var(--sp-4, 2.5rem);
}

.pga-body > .pga-children-list li {
	break-inside: avoid;
}

.pga-body > .news-grid {
	margin-top: var(--sp-3, 1.5rem);
}

@media (min-width: 64rem) and (max-width: 80rem) {
	.pga-body > .news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pga-card .news-title {
	margin: 0;
}

.pga-card .pga-card__text {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ink-mid, #61596B);
}

.pga-card .news-date {
	margin: 0.75rem 0 0;
}

.pga-card__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bg-deep, #EDE9E6);
}

.pga-body .pga-card img {
	border-radius: 0;
}

.pga-body a.news-card:focus-visible,
.pga-body a.topic-card:focus-visible {
	outline: 3px solid var(--primary-fill, #8229F0);
	outline-offset: 3px;
}

.pga-body > .topic-card-grid {
	margin-top: var(--sp-3, 1.5rem);
}

.pga-body .topic-card-title {
	margin: 0 0 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
	.pga-body .news-card,
	.pga-body .news-card-img {
		transition: none;
	}
}

/* Text for screen readers only. */
.pga-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* College history pages now use their own page template, 14 October 2026 (no news hero). Give the breadcrumb room below the sticky header. */
.single-pursglove_archive .pga-breadcrumb { padding-top: clamp(1.5rem, 3vw, 2.5rem); }