/* Стилът на блога. Вграден в двоичния файл (blog/render.go) и раздаван на
   /blog/blog.css?v=<версия> с immutable кеш - адресът носи версията.

   Самохостван Ubuntu: петте среза са СЪЩИТЕ файлове, които ползва и
   приложението (ui/src/scss/app/_fonts.scss), дума по дума. Тоест за
   посетител, който вече е отварял приложението, шрифтът е в кеша, а нов
   срез не се появява само тук.
   ⚠️ Версията е в ИМЕТО (`-v1`): sw.js кешира /misc/* cache-first БЕЗ
   ревалидация, затова пресубсетиране иска ново име И вдигнат CACHE_NAME.
   Гардът е TestBlogCSS_UsesTheAppFonts - той сравнява МНОЖЕСТВАТА адреси
   в двата файла, тоест смяна на срез в приложението вали теста и тук. */

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/misc/ubuntu-400-v1.woff2) format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(/misc/ubuntu-500-v1.woff2) format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/misc/ubuntu-700-v1.woff2) format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(/misc/ubuntu-400i-v1.woff2) format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(/misc/ubuntu-700i-v1.woff2) format('woff2');
}

/* Токените са СВЕТЛИ на голия :root. Темата е избор на човека, не на
   устройството (решение на собственика, 2026-09-08): ключът `theme` е общ с
   приложението, а без избор страницата е светла - няма
   `prefers-color-scheme`. */
:root,
html.light {
	color-scheme: light;
	--page-bg: #ffffff;
	--surface-bg: #f1f2f6;
	--ink: #303c46;
	--muted-ink: #59636b;
	--separator: #aab0b6;
	--primary-color: #30bdf6;
	/* Мастилото на ЛИНКА е собствен токен, а не --primary-color.
	   Правилото на проекта е, че всеки ink принадлежи на СВОЯ фон
	   (ui/src/scss/app/_root.scss): #30bdf6 върху бяло дава 2.16, тоест
	   като ТЕКСТ е нечетим. Акцентният цвят остава за контури и подчертаване,
	   където прагът е 3.0. Мерено: 5.56 върху --page-bg. */
	--link-ink: #0b6ea3;
	/* Зеленото на главния бутон - същата стойност като в приложението
	   (--intent-primary-color), за да не се учи посетителят на два езика. */
	--intent-primary: #009938;
	--button-bg: #fbfbfd;
	--button-border: #aab0b6;
}

html.dark {
	color-scheme: dark;
	--page-bg: #202127;
	--surface-bg: #2a2b30;
	--ink: #b3bfc8;
	--muted-ink: #a3afb8;
	--separator: #6a7076;
	--primary-color: #007dc6;
	/* Мерено: 8.68 върху --page-bg. Тъмният акцент #007dc6 дава 3.24 - стига
	   за контур, не стига за текст. */
	--link-ink: #6fc9f5;
	--intent-primary: #5c4;
	--button-bg: #2a2b30;
	--button-border: #6a7076;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Ubuntu', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--page-bg);
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 60rem) {
	body {
		font-size: 18px;
	}
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--link-ink);
}

a:hover {
	text-decoration-color: var(--primary-color);
}

code {
	font-size: 0.95em;
	background: var(--surface-bg);
	padding: 0 0.25em;
	border-radius: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--separator);
	margin: 2rem 0;
}

/* Лентата отгоре и подвалът се пренасят на тесен екран. Страничният отстъп е
   на ЕДНО място - обвивката - и никога не пада под 16px. */
.wrap {
	max-width: 46rem;
	margin: 0 auto;
	padding-inline: 1rem;
}

.site-header,
.site-footer {
	background: var(--surface-bg);
}

.site-header {
	border-bottom: 1px solid var(--separator);
}

.site-header .wrap,
.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	padding-block: 0.75rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.brand img {
	width: 28px;
	height: 28px;
}

.site-header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.spacer {
	flex: 1 1 auto;
}

/* Бутоните са КОНТУР плюс цвят, не плътно поле - същата рисунка като
   главните бутони в приложението. */
.btn {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--button-border);
	border-radius: 4px;
	background: var(--button-bg);
	color: var(--ink);
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.btn:hover {
	border-color: var(--primary-color);
}

.btn-primary {
	color: var(--intent-primary);
	border-color: var(--intent-primary);
	font-weight: 500;
}

main {
	padding-block: 1.5rem 3rem;
}

h1 {
	font-size: 1.85rem;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

h2 {
	font-size: 1.3rem;
	margin: 2rem 0 0.5rem;
}

h3 {
	font-size: 1.1rem;
	margin: 1.5rem 0 0.4rem;
}

p,
ul,
ol {
	margin: 0 0 1rem;
}

li {
	margin-bottom: 0.35rem;
}

blockquote {
	margin: 1.25rem 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--primary-color);
	background: var(--surface-bg);
}

blockquote p:last-child {
	margin-bottom: 0;
}

.meta,
.breadcrumb {
	color: var(--muted-ink);
	font-size: 0.9rem;
}

.breadcrumb {
	margin-bottom: 1rem;
}

.meta {
	margin-bottom: 1.5rem;
}

.lead {
	color: var(--muted-ink);
	margin-bottom: 2rem;
}

/* Указателят: група, после статиите в нея. */
.entry {
	margin-bottom: 1.25rem;
}

.entry a {
	font-weight: 500;
}

.entry p {
	margin: 0.15rem 0 0;
	color: var(--muted-ink);
	font-size: 0.95rem;
}

.entry .meta {
	display: block;
}

.cta {
	margin: 2.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--separator);
	border-radius: 6px;
	background: var(--surface-bg);
}

.cta h2 {
	margin-top: 0;
}

.cta .buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.related ul {
	list-style: none;
	padding: 0;
}

.site-footer {
	border-top: 1px solid var(--separator);
	font-size: 0.9rem;
}

.site-footer .wrap {
	align-items: flex-start;
	padding-block: 1.5rem 2rem;
}

/* Трите колони на подвала трябва да се съберат в 46rem МИНУС страничния
   отстъп (box-sizing: border-box), тоест в 704px: 3 x 12rem + двете
   разстояния = 616px. При 14rem сборът е 712px и третата колона падаше
   сама на нов ред. */
.site-footer .col {
	flex: 1 1 12rem;
	min-width: 0;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li {
	margin-bottom: 0.2rem;
}