/* =====================================================
   Nerf Commerce — Tools Page Stylesheet
   Location: templates/tools/tools.css
   ===================================================== */

.nerf-tools-main {
	background:
		linear-gradient(to right, color-mix(in srgb, var(--nerf-line) 55%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--nerf-line) 55%, transparent) 1px, transparent 1px),
		var(--nerf-bg);
	background-size: 28px 28px;
	padding-bottom: 80px;
}

.nerf-tools-hero {
	padding: 64px 0 40px;
	border-bottom: 1px solid var(--nerf-line);
	background: var(--nerf-surface);
	margin-bottom: 48px;
}

.nerf-tools-hero h1 {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 950;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--nerf-ink);
	margin: 8px 0 12px;
}

.nerf-tools-hero p {
	color: var(--nerf-muted);
	font-size: 15px;
	margin: 0;
	max-width: 600px;
	line-height: 1.6;
}

/* Grid Layout */
.nerf-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	list-style: none !important;
	padding: 0;
	margin: 0;
}

.nerf-tools-grid li {
	margin: 0;
	list-style: none !important;
}

/* Card Styling */
.nerf-tool-card {
	background: var(--nerf-surface);
	border: 1px solid var(--nerf-line);
	box-shadow: var(--nerf-shadow);
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.nerf-tool-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgb(17 24 39 / 6%);
}

.nerf-tool-card h4 {
	font-size: 18px;
	font-weight: 850;
	color: var(--nerf-ink);
	margin: 0 0 20px;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Specific card colors (Glow top-border) */
.nerf-tool-card.card-cyan {
	border-top: 4px solid #17a2b8;
}
.nerf-tool-card.card-amber {
	border-top: 4px solid #ffc107;
}
.nerf-tool-card.card-green {
	border-top: 4px solid #28a745;
}
.nerf-tool-card.card-blue {
	border-top: 4px solid #2196f3;
}

/* Inputs styling */
.nerf-tool-inputs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.nerf-tool-inputs input[type="number"] {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--nerf-line);
	background: var(--nerf-bg);
	color: var(--nerf-ink);
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	box-sizing: border-box;
	transition: border-color 140ms ease;
}

.nerf-tool-inputs input[type="number"]:focus {
	outline: none;
	border-color: var(--nerf-primary);
}

/* Result display */
.nerf-tool-result {
	min-height: 28px;
	font-size: 15px;
	font-weight: 800;
	color: var(--nerf-primary);
	background: color-mix(in srgb, var(--nerf-primary) 6%, transparent);
	border-left: 3px solid var(--nerf-primary);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	word-break: break-all;
}

.nerf-tool-result:empty {
	display: none;
}