/* ============================================================
   Тема SK-2 — Савеловский колледж (вариант «табличка на фото»)
   Принципиально другая композиция, не перекрас sk / sk-1:
   — шапка: фото + светлая табличка с названием (не бирюзовый плакат)
   — меню тёмное, пункты по центру
   — фон каменный, не бежевый; акцент бордо, не терракота
   Подключение:
   <link rel="stylesheet" href="/assets/css/core.css">
   <link rel="stylesheet" href="/assets/css/themes/sk-2.css">
   ============================================================ */

   :root {
    --sk-primary: #1a4744;
    --sk-primary-dark: #102f2d;
    --sk-primary-hover: #2a6a66;
    --sk-accent: #8e3d3d;
    --sk-accent-hover: #a44b4b;
    --sk-accent-soft: #f3e6e4;
    --sk-gold: #b8945a;
    --sk-bg: #dce3df;
    --sk-surface: #ffffff;
    --sk-surface-alt: #eef2f0;
    --sk-border: #c9d4d0;
    --sk-text: #1c2625;
    --sk-text-muted: #5d6a67;
    --sk-link: #1a4744;
    --sk-radius: 0;
}

/* --- Типографика --- */
html, body, h1, h2, h3, h4, h5, h6, .widget, p {
    color: var(--sk-text);
}

body {
    background-color: var(--sk-bg);
    background-image: none;
}

.container a {
    color: var(--sk-link);
    text-decoration: underline;
    text-decoration-color: rgba(142, 61, 61, 0.4);
    text-underline-offset: 3px;
}

.container a:hover,
.content a:hover,
.post-content a:hover,
.post-title a:hover {
    color: var(--sk-accent);
    text-decoration-color: var(--sk-accent);
}

.post-title a,
.grid-post-title,
.gallery-post-title,
.widget a,
.read-more,
.home-button,
.page-link,
.menu a {
    text-decoration: none;
}

.content > h1,
.content > h2,
.content > h3,
.content h2 {
    color: var(--sk-primary-dark);
}

.content > h2,
.post-content h2 {
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sk-border);
}

/* --- Шапка: фото кампуса + светлая табличка --- */
.header-main {
    height: auto;
    min-height: 250px;
    background-color: var(--sk-primary-dark);
    border-bottom: none;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 250px;
    padding: 48px 44px;
    background-color: var(--sk-primary-dark);
    background-image:
        linear-gradient(100deg, rgba(16, 47, 45, 0.72) 0%, rgba(16, 47, 45, 0.18) 52%, rgba(16, 47, 45, 0.08) 100%),
        url(/uploads/2026/08/kolledzhfrontzdanie.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-right {
    display: none;
}

.header-text {
    display: block;
    position: static;
    margin-top: 0;
    text-align: left;
    white-space: normal;
    max-width: 540px;
    background: rgba(255, 252, 247, 0.95);
    padding: 22px 26px 20px;
    border-top: 5px solid var(--sk-accent);
    box-shadow: 0 16px 40px rgba(16, 47, 45, 0.28);
}

.header-text h1,
.header-text .main-title,
h1.main-title {
    font-size: clamp(22px, 3.2vw, 32px) !important;
    color: var(--sk-primary-dark) !important;
    text-shadow: none !important;
    letter-spacing: 0.01em;
    font-weight: 700;
    text-transform: none;
    line-height: 1.25;
}

.header-text h2,
.header-text .site-tagline {
    display: block;
    margin: 10px 0 0;
    padding: 8px 0 0;
    font-size: 13px;
    color: var(--sk-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top: 1px solid #e4d4c8;
}

/* --- Тёмное меню --- */
.menu-container {
    background-color: var(--sk-primary-dark);
    border-bottom: 3px solid var(--sk-gold);
}

.menu-container.menu-sticky {
    box-shadow: 0 8px 20px rgba(16, 47, 45, 0.22);
}

.menu {
    background: transparent;
}

.menu > ul {
    justify-content: center;
    width: 100%;
}

.menu li {
    text-shadow: none;
    /* display: flex; */
    align-items: center;
}

.menu a,
.submenu a {
    color: #f3efe8;
}

.menu > ul > li > a {
    text-align: center;
    padding: 15px 14px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}

.menu > ul > li:hover > a {
    background-color: transparent;
    color: var(--sk-gold);
    border-bottom-color: var(--sk-gold);
}

.menu li:hover {
    background-color: transparent;
}

.menu .submenu {
    background-color: #0c2423;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    border-top: 3px solid var(--sk-gold);
}

.submenu a {
    color: #f3efe8;
    text-align: left;
}

.submenu a:hover {
    background-color: var(--sk-accent);
    color: #fff;
}

.menu li.active > a,
.menu li.parent-active > a {
    background-color: transparent;
    color: var(--sk-gold);
    border-bottom-color: var(--sk-gold);
}

.menu li.active,
.menu li.parent-active {
    background-color: transparent;
}

.menu li.active:hover,
.menu li.active > a:hover,
.menu li.parent-active:hover,
.menu li.parent-active > a:hover {
    background-color: transparent;
    color: #e8c98a;
}

/* --- Контент --- */
.menu, .container, .footer {
    max-width: 1274px;
}

.container {
    background-color: var(--sk-surface);
    box-shadow: 0 0 0 1px var(--sk-border);
}

.content {
    border-right: 1px solid var(--sk-border);
    padding: 24px 30px;
}

.post-header,
.post-footer {
    border-color: var(--sk-border);
}

.post {
    border-bottom-color: var(--sk-border);
}

.sticky-post {
    border-left: 4px solid var(--sk-accent);
    background: var(--sk-accent-soft);
    padding-left: 16px;
}

.home-post, .single-post {
    padding: unset;
}

.post-title h1,
.post-title h2,
.post-title a {
    color: var(--sk-primary-dark) !important;
}

.post-title a:hover {
    color: var(--sk-accent) !important;
}

.read-more,
.home-button,
.dynamic-form-actions button[type="submit"],
.grid-read-more,
.gallery-read-more {
    background-color: var(--sk-accent);
    color: #fff !important;
    border-radius: var(--sk-radius);
}

.read-more:hover,
.home-button:hover,
.dynamic-form-actions button[type="submit"]:hover,
.grid-read-more:hover,
.gallery-read-more:hover {
    background-color: var(--sk-accent-hover);
    box-shadow: none;
}

/* --- Сайдбар --- */
.sidebar {
    border-left: 1px solid var(--sk-border);
    background: var(--sk-surface-alt);
}

.widget {
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin: 8px 18px 18px;
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--sk-border);
}

.widget h3 {
    color: var(--sk-primary-dark);
    border-bottom: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.widget a {
    color: var(--sk-primary);
}

.widget a:hover {
    color: var(--sk-accent);
    text-shadow: none;
}

.widget-search input[type="text"] {
    background-color: #fff;
    border-color: var(--sk-border);
    color: var(--sk-text);
}

.widget-search button {
    background-color: var(--sk-primary);
    color: #fff;
}

.widget-search button:hover {
    background-color: var(--sk-primary-hover);
}

.widget-categories .category-count {
    background-color: var(--sk-accent);
    color: #fff;
}

/* --- Сворачиваемые блоки --- */
details {
    background-color: var(--sk-surface-alt);
    border-color: var(--sk-border);
}

summary {
    color: var(--sk-primary);
}

summary:hover,
details[open] summary {
    background-color: var(--sk-primary);
    color: #fff;
}

/* --- Цитаты --- */
.quote-block {
    background-color: var(--sk-accent-soft);
    border-left: 4px solid var(--sk-accent);
}

.quote-author,
.quote-category {
    color: var(--sk-text-muted);
}

/* --- Пагинация --- */
.pagination .page-link {
    background-color: #fff;
    color: var(--sk-primary) !important;
    border-color: var(--sk-border);
}

.pagination .page-link:hover {
    background-color: var(--sk-primary);
    border-color: var(--sk-primary);
    color: #fff !important;
}

.pagination .page-link.active {
    background-color: var(--sk-accent);
    border-color: var(--sk-accent);
    color: #fff !important;
}

/* --- Сетка и галерея --- */
.grid-post,
.gallery-post {
    border-color: var(--sk-border);
    background-color: #fff;
}

.grid-post:hover,
.gallery-post:hover {
    border-color: var(--sk-accent);
}

.grid-post-title,
.gallery-post-title {
    color: var(--sk-primary-dark);
}

.wp-gallery img:hover {
    border-color: var(--sk-accent);
}

/* --- Отзывы и формы --- */
.review-form-container {
    background: var(--sk-surface-alt);
    border: 1px solid var(--sk-border);
    border-radius: 0;
}

.review-form input,
.review-form textarea {
    background-color: #fff;
    border-color: var(--sk-border);
}

.review-item {
    background: #fff;
    border-color: var(--sk-border);
    border-left: 3px solid var(--sk-gold);
}

.review-author {
    color: var(--sk-primary);
}

.review-date {
    background-color: var(--sk-accent-soft);
    color: var(--sk-text-muted);
}

.review-content {
    color: var(--sk-text);
}

.after-container-block {
    background-color: var(--sk-surface-alt);
    border-top: 1px solid var(--sk-border);
}

.dynamic-form-wrapper {
    background: var(--sk-surface-alt);
    border: 1px solid var(--sk-border);
}

/* --- Подвал --- */
.footer-container {
    background-color: var(--sk-primary-dark);
    color: rgba(255, 255, 255, 0.88);
    border-top: 3px solid var(--sk-gold);
}

.footer {
    color: rgba(255, 255, 255, 0.88);
}

.footer,
.footer p,
.footer span,
.footer li,
.footer div,
.footer small {
    color: #fff;
}

.footer a {
    color: var(--sk-gold);
}

.footer a:hover {
    color: #fff;
}

/* --- Прочее --- */
.back-to-top {
    background: var(--sk-accent);
}

.back-to-top:hover {
    background: var(--sk-accent-hover);
}

.ticket-button {
    background-color: var(--sk-accent);
    border-radius: 0;
}

.ticket-button:hover {
    background-color: var(--sk-accent-hover);
}

.ticket-button:active {
    background-color: #6e2e2e;
}

/* --- Мобильная версия --- */
@media (max-width: 768px) {
    .header-left {
        aspect-ratio: unset;
        min-height: 220px;
        padding: 24px 16px;
        justify-content: flex-start;
        align-items: flex-end;
        background-position: center;
    }

    .header-main {
        min-height: 220px;
    }

    .header-text {
        max-width: 100%;
        padding: 16px 16px 14px;
    }

    .header-text h1,
    .header-text .main-title,
    h1.main-title {
        letter-spacing: 0;
    }

    .content {
        border-right: none;
        padding: 16px;
    }

    .sidebar {
        border-left: none;
        border-top: 1px solid var(--sk-border);
        background: var(--sk-surface-alt);
    }

    .widget {
        margin: 10px 14px;
    }

    .menu > ul {
        justify-content: flex-start;
        background: var(--sk-primary-dark);
    }

    .menu li {
        display: block;
        align-items: stretch;
    }

    .menu a,
    .submenu a {
        color: #fff;
    }

    .menu > ul > li > a {
        border-bottom: none;
        text-align: left;
        margin-bottom: 0;
    }

    .menu > ul > li:hover > a,
    .menu li.active > a,
    .menu li.parent-active > a {
        color: var(--sk-gold);
        border-bottom-color: transparent;
        background-color: rgba(255, 255, 255, 0.06);
    }

    .submenu {
        background: #163937;
        border-top: none;
    }

    .submenu a:hover {
        background-color: var(--sk-accent);
    }
}