/* Shared look for the legal and contact pages: brand gradient title bar,
   light content card, gold/purple accents (see header-footer.css for fonts). */

.page-title
{
	background-image:linear-gradient(315deg, #ffbb3d, #8a2ebd);
	color:#fafbfc;
	font-family:orbitron;
	font-weight:bold;
	font-size:1.5rem;
	letter-spacing:3px;
	text-align:center;
	text-transform:uppercase;
	padding:3rem 1.5rem;
	border-radius:25px;
	width:80%;
	margin:4rem auto 0;
	box-sizing:border-box;
}

.page-title .meta
{
	display:block;
	font-family:prompt;
	font-size:0.95rem;
	font-weight:normal;
	letter-spacing:1px;
	text-transform:none;
	color:#FFF647;
	margin-top:0.75rem;
}

.legal
{
	background-color:#fafbfc;
	color:#1f1f2e;
	width:80%;
	max-width:60rem;
	margin:2rem auto 0;
	padding:2.5rem 4rem 3rem;
	box-sizing:border-box;
	border:2px solid lightgray;
	border-radius:0 25px 0 25px;
	font-size:1.05rem;
	line-height:1.75;
}

.legal h2
{
	font-family:orbitron;
	font-size:1.3rem;
	letter-spacing:1px;
	color:#8a2ebd;
	margin-top:2.75rem;
	padding-bottom:0.4rem;
	border-bottom:3px solid #FFF647;
	scroll-margin-top:6rem;
}

.legal h3
{
	font-family:prompt;
	font-size:1.1rem;
	color:#F17B16;
	margin-top:1.75rem;
	scroll-margin-top:6rem;
}

.legal a
{
	color:#8a2ebd;
	text-decoration:underline;
	transition:0.3s ease;
}

.legal a:hover
{
	color:#F17B16;
}

.legal code
{
	background-color:#efe3fb;
	color:#5b1d80;
	padding:0.1em 0.4em;
	border-radius:4px;
	font-size:0.9em;
	word-break:break-word;
}

.legal table
{
	border-collapse:collapse;
	width:100%;
	margin:1rem 0;
	font-size:0.95rem;
}

.legal th, .legal td
{
	border:1px solid #d9cce6;
	padding:0.55rem 0.7rem;
	text-align:left;
	vertical-align:top;
}

.legal th
{
	background-color:#BD45FF;
	color:#fafbfc;
	font-family:prompt;
}

.legal tr:nth-child(even) td
{
	background-color:#f6effc;
}

/* Wraps wide tables so they scroll sideways on phones instead of the page. */
.table-wrap
{
	overflow-x:auto;
}

/* Highlighted callout (summary boxes, how-to steps). */
.box
{
	background-color:#fff9d6;
	border-left:6px solid #F17B16;
	border-radius:0 15px 15px 0;
	padding:1rem 1.5rem;
	margin:1.5rem 0;
}

/* Row of jump links to each app's section. */
.app-chips
{
	display:flex;
	flex-wrap:wrap;
	gap:0.6rem;
	padding:0;
	margin:1rem 0 0;
	list-style:none;
}

.app-chips a
{
	display:inline-block;
	background-color:#BD45FF;
	color:#fafbfc;
	text-decoration:none;
	font-family:prompt;
	font-weight:bold;
	font-size:0.9rem;
	padding:0.35rem 1rem;
	border-radius:25px;
}

.app-chips a:hover
{
	background-color:#F17B16;
	color:#fafbfc;
}

.legal-links
{
	margin-top:3rem;
	padding-top:1rem;
	border-top:2px solid #e5dcef;
	font-size:0.95rem;
}

/* Contact page call-to-action button. */
.cta
{
	display:inline-block;
	background-color:#F17B16;
	color:#fafbfc !important;
	text-decoration:none !important;
	font-family:orbitron;
	font-weight:bold;
	letter-spacing:1px;
	padding:1rem 2.5rem;
	border:2px solid #fafbfc;
	border-radius:25px;
	box-shadow:0 0 0 3px #BD45FF;
}

.cta:hover
{
	background-color:#BD45FF;
}

@media screen and (max-width: 1024px) {

	.page-title
	{
		width:90%;
		font-size:1.2rem;
		padding:2rem 1rem;
	}

	.legal
	{
		width:90%;
		padding:1.5rem 1.25rem 2rem;
		font-size:1rem;
		border-radius:0;
	}

	.legal h2
	{
		font-size:1.1rem;
	}

}