/*
Theme Name: Diia Style
Description: Сучасна WordPress тема у стилі порталу Дія.
Author: Hryhorii
Version: 1.0
Text Domain: diia-style
*/

/* Підключення шрифту e-Ukraine (файли шрифтів потрібно буде додати в папку /assets/fonts/) */
@font-face {
    font-family: 'e-Ukraine';
    src: url('./assets/fonts/e-Ukraine-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'e-Ukraine';
    src: url('./assets/fonts/e-Ukraine-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
:root {
    --diia-bg-color: #F4F5F7;
    --diia-text-color: #000000;
    --diia-accent-color: #000000;
    --diia-font-family: 'e-Ukraine', sans-serif;
}

/* =========================================
   1. КОРОБКОВИЙ МАКЕТ (BOXED LAYOUT)
   ========================================= */
body {
    background-color: #F4F5F7; /* Сірий фон навколо сайту */
    margin: 0;
    padding: 0;
    font-family: 'e-Ukraine', sans-serif;
}

.diia-site-wrapper {
    max-width: 1440px; /* Ширина "коробки" сайту */
    margin: 0 auto;    /* Центрування по екрану */
    background-color: #FFFFFF; /* Білий фон самого сайту */
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); /* Легка тінь для виділення */
}

/* =========================================
   2. БАЗОВІ СТИЛІ ХЕДЕРА ТА БРЕНДИНГ
   ========================================= */
.diia-site-header {
    width: 100%;
    position: relative;
    z-index: 1000; /* Хедер має бути вище за шторку меню */
    background-color: transparent !important; /* На випадок, якщо фон самої коробки хедера просвічується */
}

/* Фон хедера лежить у цьому блоці, щоб закривати шторку, поки вона схована */
.diia-header-fixed {
    position: relative;
    padding: 24px 0;
    transition: background 0.3s ease;
    z-index: 100;
}

.diia-header-front .diia-header-fixed {
    background: linear-gradient(135deg, #74f2ce 0%, #7cffcb 15%, #a2ccf2 45%, #eab0d9 75%, #d495c6 100%);
}

.diia-header-inner .diia-header-fixed {
    background-color: #ffffff;
    border-bottom: 2px solid #000000;
}

.diia-header-container {
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.diia-branding {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.diia-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.diia-site-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diia-site-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    text-decoration: none;
    line-height: 1.2;
}

.diia-site-description {
    font-size: 13px;
    color: #333333;
    margin: 4px 0 0 0;
    font-weight: 400;
    line-height: 1.2;
}

/* =========================================
   3. ЦЕНТРАЛЬНА ЧАСТИНА (МЕНЮ ТА ПОШУК НА ПК)
   ========================================= */
.diia-header-center {
    flex-grow: 1;
    margin-left: 40px;
    position: relative;
    display: flex;
    align-items: center;
}

.diia-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 32px;
}

.diia-nav-list > li > a {
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.diia-nav-list > li > a:hover {
    opacity: 0.6;
}

.diia-dropdown-arrow {
    transition: transform 0.2s;
}
.diia-nav-list > li.active > a .diia-dropdown-arrow {
    transform: rotate(180deg);
}

.diia-search-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    background: transparent;
    display: none;
    z-index: 10;
}

.diia-search-bar.is-active {
    display: block;
}

.diia-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.diia-search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #000;
    font-size: 16px;
    padding: 8px 40px 8px 32px;
    color: #000000;
    outline: none;
    font-family: inherit;
}

.diia-search-form > svg { position: absolute; left: 0; color: #000000; }
.diia-search-close { position: absolute; right: 0; background: none; border: none; cursor: pointer; color: #000000; padding: 4px; }

/* =========================================
   4. КНОПКИ ТА ІНСТРУМЕНТИ СПРАВА
   ========================================= */
.diia-header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

.diia-tool-btn { background: none; border: none; cursor: pointer; padding: 0; color: #000000; display: flex; align-items: center; }
.diia-register-link { text-decoration: none; color: #000; font-weight: 500; font-size: 15px; }
.diia-register-link:hover { text-decoration: underline; }

.diia-login-btn {
    background-color: #000; color: #fff; text-decoration: none;
    padding: 12px 24px; border-radius: 30px; font-weight: 700; font-size: 15px;
    transition: background-color 0.2s ease;
}
.diia-login-btn:hover { background-color: #333; }

/* =========================================
   5. ВИПАДАЮЧЕ МЕГА-МЕНЮ (З-ПІД ХЕДЕРА ПК)
   ========================================= */
.diia-main-navigation .sub-menu {
    display: none; /* Ховаємо стандартні підменю WP */
}

/* Обгортка, що випадає з-під хедера */
.diia-desktop-mega-wrapper {
    background-color: #EBF1F4; /* Світло-блакитний фон як у Дії */
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    display: none; /* Ховаємо, поки JS не додасть клас is-open */
}

.diia-desktop-mega-wrapper.is-open {
    display: block; /* Або flex, залежно від JS */
}

/* Контейнер всередині (щоб меню не розтягувалось безкінечно) */
.diia-mega-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px 60px 20px;
    position: relative;
}

/* Хрестик закриття справа вгорі */
.diia-mega-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #000000;
    transition: transform 0.2s;
}

.diia-mega-close:hover {
    transform: scale(1.1);
}

/* СІТКА (Колонки) */
.diia-mega-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки (можна змінити на 3 або 5) */
    gap: 40px;
}

/* БАТЬКІВСЬКІ ПУНКТИ (Заголовки колонок, напр. "Колектив", "Вчителі") */
.diia-mega-grid > li {
    list-style: none !important;
    margin: 0 !important;
}

.diia-mega-grid > li > a {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    text-decoration: none;
    display: block;
    margin-bottom: 20px;
    font-family: 'e-Ukraine', sans-serif;
}

/* Ховаємо маленькі стрілочки поруч із заголовками колонок */
.diia-mega-grid > li > a .diia-dropdown-arrow {
    display: none !important;
}

/* ДОЧІРНІ ПУНКТИ (Посилання всередині колонок, напр. "Адміністрація") */
.diia-mega-grid > li > ul.sub-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Відстань між посиланнями */
}

.diia-mega-grid > li > ul.sub-menu > li {
    list-style: none !important;
    margin: 0 !important;
}

.diia-mega-grid > li > ul.sub-menu > li > a {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.diia-mega-grid > li > ul.sub-menu > li > a:hover {
    text-decoration: underline;
}

/* =========================================
   6. МОБІЛЬНЕ МЕНЮ ТА АДАПТИВ
   ========================================= */
.diia-mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #000; }

.diia-mobile-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #E8EEF3; z-index: 99999;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.diia-mobile-menu-overlay.is-open { transform: translateX(0); }

.diia-mobile-menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
}

.diia-branding-mobile { gap: 12px; }
.diia-branding-mobile .diia-site-title { font-size: 15px; white-space: nowrap; }

.diia-search-btn-mobile, .diia-mobile-menu-close { background: none; border: none; cursor: pointer; color: #000; padding: 4px; display: flex; }
.diia-mobile-back-btn { background: none; border: none; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 0; }

/* Мобільний пошук */
.diia-mobile-search-container {
    padding: 0 20px; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease; border-bottom: 1px solid transparent;
}
.diia-mobile-search-container.is-open {
    max-height: 80px; padding: 10px 20px 20px; border-bottom: 1px solid #d1d8df;
}
.diia-mobile-search-form { display: flex; align-items: center; position: relative; }
.diia-mobile-search-input {
    width: 100%; background: transparent; border: none; border-bottom: 2px solid #000;
    font-size: 16px; padding: 8px 10px 8px 32px; outline: none; border-radius: 0;
}
.diia-mobile-search-form svg { position: absolute; left: 0; color: #000; }

.diia-mobile-menu-content { flex-grow: 1; padding: 0 20px; }
.diia-mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.diia-mobile-nav-list > li > a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; border-bottom: 1px solid #d1d8df;
    font-size: 18px; color: #000; text-decoration: none; font-weight: 500;
}

.diia-mobile-nav-list .sub-menu {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}
.diia-mobile-nav-list .sub-menu li a { display: block; padding: 16px 0; font-size: 16px; color: #333; text-decoration: none; }

/* Показуємо тільки те підменю, на яке клікнули */
.diia-mobile-nav-list li.mobile-active-sub > a { display: none; }
.diia-mobile-nav-list li.mobile-active-sub > .sub-menu { display: block; }

/* Легкий відступ для посилань 3-го рівня (Адміністрація, Вчителі) */
.diia-mobile-nav-list .sub-menu .sub-menu li a {
    padding-left: 24px;
    font-size: 16px; /* Трохи менший шрифт для підпунктів */
    opacity: 0.9;
}

.diia-mobile-menu-footer {
    padding: 30px 20px; border-top: 1px solid #d1d8df;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.diia-register-link-mobile { text-decoration: none; color: #000; font-weight: 500; font-size: 16px; }
.diia-login-btn-mobile {
    background-color: #000; color: #fff; text-decoration: none;
    padding: 14px 24px; border-radius: 30px; font-weight: 700;
    font-size: 16px; width: 100%; text-align: center;
}

@media (max-width: 991px) {
    .diia-header-center, .diia-header-actions { display: none; }
    .diia-mobile-menu-toggle { display: block; }
    .diia-header-container { padding: 0 20px; }
}

/* =========================================
   TOP BAR (ВЕРХНЯ СМУГА)
   ========================================= */
.diia-top-bar {
    position: relative;
    z-index: 101; /* Поверх усього */
    padding: 12px 0;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* На головній сторінці (де градієнт) робимо топ-бар прозорим */
.diia-header-front .diia-top-bar {
    background: transparent;
}

/* На внутрішніх сторінках робимо його білим */
.diia-header-inner .diia-top-bar {
    background-color: #f4f5f7ce; /* Світло-сірий фон, як рамки по боках */
    border-bottom: 1px solid #e8eef3d7; /* Зберігаємо легкий бордер для внутрішніх */
}

.diia-top-bar .diia-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Іконки соцмереж */
.diia-topbar-socials {
    display: flex;
    gap: 8px;
}

.diia-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #000000;
    border-radius: 8px; /* Закруглені квадрати як на дизайні */
    color: #000000;
    text-decoration: none;
    transition: all 0.2s ease;
}

.diia-social-icon:hover {
    background-color: #000000;
    color: #ffffff;
}

.diia-social-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.diia-social-icon[aria-label="YouTube"] svg {
    fill: currentColor;
    stroke: none;
}

/* Текст справа */
.diia-topbar-right {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
}

/* Адаптив для мобільних (щоб гарно виглядало на телефоні) */
@media (max-width: 991px) {
    .diia-top-bar .diia-header-container {
        padding: 0 20px;
    }
    
    .diia-topbar-right {
        font-size: 13px;
    }
}

/* =========================================
   FOOTER STYLES (DYNAMIC WIDGETS)
   ========================================= */

.diia-site-footer {
    background-color: #000000;
    color: #FFFFFF;
    padding: 60px 0 40px;
}

.diia-footer-container {
    padding: 0 40px;
}

/* Заголовки віджетів (назви меню, розділів) */
.diia-footer-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
}

/* Списки всередині віджетів (меню) */
.diia-footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.diia-footer-widget ul li {
    margin-bottom: 12px;
}

.diia-footer-widget a {
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.diia-footer-widget a:hover {
    color: #FFFFFF;
}

/* Верхня зона (автоматична сітка колонок) */
.diia-footer-top-area {
    display: grid;
    /* Автоматично створює колонки шириною мінімум 200px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    border-bottom: 1px solid #333333;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

/* Нижня зона */
.diia-footer-bottom-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 12px;
    color: #999999;
}

/* =========================================
   MOBILE RESPONSIVE (ФУТЕР)
   ========================================= */
@media (max-width: 991px) {
    .diia-footer-container {
        padding: 0 20px;
    }
    
    .diia-footer-top-area {
        grid-template-columns: 1fr; /* На телефоні 1 колонка */
        gap: 30px;
    }
    
    .diia-footer-bottom-area {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================
   СТОРІНКА НОВИНИ (SINGLE POST - DIIA STYLE)
   ========================================= */

.diia-single-container {
    width: 100%;
    background-color: #FFFFFF;
}

.diia-single-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
}

/* 1. Хлібні крихти */
.diia-breadcrumbs {
    font-size: 14px;
    color: #999999;
    margin-bottom: 40px;
}

.diia-breadcrumbs a {
    color: #999999;
    text-decoration: none;
    transition: color 0.2s;
}

.diia-breadcrumbs a:hover {
    color: #000000;
}

.diia-separator {
    margin: 0 8px;
    color: #CCCCCC;
}

/* 2. Сітка новини */
.diia-single-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.diia-single-main-col {
    flex-grow: 1;
    max-width: 800px; /* Текст не має бути зашироким */
}

/* Заголовок (Притиснутий наліво) */
.diia-single-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px 0;
    color: #000000;
    letter-spacing: -0.02em;
}

/* Мета-дані */
.diia-single-meta {
    font-size: 14px;
    color: #555555;
    margin-bottom: 40px;
    display: flex;
    gap: 20px;
}

.diia-single-meta .diia-category a {
    color: #555555;
    text-decoration: none;
}
.diia-single-meta .diia-category a:hover {
    text-decoration: underline;
}

/* Фото новини */
.diia-single-thumbnail {
    margin-bottom: 40px;
}

.diia-single-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Текст */
.diia-single-content {
    font-size: 20px; /* Великий читабельний текст */
    line-height: 1.6;
    color: #000000;
}

.diia-single-content p {
    margin-bottom: 24px;
}

.diia-single-content h2, .diia-single-content h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* Позначки (Теги) */
.diia-single-tags {
    margin-top: 40px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.diia-single-tags a {
    background-color: #F4F5F7;
    color: #000;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}
.diia-single-tags a:hover { background-color: #E8EEF3; }

/* 3. Права колонка (Поділитися) */
.diia-single-sidebar {
    min-width: 250px;
    position: sticky; /* Щоб залишалася на екрані при скролі */
    top: 40px;
}

.diia-share-box {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 2px solid #000000; /* Лінія під кнопками */
    padding-bottom: 16px;
}

.diia-share-title {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}

.diia-share-buttons {
    display: flex;
    gap: 8px;
}

.diia-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #000000;
    border-radius: 8px;
    color: #000000;
    transition: all 0.2s ease;
}

.diia-share-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diia-share-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

/* =========================================
   4. БЛОК "ОСТАННІ НОВИНИ" (ЗНИЗУ СТОРІНКИ)
   ========================================= */
.diia-latest-news-section {
    background-color: #E8EEF3; /* Світло-сіро-блакитний фон */
    padding: 80px 0;
}

.diia-latest-news-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.diia-latest-news-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 40px 0;
    letter-spacing: -0.02em;
}

.diia-latest-news-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Розбиваємо на 2 рівні половини */
    gap: 60px;
}

/* --- Ліва частина (Велика новина) --- */
.diia-latest-main-img {
    display: block;
    margin-bottom: 20px;
}

.diia-latest-main-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.diia-latest-main-img:hover img {
    opacity: 0.8;
}

.diia-latest-main-date {
    font-size: 14px;
    color: #555555;
    margin-bottom: 12px;
}

.diia-latest-main-title {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.diia-latest-main-title a {
    color: #000000;
    text-decoration: none;
}

.diia-latest-main-title a:hover {
    text-decoration: underline;
}

/* --- Права частина (4 маленькі новини 2х2) --- */
.diia-latest-news-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    align-content: start; /* Притискаємо до верху */
}

.diia-latest-small-item {
    border-top: 2px solid #000000;
    padding-top: 16px;
}

.diia-latest-small-date {
    font-size: 14px;
    color: #555555;
    margin-bottom: 12px;
}

.diia-latest-small-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.diia-latest-small-title a {
    color: #000000;
    text-decoration: none;
}

.diia-latest-small-title a:hover {
    text-decoration: underline;
}

/* =========================================
   5. АДАПТИВ (ДЛЯ МОБІЛОК ТА ПЛАНШЕТІВ - ЗВЕДЕНИЙ)
   ========================================= */
@media (max-width: 1199px) {
    .diia-news-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
        column-gap: 30px;
    }
    .diia-latest-news-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
    }
}

@media (max-width: 991px) {
    .diia-single-inner {
        padding: 40px 20px;
    }
    .diia-single-grid {
        flex-direction: column; /* Ставимо блок Поділитися під текст */
        gap: 40px;
    }
    .diia-single-sidebar {
        width: 100%;
        position: static; /* Відміняємо прилипання */
    }
    .diia-single-title {
        font-size: 32px;
    }
    .diia-latest-news-inner {
        padding: 0 20px;
    }
    .diia-latest-news-layout {
        grid-template-columns: 1fr; /* На планшеті блоки стають один під одним */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .diia-news-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобілці */
    }
    .diia-news-archive-inner {
        padding: 30px 20px;
    }
    .diia-archive-main-title {
        font-size: 40px;
        margin-bottom: 30px;
    }
    .diia-custom-pagination {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .diia-latest-news-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобільному */
    }
    .diia-single-content {
        font-size: 16px;
    }
    .diia-latest-news-right {
        grid-template-columns: 1fr; /* На телефоні сітка 2х2 стає 1 колонкою */
    }
    .diia-latest-news-title {
        font-size: 32px;
    }
}

/* =========================================
   АРХІВ НОВИНИ (NEWS ARCHIVE - DIIA STYLE)
   ========================================= */

.diia-news-archive-container {
    width: 100%;
    background-color: #FFFFFF;
}

.diia-news-archive-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px 40px;
}

/* Хлібні крихти */
.diia-archive-breadcrumbs {
    font-size: 14px;
    color: #999999;
    margin-bottom: 24px;
}

.diia-archive-breadcrumbs a {
    color: #999999;
    text-decoration: none;
}

.diia-archive-breadcrumbs a:hover {
    color: #000000;
}

/* Великий заголовок сторінки */
.diia-archive-main-title {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 48px 0;
    letter-spacing: -0.02em;
}

/* Сітка карток (3 в ряд) */
.diia-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 60px;
    margin-bottom: 60px;
}

/* Картка новини */
.diia-news-card {
    display: flex;
    flex-direction: column;
}

.diia-news-card-img-link {
    display: block;
    margin-bottom: 20px;
    overflow: hidden;
}

.diia-news-card-img-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.diia-news-card-img-link:hover img {
    opacity: 0.8;
}

/* Заголовок у картці */
.diia-news-card-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 auto 0; /* Виштовхує мета-дані до нижнього краю лінії */
    padding-bottom: 20px;
}

.diia-news-card-title a {
    color: #000000;
    text-decoration: none;
}

.diia-news-card-title a:hover {
    text-decoration: underline;
}

/* Мета-дані (Тонка лінія та Дата) */
.diia-news-card-meta {
    border-top: 1px solid #000000; /* Чорна лінія під заголовком */
    padding-top: 12px;
    margin-top: 15px;
}

.diia-card-date {
    font-size: 14px;
    color: #999999;
    font-weight: 400;
}

/* Повідомлення, якщо пусто */
.diia-no-posts {
    grid-column: 1 / -1;
    font-size: 18px;
    color: #555555;
}

/* =========================================
   ПАГІНАЦІЯ ТА КНОПКА "БІЛЬШЕ"
   ========================================= */
.diia-archive-pagination-wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

/* Чорна кнопка "Більше новин" */
.diia-load-more-btn {
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    padding: 16px 48px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.diia-load-more-btn:hover {
    background-color: #222222;
}

/* Стилізація стандартної пагінації WP під Дія-стайл */
.diia-custom-pagination {
    width: 100%;
    border-top: 1px solid #E8EEF3;
    padding-top: 30px;
    display: flex;
    justify-content: center;
}

.diia-custom-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 14px;
    padding: 0 10px;
    height: 36px;
    transition: all 0.2s ease;
}

/* Робимо кружечок ідеально рівним */
.diia-custom-pagination .page-numbers.current {
    background: transparent;
    border: 1px solid #000000;
    border-radius: 50%;
    width: 40px;  /* Фіксована ширина */
    height: 40px; /* Фіксована висота, рівна ширині */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;   /* Прибираємо внутрішні відступи */
}

/* Стрілочки Назад / Вперед */
.diia-custom-pagination .prev,
.diia-custom-pagination .next {
    color: #999999 !important;
    font-weight: 500;
}

.diia-custom-pagination .prev:hover,
.diia-custom-pagination .next:hover {
    color: #000000 !important;
}

.diia-pag-arrow {
    font-size: 16px;
}


/* =========================================
   СТАНДАРТНА СТОРІНКА (PAGE.PHP)
   ========================================= */

.diia-page-container {
    width: 100%;
    background-color: #FFFFFF;
}

/* --- ВЕРХНІЙ БЛОК (СІРИЙ) --- */
.diia-page-hero {
    background-color: #E8EEF3; /* Фірмовий сіро-блакитний */
    padding: 40px 0 80px 0;
    text-align: center;
}

.diia-page-hero-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.diia-page-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.diia-page-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: opacity 0.2s;
}

.diia-page-back-btn:hover {
    opacity: 0.6;
}

.diia-page-date {
    font-size: 14px;
    color: #555555;
}

.diia-page-title {
    font-size: 56px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.diia-page-excerpt {
    font-size: 18px;
    color: #555555;
    max-width: 600px;
    margin: 0 auto;
}

/* --- ОСНОВНИЙ КОНТЕНТ (БІЛИЙ) --- */
.diia-page-content-section {
    padding: 80px 0;
}

.diia-page-content {
    max-width: 1200px; /* Оптимальна ширина для читання */
    margin: 0 auto;
    padding: 0 40px;
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
}

.diia-page-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 60px 0 30px 0;
}

.diia-page-content p {
    margin-bottom: 24px;
}



/* =========================================
   СТОРІНКА ПОШУКУ (SEARCH.PHP)
   ========================================= */

.diia-search-container {
    background-color: #FFFFFF;
    width: 100%;
}

.diia-search-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px 100px 40px;
}

/* --- ВЕЛИКЕ ПОЛЕ ПОШУКУ --- */
.diia-search-header-box {
    margin-bottom: 60px;
}

.diia-page-search-form {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.diia-page-search-input {
    width: 100%;
    font-size: 64px; /* Величезний шрифт як на фото */
    font-weight: 700;
    color: #000000;
    background: transparent;
    border: none;
    border-bottom: 2px solid #E8EEF3; /* Тонка блакитнувата лінія */
    padding: 0 50px 10px 0;
    outline: none;
    transition: border-color 0.2s ease;
}

.diia-page-search-input:focus {
    border-bottom: 2px solid #74f2ce; /* Колір при фокусі */
}

.diia-page-search-btn {
    position: absolute;
    right: 0;
    bottom: 20px;
    background: transparent;
    border: none;
    color: #000000;
    cursor: pointer;
    padding: 0;
}

.diia-search-count-text {
    font-size: 16px;
    color: #555555;
}

/* --- СІТКА: САЙДБАР ТА РЕЗУЛЬТАТИ --- */
.diia-search-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Сайдбар */
.diia-search-sidebar {
    width: 250px;
    flex-shrink: 0;
}

.diia-sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: #000000;
}

.diia-sidebar-filters {
    list-style: none;
    padding: 0;
    margin: 0;
}

.diia-sidebar-filters li {
    margin-bottom: 16px;
}

.diia-sidebar-filters a {
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    transition: color 0.2s;
}

.diia-sidebar-filters a:hover {
    color: #555555;
}

.diia-sidebar-filters a.active {
    font-weight: 700;
    text-decoration: underline; /* Виділяємо активний фільтр */
}

/* Права колонка з результатами */
.diia-search-results-content {
    flex-grow: 1;
}

.diia-results-label {
    font-size: 16px;
    color: #999999;
    border-bottom: 1px solid #E8EEF3;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.diia-search-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.diia-search-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diia-search-item-date {
    font-size: 14px;
    color: #555555;
}

.diia-search-item-title {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.diia-search-item-title a {
    color: #000000;
    text-decoration: none;
}

.diia-search-item-title a:hover {
    text-decoration: underline;
}

.diia-no-results {
    font-size: 18px;
    color: #555555;
}

/* =========================================
   АДАПТИВ ПОШУКУ
   ========================================= */
@media (max-width: 991px) {
    .diia-page-search-input {
        font-size: 40px; /* Менший шрифт на планшеті */
    }
    
    .diia-search-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .diia-search-sidebar {
        width: 100%;
        border-bottom: 2px solid #E8EEF3;
        padding-bottom: 20px;
    }
}

/* =========================================
   СТОРІНКА ПОМИЛКИ (404.PHP)
   ========================================= */

.diia-404-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 65vh; /* Щоб блок займав більшу частину екрану */
    background-color: #FFFFFF;
    padding: 80px 20px;
    text-align: center;
}

.diia-404-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.diia-404-code {
    font-size: 160px; /* Гігантські цифри */
    font-weight: 700;
    line-height: 1;
    color: #000000;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
}

.diia-404-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 16px 0;
}

.diia-404-desc {
    font-size: 18px;
    color: #555555;
    margin: 0 0 40px 0;
}

/* Кнопка "На головну" */
.diia-404-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    color: #FFFFFF;
    text-decoration: none;
    padding: 16px 48px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.diia-404-btn:hover {
    background-color: #333333;
    color: #FFFFFF;
}

/* =========================================
   АДАПТИВ ДЛЯ 404 СТОРІНКИ
   ========================================= */
@media (max-width: 768px) {
    .diia-404-code {
        font-size: 120px;
    }
    
    .diia-404-title {
        font-size: 24px;
    }
    
    .diia-404-desc {
        font-size: 16px;
    }
}

/* Опис категорії на сторінці архіву */
.diia-archive-description {
    font-size: 18px;
    color: #555555;
    margin-top: -24px;
    margin-bottom: 48px;
    max-width: 800px;
    line-height: 1.5;
}

/* =========================================
   ПРЕЛОАДЕР (PRELOADER)
   ========================================= */
.diia-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #FFFFFF;
    z-index: 9999999; /* Космічно високий z-index, щоб перекрити навіть адмін-панель і хедер */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Налаштування твоєї SVG-іконки */
.diia-preloader-svg {
    width: 150px; /* Зміни цей розмір, якщо іконка завелика або замала */
    height: auto;
    display: block;
    /* Жодних CSS-пульсацій не додаємо, оскільки SVG вже анімована */
}

/* Клас, який додається через JS, щоб сховати прелоадер */
.diia-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Щоб кліки проходили крізь нього під час зникнення */
}

/* =========================================
   ФАЙЛИ COOKIE (БАНЕР ТА НАЛАШТУВАННЯ)
   ========================================= */

.diia-cookie-popup {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 100%;
    max-width: 420px;
    background-color: #FFFFFF;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 32px;
    z-index: 9999999;
    font-family: inherit;
}

.diia-cookie-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    padding: 5px;
}

.diia-cookie-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0 0 16px 0;
    padding-right: 24px;
}

.diia-cookie-text {
    font-size: 12px;
    line-height: 1.5;
    color: #000;
    margin: 0 0 24px 0;
}

.diia-cookie-btns {
    display: flex;
    gap: 16px;
}

.diia-cookie-btns .btn-black {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.diia-cookie-btns .btn-black:hover {
    background-color: #333;
}

.diia-cookie-btns .btn-outline {
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.diia-cookie-btns .btn-outline:hover {
    background-color: #F4F5F7;
}

/* --- ГАРМОШКА НАЛАШТУВАНЬ --- */
.diia-cookie-accordion {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 16px 0;
    margin-top: 24px;
}

.diia-cookie-accordion summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    outline: none;
}

.diia-cookie-accordion summary::-webkit-details-marker {
    display: none;
}

.diia-cookie-summary-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 30px;
}

.diia-cookie-acc-title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

/* Плюс та мінус */
.diia-cookie-accordion summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    color: #000;
}

.diia-cookie-accordion[open] summary::after {
    content: '−'; /* Знак мінуса */
}

.diia-cookie-acc-content {
    font-size: 12px;
    line-height: 1.5;
    color: #000;
    margin-top: 16px;
    padding-left: 44px; /* Вирівнюємо текст по заголовку, а не чекбоксу */
}

/* --- КАСТОМНИЙ ЧЕКБОКС (Сірий, бо вимкнений) --- */
.diia-custom-checkbox {
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    cursor: not-allowed;
}

.diia-custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.diia-custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 2px solid #999; /* Сірий колір рамки */
    border-radius: 4px;
}

/* Пташка всередині чекбокса */
.diia-custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #999; /* Сіра пташка */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.diia-custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Адаптив для мобільних */
@media (max-width: 768px) {
    .diia-cookie-popup {
        bottom: 0;
        left: 0;
        max-width: 100%;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }
}

/* =========================================
   ІДЕАЛЬНЕ ЗЛИТТЯ ТА HERO БЛОК (ПОВНИЙ КОД)
   ========================================= */

/* --- 1. Злиття хедера з фоном (ТІЛЬКИ НА ГОЛОВНІЙ) --- */
.home .diia-header-fixed,
.front-page .diia-header-fixed {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.home .diia-site-header,
.front-page .diia-site-header {
    position: relative;
    z-index: 10; 
}

/* --- 2. Головний блок Hero --- */
.home .diia-hero-section,
.front-page .diia-hero-section {
    background: linear-gradient(90deg, #A8FFB3 0%, #A8D1FF 50%, #FFA8E4 100%) !important;
    margin-top: -90px !important; /* Підтягуємо під прозорий хедер */
    padding-top: 180px !important; /* Відступ від верху, щоб контент не наліз на меню */
    padding-bottom: 100px !important; /* Відступ знизу до наступного блоку */
    position: relative;
    z-index: 1;
}

/* Контейнер всередині Hero для жорсткого центрування */
.diia-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Гарантує, що текст і пошук будуть строго по центру */
    text-align: center;
}

/* Головний заголовок */
.diia-hero-title {
    font-size: 64px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Описовий текст під заголовком */
.diia-hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    max-width: 800px;
    margin: 0 0 48px 0; /* Відступ вниз до поля пошуку */
    line-height: 1.5;
    opacity: 0.8; /* Злегка приглушуємо для контрасту з головним заголовком */
}

/* --- 3. Форма пошуку --- */
.diia-hero-search-form {
    width: 100%;
    max-width: 650px; /* Компактна ширина */
    position: relative;
    display: flex;
    align-items: center;
}

.diia-hero-search-input {
    width: 100%;
    padding: 18px 60px 18px 24px;
    font-size: 16px;
    font-family: 'e-Ukraine', sans-serif;
    color: #000000;
    background-color: #FFFFFF;
    border: none !important; /* Вбиваємо всі рамки */
    outline: none !important; /* Вбиваємо синю лінію фокусу браузера */
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Легка стартова тінь */
    -webkit-appearance: none;
    transition: box-shadow 0.3s ease;
}

/* Замість лінії при фокусі робимо тінь трохи більшою */
.diia-hero-search-input:focus {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1); 
}

.diia-hero-search-input::placeholder {
    color: #999999;
    font-family: 'e-Ukraine', sans-serif;
}

.diia-hero-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000000;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    outline: none !important;
}

.diia-hero-search-btn svg {
    width: 20px;
    height: 20px;
}

.diia-hero-search-btn:hover {
    background-color: #333333;
}

/* --- 4. Адаптив для телефонів --- */
@media (max-width: 768px) {
    .home .diia-hero-section,
    .front-page .diia-hero-section {
        padding-top: 140px !important;
        padding-bottom: 60px !important;
    }
    
    .diia-hero-title {
        font-size: 40px;
    }
    
    .diia-hero-subtitle {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .diia-hero-search-input {
        padding: 16px 60px 16px 20px;
    }
    
    .diia-hero-search-btn {
        width: 36px;
        height: 36px;
        right: 6px;
    }
}

/* =========================================
   БЛОК ОСТАННІХ НОВИН (НА ГОЛОВНІЙ)
   ========================================= */

.diia-home-news-section {
    background-color: #000000;
    color: #FFFFFF;
    padding: 100px 20px;
}

.diia-home-news-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Шапка блоку --- */
.diia-home-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

.diia-home-news-title {
    font-size: 56px;
    font-weight: 700;
    margin: 0;
    color: #FFFFFF;
    letter-spacing: -0.02em;
}

.diia-home-news-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.2s;
}

.diia-home-news-all:hover {
    opacity: 0.6;
}

/* --- Основна сітка (Ліва і Права частини) --- */
.diia-home-news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Дві рівні колонки */
    gap: 60px;
}

/* --- Велика новина зліва --- */
.diia-home-news-featured {
    display: flex;
    flex-direction: column;
}

.diia-news-featured-img {
    display: block;
    width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 4px; /* Легке округлення, якщо потрібно */
}

.diia-news-featured-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.diia-news-featured-img:hover img {
    transform: scale(1.03); /* Ефект збільшення при наведенні */
}

.diia-news-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #222222;
}

.diia-news-featured-date {
    font-size: 14px;
    color: #888888;
    margin-bottom: 12px;
}

.diia-news-featured-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.diia-news-featured-title a {
    color: #FFFFFF;
    text-decoration: none;
}

.diia-news-featured-title a:hover {
    text-decoration: underline;
}

/* --- Список маленьких новин справа --- */
.diia-home-news-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Ще 2 колонки всередині правої частини */
    grid-template-rows: min-content min-content;
    gap: 40px 40px; /* Відступи між рядками та колонками */
}

.diia-home-news-item {
    border-top: 1px solid #FFFFFF; /* Та сама біла лінія зверху */
    padding-top: 16px;
}

.diia-news-item-date {
    font-size: 14px;
    color: #888888;
    margin-bottom: 12px;
}

.diia-news-item-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.diia-news-item-title a {
    color: #FFFFFF;
    text-decoration: none;
}

.diia-news-item-title a:hover {
    text-decoration: underline;
}

/* --- Адаптив для телефонів і планшетів --- */
@media (max-width: 991px) {
    .diia-home-news-grid {
        grid-template-columns: 1fr; /* На планшеті все стає в одну колонку */
        gap: 50px;
    }
    
    .diia-home-news-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .diia-home-news-section {
        padding: 60px 20px;
    }
    
    .diia-home-news-list {
        grid-template-columns: 1fr; /* На телефоні дрібні новини йдуть одна під одною */
        gap: 30px;
    }
    
    .diia-news-featured-title {
        font-size: 24px;
    }
}

/* =========================================
   БЛОК ПОСЛУГ (СІТКА З ЛІНІЯМИ)
   ========================================= */

.diia-services-catalog {
    background-color: #EAECEB; /* Характерний світло-сірий фон Дії */
    padding: 100px 20px;
}

.diia-services-container {
    max-width: 1200px;
    margin: 0 auto;
}

.diia-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 40px; /* Відступи між колонками та рядками */
    grid-auto-flow: dense; /* Дозволяє білій картці зайняти своє місце без розривів */
}

/* --- Стандартна картка --- */
.diia-service-item {
    border-top: 2px solid #000000; /* Чорна лінія зверху */
    padding-top: 24px;
    text-decoration: none;
    color: #000000;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
}

.diia-service-item:hover .diia-service-title {
    text-decoration: underline; /* Підкреслення при наведенні, як у Дії */
}

.diia-service-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.diia-service-desc {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #111111;
}

/* --- Велика Біла Картка --- */
.diia-service-featured-card {
    background-color: #FFFFFF;
    padding: 40px;
    grid-row: span 2; /* Розтягуємо картку на 2 ряди у висоту */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.diia-sfc-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #000000;
}

.diia-sfc-desc {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 40px 0;
    color: #111111;
}

.diia-sfc-btn {
    background-color: #000000;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: 50px;
    margin-top: auto; /* Притискає кнопку донизу, якщо тексту мало */
    transition: background-color 0.2s;
}

.diia-sfc-btn:hover {
    background-color: #333333;
}

/* --- Адаптив --- */
@media (max-width: 991px) {
    .diia-services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшеті */
    }
}

@media (max-width: 768px) {
    .diia-services-catalog {
        padding: 60px 20px;
    }
    .diia-services-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобільному */
        gap: 30px;
    }
    .diia-service-featured-card {
        grid-row: auto;
        padding: 30px 20px;
    }
    .diia-sfc-title {
        font-size: 26px;
    }
}

/* =========================================
   СЛАЙДЕР КОРИСНИХ ПОСИЛАНЬ
   ========================================= */

.diia-links-slider-section {
    background-color: #F4F5F7; /* Легкий сірий фон, або постав #FFFFFF, якщо треба білий */
    padding: 100px 20px;
    overflow: hidden; /* Щоб картки не вилазили за екран */
}

.diia-slider-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Шапка зі стрілками */
.diia-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.diia-slider-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 400px;
    margin: 0;
    color: #000000;
}

.diia-slider-arrows {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.diia-arrow-btn {
    background: transparent;
    border: none;
    color: #000000;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

.diia-arrow-btn:hover {
    opacity: 0.5;
}

/* Трек карток */
.diia-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth; /* Плавний скрол при кліку на стрілки */
    scroll-snap-type: x mandatory; /* Прилипання карток (опціонально) */
    padding-bottom: 20px; /* Місце під картками */
    
    /* Ховаємо системний скролбар */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.diia-slider-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Сама картка */
.diia-slide-card {
    flex: 0 0 280px; /* Фіксована ширина кожної картки */
    scroll-snap-align: start; /* Прилипає до початку */
    text-decoration: none;
    color: #000000;
    display: flex;
    flex-direction: column;
}

.diia-slide-img {
    width: 100%;
    height: 180px;
    margin-bottom: 24px;
    overflow: hidden;
    background-color: #EAECEB;
}

.diia-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.diia-slide-card:hover .diia-slide-img img {
    transform: scale(1.05); /* Ефект при наведенні */
}

.diia-slide-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.diia-slide-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* Кастомний скролбар (лінія знизу) */
.diia-custom-scrollbar {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.diia-scrollbar-track {
    width: 60%;
    height: 2px;
    background-color: #D8D8D8;
    position: relative;
    border-radius: 2px;
}

.diia-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000000;
    border-radius: 2px;
    transition: left 0.1s ease, width 0.1s ease; /* Плавний рух повзунка */
}

/* Адаптив */
@media (max-width: 768px) {
    .diia-slider-title {
        font-size: 40px;
    }
    .diia-slide-card {
        flex: 0 0 240px; /* На мобільному картки трохи вужчі */
    }
    .diia-scrollbar-track {
        width: 100%; /* Смужка на всю ширину на мобільному */
    }
}

/* =========================================
   БЛОК: ПИТАННЯ ТА ВІДПОВІДІ
   ========================================= */

.diia-faq-section {
    background-color: #EBF1F4; /* Світло-сіро-блакитний фон */
    padding: 100px 20px;
}

.diia-faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.diia-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.diia-faq-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
    margin: 0;
}

.diia-faq-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.2s;
    margin-bottom: 10px;
}

.diia-faq-all-link:hover {
    opacity: 0.6;
}

.diia-faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
}

.diia-faq-column {
    display: flex;
    flex-direction: column;
}

/* Заголовок категорії (Назва меню) */
.diia-faq-col-title {
    font-size: 16px;
    font-weight: 500;
    color: #7A868C; /* Сірий текст */
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #84C0C9; /* Блакитна лінія як на скріні */
}

/* Список питань */
.diia-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.diia-faq-list li a {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    line-height: 1.4;
    transition: text-decoration 0.2s;
}

.diia-faq-list li a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .diia-faq-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .diia-faq-section { padding: 60px 20px; }
    .diia-faq-header { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
    .diia-faq-title { font-size: 40px; }
    .diia-faq-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================
   АКОРДЕОНИ (ШОРТКОД)
   ========================================= */

.diia-accordion {
    border-top: 1px solid #000000;
    margin: 0;
}

/* Останній елемент отримує лінію і знизу */
.diia-accordion:last-child {
    border-bottom: 1px solid #000000;
}

.diia-accordion-header {
    width: 100%;
    background-color: transparent;
    color: #000000;
    border: none;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: left;
}

.diia-accordion-title {
    font-size: 24px;
    font-weight: 500;
    font-family: 'e-Ukraine', sans-serif;
}

.diia-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- СТАН ПРИ НАВЕДЕННІ (Hover) --- */
.diia-accordion-header:hover {
    background-color: #000000;
    color: #FFFFFF;
    /* Зсуваємо текст від краю чорного фону для краси */
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    width: calc(100% + 40px);
}

/* --- ВІДКРИТИЙ СТАН --- */
.diia-accordion.is-open .diia-accordion-header {
    background-color: transparent;
    color: #000000;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    width: 100%;
}

/* Плавна анімація розкриття (CSS Grid) */
.diia-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

.diia-accordion-inner {
    overflow: hidden;
    padding: 0; /* Спочатку відступів немає */
    font-size: 16px;
    line-height: 1.6;
    transition: padding 0.3s ease-out;
}

/* Коли відкрито — контент виїжджає */
.diia-accordion.is-open .diia-accordion-content {
    grid-template-rows: 1fr;
}

.diia-accordion.is-open .diia-accordion-inner {
    padding: 24px 0 48px 0; /* З'являються відступи зверху і знизу */
}

/* Адаптив для телефонів */
@media (max-width: 768px) {
    .diia-accordion-title { font-size: 20px; }
    .diia-accordion-header:hover {
        padding-left: 16px;
        padding-right: 16px;
        margin-left: -16px;
        width: calc(100% + 32px);
    }
}

/* =========================================
   ПРИМУСОВА СТИЛІЗАЦІЯ АКОРДЕОНІВ
   ========================================= */

/* Знаходимо будь-який контейнер акордеона (якщо це блок 'details' або 'accordion') */
.wp-block-details, 
.wp-block-group details,
.diia-faq-block { 
    border-top: 1px solid #000000 !important;
    margin: 0 !important;
}

/* Останній елемент отримує лінію знизу */
.wp-block-details:last-of-type {
    border-bottom: 1px solid #000000 !important;
}

/* Стиль кнопки (заголовка) */
.wp-block-details summary,
.wp-block-details > summary {
    padding: 24px 0 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    font-family: 'e-Ukraine', sans-serif !important;
    color: #000000 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
}

/* Приховуємо стандартні іконки браузера */
.wp-block-details summary::marker, 
.wp-block-details summary::-webkit-details-marker {
    display: none !important;
}

/* Додаємо наш плюс/мінус вручну */
.wp-block-details summary::after {
    content: '+' !important;
    font-size: 30px !important;
}

.wp-block-details[open] summary::after {
    content: '−' !important;
}

/* Чорний ховер */
.wp-block-details summary:hover {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: -20px !important;
    width: calc(100% + 40px) !important;
}

/* --- Гумова типографіка --- */

.diia-site-title {
    /* Мін: 14px, Ідеал: 3vw, Макс: 20px */
    font-size: clamp(14px, 3vw, 20px);
    white-space: nowrap;
}

.diia-site-description {
    /* Гумовий розмір залишаємо без змін */
    font-size: clamp(10px, 1.5vw, 13px);
    
    /* Дозволяємо тексту вільно переноситися на нові рядки */
    white-space: normal; 
    
    /* Зберігаємо оригінальний міжрядковий інтервал для зручного читання */
    line-height: 1.2; 
}

.diia-single-title {
    /* Мін: 24px, Ідеал: 5vw, Макс: 48px */
    font-size: clamp(24px, 5vw, 48px);
}

.diia-hero-title {
    /* Мін: 32px, Ідеал: 6vw, Макс: 64px */
    font-size: clamp(32px, 6vw, 64px);
}

@media (max-width: 768px) {
    /* 1. Дозволяємо блоку стискатися, щоб він не виштовхував меню */
    .diia-branding {
        flex-shrink: 1 !important;
        min-width: 0; /* Обов'язково для Flexbox, щоб текст міг переноситися */
    }

    /* 2. Додаємо відступ справа, щоб текст не прилипав до гамбургера */
    .diia-site-info {
        min-width: 0;
        padding-right: 16px; 
    }

    /* 3. Гумовий опис із правильним переносом */
    .diia-site-description {
        font-size: clamp(10px, 2.5vw, 13px) !important; /* Чуть краща пропорція для мобілок */
        white-space: normal !important; 
        line-height: 1.3 !important;
    }
}

.diia-page-title {
    /* Робимо розмір гумовим: Мін: 32px, Ідеал: 6vw, Макс: 56px */
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 700;
    color: #000000;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
    
    /* Страховка: примусово переносити слово, якщо воно довше за ширину екрана */
    word-break: break-word; 
    hyphens: auto; 
}

wp-block-diia-accordion a {
    color: #000000 !important;
    text-decoration: none !important;
    display: inline-block;
    margin-bottom: 8px; /* відступ між рядками */
}

/* Прибираємо підкреслення при наведенні мишкою (за бажанням можна змінити колір) */
.diia-accordion a:hover, 
.diia_accordion a:hover,
.wp-block-diia-accordion a:hover {
    color: #000000 !important; /* Залишається чорним. Якщо треба інший — замініть код кольору */
    text-decoration: none !important;
}

/* =========================================
   КАСТОМНИЙ ФУТЕР (ДІЯ СТАЙЛ)
   ========================================= */
.diia-footer-wrapper {
    font-family: 'e-Ukraine', Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding-top: 24px;
    padding-bottom: 24px;
    overflow: hidden;
}

/* --- ВЕРХНІЙ РЯД (Логотипи) --- */
.diia-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 24px;
    margin-bottom: 24px;
    width: 100%;
    gap: 20px;
}

.diia-top-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.diia-top-left img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.diia-main-logo-text {
    color: #A0A0A0;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    margin: 0;
}

.diia-main-logo-text strong {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.diia-top-right {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 20px;
    flex-wrap: wrap; 
    flex: 1; 
    margin-left: 40px; 
}

.diia-top-right a {
    display: flex;
    align-items: center;
}

.diia-top-right img {
    height: 55px; /* ЗБІЛЬШЕНО, щоб компенсувати прозорий фон на логотипах МОН */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.diia-top-right a:hover img {
    opacity: 1;
}

/* --- НИЖНІЙ РЯД (Розробник та Ліцензія) --- */
.diia-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Вирівнювання строго по верхньому краю */
    width: 100%;
    gap: 20px;
}

.diia-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1; 
    min-width: 0; 
}

.diia-col-left { align-items: flex-start; text-align: left; }
.diia-col-center { align-items: center; text-align: center; }
.diia-col-right { align-items: flex-end; text-align: right; }

.diia-label {
    color: #8C939B; 
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    display: block;
}

.diia-sponsor-logo {
    height: 75px; 
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1); 
    display: block;
    margin-top: 4px; 
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.diia-sponsor-logo:hover {
    opacity: 1;
}

.diia-developer-name {
    color: #FFFFFF;
    font-size: 20px; 
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.5;
}

.diia-license-text {
    color: #8C939B;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* --- АДАПТИВ --- */
@media (max-width: 1100px) {
    .diia-footer-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .diia-top-right {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .diia-footer-top {
        align-items: center;
        text-align: center;
        gap: 32px;
    }
    .diia-top-left {
        flex-direction: column;
        text-align: center;
    }
    .diia-main-logo-text {
        text-align: center;
    }
    .diia-top-right {
        justify-content: center;
        gap: 16px;
    }
    .diia-top-right img {
        height: 45px;
    }
    .diia-footer-bottom {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .diia-col-left, .diia-col-center, .diia-col-right {
        align-items: center;
        text-align: center;
    }
}