/* ============================================================
   tehisintellektid.ee — Tech Editorial palette (B)
   Light: white + cyan-700 (#0891b2) accent, Space Grotesk headings, Inter body
   Dark: prefers-color-scheme auto
   ============================================================ */

:root {
	--bg: #ffffff;
	--bg-soft: #f8fafc;
	--bg-card: #ffffff;
	--fg: #0f172a;
	--fg-muted: #475569;
	--fg-subtle: #64748b;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--accent: #0891b2;
	--accent-hover: #0e7490;
	--accent-soft: #ecfeff;
	--accent-on: #ffffff;
	--ee: #1e40af;
	--ee-soft: rgba(30, 64, 175, 0.08);
	--success: #059669;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--radius: 6px;
	--font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
	--display-weight: 600;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #020617;
		--bg-soft: #0f172a;
		--bg-card: #1e293b;
		--fg: #f8fafc;
		--fg-muted: #94a3b8;
		--fg-subtle: #64748b;
		--border: #1e293b;
		--border-strong: #334155;
		--accent: #22d3ee;
		--accent-hover: #67e8f9;
		--accent-soft: #164e63;
		--ee-soft: rgba(56, 189, 248, 0.12);
		--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
		--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
	}
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--fg);
}
a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }
p { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; display: block; }
code, pre { font-family: var(--font-mono); }

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ============== HEADER ============== */
.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(180%) blur(8px);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	height: 64px;
}
.site-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--fg);
	letter-spacing: -0.02em;
}
.site-logo__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--accent);
	border-radius: 3px;
	transform: rotate(45deg);
}
.site-logo .accent { color: var(--accent); }
.site-nav {
	display: flex;
	gap: 1.5rem;
	flex: 1;
}
.site-nav a {
	color: var(--fg-muted);
	font-size: 0.92rem;
	font-weight: 500;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--fg);
}
.header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.lang-switch {
	display: flex;
	gap: 0.5rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--fg-muted);
}
.lang-switch a { color: var(--fg-muted); }
.lang-switch a.active,
.lang-switch a:hover { color: var(--fg); }
.lang-switch__sep { color: var(--border-strong); }

/* mobile nav */
.menu-toggle { display: none; }
@media (max-width: 768px) {
	.site-nav { display: none; }
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--border);
		border-radius: 6px;
		background: transparent;
		color: var(--fg);
		cursor: pointer;
	}
	.site-nav.is-open {
		display: flex;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		padding: 1rem;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
	}
	.site-nav.is-open a {
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--border);
	}
}

/* ============== HERO ============== */
.hero {
	padding: 4rem 0 3rem;
	border-bottom: 1px solid var(--border);
}
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
}
.hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	max-width: 900px;
	margin-bottom: 1rem;
}
.hero__lede {
	color: var(--fg-muted);
	font-size: 1.15rem;
	max-width: 720px;
	line-height: 1.55;
}
.hero__meta {
	margin-top: 2rem;
	display: flex;
	gap: 1.5rem;
	color: var(--fg-subtle);
	font-size: 0.85rem;
	flex-wrap: wrap;
}
.hero__meta strong {
	color: var(--fg);
	font-weight: 500;
}

/* ============== SECTIONS ============== */
.section {
	padding: 4rem 0;
	border-bottom: 1px solid var(--border);
}
.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 2rem;
	gap: 1rem;
}
.section__head h2 {
	font-size: 1.8rem;
	margin: 0;
}
.section__head a {
	color: var(--fg-muted);
	font-size: 0.9rem;
	font-weight: 500;
}
.section__head a:hover { color: var(--accent); }

/* ============== ARTICLES GRID ============== */
.grid-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 900px) { .grid-articles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-articles { grid-template-columns: 1fr; } }

.article-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.article-card__cover {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
	transition: border-color 0.15s ease;
}
.article-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.article-card__cover--placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, var(--accent-soft), transparent 60%),
		radial-gradient(circle at 80% 70%, var(--ee-soft), transparent 60%);
}
.article-card__cover--placeholder::after {
	content: attr(data-emoji);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
}
.article-card:hover .article-card__cover { border-color: var(--accent); }
.article-card__meta {
	display: flex;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--fg-subtle);
}
.article-card__cat {
	color: var(--accent);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
}
.article-card__title {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0;
}
.article-card__title a { color: var(--fg); }
.article-card:hover .article-card__title a { color: var(--accent); }
.article-card__excerpt {
	color: var(--fg-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* ============== TOOLS GRID ============== */
.grid-tools {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
@media (max-width: 900px) { .grid-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-tools { grid-template-columns: 1fr; } }

.tool-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: all 0.15s ease;
	color: inherit;
}
.tool-card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
	color: inherit;
}
.tool-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.tool-card__logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	background: var(--accent-soft);
	border: 1px solid var(--border);
	flex-shrink: 0;
}
.tool-card__logo img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.tool-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	margin: 0;
}
.tool-card__cat {
	font-size: 0.78rem;
	color: var(--fg-subtle);
}
.tool-card__desc {
	color: var(--fg-muted);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

/* ============== PILLS ============== */
.pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	background: var(--bg-soft);
	color: var(--fg-muted);
	border: 1px solid var(--border);
}
.pill--free  { color: var(--success); border-color: var(--success); background: transparent; }
.pill--paid  { color: var(--accent);  border-color: var(--accent);  background: transparent; }
.pill--ee    { color: var(--ee);      background: var(--ee-soft);    border-color: transparent; }
.pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ============== STARTUPS ============== */
.grid-startups {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 800px) { .grid-startups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .grid-startups { grid-template-columns: 1fr; } }
.startup-card {
	padding: 1.25rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: all 0.15s ease;
}
.startup-card:hover { border-color: var(--ee); box-shadow: var(--shadow-md); }
.startup-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
}
.startup-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0;
}
.startup-card__desc {
	color: var(--fg-muted);
	font-size: 0.9rem;
	margin: 0;
}
.startup-card__footer {
	margin-top: 0.4rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.78rem;
	color: var(--fg-subtle);
}

/* ============== PROMPTS ============== */
.grid-prompts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (max-width: 700px) { .grid-prompts { grid-template-columns: 1fr; } }
.prompt-card {
	padding: 1.25rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.prompt-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}
.prompt-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	margin: 0;
}
.prompt-card__body {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--fg-muted);
	background: var(--bg-soft);
	padding: 0.9rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	white-space: pre-wrap;
	margin: 0;
	overflow-x: auto;
}
.btn-copy {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--fg-muted);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ============== SINGLE POST / PAGE ============== */
.single-article {
	padding: 3rem 0;
	max-width: 920px;
	margin: 0 auto;
}
.single-article__header {
	margin-bottom: 2rem;
}
.single-article__title {
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	line-height: 1.15;
}
.single-article__meta {
	display: flex;
	gap: 1.25rem;
	color: var(--fg-subtle);
	font-size: 0.88rem;
	margin-top: 0.75rem;
}
.single-article__content {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--fg);
}
.single-article__content h2 {
	font-size: 1.6rem;
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}
.single-article__content h3 {
	font-size: 1.25rem;
	margin-top: 2rem;
}
.single-article__content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--accent);
	background: var(--bg-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--fg-muted);
}
.single-article__content pre {
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem;
	overflow-x: auto;
	font-size: 0.88rem;
}
.single-article__content code {
	background: var(--bg-soft);
	border: 1px solid var(--border);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.88em;
}
.single-article__content pre code {
	background: transparent;
	border: 0;
	padding: 0;
}
.single-article__content ul, .single-article__content ol {
	padding-left: 1.5rem;
}
.single-article__content li { margin-bottom: 0.5rem; }
.single-article__content img {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	margin: 1.5rem 0;
}
.single-article__content a { border-bottom: 1px solid currentColor; }

/* ============== AI TOOL SINGLE ============== */
.tool-single {
	padding: 3rem 0;
}
.tool-single__header {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 1.5rem;
	align-items: center;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) {
	.tool-single__header {
		grid-template-columns: 64px 1fr;
	}
	.tool-single__cta { grid-column: 1 / -1; }
}
.tool-single__logo {
	width: 96px;
	height: 96px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	overflow: hidden;
}
.tool-single__logo img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; }
.tool-single__title { font-size: 2rem; margin: 0 0 0.25rem; }
.tool-single__cat { color: var(--fg-muted); }
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--accent);
	color: var(--accent-on);
	border: 0;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	font-family: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease;
	white-space: nowrap;
	text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-on); }
.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: var(--fg);
	border: 1px solid var(--border-strong);
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius);
	font-weight: 500;
	text-decoration: none;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ============== NEWSLETTER ============== */
.newsletter {
	background: var(--bg-soft);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 2.5rem;
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.newsletter h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.newsletter p { color: var(--fg-muted); margin: 0; max-width: 480px; }
.newsletter__form {
	display: flex;
	gap: 0.5rem;
	flex: 1;
	min-width: 280px;
	max-width: 400px;
}
.newsletter__form input {
	flex: 1;
	padding: 0.65rem 1rem;
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--fg);
	font-family: inherit;
	font-size: 0.95rem;
}
.newsletter__form input:focus { outline: none; border-color: var(--accent); }

/* ============== FOOTER ============== */
.site-footer {
	background: var(--bg-soft);
	padding: 3rem 0 2rem;
	color: var(--fg-muted);
	font-size: 0.88rem;
	border-top: 1px solid var(--border);
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 {
	color: var(--fg);
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.footer-col a {
	display: block;
	color: var(--fg-muted);
	padding: 4px 0;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	font-size: 0.82rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ============== UTILITIES ============== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}