/*
Theme Name: Tutu Sports
Theme URI: https://ponopress.com/themes/tutu/
Author: Pono Press
Author URI: https://ponopress.com/
Description: Tutu Sports is a simple sport news theme to help user curate a simple yet beautiful sport news site effortlessly. It is designed with ease of use in mind and crafted to to be simple. Tutu prioritizes readability and ease of navigation as readers of a sport news site want to get the information right away. Its collection of templates and patterns tailor to different needs. A multitude of possibilities open up with just a few adjustments to color and typography. Tutu comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of Site Editor.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: tutu
Text Domain: tutu-sports
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, full-site-editing, wide-blocks, block-styles, style-variations, blog, portfolio, news
*/

.custom-menu-block.custom-class {
    position: relative;
    z-index: 1000;
}


.custom-menu-block .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}


.custom-menu-block .menu-item {
    position: relative;
}


.custom-menu-block .menu-item > a {
    display: flex;
    align-items: center;
    padding: 12px 0;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
}

.custom-menu-block .menu-item > a:hover {
    color: #0073aa;
}

.custom-menu-block .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.3s ease;
}

.custom-menu-block .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}


.custom-menu-block .sub-menu .menu-item {
    margin: 0;
}

.custom-menu-block .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}


.custom-menu-block .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-menu-block .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}


.custom-menu-block .sub-menu a:hover {
    background: #f5f5f5;
    color: #0073aa;
    padding-left: 25px;
}


.custom-menu-block .sub-menu li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 1095px) {
    nav.custom-menu-block.custom-class {
        display: block;
        width: 100%;
    }
    
    .wp-container-core-group-is-layout-0c0c9e10 {
        position: absolute;
        right: var(--wp--style--root--padding-right);
        top: 15px;
    }
    
    .wp-container-core-group-is-layout-fbcf6490 {
        gap: 0;
    }
}
@media (max-width: 835px) {
    .wp-block-group.alignwide.has-contrast-color.has-base-background-color.has-text-color.has-background.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .wp-container-core-group-is-layout-0c0c9e10 {
        right: 15px;
    }
}
.custom-menu-block.custom-class {
    position: relative;
    z-index: 100;
}

.custom-menu-block .desktop-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

/* Мобильный тоггл (скрыт на десктопе) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1002;
    position: relative;
}

.toggle-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .toggle-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Оверлей */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
}

/* Сайдбар мобильного меню */
.mobile-menu-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 280px;
    height: 100%;
    background: white;
    z-index: 999;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    padding: 20px;
}

.mobile-menu-sidebar.active {
    left: 0;
}

/* Кнопка закрытия */
.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.mobile-menu-close:hover {
    color: #0073aa;
}

/* Мобильное меню */
.mobile-menu {
    list-style: none;
    margin: 40px 0 0 0;
    padding: 0;
}

.mobile-menu .menu-item {
    margin: 0;
    border-bottom: 1px solid #eee;
}

.mobile-menu .menu-item:last-child {
    border-bottom: none;
}

.mobile-menu .menu-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.mobile-menu .menu-item-has-children > a {
    position: relative;
    padding-right: 30px;
}

/* Стрелка для подменю */
.mobile-menu .menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    transition: transform 0.3s ease;
}

.mobile-menu .menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Подменю в мобильной версии */
.mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu .menu-item-has-children.active > .sub-menu {
    max-height: 500px;
}

.mobile-menu .sub-menu .menu-item {
    border-bottom: none;
}

.mobile-menu .sub-menu a {
    display: block;
    padding: 10px 0 10px 15px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    border-left: 2px solid #eee;
}

.mobile-menu .sub-menu a:hover {
    color: #0073aa;
    border-left-color: #0073aa;
}

/* Body lock при открытом меню */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Медиазапросы для адаптивности */
@media (max-width: 768px) {
    /* Показываем тоггл на мобильных */
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Скрываем десктопное меню на мобильных */
    .custom-menu-block.custom-class {
        display: none;
    }
}

@media (min-width: 769px) {
    /* Скрываем мобильный сайдбар на десктопе */
    .mobile-menu-sidebar,
    .mobile-menu-overlay {
        display: none !important;
    }
}
@media (max-width: 768px) {
   nav.custom-menu-block.custom-class {
    display: none;
}
button.mobile-menu-toggle.active {
    z-index: -1;
}
    
    .custom-menu-block .menu-item > a {
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
    

    .custom-menu-block .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f9f9f9;
        display: none;
        padding: 0;
    }
    
    .custom-menu-block .menu-item.active > .sub-menu {
        display: block;
    }
    
    .custom-menu-block .sub-menu a {
        padding-left: 30px;
        border-bottom: 1px solid #eee;
    }
    
    .custom-menu-block .sub-menu .sub-menu a {
        padding-left: 45px;
    }
    
  
    .custom-menu-block .menu-item-has-children > a {
        position: relative;
        padding-right: 40px;
    }
    
    .custom-menu-block .menu-item-has-children > a::after {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid currentColor;
    }
    
    .custom-menu-block .menu-item-has-children.active > a::after {
        transform: translateY(-50%) rotate(180deg);
    }
}

.headline-post-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    gap: 10px;
}

.headline-thumbnail {
    flex-shrink: 0;
}

.headline-thumbnail a {
    display: block;
}

.headline-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.headline-placeholder {
    width: 60px;
    height: 60px;
    background: #f0f0f0;
    border-radius: 8px;
}

.headline-info {
    flex: 1;
    min-width: 0;
}

.headline-title {
    margin: 0 0 5px 0 !important;
    font-size: 14px;
    line-height: 1.4;
}

.headline-title a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.headline-title a:hover {
    color: #0073aa;
}

.headline-time {
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.headline-time .dashicons {
    font-size: 12px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Разделитель */
.wp-block-query .wp-block-separator {
    margin: 5px 0 !important;
}

/* Для мобильных */
@media (max-width: 768px) {
    .headline-img,
    .headline-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .headline-title {
        font-size: 13px;
    }
    
    .headline-time {
        font-size: 11px;
    }
}
.stvg-date-item.today>a>span {
    color: #fff;
}
.headline-time {align-items: baseline;}

@media (max-width: 1100px) {
    main#wp--skip-link--target {
        padding-right: 5px;
        padding-left: 10px;
    }
}
@media (max-width: 781px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    .wp-block-column:not(.hide-on-mobile) {
        flex-basis: 100% !important;
    }
	 .tth p.has-link-color {
        order: 2;
    }
}


.custom-menu-block .menu-item > a {
    font-style: italic;
}

.custom-menu-block ul.menu>.menu-item > a:hover {
    color: #fff;
}
.mobile-menu a {
    font-style: italic;
}
.menu-list, .sports-menu-list, .sports-list, .links-list {
    list-style: none;
    padding-left: 0;
}

/* Добавляем кастомные маркеры через ::before */
.menu-list > li, 
.sports-menu-list > li, 
.sports-list > li, 
.links-list > li {
    position: relative;
    padding-left: 28px; /* Отступ для иконки */
    margin-bottom: 8px;
}

.menu-list > li::before, 
.sports-menu-list > li::before, 
.sports-list > li::before, 
.links-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAfwAAAH8BuLbMiQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACbSURBVDiNrdOxCcJAFAbgT8FGsNYFbBzACawsHEEyg0NYOIGlAzhESntxAgewEm3kbK4ImDMhl4O//eD99x6sMA0h6BK44IUj5l2ABZ4I+OCMZWsgKkUEqimxxqARiMipBgm4YotREzDGLYEE3LHDpBaISLWPVB7YY/YD/OmjLm8chnJfbyNklyjnGxPFldosktxV1sMxbWSc8xfb1sdZ80a05AAAAABJRU5ErkJggg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
span.stvg-channel~p:empty {
    display: none !important;
}