/* ============================================================
   tos.css — supplemental styles for Terms_of_Service.html
   All selectors are scoped to .page--tos to avoid any
   collision with styles.css. Merge into styles.css when ready.
   ============================================================ */


/* --- Page spacing ----------------------------------------- */

.page--tos main {
	padding-top: 1.5em;
	padding-bottom: 5em;
}


/* --- Header / nav alignment -------------------------------
   The shared header (styles.css) uses justify-content:space-between,
   which relies on the home page's <h1> logo as a second flex child to
   push the nav button to the RIGHT. This page has no header logo, so
   the lone <nav> falls to the LEFT while the pop-out menu stays pinned
   to the right (header nav ul { right:4em }) — leaving the computer
   button and its menu on opposite sides of the header.

   margin-left:auto absorbs the free space to the left of the nav and
   bumps it to the right edge, restoring the same geometry the home page
   gets from its logo. The menu's right:4em then lines up under the
   button, so it pops out of the computer as intended.

   margin-left:auto is needed at ALL widths (mobile included), since the
   lone nav would otherwise sit at the left under justify-content:space-between.

   The right-edge breathing room (margin-right) is DESKTOP ONLY — see the
   48em block below. On mobile the home page's nav has no right margin (its
   button uses margin-right:-0.25em from styles.css), so applying margin-right
   here too would push this page's icon ~1.25em further left than the home
   page. Keeping it desktop-only makes the two pages match on mobile. */
.page--tos header nav {
	margin-left: auto;
}

/* Desktop: match the home page's right-edge gap (header nav margin-right
   in styles.css is also 1.25em). Raise for more breathing room from the
   right edge, lower for less. */
@media (min-width:48em) {
	.page--tos header nav {
		margin-right: 1.25em;
	}
}


/* --- Desktop header clearance -----------------------------
   On desktop the header has height:0 (styles.css) and floats OVER the
   top of <main>, so the content slides up underneath the top-right icon.
   At narrow desktop widths the centered title crowds the icon; even with
   room it sits too close for comfort.

   Instead of only nudging the title down in the narrow band right before
   a collision, we reserve a consistent block of headroom across the whole
   desktop range. The title always clears the icon with comfortable space,
   and there's no resize "jump" since the value never changes from one
   desktop width to the next. (Below 48em the layout is mobile: the header
   takes real height and pushes content down on its own, so this doesn't
   apply there.)

   This is the single knob for the gap: the icon's bottom sits ~4em from
   the top, so 4.5em leaves ~2em of breathing room. Raise for more space,
   lower for less. */
@media (min-width:48em) {
	.page--tos main {
		padding-top: 4.5em;   /* overrides the 1.5em default above */
	}
}


/* --- Title block ------------------------------------------ */

.tos-title {
	text-align: center;
	padding: 1.5em 1em 1em;
}

/* h1 in styles.css is Alfarn2 at 1.25em — fine for the header
   logo but too small as a page title. Override just for this page. */
.page--tos .tos-title h1 {
	font-size: 2.3em;
	max-width: none;
	margin-bottom: 0.2em;
}

.tos-last-updated {
	font-size: 0.85em;
	color: #173353;   /* matches the section headings (AA-compliant) */
	margin: 0 0 0.5em;
}


/* --- Table of contents ------------------------------------ */

.tos-toc {
	padding: 0 1em 0.5em;
	margin-bottom: 1em;
}

.tos-toc h2 {
	/* h2 in styles.css is Alfarn2 at 2em — too heavy as a small label.
	   Scale it down just within the TOC. */
	font-size: 0.95em;
	letter-spacing: 0.1em;
	margin-bottom: 0.75em;
	color: #173353;   /* matches the section headings (AA-compliant) */
}

.tos-toc ol {
	margin: 0;
	padding-left: 1.5em;
	columns: 2;
	column-gap: 2.5em;
}

.tos-toc li {
	margin-bottom: 0.4em;
	break-inside: avoid;
}

.tos-toc a {
	color: var(--color-ink);
	text-decoration: none;
	font-size: 0.875em;
	line-height: 1.4;
}

.tos-toc a:hover {
	color: #A7472F;
	text-decoration: underline;
}

@media (max-width: 36em) {
	.tos-toc ol {
		columns: 1;
	}
}


@media (max-width: 30em) {
    .pp-table { font-size: 0.82em; }
    .pp-table th, .pp-table td { padding: 0.4em 0.5em; overflow-wrap: anywhere; }
}



/* --- Section headings ------------------------------------- */

/* h2 at 2em Alfarn2 is correct for hero sections but too large
   for 28 sequential legal headings. We scale it down and add
   a rule above each to act as a divider. */
.tos-section-heading {
	font-family: Alfarn2, sans-serif;
	font-size: 1.2em;
	font-weight: 900;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-top: 0.1em solid var(--color-ink);
	padding-top: 1.25em;
	margin: 2em 0 0.6em;
	color: #173353;
}

/* h3 sub-headings (e.g. Billing and Renewal, Binding Arbitration) */
.tos-sub-heading {
	font-family: K2D, sans-serif;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 1.5em 0 0.4em;
}


/* --- Body text -------------------------------------------- */

.tos-body {
	padding: 0 1em 0.5em;
}

@media (min-width: 48em) {
	.tos-body {
		padding: 0 2em 0.5em;
	}
}

.tos-body p {
	line-height: 1.75;
	margin: 0 0 1em;
}

.tos-body a {
	color: #A7472F;
}

.tos-body a:hover {
	text-decoration: underline;
}

.tos-body ul {
	padding-left: 1.5em;
	margin: 0.25em 0 1em;
}

.tos-body ul li {
	margin-bottom: 0.5em;
	line-height: 1.65;
}


/* --- Contact block ---------------------------------------- */

.tos-contact-block {
	font-style: normal;
	line-height: 2;
	margin: 0.5em 0 1em;
}


/* --- Scroll anchor offset --------------------------------- */
/* Gives each section a little breathing room when jumped to,
   since the header sits above the content area. */

.tos-section {
	scroll-margin-top: 1.5em;
}