/*
 * Tax Sale Results: redesign skin (Oct 2026)
 * Loaded by functions.php after style.css. Values come from the owner's
 * plan (grok-plan/snippets/tokens.css). To switch the whole skin off,
 * rename or delete this file; the site falls back to the old look.
 *
 * Contents
 *  1. Tokens, fonts, colors
 *  2. Header: top bar (clock, Sign in, Become a member), logo row, nav
 *  3. List tables (This week + state pages)
 */

/* ---------- 1. Tokens, fonts, colors ---------- */
:root,
body {
	--tsr-bg: #f3f1eb;
	--tsr-paper: #fbfaf6;
	--tsr-ink: #111111;
	--tsr-fg: #161616;
	--tsr-muted: #2a2a2a;
	--tsr-brand: #0e46a3;
	--tsr-brand-dark: #0a3478;
	--tsr-brand-fg: #ffffff;
	--tsr-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--tsr-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Re-point the theme's own presets so every block that already uses them
	   picks up the new look (theme.json stays untouched). */
	--wp--preset--color--brand-blue: #0e46a3;
	--wp--preset--font-family--open-sans: var(--tsr-sans);
	--wp--preset--font-family--noto-serif: var(--tsr-serif);
}

body {
	background-color: var(--tsr-bg);
	color: var(--tsr-fg);
	font-family: var(--tsr-sans);
	font-weight: 500;
}

body h1,
body h2,
body h3,
body main h1,
body main h2,
body main h3 {
	font-family: var(--tsr-serif);
	font-weight: 700;
	letter-spacing: 0;
}

/* Keep long Baskerville headlines readable on phones. */
@media (max-width: 600px) {
	body main h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.25; }
	body main h2 { font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.3; }
}

/* Inputs, buttons and WooCommerce forms use the body font, not the serif. */
body button,
body input,
body select,
body textarea,
body .wp-element-button {
	font-family: var(--tsr-sans);
}

/* Current menu item: old hard-coded #0146ad -> brand blue. */
header .wp-block-navigation-item.current-menu-item {
	background-color: var(--tsr-brand);
}

/* ---------- 2. Header ---------- */

/* Top bar (first header row: blue strip). The :has() scope keeps these rules
   off WooCommerce's separate checkout header. */
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:first-child {
	background-color: var(--tsr-brand) !important;
	border-bottom: 1px solid var(--tsr-ink);
}
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:first-child .wp-block-column {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.tsr-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	color: var(--tsr-brand-fg);
	font-size: 15px;
	line-height: 1.2;
}
.tsr-clock {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.tsr-clock-time {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 14px;
}
.tsr-clock-zone {
	font-size: 12px;
	font-weight: 600;
	margin-left: 4px;
}
.tsr-clock-colon {
	animation: tsr-blink 1s steps(1, end) infinite;
}
@keyframes tsr-blink {
	50% { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
	.tsr-clock-colon { animation: none; }
}
.tsr-account {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
header .tsr-account a {
	color: var(--tsr-brand-fg) !important;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
header .tsr-account a.tsr-signin:hover,
header .tsr-account a.tsr-signin:focus {
	text-decoration: underline;
}
header .tsr-account a.tsr-join {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	background: #ffffff;
	color: var(--tsr-brand) !important;
	border: 1px solid var(--tsr-ink);
	font-weight: 700;
}
header .tsr-account a.tsr-join:hover,
header .tsr-account a.tsr-join:focus {
	background: var(--tsr-paper);
	text-decoration: underline;
}

/* Logo row + nav row: white (the logo image has a white background), thin
   black rules. */
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2),
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .has-white-background-color,
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .has-title-text-background-color,
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(3),
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(3) .has-white-background-color,
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(3) .has-title-text-background-color {
	background-color: #ffffff !important;
}
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(3) {
	border-top: 1px solid var(--tsr-ink) !important;
	border-bottom: 1px solid var(--tsr-ink) !important;
}
/* Shorter logo row (was ~180px tall on phones). */
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-column {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-columns {
	align-items: center !important;
	margin-bottom: 0;
}
header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-buttons .wp-block-button__link {
	color: var(--tsr-brand) !important;
	background: #ffffff !important;
	border: 1px solid var(--tsr-ink) !important;
	font-weight: 700;
}

/* Logo: thin black border hugging the image (owner request, Oct 8).
   Drawn as an outline on the image's own edge, so it adds no size and
   nothing else in the header moves. */
header .wp-block-site-logo img,
header .wp-block-site-logo img.custom-logo {
	outline: 1px solid #000;
	outline-offset: -1px;
	border-radius: 0;
}

/* Nav: "Menu" label next to the three-line icon on narrow screens. */
header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--tsr-ink);
	background: #ffffff;
	color: var(--tsr-ink);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

@media (max-width: 781px) {
	/* Top bar on phones: short clock, links on the right, one line. */
	.tsr-clock-date,
	.tsr-clock-zone-long { display: none; }
	.tsr-topbar-inner { font-size: 14px; gap: 8px; }
	.tsr-account { gap: 10px; }
	header .tsr-account a.tsr-join { padding: 0 10px; min-height: 34px; }

	/* Logo + "Get a free list" side by side instead of stacked. */
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-columns {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 12px;
	}
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-column {
		flex-basis: auto !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-column:first-child {
		flex: 1 1 auto !important;
		min-width: 0;
	}
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-column:last-child {
		flex: 0 0 auto !important;
	}
	header .wp-block-site-logo img {
		width: 100% !important;
		max-width: 200px;
		height: auto;
	}
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(2) .wp-block-buttons .wp-block-button__link {
		padding: 9px 10px !important;
		font-size: 14px;
		white-space: nowrap;
	}
	/* Nav row: just the "Menu" button, right-aligned, compact. */
	header.wp-block-template-part:has(.tsr-topbar-inner) > .wp-block-group:nth-child(3) .wp-block-navigation {
		justify-content: flex-end;
		padding: 4px 0;
	}
	header .wp-block-navigation__responsive-container-open {
		padding: 6px 10px;
	}
}
@media (max-width: 359px) {
	.tsr-clock-zone { display: none; }
}

/* ---------- 3. List tables (State Table plugin, #cs-table-container) ----------
   The plugin draws a 6-column table (5 on state pages). We:
   - hide the "Aditional Info" header and show that note small under the county
     (it is what tells "(excess-proceeds)" apart from "(upset-sale)" rows),
   - lay rows out as a grid so the table never pushes the page sideways,
   - turn the icon-only buttons into "Add to cart $X.XX" / "Download".
   Columns, in plugin order:
     with State:    1 County, 2 State, 3 Month, 4 Year, 5 Additional, 6 Download
     without State: 1 County, 2 Month, 3 Year, 4 Additional, 5 Download     */

.tsr-table,
.tsr-table > div {
	max-width: 100%;
	background: transparent !important;
}
.tsr-table #state-table {
	display: block;
	width: 100%;
	border: 1px solid var(--tsr-ink) !important;
	background: #ffffff;
	font-size: 16px;
}
.tsr-table #state-table thead,
.tsr-table #state-table tbody,
.tsr-table #state-table tfoot {
	display: block;
	width: 100%;
	border: 0 !important;
}
.tsr-table #state-table thead {
	background: var(--tsr-brand) !important;
	color: #ffffff !important;
}
.tsr-table #state-table tr {
	display: grid;
	align-items: center;
	column-gap: 12px;
	padding: 8px 12px;
	border: 0 !important;
	border-bottom: 1px solid var(--tsr-ink) !important;
	background: #ffffff;
}
.tsr-table #state-table thead tr {
	background: var(--tsr-brand);
	border-bottom: 1px solid var(--tsr-ink) !important;
}
.tsr-table #state-table tbody tr:nth-child(even) {
	background: var(--tsr-paper);
}
.tsr-table #state-table th,
.tsr-table #state-table td {
	border: 0 !important;
	padding: 2px 0 !important;
	text-align: left;
	min-width: 0;
	overflow-wrap: anywhere;
}
.tsr-table #state-table th {
	font-weight: 700;
	color: #ffffff;
}
.tsr-table #state-table tbody td:first-child {
	font-weight: 700;
	color: var(--tsr-ink);
}

/* Grid areas: desktop / tablet */
.tsr-has-state #state-table thead tr,
.tsr-has-state #state-table tbody tr {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(170px, auto);
	grid-template-areas:
		"county state month year dl"
		"note   state month year dl";
}
.tsr-no-state #state-table thead tr,
.tsr-no-state #state-table tbody tr {
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(170px, auto);
	grid-template-areas:
		"county month year dl"
		"note   month year dl";
}
.tsr-table #state-table tr > :nth-child(1) { grid-area: county; }
.tsr-has-state #state-table tr > :nth-child(2) { grid-area: state; }
.tsr-has-state #state-table tr > :nth-child(3) { grid-area: month; }
.tsr-has-state #state-table tr > :nth-child(4) { grid-area: year; }
.tsr-has-state #state-table tr > :nth-child(5) { grid-area: note; }
.tsr-has-state #state-table tr > :nth-child(6) { grid-area: dl; }
.tsr-no-state #state-table tr > :nth-child(2) { grid-area: month; }
.tsr-no-state #state-table tr > :nth-child(3) { grid-area: year; }
.tsr-no-state #state-table tr > :nth-child(4) { grid-area: note; }
.tsr-no-state #state-table tr > :nth-child(5) { grid-area: dl; }

/* "Aditional Info" header: gone. The note itself sits under the county name. */
.tsr-has-state #state-table thead th:nth-child(5),
.tsr-no-state #state-table thead th:nth-child(4) {
	display: none;
}
.tsr-has-state #state-table tbody td:nth-child(5),
.tsr-no-state #state-table tbody td:nth-child(4) {
	font-size: 14px;
	font-weight: 500;
	color: var(--tsr-muted);
	padding-top: 0 !important;
}
.tsr-has-state #state-table tbody td:nth-child(5):empty,
.tsr-no-state #state-table tbody td:nth-child(4):empty {
	display: none;
}
/* Rows without a note: centre the county name vertically. */
.tsr-has-state #state-table tbody tr:has(> td:nth-child(5):empty) > td:nth-child(1),
.tsr-no-state #state-table tbody tr:has(> td:nth-child(4):empty) > td:nth-child(1) {
	grid-row: 1 / 3;
}
.tsr-table #state-table tr > :last-child {
	text-align: right;
	justify-self: end;
}

/* Rows that are one wide cell (loading spinner, download message). */
.tsr-table #state-table tbody td[colspan] {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	grid-area: auto / 1 / auto / -1 !important;
	text-align: center;
	justify-self: stretch;
}

/* Footer: "Showing 1 to 13 of 13 Entries" + pagination. */
.tsr-table #state-table tfoot tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 16px;
	border-bottom: 0 !important;
	background: var(--tsr-paper);
}
.tsr-table #state-table tfoot td {
	text-align: left;
	justify-self: auto;
}
.tsr-table .pagination-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.tsr-table .paginate_button.current_button {
	background-color: var(--tsr-brand) !important;
	border: 1px solid var(--tsr-ink);
	padding: 2px 8px;
}

/* Buy / download buttons: blue, white text, black edge, labelled. */
.tsr-table button.my-custom-add-to-cart-button,
.tsr-table button.dwntxnfile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	background: var(--tsr-brand);
	color: #ffffff;
	border: 1px solid var(--tsr-ink);
	border-radius: 0;
	font-family: var(--tsr-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.tsr-table button.my-custom-add-to-cart-button:hover,
.tsr-table button.my-custom-add-to-cart-button:focus,
.tsr-table button.dwntxnfile:hover,
.tsr-table button.dwntxnfile:focus {
	background: var(--tsr-brand-dark);
}
.tsr-table button.my-custom-add-to-cart-button .dashicons,
.tsr-table button.dwntxnfile .dashicons {
	color: #ffffff;
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.tsr-table button.my-custom-add-to-cart-button::after {
	content: var(--tsr-cart-label, "Add to cart");
}
.tsr-table button.dwntxnfile::after {
	content: "Download";
}
.tsr-table button.loading {
	opacity: .7;
}

/* Phones: compact cards. County (+ note) on top, State / Month / Year under
   it, button on the right. No sideways scrolling. */
@media (max-width: 699px) {
	.tsr-table #state-table { font-size: 15px; }
	.tsr-table #state-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.tsr-table #state-table tr { padding: 10px; column-gap: 8px; }
	.tsr-has-state #state-table tbody tr {
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"county county county dl"
			"note   note   note   dl"
			"state  month  year   dl";
	}
	.tsr-no-state #state-table tbody tr {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"county county dl"
			"note   note   dl"
			"month  year   dl";
	}
	.tsr-table #state-table tbody td { color: var(--tsr-muted); }
	.tsr-table button.my-custom-add-to-cart-button,
	.tsr-table button.dwntxnfile {
		min-height: 44px;
		padding: 0 10px;
		font-size: 14px;
	}
}

/* ---------- 4. This week's files (Oct 2026) ----------
   "New" badge on database rows that are one of this week's files, and the
   "New this week" box above a state's database table. */
.tsr-badge,
.tsr-table #state-table tbody tr[data-tsr-new] td:first-child::before {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 6px;
	background: var(--tsr-ink, #161616);
	color: #ffffff;
	font-family: var(--tsr-sans);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.tsr-table #state-table tbody tr[data-tsr-new] td:first-child::before {
	content: "New";
}
.tsr-newweek {
	margin: 28px 0 24px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid var(--tsr-ink, #161616);
}
.tsr-newweek[hidden] {
	display: none;
}
.tsr-newweek .tsr-nw-title {
	margin: 0 0 4px;
	font-size: 22px;
}
.tsr-newweek .tsr-nw-intro {
	margin: 0 0 12px;
	font-size: 15px;
}
.tsr-newweek .tsr-nw-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tsr-newweek .tsr-nw-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 8px 0;
	border-top: 1px solid var(--tsr-ink, #161616);
}
.tsr-newweek .tsr-nw-file {
	flex: 1 1 160px;
	min-width: 0;
}
.tsr-newweek .tsr-nw-note {
	color: var(--tsr-muted);
	font-size: 14px;
}
.tsr-newweek .tsr-nw-btn {
	min-height: 40px;
	padding: 0 12px;
	background: var(--tsr-brand);
	color: #ffffff;
	border: 1px solid var(--tsr-ink, #161616);
	border-radius: 0;
	font-family: var(--tsr-sans);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.tsr-newweek .tsr-nw-btn:hover,
.tsr-newweek .tsr-nw-btn:focus {
	background: var(--tsr-brand-dark);
}
.tsr-newweek .tsr-nw-btn[disabled] {
	opacity: .7;
	cursor: default;
}
.tsr-newweek .tsr-nw-msg:empty {
	display: none;
}
.tsr-newweek .tsr-nw-msg {
	margin: 10px 0 0;
	font-size: 15px;
}
@media (max-width: 699px) {
	.tsr-newweek { padding: 12px; }
	.tsr-newweek .tsr-nw-btn { min-height: 44px; font-size: 14px; }
}