/* ==========================================================================
   agm-table — the site's table convention.

   Tables are plain HTML in post_content:

     <div class="agm-table-wrap">
       <table class="agm-table">
         <caption>…</caption>
         <thead><tr><th scope="col">…</th></tr></thead>
         <tbody><tr><th scope="row">…</th><td>…</td></tr></tbody>
       </table>
     </div>

   No plugin, no shortcode, no JS, no per-table IDs, no inline styles. Typography follows
   the site: Georgia, 16px, line-height 1.6, links in the house navy. Zebra striping and
   row hover are global defaults, not per-table options, because every TablePress table
   had both switched on.

   See docs/tables.md for the authoring rules.
   ========================================================================== */

.agm-table-wrap {
	--agm-ink:        #222222;
	--agm-navy:       #1b4e82;
	--agm-head-bg:    #e8eef5;
	--agm-border:     #dddddd;
	--agm-zebra:      #f7f9fb;
	--agm-hover:      #eef3f9;
	--agm-highlight:  #ffd700;
	--agm-pad:        10px 12px;
	/* Offset for sticky headers. 0 because the site header does not stick; if that ever
	   changes, this is the single knob to turn. */
	--agm-sticky-top: 0px;

	/* The whole responsive strategy: a table wider than its column scrolls inside the
	   wrapper instead of pushing the page sideways. A table that fits does not scroll,
	   so narrow tables are unaffected. */
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.75em 0 1.6em;
}

.agm-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--agm-ink);
}

.agm-table caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: var(--agm-ink);
	padding: 0 0 10px;
}

.agm-table th,
.agm-table td {
	padding: var(--agm-pad);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--agm-border);
}

.agm-table thead th {
	background-color: var(--agm-head-bg);
	color: var(--agm-navy);
	font-weight: 700;
	vertical-align: middle;
	border-bottom: 2px solid var(--agm-navy);
	word-break: normal;
}

/* A row label. <th scope="row"> is what that column always meant; it reads bold exactly
   as the old <strong> did, so the page looks unchanged. */
.agm-table tbody th[scope="row"] {
	font-weight: 700;
}

.agm-table tfoot th,
.agm-table tfoot td {
	background-color: var(--agm-head-bg);
	font-weight: 700;
	border-top: 2px solid var(--agm-navy);
}

/* A cell that held multiple paragraphs. These are real <p> elements rather than
   <br /><br /> because wpautop rewrites the latter and collapses the gap. */
.agm-table td > p,
.agm-table th > p {
	margin: 0 0 0.75em;
}

.agm-table td > p:last-child,
.agm-table th > p:last-child {
	margin-bottom: 0;
}

.agm-table a {
	color: var(--agm-navy);
}

.agm-table a:hover {
	color: #123456;
}

.agm-table img {
	max-width: none;
	margin: 0;
	padding: 0;
	border: none;
}

/* Striping, then the editorial highlight, then hover — in that order, because they share
   specificity and the later rule has to win. */
.agm-table tbody tr:nth-child(even) > * {
	background-color: var(--agm-zebra);
}

/* A row the surrounding article argues from. Carried over from the TablePress rule
   `.tablepress-id-9 .row-8 td`, which highlighted the Quant 45 row of the percentiles
   chart — it is content, not decoration, so it gets a name. */
.agm-table tbody tr.agm-row-highlight > * {
	background-color: var(--agm-highlight);
}

.agm-table tbody tr:hover > * {
	background-color: var(--agm-hover);
}

.agm-table tbody tr.agm-row-highlight:hover > * {
	background-color: #ffe14d;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */

/* Tighter padding for dense numeric tables. */
.agm-table--compact {
	--agm-pad: 6px 8px;
	font-size: 15px;
}

/* Centre every cell. Replaces `.tablepress-id-9 .column-1 … .column-8 { text-align:center }`. */
.agm-table--center th,
.agm-table--center td {
	text-align: center;
}

.agm-table--nowrap th,
.agm-table--nowrap td {
	white-space: nowrap;
}

/* Equal-width columns. Replaces the fixed 150px column rules on the GRE vs LSAT chart. */
.agm-table--even {
	table-layout: fixed;
}

/* A wider second column, for two-up comparison charts whose middle column carries prose.
   Replaces `.tablepress-id-5 .column-2 { width: 325px }` and the same rule on table 6. */
.agm-table--wide-2 thead th:nth-child(2),
.agm-table--wide-2 tbody td:nth-child(2),
.agm-table--wide-2 tbody th:nth-child(2) {
	width: 46%;
}

/* Sticky header row. Only for a table whose natural minimum width fits a phone — the
   wrapper has to stop being a scroll container for sticky to anchor to the viewport, so a
   wide table with this modifier would push the page sideways instead of scrolling. */
.agm-table-wrap:has(> .agm-table--sticky) {
	overflow: visible;
}

.agm-table--sticky thead th {
	position: sticky;
	top: var(--agm-sticky-top);
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Stacked layout for phones. Opt-in: add agm-table--stack and give every <td> a
   data-label matching its column heading. Use it for tables whose cells hold prose;
   a numeric table reads better scrolled than stacked.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.agm-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.agm-table--stack,
	.agm-table--stack tbody,
	.agm-table--stack tr,
	.agm-table--stack th,
	.agm-table--stack td {
		display: block;
		width: auto;
	}

	.agm-table--stack tbody tr {
		margin: 0 0 1em;
		border: 1px solid var(--agm-border);
	}

	.agm-table--stack tbody tr > * {
		border-bottom: 1px solid var(--agm-border);
	}

	.agm-table--stack tbody tr > *:last-child {
		border-bottom: none;
	}

	.agm-table--stack tbody th[scope="row"] {
		background-color: var(--agm-head-bg);
		color: var(--agm-navy);
	}

	.agm-table--stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: var(--agm-navy);
	}
}

/* Phones: buy back horizontal room before the scrollbar has to appear. */
@media (max-width: 480px) {
	.agm-table {
		font-size: 15px;
	}

	.agm-table-wrap {
		--agm-pad: 8px 9px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.agm-table tbody tr > * {
		transition: background-color 0.12s ease;
	}
}