/* =========================================================================
   FutureSense Tools — Design Tokens
   ========================================================================= */
:root {
	/* Color */
	--fs-ink:        #10192E;   /* header / dark surfaces */
	--fs-paper:      #FBFAF7;   /* page background, warm not stark white */
	--fs-emerald:    #0B6E4F;   /* primary accent — growth, money */
	--fs-emerald-d:  #094F39;   /* emerald hover/darker */
	--fs-gold:       #C89B3C;   /* secondary accent — ledger / trust */
	--fs-charcoal:   #1C2230;   /* primary text */
	--fs-slate:      #5B6472;   /* secondary text */
	--fs-line:       #E4E1D8;   /* hairline borders on paper */
	--fs-line-dark:  rgba(255,255,255,0.12);
	--fs-card:       #FFFFFF;
	--fs-shadow:     0 1px 2px rgba(16,25,46,0.04), 0 6px 20px rgba(16,25,46,0.06);

	/* Type */
	--fs-font-display: 'Fraunces', Georgia, serif;
	--fs-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fs-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	/* Layout */
	--fs-radius-sm: 8px;
	--fs-radius-md: 14px;
	--fs-container: 1160px;
}

/* =========================================================================
   Base
   ========================================================================= */
body.fs-tools-body {
	background: var(--fs-paper);
	color: var(--fs-charcoal);
	font-family: var(--fs-font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.fs-container {
	max-width: var(--fs-container);
	margin: 0 auto;
	padding: 0 24px;
}

a { text-decoration: none; color: inherit; }

/* =========================================================================
   Header
   ========================================================================= */
.fs-site-header {
	background: var(--fs-ink);
	color: #F2F1EC;
	border-bottom: 1px solid var(--fs-line-dark);
}

.fs-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	max-width: var(--fs-container);
	margin: 0 auto;
	gap: 24px;
}

.fs-logo {
	font-family: var(--fs-font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: #FBFAF7;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.fs-logo span.fs-logo-accent {
	color: var(--fs-gold);
	font-family: var(--fs-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid rgba(200,155,60,0.5);
	border-radius: 999px;
	padding: 3px 9px;
}

.fs-nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.fs-nav a {
	font-size: 14.5px;
	font-weight: 500;
	color: #D6D3C8;
	transition: color 0.15s ease;
}

.fs-nav a:hover { color: #FFFFFF; }

.fs-header-search {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 999px;
	padding: 7px 14px;
	min-width: 200px;
}

.fs-header-search input {
	background: transparent;
	border: none;
	outline: none;
	color: #F2F1EC;
	font-family: var(--fs-font-body);
	font-size: 14px;
	width: 100%;
}

.fs-header-search input::placeholder { color: #8B92A3; }

.fs-menu-toggle {
	display: none;
	background: none;
	border: none;
	color: #F2F1EC;
	font-size: 22px;
	cursor: pointer;
}

/* =========================================================================
   Hero (front page)
   ========================================================================= */
.fs-hero {
	background: linear-gradient(180deg, var(--fs-ink) 0%, #182238 100%);
	color: #F2F1EC;
	padding: 64px 24px 56px;
}

.fs-hero-inner {
	max-width: var(--fs-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.fs-hero-eyebrow {
	font-family: var(--fs-font-mono);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fs-gold);
	margin-bottom: 14px;
	display: block;
}

.fs-hero h1 {
	font-family: var(--fs-font-display);
	font-size: 46px;
	line-height: 1.12;
	font-weight: 600;
	margin: 0 0 18px;
	letter-spacing: -0.01em;
}

.fs-hero p.fs-hero-sub {
	color: #B9BFCC;
	font-size: 17px;
	max-width: 480px;
	margin: 0 0 28px;
}

.fs-hero-stats {
	display: flex;
	gap: 32px;
	margin-top: 8px;
}

.fs-hero-stat {
	font-family: var(--fs-font-mono);
}

.fs-hero-stat .fs-stat-num {
	font-size: 26px;
	color: var(--fs-gold);
	font-weight: 600;
	display: block;
}

.fs-hero-stat .fs-stat-label {
	font-size: 12.5px;
	color: #8B92A3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Hero read-out panel: signature element echoed at larger scale */
.fs-hero-panel {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--fs-radius-md);
	padding: 26px;
}

.fs-hero-panel-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(255,255,255,0.14);
	font-family: var(--fs-font-mono);
	font-size: 14px;
	color: #C7CCD8;
}

.fs-hero-panel-row:last-child { border-bottom: none; }
.fs-hero-panel-row strong { color: #F2F1EC; font-weight: 600; }

/* =========================================================================
   Category strip
   ========================================================================= */
.fs-cat-strip {
	background: var(--fs-card);
	border-bottom: 1px solid var(--fs-line);
	overflow-x: auto;
}

.fs-cat-strip-inner {
	max-width: var(--fs-container);
	margin: 0 auto;
	display: flex;
	gap: 10px;
	padding: 16px 24px;
}

.fs-cat-pill {
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--fs-line);
	color: var(--fs-slate);
	transition: all 0.15s ease;
}

.fs-cat-pill:hover,
.fs-cat-pill.is-active {
	background: var(--fs-emerald);
	border-color: var(--fs-emerald);
	color: #fff;
}

/* =========================================================================
   Tool grid + cards (the core reusable component)
   ========================================================================= */
.fs-section {
	padding: 48px 24px;
	max-width: var(--fs-container);
	margin: 0 auto;
}

.fs-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	gap: 16px;
}

.fs-section-head h2 {
	font-family: var(--fs-font-display);
	font-size: 26px;
	font-weight: 600;
	margin: 0;
	color: var(--fs-ink);
}

.fs-section-head .fs-section-desc {
	color: var(--fs-slate);
	font-size: 14.5px;
	margin-top: 4px;
}

.fs-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 18px;
}

.fs-tool-card {
	background: var(--fs-card);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-md);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: var(--fs-shadow);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.fs-tool-card:hover {
	transform: translateY(-3px);
	border-color: var(--fs-emerald);
}

.fs-tool-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.fs-tool-icon {
	font-size: 26px;
	line-height: 1;
}

.fs-tool-readout {
	font-family: var(--fs-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-emerald);
	background: rgba(11,110,79,0.08);
	border-radius: 6px;
	padding: 3px 8px;
}

.fs-tool-card-title {
	font-family: var(--fs-font-display);
	font-size: 18.5px;
	font-weight: 600;
	margin: 0;
	color: var(--fs-ink);
}

.fs-tool-card-desc {
	font-size: 13.8px;
	color: var(--fs-slate);
	margin: 0;
	flex-grow: 1;
}

.fs-tool-card-tag {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fs-gold);
	margin-top: 4px;
}

.fs-empty-state {
	grid-column: 1 / -1;
	color: var(--fs-slate);
	background: var(--fs-card);
	border: 1px dashed var(--fs-line);
	border-radius: var(--fs-radius-md);
	padding: 32px;
	text-align: center;
}

/* =========================================================================
   Single tool page
   ========================================================================= */
.fs-tool-page {
	max-width: var(--fs-container);
	margin: 0 auto;
	padding: 40px 24px 64px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
}

.fs-tool-breadcrumb {
	font-size: 13px;
	color: var(--fs-slate);
	margin-bottom: 18px;
}

.fs-tool-breadcrumb a { color: var(--fs-emerald); font-weight: 500; }

.fs-tool-main h1 {
	font-family: var(--fs-font-display);
	font-size: 32px;
	font-weight: 600;
	color: var(--fs-ink);
	margin: 0 0 10px;
}

.fs-tool-main .fs-tool-lead {
	color: var(--fs-slate);
	font-size: 16px;
	margin-bottom: 28px;
	max-width: 620px;
}

.fs-tool-calculator-wrap {
	background: var(--fs-card);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-md);
	padding: 28px;
	box-shadow: var(--fs-shadow);
	margin-bottom: 32px;
}

/* Make whatever calculator plugin markup lands inside feel native */
.fs-tool-calculator-wrap input[type="number"],
.fs-tool-calculator-wrap input[type="text"],
.fs-tool-calculator-wrap input[type="range"],
.fs-tool-calculator-wrap select {
	font-family: var(--fs-font-mono);
}

.fs-tool-calculator-wrap button,
.fs-tool-calculator-wrap input[type="submit"] {
	background: var(--fs-emerald);
	color: #fff;
	border: none;
	border-radius: var(--fs-radius-sm);
	padding: 12px 22px;
	font-weight: 600;
	font-family: var(--fs-font-body);
	cursor: pointer;
	transition: background 0.15s ease;
}

.fs-tool-calculator-wrap button:hover,
.fs-tool-calculator-wrap input[type="submit"]:hover {
	background: var(--fs-emerald-d);
}

.fs-tool-article {
	color: var(--fs-charcoal);
	font-size: 15.5px;
}

.fs-tool-article h2 {
	font-family: var(--fs-font-display);
	font-size: 21px;
	margin-top: 36px;
}

.fs-disclaimer {
	margin-top: 36px;
	font-size: 12.5px;
	color: var(--fs-slate);
	border-top: 1px solid var(--fs-line);
	padding-top: 16px;
}

/* Sidebar */
.fs-tool-sidebar { display: flex; flex-direction: column; gap: 18px; }

.fs-widget {
	background: var(--fs-card);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-md);
	padding: 20px;
}

.fs-widget-title {
	font-family: var(--fs-font-display);
	font-size: 15.5px;
	margin: 0 0 12px;
	color: var(--fs-ink);
}

.fs-related-list { list-style: none; margin: 0; padding: 0; }
.fs-related-list li { padding: 9px 0; border-bottom: 1px solid var(--fs-line); }
.fs-related-list li:last-child { border-bottom: none; }
.fs-related-list a { font-size: 14px; font-weight: 500; color: var(--fs-charcoal); }
.fs-related-list a:hover { color: var(--fs-emerald); }

/* =========================================================================
   Footer
   ========================================================================= */
.fs-site-footer {
	background: var(--fs-ink);
	color: #B9BFCC;
	margin-top: 40px;
}

.fs-footer-inner {
	max-width: var(--fs-container);
	margin: 0 auto;
	padding: 44px 24px 28px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
}

.fs-footer-col h4 {
	font-family: var(--fs-font-display);
	color: #F2F1EC;
	font-size: 15px;
	margin: 0 0 14px;
}

.fs-footer-col p { font-size: 13.5px; color: #8B92A3; }

.fs-footer-col ul { list-style: none; margin: 0; padding: 0; }
.fs-footer-col li { margin-bottom: 9px; }
.fs-footer-col a { font-size: 13.5px; color: #C7CCD8; }
.fs-footer-col a:hover { color: var(--fs-gold); }

.fs-footer-bottom {
	border-top: 1px solid var(--fs-line-dark);
	padding: 18px 24px;
	text-align: center;
	font-size: 12.5px;
	color: #6E7689;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
	.fs-hero-inner { grid-template-columns: 1fr; }
	.fs-hero h1 { font-size: 34px; }
	.fs-tool-page { grid-template-columns: 1fr; }
	.fs-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
	.fs-nav, .fs-header-search { display: none; }
	.fs-menu-toggle { display: block; }
	.fs-footer-inner { grid-template-columns: 1fr; }
	.fs-hero-stats { flex-wrap: wrap; gap: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.fs-tool-card { transition: none; }
	.fs-tool-card:hover { transform: none; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--fs-emerald);
	outline-offset: 2px;
}

/* =========================================================================
   Generic page card (About, Disclaimer, Privacy Policy, Terms, etc.)
   ========================================================================= */
.fs-page-card {
	background: var(--fs-card);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius-md);
	box-shadow: var(--fs-shadow);
	padding: 40px 44px;
}

.fs-page-card__title {
	font-family: var(--fs-font-display);
	font-size: 32px;
	color: var(--fs-ink);
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--fs-gold);
}

/* Fill in missing article typography so pasted content isn't flat */
.fs-tool-article p {
	margin: 0 0 18px;
}

.fs-tool-article h3 {
	font-family: var(--fs-font-display);
	font-size: 18px;
	color: var(--fs-ink);
	margin: 28px 0 12px;
}

.fs-tool-article ul,
.fs-tool-article ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.fs-tool-article li {
	margin-bottom: 8px;
}

.fs-tool-article strong {
	color: var(--fs-ink);
}

.fs-tool-article a {
	color: var(--fs-emerald);
	text-decoration: underline;
	text-decoration-color: rgba(11,110,79,0.35);
}

.fs-tool-article a:hover {
	color: var(--fs-emerald-d);
}

@media (max-width: 640px) {
	.fs-page-card {
		padding: 28px 22px;
	}
	.fs-page-card__title {
		font-size: 26px;
	}
}

/* =========================================================================
   Force header/footer to full viewport width, overriding any width
   constraint inherited from the parent theme's body/wrapper CSS
   ========================================================================= */

/* First: strip any max-width/centering the parent theme put on body itself —
   this is almost certainly the real source of the narrow layout. Without
   this, overflow-x:hidden below would clip the header's breakout right back
   to the same narrow width. */
html {
	overflow-x: hidden;
}

body.fs-tools-body {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	overflow-x: visible !important;
}

.fs-site-header,
.fs-site-footer {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	position: relative;
	box-sizing: border-box;
}