/**
 * Journal Archive — front end.
 *
 * Ported from the "Journal Tables" design (Society of Agriculture journal
 * archive). Colours, fonts and spacing all resolve to the active theme's
 * theme.json preset variables (var(--wp--preset--*)); the plain hex values are
 * only fallbacks for themes that don't register the same slugs. Neutral rules
 * derive from currentColor, and the branded tints (header band, row stripe,
 * dividers) are mixed from the theme's own primary — so the tables read as the
 * site's without a single hard-coded brand colour.
 *
 * Typography is single-scale by design: one family and one body size for every
 * cell, one size for every heading. Hierarchy comes from weight and colour.
 *
 * Local design tokens are scoped to `.ja-archive` — no :root declarations, so
 * the plugin can never leak custom properties into the rest of the page.
 */

.ja-archive {
	/* Ink, accent and link pull straight from the theme palette. */
	--ja-ink: var( --wp--preset--color--black, #14181a );
	--ja-accent: var( --wp--preset--color--secondary, #4c8b2b );
	--ja-link: var( --wp--preset--color--primary, #2f6e8f );
	--ja-surface: var( --wp--preset--color--white, #ffffff );

	/* Header, chip and hover tints — theme presets where one fits. */
	--ja-crumb-bg: var( --wp--preset--color--quaternary, #eaf1f4 );
	--ja-accent-tint: color-mix( in srgb, var( --ja-accent ) 8%, var( --ja-surface ) );

	/* The primary pill is the brand green exactly as the palette defines it
	   (#63bc46) — no deepening. Its label is ink rather than white, which is
	   what lets the raw green pass WCAG AA (8.7:1 against black; white would
	   have been 2.4:1). Hover darkens slightly rather than lightening. */
	--ja-btn: var( --ja-accent );
	--ja-btn-hover: color-mix( in srgb, var( --ja-accent ) 85%, var( --ja-ink ) );

	/* Outlined pills put the green on white as *text*, where the raw brand
	   green would be unreadable — those keep the deepened mix. */
	--ja-btn-ink: color-mix( in srgb, var( --ja-accent ) 70%, var( --ja-ink ) );

	/* Branding: the tables read as the site's, not as generic black on white.
	   Every tint derives from the theme's own primary, so the strength stays
	   subtle and the whole set moves together if the palette changes. */
	--ja-brand-head: color-mix( in srgb, var( --ja-link ) 10%, var( --ja-surface ) );
	--ja-brand-stripe: color-mix( in srgb, var( --ja-link ) 3.5%, var( --ja-surface ) );
	--ja-brand-rule: color-mix( in srgb, var( --ja-link ) 45%, transparent );
	--ja-brand-ink: color-mix( in srgb, var( --ja-link ) 70%, var( --ja-ink ) );

	/* Neutrals are derived, not themed: no palette slug maps cleanly to a
	   hairline border, so we tint the current text colour instead. */
	--ja-border: color-mix( in srgb, currentColor 14%, transparent );
	--ja-border-soft: color-mix( in srgb, currentColor 8%, transparent );
	--ja-row-hover: color-mix( in srgb, var( --ja-link ) 9%, transparent );
	--ja-muted: color-mix( in srgb, currentColor 55%, transparent );

	--ja-radius: 10px;
	--ja-radius-sm: 8px;
	--ja-gap: var( --wp--preset--spacing--large, 2.75rem );

	/* One family and one body size for every table on the page — set here and
	   inherited, so no cell can drift onto a different scale. */
	--ja-font: var( --wp--preset--font-family--system-sans-serif, inherit );
	--ja-font-body: var( --wp--preset--font-size--tiny, 14px );
	--ja-font-head: var( --wp--preset--font-size--min, 12px );

	color: var( --ja-ink );
	font-family: var( --ja-font );
	margin: 0 0 var( --ja-gap );
	/* Breathing room above the filters and below the last table (~30px). */
	padding-block: var( --wp--preset--spacing--medium, 30px );
}

.ja-archive * {
	box-sizing: border-box;
}

/* --- Toolbar: search + sort --------------------------------------------- */

.ja-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: var( --wp--preset--spacing--medium, 1.75rem );
}

.ja-search {
	align-items: center;
	background: var( --ja-surface );
	border: 1px solid var( --ja-border );
	border-radius: 999px;
	display: flex;
	flex: 1 1 240px;
	gap: 8px;
	max-width: 400px;
	padding: 0 14px;
	transition: border-color 120ms ease;
}

.ja-search:focus-within {
	border-color: var( --ja-accent );
}

.ja-search-icon {
	color: var( --ja-muted );
	flex: 0 0 auto;
}

.ja-archive .ja-search-input {
	background: transparent;
	border: 0;
	color: var( --ja-ink );
	flex: 1;
	/* Form controls don't inherit the family — state it. */
	font-family: var( --ja-font );
	font-size: var( --ja-font-body );
	height: 42px;
	margin: 0;
	outline: none;
	padding: 0;
}

.ja-sort,
.ja-cat {
	align-items: center;
	color: var( --ja-muted );
	display: inline-flex;
	font-size: var( --ja-font-head );
	gap: 8px;
}

.ja-archive .ja-sort-select,
.ja-archive .ja-cat-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var( --ja-surface );
	/* Small custom chevron (muted grey), replacing the large native arrow. */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a9497' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E" );
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 11px 11px;
	border: 1px solid var( --ja-border );
	border-radius: 999px;
	color: var( --ja-ink );
	font-family: var( --ja-font );
	font-size: var( --ja-font-head );
	height: 42px;
	margin: 0;
	min-width: 220px;
	padding: 0 38px 0 16px;
}

.ja-result-count {
	color: var( --ja-muted );
	font-size: var( --ja-font-head );
	margin-left: auto;
	white-space: nowrap;
}

.ja-no-results {
	color: var( --ja-muted );
	flex: 1 1 100%;
	margin: 0;
}

/* Dim the tables briefly while an AJAX filter is in flight. */
.ja-archive.ja-is-loading .ja-groups {
	opacity: 0.55;
	transition: opacity 120ms ease;
}

/* --- Groups -------------------------------------------------------------- */

.ja-group + .ja-group {
	margin-top: var( --ja-gap );
}

/* Title, a hairline rule that fills the row — the design's "name ——" divider.
   The rule now fades out of the brand colour rather than being a grey line. */
.ja-group-title {
	align-items: center;
	display: flex;
	font-family: var( --ja-font );
	font-size: var( --wp--preset--font-size--large, 1.35rem );
	font-weight: 700;
	gap: 16px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 14px;
}

.ja-group-title::after {
	background: linear-gradient( to right, var( --ja-brand-rule ), var( --ja-border-soft ) );
	content: "";
	flex: 1;
	height: 2px;
}

/* --- Tables -------------------------------------------------------------- */

.ja-table {
	background: var( --ja-surface );
	border: 1px solid var( --ja-border );
	border-collapse: separate;
	border-radius: var( --ja-radius-sm );
	border-spacing: 0;
	font-family: var( --ja-font );
	font-size: var( --ja-font-body );
	/* ~15px gap above each table (nearest preset is 16px). */
	margin-top: var( --wp--preset--spacing--small, 15px );
	overflow: hidden;
	/* Fixed layout so every table of a given type lines up with the others.
	   With `auto`, each group sized its own columns from its own longest
	   volume title, and the Volume / Publication Year split drifted from one
	   series to the next. Widths below are declared once, per table type. */
	table-layout: fixed;
	width: 100%;
}

.ja-table th,
.ja-table td {
	padding: 15px 22px;
	text-align: left;
	vertical-align: middle;
}

.ja-table thead th {
	background: var( --ja-brand-head );
	border-bottom: 1px solid var( --ja-brand-rule );
	color: var( --ja-brand-ink );
	font-family: var( --ja-font );
	font-size: var( --ja-font-head );
	font-weight: 700;
	letter-spacing: 0.09em;
	padding-bottom: 13px;
	padding-top: 13px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ja-table tbody td {
	border-top: 1px solid var( --ja-border-soft );
	font-family: var( --ja-font );
	font-size: var( --ja-font-body );
}

/* Barely-there brand stripe: enough to track a row across a wide table
   without reading as a coloured band. */
.ja-table tbody tr:nth-child( even ) {
	background: var( --ja-brand-stripe );
}

.ja-table tbody tr:first-child td {
	border-top: 0;
}

.ja-table tbody tr {
	transition: background 120ms ease;
}

.ja-table tbody tr:hover,
.ja-table tbody tr:nth-child( even ):hover {
	background: var( --ja-row-hover );
}

/* Per-column styling is scoped to `tbody` throughout this section. These are
   two-class selectors and `.ja-table thead th` is only one, so an unscoped rule
   here outranks it and recolours that column's header label — which is how the
   header row ended up with three different colours. Column rules style cells;
   the header row is styled once, above, and nothing else touches it. */
.ja-table tbody .ja-col-year,
.ja-table tbody .ja-col-date,
.ja-table tbody .ja-col-page {
	color: var( --ja-muted );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ja-table tbody .ja-col-page {
	font-weight: 600;
}

/* Alignment is the exception: it stays unscoped so each header sits over its
   own column rather than drifting away from the values beneath it. */
.ja-table .ja-col-page {
	text-align: right;
}

.ja-table .ja-col-doi {
	word-break: break-word;
}

/* The volume / article name is the row's headline — carried by weight and ink
   alone, so the body text stays on a single size throughout. No tracking of its
   own: every cell in the table shares the inherited letter-spacing. */
.ja-table tbody .ja-col-volume,
.ja-table tbody .ja-col-article {
	color: var( --ja-ink );
	font-weight: 600;
}

.ja-table--articles tbody .ja-col-article,
.ja-table--results tbody .ja-col-article {
	line-height: 1.35;
	text-wrap: pretty;
}

/* Article search results: the article title is the headline, so the volume it
   belongs to reads as supporting detail rather than a second bold column. */
.ja-table--results tbody .ja-col-series {
	color: var( --ja-muted );
	overflow-wrap: break-word;
}

.ja-table--results tbody .ja-col-volume {
	font-weight: 500;
	overflow-wrap: break-word;
}

/* --- Column widths ------------------------------------------------------- *
 * Declared on the header cells (which is what `table-layout: fixed` reads),
 * so the volume listing looks identical for every series and the two article
 * listings share one rhythm. The headline column takes whatever is left.
 *
 * The volume listing uses pixels rather than percentages, so its Publication
 * Year column measures the same in every series whatever width the container
 * ends up; each width holds its own uppercase header without wrapping. */
.ja-table--volumes th.ja-col-year {
	width: 220px;
}

.ja-table--volumes th.ja-col-options {
	width: 330px;
}

.ja-table--articles th.ja-col-doi {
	width: 15%;
}

.ja-table--articles th.ja-col-author {
	width: 22%;
}

.ja-table--articles th.ja-col-date,
.ja-table--results th.ja-col-date {
	width: 180px;
}

.ja-table--articles th.ja-col-page {
	width: 100px;
}

.ja-table--articles th.ja-col-options,
.ja-table--results th.ja-col-options {
	width: 110px;
}

.ja-table--results th.ja-col-author {
	width: 20%;
}

.ja-table--results th.ja-col-series {
	width: 16%;
}

.ja-table--results th.ja-col-volume {
	width: 16%;
}

/* Between the mobile cards and a comfortable desktop, six columns need the
   space back that the generous cell padding takes. */
@media ( max-width: 1100px ) {
	.ja-table--articles th,
	.ja-table--articles td,
	.ja-table--results th,
	.ja-table--results td {
		padding-inline: 14px;
	}

	.ja-table--articles th.ja-col-date,
	.ja-table--results th.ja-col-date {
		width: 150px;
	}
}

/* Long unbroken titles must not force a fixed column wider than its share. */
.ja-table td {
	overflow-wrap: break-word;
}

.ja-archive .ja-volume-link {
	color: var( --ja-accent );
	text-decoration: none;
	text-underline-offset: 2px;
}

.ja-archive .ja-volume-link:hover,
.ja-archive .ja-volume-link:focus-visible {
	text-decoration: underline;
}

.ja-table tbody .ja-col-author {
	color: var( --ja-muted );
	line-height: 1.4;
	text-wrap: pretty;
}

/* --- Options: pills and icon buttons ------------------------------------- */

/* Keep this a real table-cell — turning it into a flex container collapses the
   width:1% column and stacks the pills. Lay them out inline on one row instead,
   right-aligned, with white-space:nowrap keeping them together. Header included
   so the "Options" label sits over its buttons rather than stranded at the far
   left of the column. */
.ja-table .ja-col-options {
	text-align: right;
	white-space: nowrap;
}

.ja-archive .ja-col-options .ja-link,
.ja-archive .ja-col-options .ja-icon-link {
	vertical-align: middle;
}

.ja-archive .ja-col-options > a + a {
	margin-left: 8px;
}

/* Primary action ("View table of contents") — the brand green pill. The label
   is ink, not white: on the raw brand green that is 8.7:1 rather than 2.4:1. */
.ja-archive .ja-link {
	align-items: center;
	background: var( --ja-btn );
	border: 1px solid var( --ja-btn );
	border-radius: 999px;
	color: var( --ja-ink );
	display: inline-flex;
	font-size: var( --ja-font-head );
	font-weight: 600;
	gap: 8px;
	height: 34px;
	line-height: 1;
	padding: 0 15px;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	white-space: nowrap;
}

/* Trailing chevron, masked from currentColor so it recolours on hover. */
.ja-archive .ja-link::after {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 13px;
	-webkit-mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 3.5 10 8l-4.5 4.5'/></svg>" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 3.5 10 8l-4.5 4.5'/></svg>" ) center / contain no-repeat;
	width: 13px;
}

.ja-archive .ja-link:hover,
.ja-archive .ja-link:focus-visible {
	background: var( --ja-btn-hover );
	border-color: var( --ja-btn-hover );
	color: var( --ja-ink );
}

/* Secondary actions (PDF) — outlined pills, in the same green so the two
   actions read as one set. */
.ja-archive .ja-icon-link {
	align-items: center;
	background: var( --ja-surface );
	border: 1px solid color-mix( in srgb, var( --ja-btn-ink ) 35%, transparent );
	border-radius: 999px;
	color: var( --ja-btn-ink );
	display: inline-flex;
	font-size: var( --ja-font-head );
	font-weight: 600;
	gap: 7px;
	height: 34px;
	line-height: 1;
	padding: 0 14px;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	white-space: nowrap;
}

.ja-archive .ja-icon-link:hover,
.ja-archive .ja-icon-link:focus-visible {
	background: var( --ja-accent-tint );
	border-color: var( --ja-btn-ink );
	color: var( --ja-btn-ink );
}

.ja-archive .ja-icon-link:hover .ja-icon,
.ja-archive .ja-icon-link:focus-visible .ja-icon {
	opacity: 1;
}

.ja-icon {
	display: block;
	flex: 0 0 auto;
	height: 1.15em;
	opacity: 0.85;
	transition: opacity 0.15s ease;
	width: 1.15em;
}

/* --- Table-of-contents header ------------------------------------------- */

.ja-back {
	align-items: center;
	color: var( --ja-muted );
	display: inline-flex;
	font-size: var( --ja-font-head );
	font-weight: 600;
	gap: 8px;
	margin-bottom: 1.75em;
	text-decoration: none;
	transition: color 120ms ease;
	width: fit-content;
}

/* Leading chevron pointing back. */
.ja-back::before {
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 13px;
	-webkit-mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 3.5 6 8l4.5 4.5'/></svg>" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 3.5 6 8l4.5 4.5'/></svg>" ) center / contain no-repeat;
	width: 13px;
}

.ja-back:hover,
.ja-back:focus-visible {
	color: var( --ja-accent );
}

.ja-toc-title {
	font-size: var( --wp--preset--font-size--gigantic, 2rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 1em;
}

.ja-empty {
	color: var( --ja-muted );
}

/* --- Single-volume page: match the theme's content width ----------------- *
 * A volume's table of contents is injected into the CPT page's content. On the
 * shortcode page you wrap the archive in a Group block, so the block theme
 * constrains it to the content width — but the single-volume template applies
 * no such constraint, and the table runs edge to edge. Pin it to the SAME width
 * a Group block would use, via the theme's own layout variable (with a sane
 * fallback), so the contents line up with the rest of the site.
 *
 * Keyed on `.ja-toc` itself rather than the `single-<post type>` body class:
 * only render_toc() emits that class, and the body class moves whenever the
 * post type key changes (it did — journal_volume became archive), which silently
 * dropped the constraint and let the table go full width. */
.ja-toc {
	margin-inline: auto;
	max-width: var( --wp--style--global--content-size, 1400px );
	padding-inline: var( --wp--style--root--padding-right, 1.25rem );
}

/* Same treatment for the archive auto-rendered on the configured Journal page:
 * it is appended to the page content with no Group wrapper, so pin it to the
 * theme content width rather than letting it run edge to edge. */
.ja-archive--index {
	margin-inline: auto;
	max-width: var( --wp--style--global--content-size, 1400px );
	padding-inline: var( --wp--style--root--padding-right, 1.25rem );
}

/* --- Stack into cards on small screens ----------------------------------- */

@media ( max-width: 782px ) {
	.ja-table {
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.ja-table,
	.ja-table tbody,
	.ja-table tr,
	.ja-table td {
		display: block;
		width: 100%;
	}

	.ja-table thead {
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Each row becomes a bordered card, matching the mobile design. Cards read
	   as separate blocks already, so the desktop stripe is switched off — but
	   they keep a brand hairline down the leading edge. */
	.ja-table tbody tr,
	.ja-table tbody tr:nth-child( even ) {
		background: var( --ja-surface );
		border: 1px solid var( --ja-border );
		border-left: 3px solid var( --ja-brand-rule );
		border-radius: var( --ja-radius-sm );
		margin-bottom: 12px;
		padding: 16px;
	}

	.ja-table tbody tr:hover,
	.ja-table tbody tr:nth-child( even ):hover {
		background: var( --ja-surface );
	}

	.ja-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.ja-table tbody td {
		border-top: 0;
		padding: 0.15em 0;
		white-space: normal;
	}

	.ja-table .ja-col-page {
		text-align: left;
	}

	/* Prefix each cell with its column name. These stand in for the header row,
	   which is hidden at this width, so they carry the identical treatment —
	   same colour, size, weight, tracking and case as `thead th` above. A label
	   should not change appearance just because it moved into the cell. */
	.ja-table tbody td[data-label]::before {
		color: var( --ja-brand-ink );
		content: attr( data-label ) ": ";
		font-size: var( --ja-font-head );
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
	}

	/* The title carries itself; the options row is buttons, not a value. */
	.ja-table--volumes tbody td.ja-col-volume::before,
	.ja-table--articles tbody td.ja-col-article::before,
	.ja-table--results tbody td.ja-col-article::before,
	.ja-table tbody td.ja-col-options::before {
		content: none;
	}

	/* Same body size as every other cell — the card headline is carried by
	   weight, not by a second type scale. */
	.ja-table--volumes tbody td.ja-col-volume,
	.ja-table--articles tbody td.ja-col-article,
	.ja-table--results tbody td.ja-col-article {
		font-size: var( --ja-font-body );
		font-weight: 700;
		margin-bottom: 0.25em;
	}

	/* Tappable action buttons, kept on one line: the table-of-contents pill
	   takes the remaining width and the PDF sits beside it as a circle. */
	.ja-table tbody td.ja-col-options {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		justify-content: flex-start;
		margin-top: 0.75em;
	}

	/* Height goes to min-height and the label may wrap: sharing the line with
	   the circle leaves the pill narrow on small phones, and nowrap text in a
	   shrunk flex item would spill out of the card rather than reflow. */
	.ja-archive .ja-link {
		flex: 1 1 auto;
		height: auto;
		justify-content: space-between;
		line-height: 1.25;
		min-height: 44px;
		min-width: 0;
		padding: 8px 16px;
		white-space: normal;
	}

	/* Icon-only circle — the label is already screen-reader-only, so dropping
	   the padding costs nothing but keeps the 44px tap target. */
	.ja-archive .ja-icon-link {
		border-radius: 50%;
		flex: 0 0 44px;
		height: 44px;
		justify-content: center;
		padding: 0;
		width: 44px;
	}

	.ja-table tbody td:empty {
		display: none;
	}
}