@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
	--max-width: 800px;
	--background-color: #F7F6F3;
	--text-primary: #37352F;
	--text-secondary: rgba(55, 53, 47, 0.65);
	--border-color: rgba(55, 53, 47, 0.16);
	--border-light: rgba(55, 53, 47, 0.09);
	--hover-bg: rgba(55, 53, 47, 0.06);
	--accent: #2383E2;
	--accent-light: rgba(35, 131, 226, 0.08);
}

html,
body {
	font-family: inter, opensans, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--background-color);
	color: var(--text-primary);
	line-height: 1.65;
}

header {
	margin-bottom: 1ex;
	border-bottom: 1px solid var(--border-light);
	background-color: var(--background-color);
}

section {
	max-width: var(--max-width);
	margin: auto;
}

footer {
	margin-top: auto;
	text-align: center;
	width: var(--max-width);
}

footer .copyrights {
	color: var(--text-secondary);
	padding: 0.25rem 1.75rem;
	font-size: 0.875rem;
}

footer .copyrights a {
	color: var(--accent);
	text-decoration: none;
}

footer .copyrights a:hover {
	text-decoration: underline;
}

/* ── Page-level heading and intro ───────────────────────────────────── */

.section-title {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 1.5rem 0 0.35rem 0;
}

.page-lead {
	color: var(--text-secondary);
	font-size: 0.925rem;
	margin-bottom: 1.5rem;
	max-width: 56ch;
}

/* ── Forms ───────────────────────────────────────────────────────────── */

.form-section {
	padding: 16px 20px;
	background-color: rgba(55, 53, 47, 0.03);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.btn-form-submit {
	margin-top: 1ex;
	margin-left: auto;
	display: flex;
}

.btn-action {
	width: 100%;
	white-space: normal !important;
}

/* ── Results ─────────────────────────────────────────────────────────── */

.result {
	padding: 1.25rem;
	margin-top: 1.5rem;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(55, 53, 47, 0.06);
}

/* ── Misc ────────────────────────────────────────────────────────────── */

.sample_code {
	font-family: monospace;
	font-size: 120%;
}

.form-error {
	color: #e03e3e;
	margin: 5px;
	padding-top: 5px;
	border-radius: 6px;
	font-size: 0.9rem;
}

pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
}

a.glossary {
	padding: 0 1ex 0 1ex;
	font-size: 110%;
	color: var(--text-primary);
	background: rgba(55, 53, 47, 0.06);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s;
}

a.glossary:hover {
	background: rgba(55, 53, 47, 0.12);
}

.conversion-result-image {
	min-width: 300px;
	max-width: 600px;
	margin: auto;
}

.readable {
	max-width: 60ch;
	margin: auto;
	font-size: normal;
}

.help {
	border: 1px solid var(--border-light);
	border-radius: 6px;
	background-color: rgba(55, 53, 47, 0.03);
}

/* ── Home page tool cards ────────────────────────────────────────────── */

.tool-card {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.12s ease;
	margin-bottom: 2px;
}

.tool-card:hover {
	background-color: var(--hover-bg);
}

.tool-card .tool-title {
	font-weight: 500;
	color: var(--text-primary);
	font-size: 1rem;
}

.tool-card .tool-body {
	color: var(--text-secondary);
	font-size: 0.875rem;
	margin: 2px 0 0 0;
}

/* ── OCR drop zone ───────────────────────────────────────────────────── */

.dropzone {
	box-sizing: border-box;
	width: 100%;
	min-height: 8em;
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 1.5em;
	margin-bottom: 1em;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.dropzone.disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.dropzone.drag-over {
	background-color: var(--accent-light);
	border-color: var(--accent);
	color: var(--text-primary);
}

.dropzone .dropzone-hint {
	text-align: center;
}