/* Public compliance pages. Keeps the look of the original htdocs/css/compliance.css
   and adds a phone layout (about half of visitors are on phones). */

:root {
	--brand: #C40D3C;
	--text: #111;
	--muted: #555;
	--row-alt: #f3f3f3;
	--rule: #ddd;
	--highlight: #fff3b0;
}

html * {
	font-family: 'Barlow', sans-serif;
}

body {
	margin: 0;
	color: var(--text);
	background: #fff;
}

.disclaimer {
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 1.5em;
}

/* The jurisdiction's mark (e.g. the FCC seal) as a faint watermark. marks.css sets the image.
   position: fixed replaces background-attachment: fixed, which phones ignore. */
.disclaimer::before {
	content: "";
	position: fixed;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.1;
	pointer-events: none;
	z-index: -1;
}

#content {
	box-sizing: border-box;
	width: 100%;
	max-width: 72em;
	margin: 2em 6em;
	border: 2px solid black;
	padding: 1em 3em 3em;
}

.legalese {
	margin-left: 5em;
	font-weight: bold;
}

.legalese ul {
	margin-left: 2em;
}

.device-class {
	text-transform: uppercase;
}

.class-spacing {
	padding-top: .5em;
}

.pardecimal {
	list-style-type: none;
	counter-reset: section;
}

.pardecimal li {
	counter-increment: section;
}

.pardecimal li::before {
	content: "(" counter(section) ") ";
}

.table-wrap {
	overflow-x: auto;
}

.styled-table {
	border-collapse: collapse;
	margin: 0 auto;
	font-size: 14pt;
	min-width: 400px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	background: #fff;
}

.styled-table thead tr {
	background-color: var(--brand);
	color: #fff;
	text-align: left;
}

.styled-table th,
.styled-table td {
	padding: 4px 10px;
}

.styled-table td.upc {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.styled-table tbody tr {
	border-bottom: 1px solid var(--rule);
	text-transform: uppercase;
}

.styled-table tbody tr:nth-of-type(even) {
	background-color: var(--row-alt);
}

.styled-table tbody tr:last-of-type {
	border-bottom: 2px solid var(--brand);
}

.styled-table tbody tr.highlight,
.styled-table tbody tr:target {
	background-color: var(--highlight);
	font-weight: bold;
	outline: 2px solid var(--brand);
}

.styled-table td.empty {
	text-transform: none;
	color: var(--muted);
	font-style: italic;
}

address {
	font-style: normal;
}

.coname {
	font-size: 22pt;
	font-weight: bold;
	color: var(--brand);
}

a {
	color: var(--brand);
}

.upc-lookup {
	margin-top: 2.5em;
	padding-top: 1em;
	border-top: 1px solid var(--rule);
	font-size: 0.7em;
}

.upc-lookup label {
	display: block;
	margin-bottom: .3em;
	color: var(--muted);
}

.upc-lookup-row {
	display: flex;
	gap: .5em;
	max-width: 22em;
}

.upc-lookup input {
	flex: 1;
	min-width: 0;
	font-size: 1em;
	padding: .3em .5em;
	border: 1px solid #999;
}

.upc-lookup button {
	font-size: 1em;
	padding: .3em 1em;
	border: 0;
	background: var(--brand);
	color: #fff;
	cursor: pointer;
}

/* Tablets */
@media (max-width: 1100px) {
	.disclaimer { font-size: 1.25em; }
	#content { margin: 1.5em 2em; padding: 1em 2em 2em; }
	.legalese { margin-left: 2em; }
}

/* Phones */
@media (max-width: 640px) {
	.disclaimer { font-size: 1em; }
	#content { margin: 0; border: 0; padding: 1em 16px 2em; }
	h1 { font-size: 1.6em; }
	.legalese { margin-left: 0; }
	.legalese ul { margin-left: 0; padding-left: 1.2em; }
	.styled-table { min-width: 0; width: 100%; font-size: 0.85em; box-shadow: none; }
	/* Some names have no spaces (data/REVIEW.md); let them wrap so the UPC column stays on screen. */
	.styled-table td:first-child { overflow-wrap: anywhere; }
	.coname { font-size: 1.4em; }
}