/* =========================================================================
 * Fetch Fancy — Document (legal pages)
 * Sticky TOC + readable content column. Loads on T&C, Privacy, etc.
 * ========================================================================= */

.ff[data-ff-page="doc"] { background: var(--ff-cream); }

/* ---------- Hero band ---------- */
.ff-doc-hero {
	background:
		radial-gradient(circle at 80% 20%, rgba(34,211,238,.20) 0%, transparent 50%),
		radial-gradient(circle at 10% 80%, rgba(182,228,69,.18) 0%, transparent 50%),
		linear-gradient(135deg, var(--ff-ink) 0%, var(--ff-ink-2) 100%);
	color: #fff;
	padding: clamp(7rem, 14vh, 10rem) 0 clamp(3rem, 6vh, 5rem);
}
.ff-doc-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.2rem);
	letter-spacing: -0.01em;
	margin: 0 0 .5rem;
	text-transform: capitalize;
}
.ff-doc-hero .ff-eyebrow { color: var(--ff-lime); }
.ff-doc-meta { color: rgba(255,255,255,.65); font-size: .9rem; margin: 0; }

/* ---------- Layout ---------- */
.ff-doc-body { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.ff-doc-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* ---------- Sticky TOC ---------- */
.ff-doc-toc {
	position: sticky;
	top: 100px; /* clear theme header */
	max-height: calc(100vh - 130px);
	overflow: auto;
	padding-right: 1rem;
}
.ff-doc-toc .ff-eyebrow { color: var(--ff-brand-deep); margin-bottom: 1rem; }
.ff-doc-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ff-toc;
	border-left: 2px solid var(--ff-line);
}
.ff-doc-toc__list li { counter-increment: ff-toc; }
.ff-doc-toc__list a {
	display: block;
	padding: .55rem 1rem;
	color: var(--ff-ink-soft);
	font-size: .9rem;
	text-decoration: none;
	border-left: 2px solid transparent;
	margin-left: -2px;
	transition: color .2s, border-color .2s, background .2s;
	line-height: 1.35;
}
.ff-doc-toc__list a:hover {
	color: var(--ff-ink);
	border-left-color: var(--ff-brand);
	background: rgba(34,211,238,.06);
}

/* ---------- Content column ---------- */
.ff-doc-content {
	background: #fff;
	border-radius: var(--ff-radius-lg);
	box-shadow: var(--ff-shadow-sm);
	border: 1px solid var(--ff-line);
	padding: clamp(2rem, 4vw, 3.5rem);
	max-width: 800px;
	line-height: 1.75;
	color: var(--ff-ink);
}
.ff-doc-content h2 {
	font-family: var(--ff-font-display);
	color: var(--ff-ink);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	letter-spacing: -0.01em;
	margin: 2.6rem 0 .8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ff-line);
	scroll-margin-top: 110px; /* anchor jumps clear the theme header */
}
.ff-doc-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ff-doc-content h3 {
	font-family: var(--ff-font-display);
	font-size: 1.1rem;
	margin: 1.6rem 0 .4rem;
	color: var(--ff-ink);
}
.ff-doc-content p, .ff-doc-content li {
	font-size: 1rem;
	color: var(--ff-ink-soft);
}
.ff-doc-content p { margin: 0 0 1rem; }
.ff-doc-content ul, .ff-doc-content ol { margin: .5rem 0 1.2rem 1.4rem; padding: 0; }
.ff-doc-content ul li, .ff-doc-content ol li { margin-bottom: .35rem; }
.ff-doc-content ul li::marker { color: var(--ff-brand-deep); }
.ff-doc-content strong { color: var(--ff-ink); font-weight: 700; }
.ff-doc-content a { color: var(--ff-brand-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.ff-doc-content a:hover { color: var(--ff-ink); }
.ff-doc-content .lede {
	font-size: 1.1rem;
	color: var(--ff-ink);
	background: var(--ff-cream-deep);
	border-left: 3px solid var(--ff-brand);
	padding: 1rem 1.2rem;
	border-radius: 0 var(--ff-radius) var(--ff-radius) 0;
	margin: 0 0 1.6rem;
}
.ff-doc-content .callout {
	background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(249,115,22,.08));
	border-left: 3px solid var(--ff-gold);
	padding: 1rem 1.2rem;
	border-radius: 0 var(--ff-radius) var(--ff-radius) 0;
	margin: 1.2rem 0;
}

.ff-doc-footer {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--ff-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.ff-doc-footer p { margin: 0; color: var(--ff-ink-soft); font-size: .95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.ff-doc-grid { grid-template-columns: 1fr; }
	.ff-doc-toc {
		position: static;
		max-height: none;
		padding-right: 0;
		padding: 1.2rem 1.4rem;
		background: #fff;
		border-radius: var(--ff-radius);
		border: 1px solid var(--ff-line);
	}
	.ff-doc-toc__list { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ff-doc-toc__list { grid-template-columns: 1fr; }
}