/* скидання стилів  */

@import url("reset.css");

/* підключення шрифтів */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

html {
    scroll-behavior: smooth;
}

body._lock {
    overflow: hidden;
}

.wrapper {
    min-height: 100%;
}

html, body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
    padding: 0px 0px 0px 0px;
}

/*хедер */

body {
    color: #F6F3FF;
    background-color: #7C69B3;
}

.header {}

.header__container {
    display: flex;
    align-items: center;
    min-height: 120px;
    padding-block: 10px;
    column-gap: 15px;
    justify-content: space-between;
}

.header__logo{
    flex-basis: 200px;
    max-width: 100%;
    position: relative;
    z-index: 5;
}

.header__logo img {
    width: 200px;
    height: auto;
    display: block;
}

.header__menu {}

.menu {}

.menu__body {}

.menu__list {
    display: inline-flex;
    display: flex;
    align-items: center;
    column-gap: 6px;
    flex-wrap: wrap;
    row-gap: 3px;
    border-radius: 12px;
    border: 2px solid #A99AD8;
    background: #6956A0;
    padding: 10px;
    justify-content: center;
}

.menu__item {}

.menu__link {
    color: #E4DDFC;
    padding: 14px 24px;
    transition: all 0.3s;
    border-radius: 8px;
    font-weight: 600;
}

.menu__link.active {
        padding: 10px 20px;
        border: 2px solid #A99AD8;
        color: #E6E0FA;
        background-color: #6F5CA8;
}

@media(any-hover: hover) {
    .menu__link:hover {
    background-color: #6F5CA8;
    }
}

.header__actions {}

.actions-header {
    display: flex;
    justify-content: flex-end;
    column-gap: 10px;
    row-gap: 3px;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.actions-header__item {}

.actions-header__item img{
   width: 32px; 
}

.actions-header__icon {}

.icon-menu {
    display: none;
}

@media(max-width: 992px) {
    .header__container {
        min-height: 80px;
    }

    .menu__body {
        position: fixed;
        inset-inline-start: 100%;
        inset-block-start: 0;
        inline-size: 100%;
        block-size: 100%;
        z-index: 2;
        background-color: #7C69B3;
        padding: 140px 15px 30px;
        overflow: auto;
    }

    .menu__body::before {
        content: "";
        inline-size: 100%;
        position: fixed;
        block-size: 120px;
        inset-inline-start: 100%;
        inset-block-start: 0;
        z-index: 3;
        background-color: #6956A0;
        transition: inset-inline-start 0.3s;
    }

    .menu__list {
        flex-direction: column;
        border: none;
        background-color: transparent;
        align-items: flex-end;
        row-gap: 25px;
    }

    .menu__link {
        font-size: 24px;
        padding: 0;
    }

    .menu__link.menu__link.active {
        text-decoration: underline;

    }

    .open-menu .menu__body,
    .open-menu .menu__body::before {
        inset-inline-start: 0;
    }

    .icon-menu {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        flex-basis: 30px;
        height: 30px;
        justify-content: space-between;
    }

    .icon-menu span,
    .icon-menu::before,
    .icon-menu::after {
        content: "";
        flex-basis: 2px;
        flex-shrink: 0;
        height: 2px;
        width: 100%;
        background-color: #E4DDFC;
        transition: all 0.3s;
    }

    .open-menu .icon-menu {
        justify-content: center;
    }

    .open-menu .icon-menu span {
        width: 0;
        height: 0;
    }

    .open-menu .icon-menu::before {
        transform: rotate(-45deg) translateY(2.5px);
    }

    .open-menu .icon-menu::after {
        transform: rotate(45deg) translateY(-2.5px);
    }
.actions-header__item{
    display: none;
}
}

@media(min-width:1160px) {
    .actions-header {
        flex-basis: 200px;
    }

    .menu__link {
        padding: 10px 18px;
    }

    .header__container {
        min-height: 100px;
    }
}

@media(max-width:500px) {
    .actions-header {
        column-gap: 20px;
    }

    .header__logo {
        flex-basis: auto;
        width: 140px;
    }
}

/*Головна сторінка */

.wrapper {
    min-height: 100%;
    overflow: clip;
    display: flex;
    flex-direction: column;
}

.wrapper>main {
    flex-grow: 1;
}

[class*="__container"] {
    max-width: 1625px;
    margin: 0 auto;
    padding-inline: 15px;
    padding-block: 30px;
}

.page__section {
    border-radius: 12px;
    border: solid #A99AD8 2px;
    background-color: #7C69B3;
}

.page__block {
    padding: 50px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.block-2 {
    gap: 20px;
}

.item-page {
    flex: 1 1 275px;
    padding: 15px;
    border-radius: 12px;
    background: #6956A0;
        box-shadow:
        0 4px 3px rgba(0, 0, 0, 0.15),      
        0 8px 5px rgba(121, 88, 160, 0.3);   
}

.item-page:hover {
        background-color: #6F5CA8;
}

/*.item-page-4 {*/
/*    flex: 1 1 350px;*/
/*    padding: 30px;*/
/*}*/

/*.item-page-1 {*/
/*    flex: 1 1 360px;*/
/*    padding: 20px;*/
/*}*/

.item-page__image-wrapper {
    position: relative;
    aspect-ratio: 215 / 252;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    margin-block-end: 20px;
}

/*.item-page__image-wrapper-4 {*/
/*    aspect-ratio: 291 / 252;*/
/*}*/

/*.item-page__image-wrapper-1 {*/
/*    aspect-ratio: 320 / 348;*/
/*}*/

/*.item-page__image-wrapper-2 {*/
/*    aspect-ratio: 320 / 404;*/
/*}*/

/*.item-page__teg {*/
/*    background: #F6F3FF;*/
/*    border-radius: 12px;*/
/*    padding: 10px;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    gap: 10px;*/
/*    align-items: flex-start;*/
/*    justify-content: flex-start;*/
/*    flex-shrink: 0;*/
/*    color: #000;*/
/*    line-height: 150%;*/
/*    font-weight: 600;*/
/*    font-size: 14px;*/
/*    margin-top: 15px;*/
/*}*/

.item-page__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*.item-page__image-wrapper::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: linear-gradient(180deg,*/
/*            rgba(26, 26, 26, 0) 0%,*/
/*            rgba(26, 26, 26, 1) 100%);*/
/*    pointer-events: none;*/
/*}*/

/*.item-page__image-wrapper-1::after {*/
/*    background: none;*/
/*}*/

/*.item-page__text-row {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/

h2.item-page__title {
    color: #F6F3FF;
    text-align: left;
    margin: 0;
}

/*.item-page__text-content {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 6px;*/
/*}*/

/*.item-page__arrow {*/
/*    width: 20px;*/
/*    height: 18px;*/
/*    flex-shrink: 0;*/
/*}*/

.item-page__time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.time-item-left,
.time-item-right {
    /*background: #fff;*/
    /*border-radius: 51px;*/
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 6px;
    gap: 6px;
    
    border: 2px solid #A99AD8;
    /*color: #E6E0FA;*/
    background-color: #6F5CA8;
}

.time-item-left {
    justify-content: flex-start;
}

.time-item-right {
    justify-content: flex-end;
}

.icon,
.icon2 {
    width: 24px;
    height: 24px;
    display: block;
}

.time-text {
    /*color: #000;*/
    color: #E6E0FA;
    font-weight: 500;
    font-size: 14px;
}

/* Для планшетів */
@media (max-width: 1024px) {
    .page__block {
        flex-wrap: wrap;
    }

    .item-page {
        flex: 1 1 calc(50% - 30px);
    }
}

/* Для мобільних */
@media (max-width: 768px) {
    .page__block {
        flex-wrap: wrap;
    }

    .item-page {
        flex: 1 1 100%;
        padding-inline: 15px;
        padding-block: 20px;
    }

    .item-page__text {
        font-size: 16px;
        text-align: center;
    }
}

/*пагінація*/

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.pagination-wrapper .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    gap: 10px;
    color: #E4DDFC;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
}

.pagination-wrapper li {
    background-color: #6956A0;
    border-radius: 12px;
    border: 2px solid #A99AD8;
    transition: background-color 0.3s;
}

.pagination-wrapper li:hover {
    background-color: #6F5CA8;
}

.pagination-wrapper li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #E4DDFC;
    font-weight: 600;
    text-decoration: none;
    padding: 0 12px; /* відступи, щоб текст не прилипав */
}

.pagination-wrapper .prev.page-numbers,
.pagination-wrapper .next.page-numbers {
    font-weight: 700;
    padding: 0 12px;
}

/* Адаптив для мобільних */
@media (max-width: 768px) {
    .pagination-wrapper {
        gap: 6px;
    }
    .pagination-wrapper .page-numbers {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* footer */

.site-footer {
    background: #6956A0;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}

.site-footer__inner {
    max-width: 960px;
    margin: 0 auto;
}

.site-footer__copyright {
    font-size: 16px;
    margin-bottom: 15px;
    color: #E4DDFC;
}

/*Стаття*/

.post-title{
    font-size: 2.5em;
}

/* Контейнер */

.page__header {
    padding: 50px;
    /*margin-bottom: 40px;*/
}

.page__header-inner {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Ліва колонка — картинка */
.page__header-image {
    flex: 0 0 40%;
    max-width: 40%;
}

.page__header-image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}

/* Права колонка */
.page__header-content {
    flex: 1;
    max-width: 55%;
}

.post-title {
    margin-top: 0;
    font-size: 36px;
    font-weight: 700;
}

.post-meta {
    margin: 10px 0 20px;
    font-size: 16px;
    color: #BFB7E6;
}

.post-meta span {
    margin-right: 15px;
}

/* Зміст */
.post-toc {
    padding: 20px;
    background: #6F5CA8;
    border-radius: 12px;
    color: #E4DDFC;

    max-height: 250px;      /* Обмеження висоти */
    overflow-y: auto;       /* Прокрутка */
    scrollbar-width: thin;  
    scrollbar-color: #A992E8 #6F5CA8;
}

/* Chrome / Edge / Safari */
.post-toc::-webkit-scrollbar {
    width: 6px;
}

.post-toc::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

/* Градієнтний фіолетовий скролбар */
.post-toc::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E4DDFC, #A992E8, #6F5CA8);
    border-radius: 10px;
}

/* Hover ефект для скролбара */
.post-toc::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FFFFFF, #C8B9F9, #836AC3);
}

.post-toc ul {
    padding-left: 20px;
    margin: 0;
}

.post-toc li {
    margin-bottom: 8px;
}

.post-toc a {
    color: #ffffff;
    text-decoration: none;
}

.post-toc a:hover {
    text-decoration: underline;
}

/* Мобільна адаптація */

@media (max-width: 768px) {
    .page__header-inner {
        flex-direction: column;
    }

    .page__header-image,
    .page__header-content {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .post-title {
        font-size: 28px;
    }
}

.page__content{
    padding: 0 50px 50px 50px;
}

h2{
    font-size:1.5em;
}


/* === 404 Page === */
.page-404 {
    /*background-color: #111;*/
    background: linear-gradient(135deg, rgb(73, 44, 221) 0%, rgb(173, 56, 226) 100%) !important;
    color: #fff;
    padding: 300px 20px;
    text-align: center;
    font-family: "Fira Code", monospace;
}

.page-404__title {
    font-size: 40px;
    margin-bottom: 20px;
    color: #fff;
}

.page-404__text {
    font-size: 18px;
    margin-bottom: 40px;
    color: #ccc;
}

.page-404__button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #fff;
    color: #111;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-404__button:hover {
    background-color: #eee;
    color: #000;
}

/* Адаптив */
@media (max-width: 600px) {
    .page-404__title {
        font-size: 28px;
    }

    .page-404__text {
        font-size: 16px;
    }
}