/*
 * tools.css — shared styles for all free-tool pages
 * Loaded conditionally on tool pages only.
 */

/* ── Shared result link ─────────────────────────────────────── */
.tool-service-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: 600 0.8125rem/1 var(--mono);
	color: var(--accent);
	text-decoration: none;
}
.tool-service-link::after  { content: ' ←'; }
.tool-service-link:hover { text-decoration: underline; }

/* ── Post-result lead panel ─────────────────────────────────── */
.tool-lead-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-block-start: 3px solid var(--accent);
	border-radius: var(--card-r);
	padding: 1.25rem 1.5rem;
	margin-block-start: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.tool-lead-panel strong {
	font: 600 0.9375rem/1.3 var(--sans);
	color: var(--ink);
}
.tool-lead-panel p {
	font-size: 0.875rem;
	color: var(--text);
	margin: 0;
}

/* ── Quiz risk-level CSS custom property ────────────────────── */
.risk-level--0 { --quiz-risk-color: #4ade80; }
.risk-level--1 { --quiz-risk-color: #a3e635; }
.risk-level--2 { --quiz-risk-color: #fbbf24; }
.risk-level--3 { --quiz-risk-color: #fb923c; }
.risk-level--4 { --quiz-risk-color: #f87171; }

/* ── SERP preview: desktop / mobile toggle ──────────────────── */
.serp-toggle-bar {
	display: flex;
	gap: 8px;
	margin-block-end: 12px;
}
.serp-toggle-btn {
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: transparent;
	font: 600 0.75rem/1 var(--mono);
	color: var(--muted);
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s;
}
.serp-toggle-btn--active {
	border-color: var(--accent);
	color: var(--accent);
}
.serp-mock--mobile {
	max-width: 340px;
}
.serp-mock--mobile .serp-mock__title { font-size: 1rem; }
.serp-mock--mobile .serp-mock__desc  { font-size: 0.8125rem; }

/* ── ORM callout block ──────────────────────────────────────── */
.serp-orm-callout {
	background: rgba(138, 43, 43, 0.06);
	border: 1px solid rgba(138, 43, 43, 0.2);
	border-radius: var(--radius-sm, 4px);
	padding: 14px 16px;
	font-size: 0.875rem;
	margin-block-start: 1rem;
	line-height: 1.6;
}
.serp-orm-callout a {
	color: var(--accent);
	font-weight: 600;
}

/* ── Platform / industry note ───────────────────────────────── */
.platform-note {
	font: 400 0.875rem/1.65 var(--sans);
	color: var(--text);
	padding: 12px 16px;
	background: var(--accent-bg, rgba(30, 72, 55, 0.06));
	border-radius: var(--radius-sm, 4px);
	margin-block-start: 0.75rem;
}

/* ── SERP brand highlight ────────────────────────────────────── */
.serp-highlight {
	background: rgba(30, 72, 55, 0.12);
	border-radius: 2px;
	color: var(--accent);
}

/* ── SERP optimization score badge ─────────────────────────── */
.serp-score-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 8px;
}
.serp-score-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 20px;
	font: 600 0.75rem/1 var(--mono);
}
.serp-score-badge--high {
	background: var(--accent-bg, rgba(30, 72, 55, 0.08));
	color: var(--accent);
}
.serp-score-badge--mid {
	background: rgba(168, 137, 74, 0.1);
	color: var(--gold, #A8894A);
}
.serp-score-badge--low {
	background: rgba(138, 43, 43, 0.08);
	color: #8A2B2B;
}

/* ── After-ORM comparison grid (damage calculator) ─────────── */
.damage-comparison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	margin-block: 1rem;
}
.damage-cell-group {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--card-r, 12px);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.damage-cell-group__label {
	font: 600 0.75rem/1 var(--mono);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.damage-cell-group--potential {
	border-block-start: 3px solid var(--gold, #A8894A);
}
.damage-cell-group--potential .damage-val { color: var(--gold, #A8894A); }
.damage-delta {
	grid-column: 1 / -1;
	text-align: center;
	padding: 0.75rem;
	background: rgba(168, 137, 74, 0.08);
	border-radius: var(--radius-sm, 4px);
	font: 600 0.9375rem/1.4 var(--sans);
	color: var(--gold, #A8894A);
}

/* ── Tool hub — badge + time estimate ───────────────────────── */
.tool-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 0.25rem;
}
.tool-badge {
	font: 600 0.6875rem/1 var(--mono);
	background: var(--accent-bg, rgba(30, 72, 55, 0.08));
	color: var(--accent);
	padding: 3px 8px;
	border-radius: 20px;
}
.tool-time-est {
	font: 400 0.75rem/1 var(--sans);
	color: var(--muted);
}

/* ── Tool hub — scenario quick-match ────────────────────────── */
.tool-matcher { padding-block: 2.5rem 1.5rem; }
.tool-matcher__title {
	font: 700 1.25rem/1.3 var(--serif);
	color: var(--ink);
	margin-block-end: 1.25rem;
}
.tool-matcher__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 680px) {
	.tool-matcher__grid { grid-template-columns: 1fr; }
	.damage-comparison   { grid-template-columns: 1fr; }
	.damage-delta        { grid-column: 1; }
}
.tool-matcher__item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--card-r, 12px);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.tool-matcher__item strong {
	font: 600 0.9375rem/1.3 var(--sans);
	color: var(--ink);
}
.tool-matcher__item p {
	font-size: 0.8125rem;
	color: var(--muted);
	margin: 0;
	flex: 1;
}
.tool-matcher__item .result-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	background: none;
	border: none;
	margin: 0;
}

/* ── SEO content section ────────────────────────────────────── */
.tools-seo-content {
	max-width: var(--read, 720px);
	margin-inline: auto;
	padding-block: 1.5rem 3rem;
}
.tools-seo-content h2 {
	font: 700 1.1875rem/1.4 var(--serif);
	color: var(--ink);
	margin-block-end: 0.75rem;
}
.tools-seo-content p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--text);
	margin-block-end: 0.75rem;
}

/* ── Tool note paragraph ─────────────────────────────────── */
.serp-tool-note {
	font-size: 0.8125rem;
	color: var(--muted);
	line-height: 1.6;
	margin-block-start: 1rem;
}
.serp-tool-note a { color: var(--accent); }

/* ── Result alt (ROI / lead statement) ──────────────────── */
.result-alt {
	font-size: 0.875rem;
	color: var(--text);
	line-height: 1.6;
	margin-block-start: 0.75rem;
	padding: 10px 14px;
	background: var(--accent-bg, rgba(30,72,55,0.06));
	border-radius: var(--radius-sm, 4px);
}
.result-alt a { color: var(--accent); font-weight: 600; }

/* ── Quiz restore panel ───────────────────────────────────── */
.quiz-restore {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--card-r, 12px);
	padding: 1.25rem 1.5rem;
	margin-block-end: 1.5rem;
	text-align: center;
}
.quiz-restore p { font-size: 0.9375rem; color: var(--text); margin-block-end: 1rem; }

/* ── Review-response personalise step ───────────────────── */
.rr-personalize {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: 0.5rem;
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
	.result-ctas,
	.quiz-restart,
	.quiz-share-btn,
	.tool-lead-panel a.btn,
	.serp-toggle-bar { display: none; }
	.quiz-result,
	.calc-result-inner,
	.damage-cell-group { border: 1px solid #ccc; }
}