/* Responsive tables in post content (SUP-13822). See functions/responsive-tables.php
   and assets/js/responsive-tables.js. */

/* Wide enough columns: a normal table that fits the column. Words are never
   broken or hyphenated; if the words can't all fit, the script stacks the
   table into cards instead. */
.entry-inner-content table.hqn-rt {
	width: 100%;
	max-width: 100%;
}
.entry-inner-content table.hqn-rt td,
.entry-inner-content table.hqn-rt th {
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: manual;
	hyphens: manual;
}
.entry-inner-content table.hqn-rt td,
.entry-inner-content table.hqn-rt th {
	padding: 8px 6px;
	font-size: 0.92em;
}

/* Too narrow for this table (phones, tablets, zoomed browsers, Reader-sized
   columns): each row becomes a card, with the column headings as labels.
   The script measures each table against its own column, so it works for any
   number of columns, any zoom and any device. */
.entry-inner-content table.hqn-rt.hqn-rt-stack,
.entry-inner-content table.hqn-rt.hqn-rt-stack tbody,
.entry-inner-content table.hqn-rt.hqn-rt-stack tr,
.entry-inner-content table.hqn-rt.hqn-rt-stack td,
.entry-inner-content table.hqn-rt.hqn-rt-stack th {
	display: block;
	width: auto !important;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack thead,
.entry-inner-content table.hqn-rt.hqn-rt-stack tr.hqn-rt-head {
	display: none;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack tr {
	border: 1px solid #d9dee8;
	border-radius: 6px;
	margin: 0 0 14px;
	padding: 4px 12px;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack td,
.entry-inner-content table.hqn-rt.hqn-rt-stack th {
	border: 0;
	border-bottom: 1px solid #edf0f5;
	padding: 8px 0;
	font-size: 1em;
	overflow-wrap: anywhere;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack tr > :last-child {
	border-bottom: 0;
}
/* The row's first cell is its title. */
.entry-inner-content table.hqn-rt.hqn-rt-stack tr > :first-child {
	font-weight: 700;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack tr > :first-child:empty {
	display: none;
}
.entry-inner-content table.hqn-rt.hqn-rt-stack td[data-label]:not(:first-child)::before,
.entry-inner-content table.hqn-rt.hqn-rt-stack th[data-label]:not(:first-child)::before {
	content: attr(data-label);
	display: block;
	font-weight: 700;
	font-size: 0.85em;
	color: #004b8b;
	margin-bottom: 2px;
}


/* Before the script has measured (or without JavaScript): phones get cards. */
@media (max-width: 640px) {
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured),
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured) tbody,
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured) tr,
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured) td,
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured) th { display: block; width: auto !important; }
	.entry-inner-content table.hqn-rt:not(.hqn-rt-measured) tr.hqn-rt-head { display: none; }
}
