/* 
Theme Name:		 Wizart Festival
Theme URI:		 https://petronek.com/
Description:	 Wizart Festival is a child theme of Kadence
Author:			 Petro Nek
Author URI:		  https://petronek.com/
Template:		 kadence
Version:		 1.0.1
Text Domain:	 wiz-art-festival
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* Додайте ці стилі до файлу style.css вашої дочірньої теми */

/* Додайте ці стилі до файлу style.css вашої дочірньої теми */

/* Стилі для блоку дати програми на thumbnail */
.program-date-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
    pointer-events: none;
}

/* Альтернативний стиль - внизу зліва */
.program-date-overlay.bottom-left {
    top: auto;
    bottom: 10px;
    right: auto;
    left: 10px;
}

/* Альтернативний стиль - по всій ширині внизу */
.program-date-overlay.bottom-full {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 15px 10px 10px;
}

/* Забезпечуємо що контейнер thumbnail має position relative */
.entry-featured, 
.post-thumbnail, 
.wp-post-image,
.kadence-thumbnail-container,
.thumbnail-wrapper,
.position-relative {
    position: relative;
}

/* Специфічні селектори для Kadence теми */
.entry-loop-thumbnail,
.loop-entry .post-thumbnail,
.archive .entry-featured,
.blog .entry-featured {
    position: relative;
}

/* Стилі для різних розмірів екранів */
@media (max-width: 768px) {
    .program-date-overlay {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* Ховер ефект для кращої видимості */
.entry:hover .program-date-overlay {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Стилі для світлих тем */
.program-date-overlay.light-theme {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Мініатюри архіву однакового розміру.
   Kadence тримає сталу коробку 3:2 (.post-thumbnail — height:0 + padding-bottom,
   .post-thumbnail-inner — position:absolute; inset:0) і розтягує картинку правилом
   `.post-thumbnail img{height:100%;width:100%}`. Обгортка .program-thumb-wrap стоїть
   між inner і <img>, і власної висоти не мала — тому `height:100%` у картинки
   резолвився в `auto` (відсоток від контейнера з auto-висотою), і кожна лягала своєю
   натуральною висотою: 165, 218, 232, 258, 271, 290px у коробці 258px. Звідси біла
   щілина під одними картками й обріз в інших.
   Даємо обгортці повну висоту коробки, а картинці — явний кроп по центру. */
.post-thumbnail .program-thumb-wrap {
    width: 100%;
    height: 100%;
}

.post-thumbnail .program-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Бейдж має бути над мініатюрою — але ЛИШЕ в межах своєї картки.
   Раніше тут стояло `z-index: 999 !important`. Обгортка .program-thumb-wrap
   (position:relative без z-index) стекінг-контексту не створює, тому ці 999
   потрапляли прямо в кореневий контекст і програвали лише тому, хто там вище.
   Хедер Kadence у корені важить z-index:11 (#masthead{position:relative;z-index:11}) —
   внутрішні 1200 на .site-main-header-wrap сортуються вже ВСЕРЕДИНІ #masthead
   і в корені не рахуються. Отже 999 > 11, і плашки з датами малювались поверх
   меню, щойно картка заїжджала під липкий хедер.
   Лікуємо причину: обгортка створює власний стекінг-контекст (isolation:isolate),
   тож будь-який z-index бейджа тепер замкнений усередині картки. */
.program-thumb-wrap {
    position: relative;
    display: block;
    isolation: isolate;
}

.program-date-overlay {
    z-index: 2;
}


/* Fix for active menu item visibility on mobile */
.mobile-toggle-open .primary-navigation .current-menu-item > a,
.mobile-toggle-open .primary-navigation .current-menu-ancestor > a,
.mobile-toggle-open .primary-navigation .current_page_item > a {
    color: #ffffff !important; /* White text */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle background */
}

/* Alternative with accent color */
.mobile-toggle-open .primary-navigation .current-menu-item > a {
    color: #007cba !important; /* Blue accent color - change to your brand color */
}