/*
 * Tables in page content: core/table, <table> in custom HTML blocks inside sections, tables in accordion panels
 * (product tabs, category texts). WooCommerce's own tables (cart, order) keep their look, and so do the plain tables
 * of pages not yet converted to blocks (the Swedish service and cottage pages: on phones they have no labelled rows).
 *
 * Minimal and airy (2026-09-25; the framed table with a tint head row "ei näytä hyvältä"): no frame and no background
 * of its own, so a table is text on its section's colour and reads the same on white, light and navy sections (on navy
 * it used to be a white card). The head row is small bold labels over a 2px rule in the heading colour (white on dark
 * sections), hairlines separate the rows and one closes the table, the cells have generous padding, and the first
 * column names the rows (heading colour, semibold; a link there is bold). The first and the last column line up with
 * the text's edges. A table without a head (the products' key/value tables) has hairlines between its rows only: in an
 * accordion the item's own line closes it.
 *
 * Phones (<=768px): a table with a head (class ab-table--cards and data-label="…" on the cells, added by
 * inc/tables.php) shows each row as a block under the same 2px rule, with hairlines between the rows: the first cell is
 * the row's title (without its label), the others have their label in front, and the cells of a column with long texts
 * or words (ab-table__wide) put the label above the value. No card background: one background per element, the
 * section's. A cell of links only (class ab-table__links, also from inc/tables.php, which drops the commas between the
 * links) shows one link per line; on touch screens (<=1024px) each link is a 44px row.
 * Column widths follow the content (table-layout auto, also for core/table's "fixed width cells" option): short
 * columns stay narrow and a column of product names or long texts gets the room. A long word breaks only when it
 * does not fit its column at all (never the core table's break anywhere).
 * (The old class "taulukko" on tables pasted from the old site needs no rules of its own.)
 */

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) {
	--ab-tbl-title: var(--ab-heading, #012b55); /* head labels, row titles and the head's 2px rule */
	--ab-tbl-line: rgba(0, 43, 86, 0.16); /* hairlines: a navy veil shows on white and on the light grey alike */
	--ab-tbl-label: var(--ab-muted, #4a5563); /* the labels of the rows on phones */
	--ab-tbl-py: 14px; /* cell padding: above and below the text */
	--ab-tbl-px: 10px; /* cell padding: half the gap between the columns */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	table-layout: auto;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

/* dark sections: white labels and rules, light hairlines */
:is(.is-dark, .has-navy-background-color, .has-heading-background-color) :is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) {
	--ab-tbl-title: currentColor;
	--ab-tbl-line: rgba(255, 255, 255, 0.24);
	--ab-tbl-label: rgba(255, 255, 255, 0.75);
}

@media (min-width: 769px) {
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) {
		--ab-tbl-py: 16px;
		--ab-tbl-px: 12px;
	}
}

@media (min-width: 1025px) {
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) {
		--ab-tbl-py: 20px;
		--ab-tbl-px: 16px;
	}
}

/* row groups and rows carry nothing (core's 3px head line, the "stripes" style's grey rows) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > :is(thead, tbody, tfoot) {
	border: 0;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) {
	border: 0;
	background: none;
}

/* cells: generous padding, a hairline below each row (also below the last one: it closes the table) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > :is(th, td) {
	padding: var(--ab-tbl-py) var(--ab-tbl-px);
	border: 0;
	border-bottom: 1px solid var(--ab-tbl-line);
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: break-word;
}

/* the outer columns on the text's edges */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > :first-child {
	padding-inline-start: 0;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > :last-child {
	padding-inline-end: 0;
}

/* a table without a head (a key/value list): lines between its rows only, its text on the table's top and bottom
   edges; in a section at most as wide as the text (the values stay near their names) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]):not(:has(> thead)) > :first-child > tr:first-child > :is(th, td) {
	padding-top: 0;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]):not(:has(> thead)) > :last-child > tr:last-child > :is(th, td) {
	padding-bottom: 0;
	border-bottom: 0;
}

.ab-flow > .wp-block-table > table:not(:has(> thead)) {
	max-width: var(--ab-text-width, 760px);
}

/* head row: small bold labels over a 2px rule */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > thead > tr:nth-child(n) > :is(th, td) {
	padding-top: 0;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ab-tbl-title);
	color: var(--ab-tbl-title);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	vertical-align: bottom;
}

/* the first column names the rows (also a row heading th anywhere in the body) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > :is(tbody, tfoot) > tr:nth-child(n) > :is(:first-child, th) {
	color: var(--ab-tbl-title);
	font-weight: 600;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > :is(tbody, tfoot) > tr:nth-child(n) > :first-child a:where(:not(.wp-element-button)) {
	color: inherit;
	font-weight: 700;
}

/* a title with its own bold part ("<strong>Korjaushuolto</strong> (sis. 1 h työn kohteessa)"): only that part bold */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > :is(tbody, tfoot) > tr:nth-child(n) > :first-child:has(strong, b) {
	font-weight: 400;
}

/* bold text in a cell is bold, not "bolder" than a semibold title (900) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) :is(strong, b) {
	font-weight: 700;
}

/* a first column of short labels stays on one line (the class comes from inc/tables.php) */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--nowrap-first > * > tr > :first-child {
	white-space: nowrap;
}

/* product tabs (not from blocks): their key/value tables, when there is room */
@media (min-width: 600px) {
	.ab-accordion__body table:not(:has(thead)) > tbody > tr > td:first-child {
		white-space: nowrap;
	}
}

/* lists, links and captions in cells */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) :is(ul, ol) {
	margin: 0;
	padding-inline-start: 1.1em;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* a cell of links only: one link per line (the separators between them are gone), a list without bullets */
:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links :is(ul, ol) {
	padding: 0;
	list-style: none;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links br {
	display: none;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links a:where(:not(.wp-element-button)) {
	display: block;
	width: fit-content;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links :is(a + a, li + li) {
	margin-top: 8px;
}

:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > caption,
.wp-block-table > figcaption {
	padding: 0 0 12px;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	caption-side: top;
}

.wp-block-table > figcaption {
	margin: 12px 0 0;
	padding: 0;
	font-weight: 400;
	opacity: 0.8;
}

/* ------------------------------------------------------------ touch screens: links as 44px rows */

/* In a cell of links only each link is a 44px row that fills the cell's width. The link's padding centres one line in
   the 44px ((44px - one 1.4 line) / 2), so a wrapped name keeps its normal line spacing; the cell's own padding is
   smaller by as much, so the first link's text lines up with the other cells' text. Not a flex box: a name with
   <strong> or <span> in it stays one run of text. Links in a sentence stay inline text links. */
@media (max-width: 1024px) {
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links {
		padding-block: max(0px, calc(var(--ab-tbl-py) - (var(--ab-tap, 44px) - 1.5em) / 2));
		line-height: 1.4;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links a:where(:not(.wp-element-button)) {
		box-sizing: border-box;
		width: auto;
		min-height: var(--ab-tap, 44px);
		padding-block: calc((var(--ab-tap, 44px) - 1.4em) / 2);
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table:not(.shop_table, .woocommerce-table, [class*="wc-block"]) > * > tr:nth-child(n) > .ab-table__links :is(a + a, li + li) {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------ phones: rows as labelled blocks */

@media (max-width: 768px) {
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards {
		--ab-tbl-lw: 104px; /* the labels' column */
		display: block;
		border: 0;
		border-top: 2px solid var(--ab-tbl-title);
		background: none;
	}

	/* the column headings are read from the cells' labels; the head row stays for screen readers only */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > thead {
		position: absolute;
		inset: auto;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) {
		display: block;
		width: auto;
	}

	/* a row: its title and its labelled values, a hairline below */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) {
		display: block;
		box-sizing: border-box;
		width: auto;
		margin: 0;
		padding: 18px 0 16px;
		border: 0;
		border-bottom: 1px solid var(--ab-tbl-line);
		background: none;
	}

	/* a row that ends with links: their 44px rows already give the space below the last one */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n):has(> .ab-table__links:last-child) {
		padding-bottom: 6px;
	}

	/* label in the left gutter of the cell, the value to the right of it; 6px above and below, as the cells with the
	   label above (a label of two lines stays apart from the next one) */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > :is(td, th) {
		display: flow-root;
		box-sizing: border-box;
		width: auto;
		padding: 6px 0 6px calc(var(--ab-tbl-lw) + 12px);
		border: 0;
		background: none;
		white-space: normal;
		text-align: left;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > [data-label]::before {
		content: attr(data-label);
		content: attr(data-label) / "";
		display: block;
		float: left;
		box-sizing: border-box;
		width: var(--ab-tbl-lw);
		margin: 0 0 0 calc(-1 * var(--ab-tbl-lw) - 12px);
		padding-top: 3px;
		color: var(--ab-tbl-label);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.01em;
		hyphens: auto;
	}

	/* the first cell is the row's title: the whole width, without its label (the title names the row; the label
	   repeated "Käsittelymenetelmä" / "Lähtötilanne" above every row). A link there keeps its 44px row, pulled up by
	   its extra height so its text starts where a plain title's does. */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > :first-child {
		padding: 0 0 8px;
		color: var(--ab-tbl-title);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.4;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > .ab-table__links:first-child {
		margin-top: calc((1.4em - var(--ab-tap, 44px)) / 2);
		padding: 0;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > [data-label]:first-child::before {
		content: none;
		display: none;
	}

	/* a list in a row's cell: one item per line, no bullets */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards :is(ul, ol) {
		padding: 0;
		list-style: none;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards li + li {
		margin-top: 6px;
	}

	/* a column with long texts or long words (ab-table__wide) and a cell of links only: the label goes above the
	   value, so the value gets the whole width (the links' own 44px rows give the space below them) */
	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > .ab-table__wide:not(:first-child) {
		padding: 6px 0;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > .ab-table__links:not(:first-child) {
		padding: 6px 0 0;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > :is(.ab-table__wide, .ab-table__links)[data-label]::before {
		float: none;
		width: auto;
		margin: 0 0 2px;
		padding-top: 0;
	}

	:is(.ab-flow, .wp-block-table, .wp-block-details, .ab-accordion__body, .an-term-extra__content) table.ab-table--cards > :is(tbody, tfoot) > tr:nth-child(n) > .ab-table__links[data-label]::before {
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------------ pages not yet converted to blocks */

/* A plain table right in the post content (the Swedish service and cottage pages, until the converter turns them into
   blocks) has no labelled rows: on a phone a table wider than the screen scrolls sideways inside its own box instead
   of widening the whole page (the cottage page's three columns of product names needed 415px at 390px). */
@media (max-width: 768px) {
	.wp-block-post-content > :is(table, section > table) {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}