/*
Theme Name: Финансы по делу
Theme URI: https://finansy-po-dely.ru
Description: Дочерняя тема GeneratePress. Деловая газета, а не сайт банка: тёплая бумага, редакционная антиква, моноширинные цифры.
Author: Азат
Template: generatepress
Version: 1.0
Text Domain: finansy-child
*/

/* ===================================================================
   Палитра и метрика

   Отталкиваемся от печатной деловой прессы, а не от корпоративных
   сайтов банков: тёплая бумага вместо белого, глубокий зелёный вместо
   синего, красная глина для падений. Цифры — моноширинные, чтобы
   колонки чисел в статьях стояли ровно.
   =================================================================== */

:root {
	--paper:        #f4f0e8;
	--paper-raised: #fbf9f4;
	--paper-sunk:   #ece7dc;
	--ink:          #17130f;
	--ink-soft:     #514840;
	--ink-faint:    #6b625a;   /* 5.25:1 на бумаге — подписи мелкие, им нужен запас */
	--rule:         #d9d1c3;
	--rule-strong:  #17130f;

	--accent:       #17513c;
	--accent-warm:  #1e6b4f;
	--down:         #a8391f;
	--gold:         #c9a227;

	--serif: "Spectral", "PT Serif", Georgia, serif;
	--mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

	--measure: 39rem;          /* ~66 знаков — предел комфортного чтения */
	--gap:     clamp(1.5rem, 4vw, 3rem);
	--rhythm:  1.75rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper:        #14120f;
		--paper-raised: #1c1915;
		--paper-sunk:   #100e0c;
		--ink:          #ece5d9;
		--ink-soft:     #b3a999;
		--ink-faint:    #998f81;   /* 5.88:1 в тёмной схеме */
		--rule:         #332e27;
		--rule-strong:  #ece5d9;
		--accent:       #7cc3a2;
		--accent-warm:  #9ad6ba;
		--down:         #e08163;
		--gold:         #d8b448;
	}
}

/* ===================================================================
   Основа
   =================================================================== */

body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.125rem;
	line-height: 1.7;
	font-feature-settings: "onum" 1, "kern" 1;
	-webkit-font-smoothing: antialiased;
}

/* Зерно бумаги: очень слабое, но именно оно убирает ощущение «экрана». */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.site-content,
.inside-article,
.site-footer .inside-site-info {
	background: transparent;
}

::selection {
	background: var(--accent);
	color: var(--paper);
}

/* ===================================================================
   Типографика
   =================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.18;
	color: var(--ink);
	text-wrap: balance;
}

h1, .entry-title { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.75rem; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 2rem; }

/* Короткая зелёная черта над H2 — ритм разделов, как врезки в газете. */
.entry-content h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: .9rem;
	background: var(--accent);
}

p { margin-bottom: var(--rhythm); }

a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size .25s ease, color .25s ease;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--accent-warm);
	background-size: 100% 2px;
}

strong { font-weight: 700; }

blockquote {
	margin: 2.5rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--accent);
	font-size: 1.22em;
	font-style: italic;
	color: var(--ink-soft);
}

.entry-content ul,
.entry-content ol { margin: 0 0 var(--rhythm) 1.35rem; }
.entry-content li { margin-bottom: .55rem; }

.entry-content ul { list-style: none; margin-left: 0; }
.entry-content ul li { padding-left: 1.35rem; position: relative; }
.entry-content ul li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .72em;
	width: .38rem;
	height: .38rem;
	background: var(--accent);
}

/* Цифры: моноширинные и табличные, чтобы ряды чисел не «плясали». */
.entry-content time,
.sz-figure,
table td,
table th {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ===================================================================
   Шапка: сдвоенная линейка газетной первой полосы
   =================================================================== */

.site-header {
	background: var(--paper);
	border-bottom: 3px double var(--rule-strong);
	padding: 1.75rem 0 0;
}

.site-header .inside-header {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding-bottom: 0;
}

.site-branding { text-align: left; }

.main-title,
.site-title {
	font-size: clamp(1.9rem, 5vw, 3rem);
	letter-spacing: -.03em;
	margin: 0;
}

.main-title a { background: none; }

.site-description {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: .55rem;
}

/* Полоска над шапкой: дата выпуска слева, дисклеймер справа. */
.sz-topline {
	border-bottom: 1px solid var(--rule);
	background: var(--paper-sunk);
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.sz-topline__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: .5rem var(--gap);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.main-navigation,
.main-navigation .main-nav > ul {
	background: transparent;
}

.main-navigation .main-nav ul li a {
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding: .55rem .9rem .55rem 0;
	background: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
	color: var(--accent);
}

.main-navigation .main-nav ul li.current-menu-item > a::before {
	content: "▪ ";
	color: var(--accent);
}

/* ===================================================================
   Лента статей
   =================================================================== */

.site-content .content-area { padding-top: 2.5rem; }

article.post {
	border: none;
	border-bottom: 1px solid var(--rule);
	padding: 0 0 2.25rem;
	margin-bottom: 2.25rem;
	box-shadow: none;
	animation: sz-rise .5s cubic-bezier(.2, .7, .3, 1) both;
}

/* Лента проявляется лесенкой — один аккуратный жест на загрузку страницы. */
article.post:nth-child(1) { animation-delay: .02s; }
article.post:nth-child(2) { animation-delay: .08s; }
article.post:nth-child(3) { animation-delay: .14s; }
article.post:nth-child(4) { animation-delay: .20s; }
article.post:nth-child(n+5) { animation-delay: .26s; }

@keyframes sz-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	article.post { animation: none; }
	* { transition: none !important; }
}

.blog article.post .entry-title,
.archive article.post .entry-title {
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	margin: .35rem 0 .6rem;
}

/* Первый материал в ленте — передовица. */
.blog article.post:first-of-type .entry-title {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.entry-meta,
.posted-on,
.byline {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.entry-meta a { background: none; color: var(--ink-faint); }
.entry-meta a:hover { color: var(--accent); }

.cat-links a {
	color: var(--accent);
	font-weight: 500;
}

.cat-links a::before {
	content: "▪ ";
}

.post-image img,
.wp-post-image {
	border: 1px solid var(--rule);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

article.post:hover .wp-post-image { transform: scale(1.015); }

.read-more,
.more-link {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
	background: none;
}

/* ===================================================================
   Статья
   =================================================================== */

.single .entry-content,
.page .entry-content {
	max-width: var(--measure);
}

.single .entry-header,
.page .entry-header { max-width: var(--measure); }

.single .entry-content > p:first-of-type::first-letter {
	float: left;
	font-size: 3.6em;
	line-height: .82;
	padding: .08em .12em 0 0;
	color: var(--accent);
	font-weight: 600;
}

.single .post-image { margin: 2rem 0 2.5rem; }
.single .post-image img { width: 100%; }

/* Блок призыва подписаться и дисклеймер из mu-плагина. */
.entry-content .sz-cta {
	margin: 2.75rem 0;
	padding: 1.4rem 1.6rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--accent);
	font-size: 1rem;
}

.entry-content .sz-disclaimer {
	margin-top: 2.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: .78rem;
	line-height: 1.6;
	color: var(--ink-faint);
	font-style: normal;
}

.entry-content .sz-disclaimer em { font-style: normal; }

/* Врезка с цифрами на дату — у финансовой статьи это главный элемент доверия. */
.sz-figures {
	margin: 2.5rem 0;
	border-top: 2px solid var(--rule-strong);
	border-bottom: 1px solid var(--rule);
	padding: 1rem 0;
	font-family: var(--mono);
	font-size: .92rem;
}

.sz-figures dt {
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.sz-figures dd { margin: 0 0 .75rem; font-size: 1.25rem; }
.sz-up   { color: var(--accent); }
.sz-down { color: var(--down); }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	margin: 2rem 0;
}

table th {
	text-align: left;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom: 2px solid var(--rule-strong);
	padding: .5rem .75rem .5rem 0;
}

table td {
	border-bottom: 1px solid var(--rule);
	padding: .6rem .75rem .6rem 0;
}

/* ===================================================================
   Подвал
   =================================================================== */

.site-footer {
	margin-top: 4rem;
	border-top: 3px double var(--rule-strong);
	background: var(--paper);
	color: var(--ink-soft);
}

.site-footer .footer-widgets,
.site-info {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .04em;
	color: var(--ink-faint);
}

.site-info a { background: none; color: var(--ink-soft); }
.site-info a:hover { color: var(--accent); }

.sz-footer-note {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.6rem var(--gap);
	font-family: var(--mono);
	font-size: .74rem;
	line-height: 1.7;
	color: var(--ink-faint);
	border-bottom: 1px solid var(--rule);
}

/* ===================================================================
   Мелочи
   =================================================================== */

.gp-icon svg { fill: var(--ink-soft); }

button,
.button,
input[type="submit"] {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--accent);
	color: var(--paper);
	border: none;
	padding: .8rem 1.4rem;
	transition: background .2s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover { background: var(--accent-warm); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	body { font-size: 1.06rem; }
	.single .entry-content > p:first-of-type::first-letter { font-size: 3em; }
	.sz-topline__inner { font-size: .62rem; }
}

/* ===================================================================
   Правки после первого визуального прогона

   Что было не так: белая плита контейнера поверх тёплой бумаги убивала
   весь замысел; обложка стояла выше заголовка и занимала пол-экрана;
   рубрика печаталась дважды, один раз с иконкой папки; колонка текста
   жалась к левому краю, оставляя пустое поле справа.
   =================================================================== */

.one-container .site-content,
.separate-containers .inside-article,
.separate-containers .site-main > *,
.inside-article,
.inside-page,
.page-header,
.site-main {
	background-color: transparent;
	box-shadow: none;
}

.site-content { padding-top: 0; }
.separate-containers .site-main { margin: 0; }

/* Колонка статьи стоит по центру полосы, а не жмётся к левому краю. */
.single .entry-header,
.single .entry-content,
.single .post-image,
.single .entry-meta,
.page .entry-header,
.page .entry-content {
	margin-left: auto;
	margin-right: auto;
}

.single .post-image { max-width: var(--measure); }

/* Порядок блоков задаём здесь, а не настройками темы: сначала рубрика и
   заголовок, потом обложка, потом текст. Разметка при этом не важна. */
.single .inside-article {
	display: flex;
	flex-direction: column;
}

.single .entry-header  { order: 1; }
.single .post-image    { order: 2; }
.single .entry-content { order: 3; }
.single .entry-footer,
.single .entry-meta:not(.cat-links) { order: 4; }

/* Обложка всегда 16:9 — столько же, сколько отдаём в Дзен. */
.post-image img,
.wp-post-image {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Рубрику показываем один раз, сверху, без иконки папки. */
.entry-meta .gp-icon,
.cat-links .gp-icon,
.byline,
.entry-footer .cat-links,
.entry-footer .comments-link,
.entry-footer .tags-links { display: none; }

.single .entry-header .cat-links {
	order: -1;
	margin: 0 0 .5rem;
}

.single .entry-title { margin-top: .2rem; }

.posted-on { letter-spacing: .1em; }

/* Кнопка «наверх» в этой вёрстке лишняя. */
.generate-back-to-top { display: none !important; }

/* Буквица чуть спокойнее: три строки вместо четырёх. */
.single .entry-content > p:first-of-type::first-letter {
	font-size: 3.1em;
	line-height: .86;
}

/* Подзаголовок издания под названием. */
.sz-tagline {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	text-align: center;
	margin: .7rem 0 0;
}

.site-header .inside-header { align-items: center; }
.site-branding { text-align: center; }
.main-navigation .inside-navigation { justify-content: center; }
.main-navigation .main-nav ul { justify-content: center; }
.main-navigation .main-nav ul li a { padding: .55rem .9rem; }

/* Лента: обложка рядом с текстом, а не вместо него. */
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15rem;
	grid-template-areas:
		"header image"
		"content image"
		"meta   image";
	column-gap: 2rem;
	align-items: start;
}

.blog .entry-header,  .archive .entry-header  { grid-area: header; }
.blog .post-image,    .archive .post-image    { grid-area: image; margin: 0; }
.blog .entry-summary, .archive .entry-summary,
.blog .entry-content, .archive .entry-content { grid-area: content; }
.blog .entry-meta,    .archive .entry-meta    { grid-area: meta; }

.blog .entry-summary p,
.archive .entry-summary p { margin-bottom: .7rem; color: var(--ink-soft); }

@media (max-width: 720px) {
	.blog .inside-article,
	.archive .inside-article,
	.search .inside-article {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "image" "header" "content" "meta";
		row-gap: .9rem;
	}
	.blog .post-image, .archive .post-image { margin-bottom: .3rem; }
}

/* ===================================================================
   Переопределение палитры GeneratePress

   Тема красит контейнеры своими переменными (--base-3 и компанией), и
   бороться с этим отдельными правилами бессмысленно: проще подменить
   сами переменные, тогда и незнакомые нам блоки темы окажутся в нужных
   цветах, включая тёмную схему.
   =================================================================== */

:root,
body {
	--base-3:    transparent;
	--base-2:    var(--paper);
	--base:      var(--paper-sunk);
	--contrast:  var(--ink);
	--contrast-2: var(--ink-soft);
	--contrast-3: var(--ink-faint);
}

.one-container .container,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.inside-page-header {
	background-color: transparent;
}

/* Подчёркивание — только для ссылок внутри текста. Раньше оно ложилось
   и на заголовки-ссылки, прочёркивая каждую строку насквозь. */
a {
	background-image: none;
	color: var(--ink);
	text-decoration: none;
}

.entry-content p a,
.entry-content li a,
.entry-content blockquote a,
.site-info a {
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size .25s ease, color .25s ease;
}

.entry-title a:hover,
.entry-title a:focus-visible { color: var(--accent); }

/* Рубрика печатается один раз — над заголовком. */
.entry-footer .entry-meta,
.blog .entry-meta .cat-links,
.archive .entry-meta .cat-links,
.single .entry-footer { display: none; }

.blog .entry-header .cat-links,
.archive .entry-header .cat-links { display: block; margin-bottom: .45rem; }

/* Отступы полосы: воздух сверху, но без провала. */
.site-content .content-area { padding-top: 3rem; }
.separate-containers .inside-article,
.one-container .site-content .container { padding-left: 0; padding-right: 0; }

/* ===================================================================
   Ритм полосы, передовица и указатель разделов
   =================================================================== */

/* Между шапкой и первым материалом был провал в полторы сотни пикселей. */
.site-content .content-area { padding-top: 2rem; }
.site-header { padding-bottom: 0; }
.main-navigation { border-bottom: 1px solid var(--rule); }
.main-navigation .main-nav ul li a { padding: .7rem .9rem; }

.sz-tagline { margin: .55rem 0 1.1rem; }

/* Передовица: первый материал ленты идёт крупной картинкой над заголовком,
   как первая полоса газеты. Остальные — компактной строкой с миниатюрой. */
.blog .site-main > article.post:first-of-type .inside-article {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "image" "header" "content" "meta";
	row-gap: .2rem;
}

.blog .site-main > article.post:first-of-type .post-image { margin-bottom: 1.1rem; }
.blog .site-main > article.post:first-of-type .entry-summary { font-size: 1.18rem; }
.blog .site-main > article.post:first-of-type { padding-bottom: 3rem; margin-bottom: 3rem; }

/* Указатель разделов */
.sz-rubrics {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.8rem var(--gap) 1.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1.4rem;
	border-bottom: 1px solid var(--rule);
}

.sz-rubrics__label {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-right: .6rem;
}

.sz-rubrics ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.3rem;
}

.sz-rubrics a {
	font-family: var(--serif);
	font-size: 1rem;
	color: var(--ink-soft);
}

.sz-rubrics a:hover { color: var(--accent); }

.sz-footer-note { border-bottom: none; padding-top: 1.2rem; }

/* ===================================================================
   Обложка и подпись автора

   При размещении «над шапкой» GeneratePress кладёт картинку в другой
   контейнер (.featured-image), поэтому правила для .post-image мимо неё
   пролетали. Учитываем оба класса.
   =================================================================== */

.featured-image,
.post-image { margin: 0 auto 1.6rem; }

.single .featured-image,
.single .post-image {
	max-width: var(--measure);
	order: 2;
}

.featured-image img,
.post-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	border: 1px solid var(--rule);
}

/* Передовица: крупно, но не во весь экран. */
.blog .site-main > article.post:first-of-type .featured-image img,
.blog .site-main > article.post:first-of-type .post-image img {
	max-height: 26rem;
}

.blog .featured-image, .archive .featured-image { grid-area: image; margin: 0; }

/* Автор у всех статей один, в подписи он только шумит. */
.byline,
.entry-meta .author,
.posted-on + .byline { display: none !important; }

/* Воздух между подписью и обложкой. */
.single .entry-header { margin-bottom: 1.4rem; }
.single .featured-image,
.single .post-image { margin-top: .4rem; }

/* На узком экране в верхней полосе оставляем только дату: длинная оговорка
   занимала там две строки и мешала шапке. */
@media (max-width: 600px) {
	.sz-topline__inner span + span { display: none; }
	.sz-topline__inner { justify-content: flex-start; }
}

/* Передовица не должна занимать весь экран: ограничение по высоте,
   кадрируем по центру. Селектор без вложенности — прошлый не попадал. */
.blog .featured-image img,
.blog .post-image img,
.archive .featured-image img,
.archive .post-image img {
	max-height: 24rem;
}

/* Пустая главная: сообщение вместо «Ничего не найдено». */
.sz-empty {
	max-width: var(--measure);
	margin: 3rem auto 5rem;
	padding: 2rem 0;
	border-top: 2px solid var(--rule-strong);
	border-bottom: 1px solid var(--rule);
}

.sz-empty__label {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .8rem;
}

.sz-empty p:last-child { margin-bottom: 0; color: var(--ink-soft); }

.no-results, .page-header-index { display: none; }