/*
 * fworks — feature styles (single posts only).
 * Phase 1: Table of Contents (TOC). Tokens (--fw-*) come from style.css.
 * Namespaced under .fworks-toc to avoid collisions with hero.css/post-content.css.
 */

:root {
	/* Offset so anchored headings clear the (possibly sticky) header. */
	--fw-toc-offset: 100px;
}

.fworks-toc {
	position: sticky;
	top: var(--fw-toc-offset);
	max-height: calc(100vh - var(--fw-toc-offset) - 1rem);
	overflow-y: auto;
	font-family: var(--fw-font-sans);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--fw-ink);
}

.fworks-toc__title {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fw-ink-soft);
}

/* Page-top fixed reading progress bar (independent of the TOC box).
   Shows on every single post, on PC and mobile. */
.fworks-readbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 9999; /* above the site header, below the WP admin bar (99999) */
	pointer-events: none;
}
.fworks-readbar__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--fw-vermilion);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.1s linear;
	will-change: transform;
}
/* When logged in, sit just under the WP admin bar so it never covers it. */
body.admin-bar .fworks-readbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .fworks-readbar { top: 46px; }
}

.fworks-toc__list,
.fworks-toc__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fworks-toc__sublist {
	margin-top: 0.25rem;
	margin-left: 0.7rem;
}

.fworks-toc__item {
	margin: 0.25rem 0;
}

.fworks-toc__link {
	display: block;
	padding: 0.1rem 0 0.1rem 0.65rem;
	border-left: 2px solid #e7ebf0;
	color: var(--fw-ink-soft);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.fworks-toc__link:hover,
.fworks-toc__link:focus-visible {
	color: var(--fw-vermilion-ink);
	border-color: var(--fw-vermilion);
}
.fworks-toc__item--h3 .fworks-toc__link {
	font-size: 0.825rem;
}

/* Active heading (scrollspy) */
.fworks-toc__link.is-active {
	color: var(--fw-vermilion-ink);
	border-color: var(--fw-vermilion);
	font-weight: 600;
}

/* Headings clear the sticky header when jumped to. Scoped to single content
   (features.css only loads on is_single()). */
.entry-content h2,
.entry-content h3 {
	scroll-margin-top: var(--fw-toc-offset);
}

/* Fallback when there is no sidebar: inline card at top of content. */
.fworks-toc--inline {
	position: static;
	max-height: none;
	overflow: visible;
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
	background: var(--fw-paper);
	border: 1px solid #e7ebf0;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.fworks-toc__link,
	.fworks-readbar__fill { transition: none; }
}

/* Phase 1 mobile: the sidebar drops below content on small screens. Keep the
   TOC unobtrusive by hiding the sidebar version there; the mobile FAB/panel
   below provides the TOC instead. The inline fallback still shows. */
@media (max-width: 999.98px) {
	.fworks-toc:not(.fworks-toc--inline) {
		display: none;
	}
}

/* ---------- Phase 3: mobile TOC bottom bar + slide-up panel ---------- */
/* Hidden on desktop (sidebar TOC is used there); shown only on mobile width. */
.fworks-toc-bar,
.fworks-toc-overlay,
.fworks-toc-panel {
	display: none;
}

@media (max-width: 999.98px) {
	:root { --fw-tocbar-h: 48px; }

	/* Full-width fixed bottom bar (white base, vermilion accent). */
	.fworks-toc-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: var(--fw-tocbar-h);
		z-index: 10002;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0 1rem;
		border: 0;
		/* Clearer separation from content: hairline top border + accent rule
		   + stronger upward shadow. Colors via tokens only (dark-mode ready). */
		border-top: 2px solid var(--fw-vermilion);
		background: var(--fw-paper);
		color: var(--fw-vermilion-ink);
		font-family: var(--fw-font-sans);
		font-size: 0.9rem;
		font-weight: 700;
		line-height: 1;
		box-shadow: 0 -6px 20px rgba(var(--fw-ink-rgb), 0.18);
		cursor: pointer;
	}
	.fworks-toc-bar__label { white-space: nowrap; }
	.fworks-toc-bar:focus-visible {
		outline: 3px solid var(--fw-vermilion);
		outline-offset: -3px;
	}

	/* Keep the fixed bar from covering the end of the article/footer. */
	body.fworks-has-tocbar { padding-bottom: var(--fw-tocbar-h); }

	/* If the back-to-top button is ever enabled on mobile, lift it above the
	   bottom bar so the two don't overlap (it is hidden on phones by default). */
	body.fworks-has-tocbar .ct-back-to-top {
		bottom: calc(var(--fw-tocbar-h) + 16px);
	}

	.fworks-toc-overlay {
		position: fixed;
		inset: 0;
		z-index: 10000;
		background: rgba(8, 11, 16, 0.45);
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.fworks-toc-overlay:not([hidden]) { display: block; }

	.fworks-toc-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--fw-tocbar-h); /* sit directly above the bottom bar */
		z-index: 10001;
		max-height: calc(80vh - var(--fw-tocbar-h));
		display: flex;
		flex-direction: column;
		background: var(--fw-paper);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(20, 24, 31, 0.25);
		transform: translateY(calc(100% + var(--fw-tocbar-h)));
		transition: transform 0.25s ease;
		font-family: var(--fw-font-sans);
	}
	.fworks-toc-panel[hidden] { display: none; }

	body.fworks-toc-open .fworks-toc-overlay { opacity: 1; }
	body.fworks-toc-open .fworks-toc-panel { transform: translateY(0); }
	body.fworks-toc-open { overflow: hidden; }

	.fworks-toc-panel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9rem 1.1rem;
		border-bottom: 1px solid #e7ebf0;
	}
	.fworks-toc-panel__title {
		margin: 0;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--fw-ink-soft);
	}
	.fworks-toc-panel__close {
		border: 0;
		background: transparent;
		font-size: 1.6rem;
		line-height: 1;
		color: var(--fw-ink);
		cursor: pointer;
		padding: 0 0.3rem;
	}
	.fworks-toc-panel__close:focus-visible {
		outline: 3px solid var(--fw-vermilion);
		outline-offset: 2px;
	}

	.fworks-toc-panel__body {
		overflow-y: auto;
		padding: 0.9rem 1.1rem 1.4rem;
		-webkit-overflow-scrolling: touch;
	}
	/* Reuse TOC list look inside the panel. */
	.fworks-toc-panel__body .fworks-toc__list,
	.fworks-toc-panel__body .fworks-toc__sublist {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.fworks-toc-panel__body .fworks-toc__sublist {
		margin-top: 0.25rem;
		margin-left: 0.8rem;
	}
	.fworks-toc-panel__body .fworks-toc__item { margin: 0.15rem 0; }
	.fworks-toc-panel__body .fworks-toc__link {
		display: block;
		padding: 0.55rem 0.6rem;
		color: var(--fw-ink);
		text-decoration: none;
		border-radius: 8px;
	}
	.fworks-toc-panel__body .fworks-toc__item--h3 .fworks-toc__link {
		font-size: 0.9rem;
		color: var(--fw-ink-soft);
	}
	.fworks-toc-panel__body .fworks-toc__link:hover,
	.fworks-toc-panel__body .fworks-toc__link:focus-visible {
		color: var(--fw-vermilion-ink);
		background: #f5f6f8;
	}
	/* Current item — shown in BOTH themes. Vermilion text + 3px left bar + a
	   faint vermilion surface (light tones here; the brighter dark variant lives
	   in darkmode.css and overrides this). Sidebar TOC is untouched. */
	.fworks-toc-panel__body .fworks-toc__link.is-active {
		color: var(--fw-vermilion-ink);
		font-weight: 600;
		border-left: 3px solid var(--fw-vermilion);
		padding-left: calc(0.6rem - 3px);
		background: rgba(200, 16, 46, 0.06);
	}
	.fworks-toc-panel__body .fworks-toc__item--h3 .fworks-toc__link.is-active {
		color: var(--fw-vermilion-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fworks-toc-overlay,
	.fworks-toc-panel { transition: none; }
}

/* ---------- Share button (after content, before author box) ---------- */
.fworks-share {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
	font-family: var(--fw-font-sans);
}
.fworks-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.1rem;
	border: 1.5px solid var(--fw-vermilion);
	border-radius: 999px;
	background: transparent;
	color: var(--fw-vermilion-ink);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.fworks-share__btn:hover,
.fworks-share__btn:focus-visible {
	background: var(--fw-vermilion);
	color: var(--fw-paper);
}
.fworks-share__btn:focus-visible {
	outline: 3px solid var(--fw-vermilion);
	outline-offset: 2px;
}
.fworks-share__btn.is-copied {
	background: var(--fw-vermilion);
	color: var(--fw-paper);
}
.fworks-share__feedback {
	font-size: 0.85rem;
	color: var(--fw-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.fworks-share__btn { transition: none; }
}