/*
 * Стили календаря дачника.
 *
 * Все правила начинаются с `.ogk` — не ради аккуратности, а потому что тема
 * `ogorod` оформляет `.content li` и рисует собственный маркер через
 * `.content ul > li:before`. На чек-листе (задача 005) короткие селекторы уже
 * проиграли теме, поэтому здесь селекторы заведомо длиннее темовских, а списки
 * явно гасят и маркер темы, и её отступы.
 *
 * Файл подключается только на страницах календаря (`ogk_enqueue_assets()`),
 * поэтому пара правил про крошки идёт без префикса — задеть чужие страницы они
 * не могут.
 */

.ogk {
	--ogk-line: #dfe3e8;
	--ogk-muted: #6b7280;
	--ogk-accent: #2f7a33;
	--ogk-soft: #f4f7f2;
	--ogk-warn: #fdf3dd;
	margin: 0 0 2em;
}

.ogk .ogk-title {
	line-height: 1.2;
	margin: 0 0 0.6em;
}

.ogk .ogk-lead {
	font-size: 1.05em;
	line-height: 1.55;
	margin: 0 0 0.9em;
}

.ogk .ogk-muted {
	color: var(--ogk-muted);
}

/* Врезка «вы смотрите не тот месяц, что сейчас» */

.ogk .ogk-note {
	background: var(--ogk-warn);
	border-radius: 4px;
	line-height: 1.5;
	margin: 0 0 1.2em;
	padding: 0.7em 0.9em;
}

/* Выбор зоны на общей странице */

.ogk .ogk-zones {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0 0 1.8em;
}

.ogk .ogk-zone-card {
	border: 1px solid var(--ogk-line);
	border-radius: 6px;
	padding: 1em 1.1em;
}

.ogk .ogk-zone-card__title {
	font-size: 1.15em;
	line-height: 1.25;
	margin: 0 0 0.35em;
}

.ogk .ogk-zone-card__where {
	color: var(--ogk-muted);
	font-size: 0.9em;
	line-height: 1.45;
	margin: 0 0 0.6em;
}

.ogk .ogk-zone-card__months {
	font-size: 0.95em;
	line-height: 1.5;
	margin: 0;
}

/* Зона, которую ещё не наполнили: приглушена, но остаётся видимой — так честнее,
   чем прятать её совсем и делать вид, что страны за пределами пилота нет. */

.ogk .ogk-zone-card--soon {
	background: var(--ogk-soft);
}

.ogk .ogk-zone-card--soon .ogk-zone-card__title {
	color: var(--ogk-muted);
	font-weight: 600;
}

/* Переключатель зоны */

.ogk .ogk-switch {
	align-items: baseline;
	border-bottom: 1px solid var(--ogk-line);
	border-top: 1px solid var(--ogk-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.7em;
	margin: 0 0 1.8em;
	padding: 0.7em 0;
}

.ogk .ogk-switch__label {
	color: var(--ogk-muted);
	font-size: 0.9em;
}

/*
 * `!important` у display — вынужденно, и только у него.
 *
 * На страницах сайта есть инлайновый стиль
 * `.content ul, .content ol { display: inline-block !important }`.
 * Специфичностью его не перебить: у него `!important`, а у нас нет. Без этой
 * строки переключатель зон разваливается в столбик из семи строк, а списки
 * месяцев ужимаются по содержимому.
 *
 * Правило общее для всех `ul` внутри `.content`, поэтому каждый наш список
 * обязан объявить свой display явно — молчание означает `inline-block`.
 */
.ogk .ogk-switch__list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-switch__list > li {
	font-size: 0.95em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-switch__list > li:before {
	content: none;
}

.ogk .ogk-switch__item.is-current > span {
	font-weight: 700;
}

/* Блок работ */

.ogk .ogk-block {
	margin: 0 0 2em;
}

.ogk .ogk-block__title {
	font-size: 1.3em;
	line-height: 1.25;
	margin: 0 0 0.6em;
}

.ogk .ogk-items {
	display: block !important; /* см. про `.content ul` выше */
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-items > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-items > li:before {
	content: none;
}

/* Пункт: чекбокс слева, содержимое справа. `align-items: baseline` не берём —
   с ним квадратик чекбокса пляшет относительно первой строки при разных
   размерах шрифта; фиксированный отступ сверху предсказуемее. */

.ogk .ogk-item {
	border-bottom: 1px solid var(--ogk-line);
	display: flex;
	gap: 0.7em;
	padding: 0.8em 0;
}

.ogk .ogk-item:last-child {
	border-bottom: none;
}

.ogk .ogk-item__check {
	flex: 0 0 auto;
	height: 1.15em;
	margin: 0.25em 0 0;
	width: 1.15em;
}

.ogk .ogk-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ogk .ogk-item__title {
	cursor: pointer;
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

.ogk .ogk-item__summary {
	line-height: 1.5;
	margin: 0.25em 0 0;
}

.ogk .ogk-item__details {
	margin: 0.4em 0 0;
}

.ogk .ogk-item__details > summary {
	color: var(--ogk-accent);
	cursor: pointer;
	font-size: 0.92em;
}

.ogk .ogk-item__details > p {
	line-height: 1.5;
	margin: 0.4em 0 0;
}

.ogk .ogk-item__link {
	font-size: 0.95em;
	margin: 0.4em 0 0;
}

/* Отмеченный пункт. Не прячем и не зачёркиваем текст целиком: человек
   возвращается на страницу в течение месяца и должен видеть, что именно он
   отметил, а не строй серых полосок. */

.ogk .ogk-item.is-done {
	opacity: 0.55;
}

.ogk .ogk-item.is-done .ogk-item__title {
	text-decoration: line-through;
}

/* Другие месяцы и список месяцев на странице зоны */

.ogk .ogk-months {
	border-top: 1px solid var(--ogk-line);
	margin: 2em 0 0;
	padding: 1em 0 0;
}

.ogk .ogk-months__list {
	display: flex !important; /* см. про `.content ul` выше */
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-months__list > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogk .ogk-months__list > li:before {
	content: none;
}

.ogk .ogk-months__list > li.is-current > span {
	font-weight: 700;
}

/* Оговорка */

.ogk .ogk-disclaimer {
	color: var(--ogk-muted);
	font-size: 0.88em;
	line-height: 1.5;
	margin: 1.8em 0 0;
}

/* Хлебные крошки темы.
   Тема всегда дописывает <span class="last"> с результатом tw_wp_title(), а та
   про виртуальную страницу не знает и отдаёт пустую строку. Звенья мы добавили
   фильтром `tw_breadcrumbs`, а пустой хвост и разделитель перед ним прячем тут:
   подставить туда текст из PHP нельзя, у tw_wp_title() нет фильтра. */

.breadcrumbs .last:empty {
	display: none;
}

.breadcrumbs .separator:has(+ .last:empty) {
	display: none;
}

/* Телефон. Проверять эти правила скриншотом headless Chrome бесполезно: он не
   рисует уже CSS-ширины 500 px, поэтому сюда смотрим в обычном браузере. */

@media ( max-width: 600px ) {
	.ogk .ogk-zones {
		grid-template-columns: 1fr;
	}

	.ogk .ogk-switch {
		display: block;
	}

	.ogk .ogk-switch__label {
		display: block;
		margin: 0 0 0.3em;
	}
}