/* site-chrome.css — the public site's header and footer
   (partials/site-header.html, partials/site-footer.html), shared by the
   homepage and every public page (free tools, legal pages). It's the one
   place these styles live: the homepage has its own inline design tokens
   and the other pages use style.css, so this file carries its own
   --chrome-* tokens (light by default, dark when the visitor picks it; see
   boot.js) instead of depending on either. */

:root {
	--chrome-text: #1a2126;
	--chrome-muted: #5c6b76;
	--chrome-dim: #8b98a2;
	--chrome-line: #e2ddd3;
	--chrome-surface: rgba(255, 255, 255, 0.86);
	--chrome-raised: #f1ede6;
	--chrome-amber: #a15417;
	--chrome-amber-hover: #c96a1f;
	--chrome-teal: #0e7d6c;
	--chrome-teal-dim: #daf3ee;
	--chrome-font: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
	--chrome-text: #e7ecef;
	--chrome-muted: #92a0ab;
	--chrome-dim: #5c6b76;
	--chrome-line: #263039;
	--chrome-surface: rgba(19, 26, 33, 0.88);
	--chrome-raised: #1b242c;
	--chrome-amber: #ff9a3c;
	--chrome-amber-hover: #ffaa5c;
	--chrome-teal: #3fd8c0;
	--chrome-teal-dim: #123029;
}

/* Anchor jumps (/#pricing, /#faq …) land below the sticky header. */
html { scroll-padding-top: 80px; }

.site-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--chrome-surface);
	color: var(--chrome-text);
	padding: 8px 14px;
	border-radius: 9px;
}

.skip-link:focus { left: 8px; }

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--chrome-surface);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--chrome-line);
	font-family: var(--chrome-font);
}

.site-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 64px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--chrome-text);
}

.site-brand .brand-mark {
	width: 28px;
	height: 28px;
	flex: none;
	background: url("/logo-pulse.svg") center / 100% no-repeat, linear-gradient(135deg, #f08a36, #b9531a);
	border-radius: 7px;
	box-shadow: 0 1px 3px rgba(185, 83, 26, 0.35);
}

.site-brand .brand-name {
	font-family: "Space Grotesk", "Segoe UI", sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--chrome-text);
}

.site-brand .brand-accent { color: var(--chrome-amber); }

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 14.5px;
	font-weight: 500;
}

.site-nav a {
	color: var(--chrome-muted);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--chrome-text);
}

.site-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-user {
	font-size: 13.5px;
	color: var(--chrome-muted);
	white-space: nowrap;
}

.site-user b { color: var(--chrome-text); font-weight: 600; }

.site-header .theme-toggle-btn {
	background: none;
	border: 1px solid var(--chrome-line);
	border-radius: 9px;
	padding: 7px 10px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	color: var(--chrome-text);
}

.site-header .theme-toggle-btn:hover { background: var(--chrome-raised); }

.site-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--chrome-font);
	font-weight: 600;
	font-size: 14px;
	border-radius: 9px;
	padding: 9px 16px;
	border: 1px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}

.site-btn-primary { background: var(--chrome-amber); color: #fff8f0; }
.site-btn-block { width: 100%; justify-content: center; }
.site-btn-primary:hover { background: var(--chrome-amber-hover); }
.site-btn-ghost { border-color: var(--chrome-line); color: var(--chrome-text); }
.site-btn-ghost:hover { background: var(--chrome-raised); }

/* Narrow screens: the menu never disappears — it moves to its own row
   under the brand and buttons and scrolls sideways if it doesn't fit. */
@media (max-width: 900px) {
	html { scroll-padding-top: 116px; }
	.site-nav {
		order: 3;
		width: 100%;
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		padding: 2px 0 12px;
	}
	.site-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
	.site-user { display: none; }
	.site-btn { padding: 8px 12px; }
}

@media (max-width: 420px) {
	.site-actions .site-btn-ghost { display: none; }
}

/* ---------- Footer ---------- */

.site-footer {
	border-top: 1px solid var(--chrome-line);
	padding: 28px 0 40px;
	margin-top: 40px;
	color: var(--chrome-muted);
	font-family: var(--chrome-font);
	font-size: 13.5px;
}

.site-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.site-footer a { color: var(--chrome-muted); text-decoration: none; }
.site-footer a:hover { color: var(--chrome-text); }
.site-footer .site-brand { color: var(--chrome-text); }

.site-footer-legal {
	margin-top: 14px;
	font-size: 12.5px;
}

.site-newsletter { margin-top: 20px; max-width: 460px; }
.site-newsletter label { display: block; margin-bottom: 8px; color: var(--chrome-muted); }
.site-newsletter-row { display: flex; gap: 8px; }
.site-newsletter input { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--chrome-line); border-radius: 9px; background: var(--chrome-surface); color: var(--chrome-text); }
.site-newsletter-status { margin: 6px 0 0; min-height: 1em; font-size: 12.5px; }
.site-footer-social { margin-top: 14px; }
.site-footer-social a { display: inline-flex; align-items: center; gap: 6px; }
.site-footer-note { margin-top: 14px; font-size: 12.5px; color: var(--chrome-dim); }