/*
Theme Name: Жизнь во время Вспышки
Description: Дочерняя тема блога «Жизнь во время Вспышки»
Author: Ставратий Константин
Template: twentytwentyfive
Version: 1.10.0
Text Domain: vspyshka
*/

/* =========================================
   Светлая карточка для записей и страниц
   ========================================= */

/* Основная обёртка контента записи/страницы */
body.single .wp-block-post-content,
body.page .wp-block-post-content,
body.single .entry-content,
body.page .entry-content {
    max-width: 820px;
    margin: 3rem auto 5rem;
    padding: 3.2rem 3.5rem 3.5rem;

    background: rgba(248, 248, 245, 0.97);
    color: #1c1c1c;

    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

/* Заголовок записи тоже помещаем в карточку */
body.single .wp-block-post-title,
body.page .wp-block-post-title {
    max-width: 820px;
    margin: 3.5rem auto 0;
    padding: 2.8rem 3.5rem 1.5rem;

    background: rgba(248, 248, 245, 0.97);
    color: #111;

    border-radius: 10px 10px 0 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

/* Убираем нижний отступ у заголовка, чтобы он слился с контентом */
body.single .wp-block-post-title + .wp-block-post-content,
body.page .wp-block-post-title + .wp-block-post-content {
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    padding-top: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

/* Типографика внутри карточки */
.wp-block-post-content {
    font-size: 1.125rem;
    line-height: 1.75;
}

.wp-block-post-content p {
    margin-bottom: 1.45em;
}

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    color: #111;
    line-height: 1.3;
}

/* Код */
.wp-block-post-content .wp-block-code,
.wp-block-post-content code {
    background: #ecece8;
    color: #222;
}

/* =========================================
   Карточки в ленте, архивах и поиске
   Twenty Twenty-Five выводит записи списком.
   Оформляем каждый элемент списка целиком,
   чтобы заголовок, анонс, дата и изображение
   выглядели как единая карточка.
   ========================================= */

body:not(.single):not(.page) .wp-block-query .wp-block-post-template {
    gap: 1.5rem;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li {
    box-sizing: border-box;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    list-style: none;

    background: rgba(250, 251, 248, 0.97);
    color: #17212b;
    border: 1px solid rgba(93, 185, 255, 0.24);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(2, 12, 24, 0.18);

    transition: transform 180ms ease, box-shadow 180ms ease,
        border-color 180ms ease;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li:hover {
    transform: translateY(-3px);
    border-color: rgba(68, 181, 255, 0.58);
    box-shadow: 0 18px 42px rgba(2, 12, 24, 0.26);
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li :is(h1, h2, h3, h4, p) {
    color: #17212b;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-title a {
    color: #0d3d63;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-title a:hover {
    color: #008be6;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-date,
body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-date a,
body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-terms {
    color: #536270;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-featured-image {
    overflow: hidden;
    margin-block: 0 1.5rem;
    border-radius: 9px;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    transition: transform 260ms ease;
}

body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li:hover .wp-block-post-featured-image img {
    transform: scale(1.025);
}

@media (max-width: 600px) {
    body.single .wp-block-post-content,
    body.page .wp-block-post-content {
        margin: 1.5rem 1rem 3rem;
        padding: 1.75rem 1.35rem;
    }

    body.single .wp-block-post-title,
    body.page .wp-block-post-title {
        margin: 1.5rem 1rem 0;
        padding: 1.75rem 1.35rem 1rem;
    }

    body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li {
        padding: 1.35rem;
        border-radius: 10px;
    }

    body:not(.single):not(.page) .wp-block-query .wp-block-post-template > li:hover {
        transform: none;
    }
}

/* =========================================
   Светлые информационные панели
   Текст за пределами записей тоже должен
   читаться на технологичном тёмном фоне.
   ========================================= */

:root {
    --vspyshka-panel: rgba(250, 251, 248, 0.96);
    --vspyshka-panel-border: rgba(93, 185, 255, 0.28);
    --vspyshka-panel-text: #17212b;
    --vspyshka-panel-link: #0d3d63;
}

/* Название сайта, заголовки архивов и поиска */
.wp-block-site-title,
.wp-block-query-title,
.wp-block-term-description,
.wp-block-search {
    box-sizing: border-box;
    width: fit-content;
    max-width: min(100%, 820px);
    padding: 0.7rem 1rem;
    color: var(--vspyshka-panel-text);
    background: var(--vspyshka-panel);
    border: 1px solid var(--vspyshka-panel-border);
    border-radius: 9px;
    box-shadow: 0 7px 20px rgba(2, 12, 24, 0.16);
}

.wp-block-site-title a,
.wp-block-query-title,
.wp-block-term-description,
.wp-block-search label,
.wp-block-search input {
    color: var(--vspyshka-panel-text);
}

/* Главное и вложенное меню: каждая ссылка получает собственную плашку */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle {
    margin: 0.2rem;
    padding: 0.45rem 0.7rem;
    color: var(--vspyshka-panel-link) !important;
    background: var(--vspyshka-panel);
    border: 1px solid var(--vspyshka-panel-border);
    border-radius: 7px;
    box-shadow: 0 4px 13px rgba(2, 12, 24, 0.14);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-submenu__toggle:hover {
    color: #008be6 !important;
    border-color: rgba(68, 181, 255, 0.62);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
    padding: 0.45rem;
    background: rgba(239, 246, 250, 0.98) !important;
    border: 1px solid var(--vspyshka-panel-border) !important;
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(2, 12, 24, 0.25);
}

/* Дата, рубрики, автор и навигация по страницам */
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author-name,
.wp-block-query-pagination,
.wp-block-query-no-results,
.wp-block-comments-title,
.wp-block-post-comments-form {
    width: fit-content;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    color: var(--vspyshka-panel-text);
    background: var(--vspyshka-panel);
    border: 1px solid var(--vspyshka-panel-border);
    border-radius: 7px;
    box-shadow: 0 5px 15px rgba(2, 12, 24, 0.13);
}

.wp-block-post-date a,
.wp-block-post-terms a,
.wp-block-post-author-name a,
.wp-block-query-pagination a {
    color: var(--vspyshka-panel-link);
}

/* Подвал остаётся единым блоком, но все его текстовые группы читаемы */
footer .wp-block-group,
footer .wp-block-site-title,
footer .wp-block-navigation {
    color: var(--vspyshka-panel-text);
}

footer .wp-block-group:has(> p),
footer .wp-block-group:has(> .wp-block-heading) {
    padding: 0.9rem 1.1rem;
    background: var(--vspyshka-panel);
    border: 1px solid var(--vspyshka-panel-border);
    border-radius: 9px;
    box-shadow: 0 7px 20px rgba(2, 12, 24, 0.16);
}

@media (max-width: 600px) {
    .wp-block-navigation .wp-block-navigation-item__content,
    .wp-block-navigation .wp-block-navigation-submenu__toggle {
        display: inline-block;
        margin: 0.15rem 0;
    }
}

/* =========================================
   Текст внутри карточки чуть уже самой карточки
   ========================================= */

body.single .wp-block-post-content > *,
body.page .wp-block-post-content > * {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

/* Заголовок тоже немного сужаем по содержимому */
body.single .wp-block-post-title,
body.page .wp-block-post-title {
    /* оставляем max-width: 820px как у тебя */
    /* просто чуть уменьшаем боковые padding, если захочешь ещё точнее */
}

/* =========================================
   Ограничение ширины ленты на главной и в архивах
   ========================================= */

body:not(.single):not(.page) .wp-block-query,
body:not(.single):not(.page) .wp-block-post-template {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* На всякий случай ограничиваем и основной контейнер main */
body:not(.single):not(.page) main.wp-block-group,
body.home main.wp-block-group,
body.blog main.wp-block-group,
body.archive main.wp-block-group {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   Боковая навигация на широких экранах
   Само меню остаётся записью WordPress: его
   порядок и вложенность меняются в редакторе.
   ========================================= */

@media (min-width: 1000px) {
    body {
        padding-left: 19rem;
        overflow-x: clip;
    }

    .vspyshka-sidebar {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        box-sizing: border-box;
        width: 19rem;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        direction: rtl;
        background: rgba(8, 18, 30, 0.94);
        border-right: 1px solid rgba(93, 185, 255, 0.35);
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.28);
    }

    .vspyshka-sidebar > .wp-block-group {
        align-items: stretch;
        flex-direction: column;
        gap: 1.4rem;
        direction: ltr;
    }

    .vspyshka-sidebar .wp-block-site-title {
        width: 100%;
    }

    .vspyshka-sidebar .wp-block-navigation,
    .vspyshka-sidebar .wp-block-navigation__container,
    .vspyshka-sidebar .wp-block-navigation-item {
        width: 100%;
    }

    .vspyshka-sidebar .wp-block-navigation__container {
        align-items: stretch;
        flex-direction: column;
        gap: 0.3rem;
    }

    .vspyshka-sidebar .wp-block-navigation-item__content {
        display: flex;
        justify-content: space-between;
    }

    /* =========================================
       Аккордеон-меню (вместо выпадающего)
       ========================================= */
    
    /* Скрываем подменю по умолчанию */
    .vspyshka-sidebar .wp-block-navigation__submenu-container {
        display: none;
        flex-direction: column;
        gap: 0.2rem;
        margin-top: 0.3rem;
        padding-left: 1rem;
        border-left: 2px solid rgba(93, 185, 255, 0.3);
    }

    /* Показываем подменю при клике на родительский пункт */
    .vspyshka-sidebar .wp-block-navigation-item.has-child.is-open > .wp-block-navigation__submenu-container {
        display: flex;
    }

    /* Стрелочка для пунктов с подменю */
    .vspyshka-sidebar .wp-block-navigation-submenu__toggle {
        cursor: pointer;
        transition: transform 200ms ease;
    }

    .vspyshka-sidebar .wp-block-navigation-item.is-open > .wp-block-navigation-item__content .wp-block-navigation-submenu__toggle {
        transform: rotate(90deg);
    }

    /* Стили для вложенных уровней */
    .vspyshka-sidebar .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        margin-top: 0.2rem;
        padding-left: 0.8rem;
        border-left-color: rgba(93, 185, 255, 0.2);
    }
}