/* FreeToolBank homepage — v3, 2026-08-25.
   Loaded only on the front page (ftb_enqueue).

   Design rules that apply to every rule below:
   · Every value comes from a token. No literal colours, sizes or spacing.
   · NO GRADIENTS (design-system-v2 §9.5). Solid accents only.
   · Light and dark are both defined; nothing relies on a media query alone,
     because the manual toggle sets [data-ftb-theme] and a media query cannot
     be overridden by it.
   · Transitions 150–200ms, and all of them disabled under
     prefers-reduced-motion at the foot of this file. */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.ftb-hero {
	padding: var(--ftb-space-12) 0 var(--ftb-space-10);
	border-bottom: 1px solid var(--ftb-border);
	background: var(--ftb-surface-2);
}

/* Two columns from 900px. Below that the art is hidden entirely rather than
   stacked — it is decorative, and stacking it would push the search, which is
   the primary action, below the fold. */
.ftb-hero-inner {
	display: grid;
	gap: var(--ftb-space-8);
	align-items: center;
}

.ftb-hero-copy { min-width: 0; }

.ftb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ftb-space-2);
	margin: 0 0 var(--ftb-space-4);
	padding: 6px var(--ftb-space-3);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-full);
	background: var(--ftb-surface);
	font-size: var(--ftb-text-sm);
	font-weight: var(--ftb-fw-medium);
	color: var(--ftb-text-muted);
}
.ftb-eyebrow svg { width: 16px; height: 16px; color: var(--ftb-brand); }

.ftb-hero h1 {
	margin: 0 0 var(--ftb-space-4);
	font-size: var(--ftb-text-4xl);
	line-height: var(--ftb-lh-display);
	letter-spacing: -0.02em;
	color: var(--ftb-text);
}

.ftb-hero-sub {
	max-width: 46ch;
	margin: 0 0 var(--ftb-space-6);
	font-size: var(--ftb-text-lg);
	line-height: var(--ftb-lh-snug);
	color: var(--ftb-text-muted);
}
.ftb-hero-sub .ftb-mark {
	font-weight: var(--ftb-fw-semi);
	color: var(--ftb-text);
}

/* Popular links under the search. Real tools, pulled from ftb_tasks(), so
   these can never point at a page that does not exist. */
.ftb-hero-quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ftb-space-2);
	margin: var(--ftb-space-4) 0 0;
	font-size: var(--ftb-text-sm);
}
.ftb-hero-quick > span { color: var(--ftb-text-muted); }
.ftb-hero-quick a {
	padding: 4px var(--ftb-space-3);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-full);
	background: var(--ftb-surface);
	color: var(--ftb-text-muted);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.ftb-hero-quick a:hover {
	border-color: var(--ftb-primary);
	color: var(--ftb-primary);
}

.ftb-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ftb-space-3) var(--ftb-space-5);
	margin: var(--ftb-space-6) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--ftb-text-sm);
	color: var(--ftb-text-muted);
}
.ftb-trust li { display: flex; align-items: center; gap: var(--ftb-space-2); }
.ftb-trust-icon { display: inline-flex; color: var(--ftb-brand); }
.ftb-trust-icon svg { width: 16px; height: 16px; }

/* ---- hero illustration ----
   width/height come from wp_get_attachment_image(), so the box is reserved
   before the file lands and CLS stays at zero. */
.ftb-hero-art { display: none; }
.ftb-hero-img {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin-left: auto;
	/* The source is a JPEG on white. On the tinted hero and in dark mode a
	   hard white rectangle would show, so it gets the same rounded card
	   treatment as everything else rather than floating as a bare block. */
	border-radius: var(--ftb-radius-lg);
	background: #fff;
}

/* ==========================================================================
   2. SECTION CHROME
   ========================================================================== */

.ftb-section { padding: var(--ftb-space-12) 0; }
.ftb-section--alt {
	border-top: 1px solid var(--ftb-border);
	border-bottom: 1px solid var(--ftb-border);
	background: var(--ftb-surface-2);
}

.ftb-section-head { margin-bottom: var(--ftb-space-8); }
.ftb-section-head h2 {
	margin: 0;
	font-size: var(--ftb-text-2xl);
	letter-spacing: -0.01em;
	color: var(--ftb-text);
}
.ftb-section-head p {
	max-width: var(--ftb-maxw-prose);
	margin: var(--ftb-space-2) 0 0;
	color: var(--ftb-text-muted);
}

/* Heading left, "All tools" right. Wraps rather than squashing on narrow. */
.ftb-section-head--row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ftb-space-4);
}

/* a.: must outrank .ftb a, see CLAUDE.md 1.9 */
a.ftb-seeall {
	display: inline-flex;
	align-items: center;
	gap: var(--ftb-space-2);
	min-height: var(--ftb-tap);
	font-size: var(--ftb-text-sm);
	font-weight: var(--ftb-fw-semi);
	color: var(--ftb-primary);
	text-decoration: none;
	white-space: nowrap;
}
.ftb-seeall svg { width: 16px; height: 16px; transition: transform .15s ease; }
.ftb-seeall:hover { text-decoration: underline; }
.ftb-seeall:hover svg { transform: translateX(3px); }

/* ==========================================================================
   3. CATEGORY ROWS
   ========================================================================== */

.ftb-catrows {
	display: grid;
	gap: var(--ftb-space-3);
	grid-template-columns: 1fr;
}

a.ftb-catrow {
	display: flex;
	align-items: center;
	gap: var(--ftb-space-3);
	min-height: 68px;
	padding: var(--ftb-space-3) var(--ftb-space-4);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.ftb-catrow:hover {
	border-color: var(--ftb-border-strong);
	box-shadow: var(--ftb-shadow);
	transform: translateY(-1px);
}

/* A category below the §3 minimum is not a link. Make that legible rather
   than leaving it looking like a broken button. */
.ftb-catrow--soon { opacity: .72; }
.ftb-catrow--soon .ftb-tile { filter: grayscale(1); }

.ftb-catrow-text { min-width: 0; flex: 1; }
.ftb-catrow-name {
	display: block;
	font-weight: var(--ftb-fw-semi);
	line-height: var(--ftb-lh-snug);
	color: var(--ftb-text);
}
.ftb-catrow-count {
	display: block;
	margin-top: 2px;
	font-size: var(--ftb-text-sm);
	color: var(--ftb-text-muted);
}
.ftb-catrow-go { display: inline-flex; color: var(--ftb-text-subtle); }
.ftb-catrow-go svg { width: 18px; height: 18px; }

/* ==========================================================================
   4. TASKS + FINDER
   ========================================================================== */

.ftb-tasks {
	display: grid;
	gap: var(--ftb-space-3);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ftb-tasks a {
	display: flex;
	align-items: center;
	gap: var(--ftb-space-3);
	min-height: var(--ftb-tap);
	padding: var(--ftb-space-3) var(--ftb-space-4);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ftb-tasks a:hover {
	border-color: var(--ftb-primary);
	box-shadow: var(--ftb-shadow-sm);
}
/* Size only. Colour is left to .ftb-tile, which reads --ftb-accent from the
   ftb-cat-* class on the link, so each chip takes its own category colour
   instead of every chip being indigo. */
.ftb-task-icon { width: 38px; height: 38px; }
.ftb-task-icon svg { width: 19px; height: 19px; }
.ftb-task-text {
	min-width: 0;
	font-size: var(--ftb-text-base);
	font-weight: var(--ftb-fw-semi);
	line-height: var(--ftb-lh-snug);
	color: var(--ftb-text);
}
.ftb-task-text span {
	display: block;
	margin-top: 2px;
	font-size: var(--ftb-text-sm);
	font-weight: var(--ftb-fw-normal);
	color: var(--ftb-text-muted);
}

.ftb-finder {
	display: grid;
	gap: var(--ftb-space-4);
	align-items: center;
	margin-top: var(--ftb-space-6);
	padding: var(--ftb-space-4);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-lg);
	background: var(--ftb-primary-soft);
}
/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content. The nowrap submit button then pushed this box past the
   viewport and scrolled the whole page sideways at 360px. Every child that can
   contain long content needs this explicitly. */
.ftb-finder > * { min-width: 0; }
.ftb-finder-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	color: var(--ftb-primary);
}
.ftb-finder-icon svg { width: 22px; height: 22px; }
.ftb-finder-copy { min-width: 0; }
.ftb-finder-copy label {
	display: block;
	font-weight: var(--ftb-fw-semi);
	color: var(--ftb-text);
}
.ftb-finder-copy p {
	margin: 2px 0 0;
	font-size: var(--ftb-text-sm);
	color: var(--ftb-text-muted);
}
.ftb-finder-field { display: flex; min-width: 0; gap: var(--ftb-space-2); }
.ftb-finder-field input {
	flex: 1;
	min-width: 0;
	min-height: var(--ftb-tap);
	padding: 0 var(--ftb-space-4);
	border: 1px solid var(--ftb-border-strong);
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	color: var(--ftb-text);
	font: inherit;
}
/* Shrinkable, not nowrap-at-any-cost: on a 360px screen the button giving up
   a few pixels is far better than the page scrolling sideways. */
.ftb-finder-field button { flex: 0 1 auto; white-space: nowrap; }

/* ==========================================================================
   5. WHY + PRIVACY
   ========================================================================== */

.ftb-why-grid {
	display: grid;
	gap: var(--ftb-space-5);
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ftb-why-grid li { min-width: 0; }
.ftb-why-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--ftb-space-3);
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	border: 1px solid var(--ftb-border);
	color: var(--ftb-primary);
}
.ftb-why-icon svg { width: 20px; height: 20px; }
.ftb-why-grid h3 {
	margin: 0 0 var(--ftb-space-1);
	font-size: var(--ftb-text-base);
	font-weight: var(--ftb-fw-semi);
	color: var(--ftb-text);
}
.ftb-why-grid p {
	margin: 0;
	font-size: var(--ftb-text-sm);
	line-height: var(--ftb-lh-base);
	color: var(--ftb-text-muted);
}

/* The privacy strip. Uses the brand green, which is the one place on the
   homepage that colour appears, so it reads as a distinct claim rather than
   another card. Solid tint — no gradient (§9.5). */
.ftb-privacy {
	display: grid;
	gap: var(--ftb-space-4);
	align-items: center;
	margin-top: var(--ftb-space-8);
	padding: var(--ftb-space-5);
	border: 1px solid var(--ftb-brand-line, var(--ftb-border));
	border-radius: var(--ftb-radius-lg);
	background: var(--ftb-brand-soft, var(--ftb-surface));
}
.ftb-privacy-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ftb-radius);
	background: var(--ftb-surface);
	color: var(--ftb-brand);
}
.ftb-privacy-icon svg { width: 22px; height: 22px; }
.ftb-privacy-img {
	display: block;
	width: 120px;
	height: auto;
	border-radius: var(--ftb-radius);
	background: #fff;
}
.ftb-privacy h3 {
	margin: 0 0 var(--ftb-space-1);
	font-size: var(--ftb-text-lg);
	color: var(--ftb-text);
}
.ftb-privacy p {
	margin: 0;
	font-size: var(--ftb-text-sm);
	line-height: var(--ftb-lh-base);
	color: var(--ftb-text-muted);
}
.ftb-privacy .ftb-btn { justify-self: start; white-space: nowrap; }

/* ==========================================================================
   6. RECENTLY USED
   ========================================================================== */

.ftb-recent-used {
	margin-bottom: var(--ftb-space-8);
	padding: var(--ftb-space-5);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-lg);
	background: var(--ftb-surface-2);
}
.ftb-recent-used[hidden] { display: none; }
.ftb-recent-used-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ftb-space-3);
}
.ftb-recent-used-head h2 {
	margin: 0;
	font-size: var(--ftb-text-lg);
	color: var(--ftb-text);
}
.ftb-linkbtn {
	min-height: var(--ftb-tap);
	padding: 0 var(--ftb-space-2);
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--ftb-text-sm);
	font-weight: var(--ftb-fw-semi);
	color: var(--ftb-primary);
	cursor: pointer;
}
.ftb-linkbtn:hover { text-decoration: underline; }

/* The §5.3 disclosure. Not decoration — it is the condition that makes
   storing recent items permissible at all. */
.ftb-recent-note {
	max-width: var(--ftb-maxw-prose);
	margin: var(--ftb-space-2) 0 var(--ftb-space-4);
	font-size: var(--ftb-text-xs);
	line-height: var(--ftb-lh-snug);
	color: var(--ftb-text-muted);
}

.ftb-recent-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ftb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ftb-recent-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ftb-tap);
	padding: 0 var(--ftb-space-4);
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-full);
	background: var(--ftb-surface);
	font-size: var(--ftb-text-sm);
	font-weight: var(--ftb-fw-medium);
	color: var(--ftb-text);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.ftb-recent-list a:hover {
	border-color: var(--ftb-primary);
	color: var(--ftb-primary);
}

.ftb-tool-card-date {
	margin-left: auto;
	font-size: var(--ftb-text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--ftb-text-subtle);
}

/* ==========================================================================
   7. FAQ

   Class is .ftb-home-faq, NOT .ftb-faq.

   style.css already defines `.ftb-faq { max-width: var(--ftb-maxw-prose) }`
   for the single-column FAQ on tool pages. Reusing that class here capped the
   two-column homepage grid at 70ch — 641px inside a 1200px container — which
   is what made this section look broken. Renaming is cleaner than fighting
   the cascade, and it leaves tool pages untouched.
   ========================================================================== */

.ftb-home-faq {
	display: grid;
	gap: var(--ftb-space-4);
	grid-template-columns: 1fr;
	/* start, not stretch: without this a closed row stretches to match an
	   open one beside it, leaving a tall empty card. */
	align-items: start;
}

.ftb-home-faq details {
	border: 1px solid var(--ftb-border);
	border-radius: var(--ftb-radius-lg);
	background: var(--ftb-surface);
	box-shadow: var(--ftb-shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ftb-home-faq details:hover { border-color: var(--ftb-border-strong); }
.ftb-home-faq details[open] {
	border-color: var(--ftb-primary);
	box-shadow: var(--ftb-shadow);
}

.ftb-home-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ftb-space-4);
	min-height: 60px;
	padding: var(--ftb-space-4) var(--ftb-space-5);
	font-size: var(--ftb-text-md);
	font-weight: var(--ftb-fw-semi);
	line-height: var(--ftb-lh-snug);
	color: var(--ftb-text);
	cursor: pointer;
	list-style: none;
}
/* Both engines need telling, or a default triangle sits beside our chevron. */
.ftb-home-faq summary::-webkit-details-marker { display: none; }
.ftb-home-faq summary::marker { content: ''; }

.ftb-home-faq-mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ftb-radius-full);
	background: var(--ftb-surface-2);
	color: var(--ftb-text-muted);
	transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ftb-home-faq-mark svg { width: 16px; height: 16px; transform: rotate(90deg); }
.ftb-home-faq details[open] .ftb-home-faq-mark {
	transform: rotate(180deg);
	background: var(--ftb-primary-soft);
	color: var(--ftb-primary);
}

.ftb-home-faq details p {
	margin: 0;
	padding: 0 var(--ftb-space-5) var(--ftb-space-5);
	font-size: var(--ftb-text-base);
	line-height: var(--ftb-lh-base);
	color: var(--ftb-text-muted);
}

/* ==========================================================================
   8. RESPONSIVE — mobile-first, breakpoints per CLAUDE.md §4.2
   ========================================================================== */

@media (min-width: 480px) {
	.ftb-catrows { grid-template-columns: 1fr 1fr; }
	.ftb-tasks   { grid-template-columns: 1fr 1fr; }
	.ftb-why-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
	.ftb-hero { padding: var(--ftb-space-16) 0 var(--ftb-space-12); }
	.ftb-section { padding: var(--ftb-space-16) 0; }
	.ftb-why-grid { grid-template-columns: repeat(3, 1fr); }
	.ftb-home-faq { grid-template-columns: 1fr 1fr; }

	.ftb-finder {
		grid-template-columns: auto 1fr minmax(280px, 380px);
		padding: var(--ftb-space-5);
	}
	.ftb-finder-icon { display: inline-flex; }

	.ftb-privacy { grid-template-columns: auto 1fr auto; }
	.ftb-privacy-img { width: 180px; }
}

@media (min-width: 900px) {
	.ftb-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.ftb-hero-art { display: block; justify-self: end; }
}

@media (min-width: 1024px) {
	.ftb-catrows { grid-template-columns: repeat(4, 1fr); }
	.ftb-tasks { grid-template-columns: repeat(3, 1fr); }

	/* style.css only widens .ftb-grid--4 to four columns at 1440px, which left
	   the eight popular cards as a ragged 3 + 3 + 2 on every normal laptop.
	   Four from 1024 makes it two clean rows of four, and the four recently
	   added cards one clean row. Scoped by virtue of this file loading on the
	   front page only — archives keep the original behaviour. */
	.ftb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   9. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	a.ftb-catrow,
	.ftb-tasks a,
	.ftb-seeall svg,
	.ftb-home-faq-mark,
	.ftb-hero-quick a,
	.ftb-recent-list a {
		transition: none;
	}
	.ftb-home-faq details,
	.ftb-home-faq-mark { transition: none; }
	a.ftb-catrow:hover { transform: none; }
	.ftb-seeall:hover svg { transform: none; }
}