/*
Theme Name: Huatihui Sport Theme
Theme URI: https://huatihui-sport.com
Author: HthCoreDev
Author URI: https://huatihui-sport.com
Description: 专业级体育资讯WordPress主题，为体育赛事分析、竞猜社区和娱乐资讯网站量身打造。全面适配Google、Bing搜索引擎结构化数据标准，内置高性能SEO引擎。
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hthcore
Tags: sports, gaming, entertainment, dark-theme, custom-logo, custom-menu, featured-images, responsive-layout, seo-optimized, schema-ready
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: var(--text-color, #fff);
    background-color: var(--body-bg-color, #0b0b1e);
}

.site .site-info-container {
    background-image: var(--banner_1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.admin-bar .page-header .header-container {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .page-header .header-container {
        top: 46px;
    }
}

.entry-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
}

.site-contact-info-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-time,
.icon-eye {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Accessibility: visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Optimized Mobile Hamburger Menu === */
@media only screen and (max-width: 1200px) {
    .header-mobile-menu-icon{display:flex!important;align-items:center;justify-content:center;width:0.64rem;height:0.64rem;border:none;background:none;cursor:pointer;padding:0.06rem;border-radius:0.12rem;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent;margin-left:0.16rem}
    .header-mobile-menu-icon:active{background-color:rgba(255,255,255,.1)}
    .header-mobile-menu-icon svg{color:#fff;width:0.44rem;height:0.44rem}
    .header-mobile-menu-close .header-mobile-menu-show-icon{display:block}
    .header-mobile-menu-close .header-mobile-menu-close-icon{display:none}
    .header-mobile-menu-show .header-mobile-menu-show-icon{display:none}
    .header-mobile-menu-show .header-mobile-menu-close-icon{display:block}
    .page-header .header-cover{background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .page-nav{background:linear-gradient(180deg,#0d1530 0%,#0b0b1e 100%)!important}
    .page-nav .nav-list .nav-item>a,.page-nav .nav-list .nav-item>span{display:flex;align-items:center;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.06)}
    .page-nav .nav-list .nav-item .sub-menu-wrapper{overflow:hidden;transition:height .3s ease}
    .sub-menu-icon{transition:transform .3s ease}
    .sub-menu-icon.active{transform:rotate(135deg)!important}
}
/* === Desktop FAQ: show all answers === */
@media only screen and (min-width:1201px){
    .faq .faq-container .faq-list .faq-item .faq-item-desc p{display:block!important}
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3 i{display:none!important}
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3{cursor:default}
}
/* === Mobile FAQ: accordion === */
@media only screen and (max-width:1200px){
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3{cursor:pointer;user-select:none;-webkit-user-select:none}
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3:active{opacity:.8}
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3 i{transition:transform .3s ease;flex-shrink:0}
    .faq .faq-container .faq-list .faq-item .faq-item-desc h3 i.active{transform:rotate(45deg)}
    .faq .faq-container .faq-list .faq-item .faq-item-desc p.active{display:block;animation:faqSlideDown .3s ease forwards}
}
@keyframes faqSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* === Venue click === */
.venue-container .venue-item{cursor:pointer;transition:all .4s cubic-bezier(.25,.46,.45,.94)}
.venue-container .venue-item:not(.active) .venue-desc{opacity:.7}
.venue-container .venue-item.active .venue-desc{opacity:1}
.venue-container .venue-item:not(.active):hover{filter:brightness(1.1)}
/* === Scroll header === */
.page-header.header-scrolled .header-container{background:rgba(11,11,30,.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.3)}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}