/*
 * Page styles: legal (terms, refund-policy, privacy-policy, licence).
 * Design: "Formsieve Legal.dc.html" (desktop 1440) and "13g · Legal" in
 * "Formsieve Mobile Pages.dc.html" (390). Loaded only on those four pages
 * (formsieve_current_page_css() in functions.php). Content lives in
 * website/content/pages/<slug>.html:
 *
 *   row    .fs-block.fs-block--lavender.fs-legal-hero   title block
 *            text block: p.fs-legal-hero__label, h1.fs-legal-hero__title,
 *            p.fs-legal-hero__updated (with span.fs-ph [DATE])
 *   row    .fs-grid.fs-legal                            body, 12 columns
 *     col  .fs-legal__aside (3/12, hidden on phones)    text block .fs-legal-nav:
 *            nav.fs-legal-nav__group > p.fs-legal-nav__title + ul.fs-legal-nav__list
 *            (--page: in-page links, navy; otherwise the other policies, violet)
 *     col  .fs-legal__article (7/12, offset 1)          [fs_placeholder variant="note"]
 *            + text block .fs-legal-body: h2[id], p, p.fs-ph-para, ul, ul.fs-ph-list
 */

/* ------------------------------------------------------------------ */
/* Title block: 64 / 60 padding, 14 px gaps (32 / 20, 10 px on phones). */
/* ------------------------------------------------------------------ */

body.fs-site .row .col .fs-legal-hero__label {
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

body.fs-site .row .col .fs-legal-hero__title {
	font-size: 56px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -.035em;
}

body.fs-site .row .col .fs-legal-hero__updated {
	font-size: 16px;
	line-height: normal;
}

/* ------------------------------------------------------------------ */
/* Side navigation: "On this page" + "Other policies".                  */
/* ------------------------------------------------------------------ */

body.fs-site .fs-legal-nav__group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	line-height: normal;
}

/*
 * The artboard's links are 40 px tall, 4 px apart. They are 44 px targets here
 * with no gap (title margin 8 → 6, 24 px between the two groups → 22), so every
 * link text sits exactly where the artboard puts it.
 */
body.fs-site .row .col .fs-legal-nav__title {
	margin-bottom: 6px;
	font-family: var(--fs-font-display);
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
}

body.fs-site .row .col .fs-legal-nav ul.fs-legal-nav__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fs-site .row .col .fs-legal-nav .fs-legal-nav__list li {
	margin: 0;
	padding: 0;
	line-height: normal;
	list-style: none;
}

body.fs-site .fs-legal-nav__list a {
	display: flex;
	align-items: center;
	min-height: var(--fs-target);
	color: var(--fs-violet);
}

body.fs-site .fs-legal-nav__list a:hover {
	color: var(--fs-navy);
}

body.fs-site .fs-legal-nav__list--page a {
	color: var(--fs-navy);
}

body.fs-site .fs-legal-nav__list--page a:hover {
	color: var(--fs-violet);
}

/* ------------------------------------------------------------------ */
/* Article: 17 / 1.7 body, 22 px between blocks (16 / 1.65, 16 on phones). */
/* ------------------------------------------------------------------ */

body.fs-site .fs-legal-body {
	font-size: 17px;
	line-height: 1.7;
}

body.fs-site .row .col .fs-legal-body p,
body.fs-site .row .col .fs-legal-body li {
	line-height: 1.7;
}

body.fs-site .row .col .fs-legal-body h2,
body.fs-site .fs-legal-body.fs-flow > .wpb_wrapper > h2 {
	margin-top: 12px;
	font-family: var(--fs-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0;
	scroll-margin-top: 24px;
}

/* "[SECTION TITLE]" placeholder inside a heading: mono 18, 2 × 8 padding, heading weight. */
body.fs-site .row .col .fs-legal-body h2 .fs-ph {
	padding: 2px 8px;
	font-size: 18px;
	font-weight: inherit;
}

body.fs-site .fs-legal-body a {
	color: var(--fs-violet);
	font-weight: 700;
}

body.fs-site .fs-legal-body a:hover {
	color: var(--fs-navy);
}

/*
 * Placeholder paragraph: the design sets mono 15 inside a 17 / 1.7 body
 * paragraph, so each line keeps the body's 28.9 px line height.
 */
body.fs-site .row .col .fs-legal-body p.fs-ph-para {
	font-size: 15px;
	line-height: 28.9px;
}

body.fs-site .row .col .fs-legal-body ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0 0 0 22px;
	list-style: disc;
}

body.fs-site .row .col .fs-legal-body ul li {
	margin: 0;
	padding: 0;
	list-style: disc;
}

/* Placeholder list: mono 15 items on the placeholder pink. */
body.fs-site .row .col .fs-legal-body ul.fs-ph-list {
	font-family: var(--fs-font-mono);
	font-size: 15px;
}

body.fs-site .row .col .fs-legal-body ul.fs-ph-list li {
	background: var(--fs-ph-bg);
	color: var(--fs-navy);
}

/* ------------------------------------------------------------------ */
/* Phones (≤ 690 px): "13g · Legal". The side navigation is hidden.     */
/* ------------------------------------------------------------------ */

@media (max-width: 690px) {
	body.fs-site .row .col .fs-legal-hero__label {
		font-size: 14px;
	}

	body.fs-site .row .col .fs-legal-hero__title {
		font-size: 34px;
	}

	body.fs-site .row .col .fs-legal-hero__updated {
		font-size: 15px;
	}

	body.fs-site .row .col .fs-legal-hero__updated .fs-ph {
		padding: 1px 6px;
	}

	body.fs-site .fs-legal-body {
		font-size: 16px;
		line-height: 1.65;
	}

	body.fs-site .row .col .fs-legal-body p,
	body.fs-site .row .col .fs-legal-body li {
		line-height: 1.65;
	}

	body.fs-site .row .col .fs-legal-body h2,
	body.fs-site .fs-legal-body.fs-flow > .wpb_wrapper > h2 {
		margin-top: 8px;
		font-size: 19px;
		line-height: 1.65;
	}

	body.fs-site .row .col .fs-legal-body h2 .fs-ph {
		padding: 1px 6px;
		font-size: 15px;
	}

	body.fs-site .row .col .fs-legal-body p.fs-ph-para,
	body.fs-site .row .col .fs-legal-body ul.fs-ph-list {
		font-size: 14px;
		line-height: 1.65;
	}
}