/* ====== layout.css - yfsp.tv Clone - Nav 62px, 1270px Container, Footer ====== */

/* ====== Top Navigation (62px height, fixed) ====== */
.top-nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background: transparent;
    transition: background 0.3s, backdrop-filter 0.3s;
    height: var(--nav-height);
}
.top-nav.scrolled {
    background: var(--bg-nav-solid);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
}

.nav-container {
    max-width: var(--container-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    height: var(--nav-height);
    padding:0 20px;
    gap:16px;
}

/* Logo */
.nav-logo {
    display:flex; align-items:center; gap:8px;
    flex-shrink:0;
}
.nav-logo img { height:35px; width:auto; max-width:200px; border-radius:4px; }
.nav-logo:hover { opacity:0.9; }

/* Nav links next to logo */
.nav-links {
    display:flex; gap:4px; flex-shrink:0;
}
.nav-links a {
    padding:6px 14px;
    border-radius: var(--radius-full);
    font-size:14px; color:var(--text-secondary);
    font-weight:500;
}
.nav-links a:hover, .nav-links a.active {
    color:#fff; background:rgba(255,255,255,0.08);
}

/* Search box */
.nav-search {
    flex:1; max-width:480px; position:relative;
}
.nav-search form {
    display:flex; align-items:center;
    background: var(--search-bg);
    border-radius: var(--radius-full);
    padding:0 14px; height:36px;
    transition: var(--transition);
}
.nav-search form:focus-within {
    background: var(--search-focus);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.nav-search-icon { color:var(--text-muted); font-size:14px; margin-right:8px; flex-shrink:0; }
.nav-search-input { flex:1; height:100%; color:#fff; font-size:13px; }
.nav-search-input::placeholder { color:var(--text-muted); }

/* Hot search dropdown */
.search-hot-dropdown {
    display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border:1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    padding:12px 0; z-index:100;
}
.nav-search:focus-within .search-hot-dropdown { display:block; }
.search-hot-title { padding:0 16px 8px; font-size:12px; color:var(--text-muted); }
.search-hot-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 16px; font-size:13px; color:var(--text-secondary);
}
.search-hot-item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.search-hot-num { width:20px; text-align:center; font-weight:700; font-size:12px; }
.search-hot-num.top1 { color:var(--rank-1); }
.search-hot-num.top2 { color:var(--rank-2); }
.search-hot-num.top3 { color:var(--rank-3); }

/* Right nav actions */
.nav-actions {
    display:flex; align-items:center; gap:2px; flex-shrink:0;
}
.nav-action-item {
    display:flex; align-items:center; gap:4px;
    padding:6px 10px; border-radius:var(--radius-full);
    font-size:13px; color:var(--text-secondary);
    white-space:nowrap;
}
.nav-action-item:hover { color:#fff; background:rgba(255,255,255,0.08); }
.nav-action-item.vip { color:var(--accent-gold); font-weight:600; }
.nav-action-item.midnight { color:#ff69b4; }

/* Menu toggle (mobile) */
.menu-toggle {
    display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px;
}
.menu-toggle span { width:22px; height:2px; background:#fff; border-radius:2px; transition: var(--transition); }

/* ====== Sub Navigation (分类导航) ====== */
.sub-nav {
    position:fixed; top:var(--nav-height); left:0; right:0; z-index:999;
    background: var(--bg-secondary);
    border-bottom:1px solid var(--border-color);
}
.sub-nav-inner {
    max-width: var(--container-width);
    margin:0 auto; padding:0 20px;
    display:flex; align-items:center;
    height: var(--subnav-height);
    gap:2px;
    overflow-x:auto;
    scrollbar-width:none;
}
.sub-nav-inner::-webkit-scrollbar { display:none; }
.sub-nav-item {
    padding:6px 14px; border-radius:var(--radius-full);
    font-size:13px; color:var(--text-secondary);
    white-space:nowrap; flex-shrink:0;
}
.sub-nav-item:hover { color:#fff; }
.sub-nav-item.active {
    color:#fff; background:var(--accent-red); font-weight:500;
}
/* VIP/APP links in sub-nav */
.sub-nav-right {
    margin-left:auto; display:flex; gap:2px; flex-shrink:0;
}
.sub-nav-right .sub-nav-item.vip { color:var(--accent-gold); }
.sub-nav-right .sub-nav-item.midnight { color:#ff69b4; }

/* ====== Main Content ====== */
.main-content {
    margin-top: calc(var(--nav-height) + var(--subnav-height));
    min-height: calc(100vh - var(--nav-height) - var(--subnav-height));
    padding-bottom:40px;
}

/* ====== Footer ====== */
.site-footer {
    background: var(--bg-secondary);
    border-top:1px solid var(--border-color);
    padding:40px 0 20px;
}
.footer-inner {
    max-width: var(--container-width);
    margin:0 auto; padding:0 20px;
}
.footer-links {
    display:grid; grid-template-columns: repeat(3,1fr);
    gap:30px; margin-bottom:30px;
}
.footer-col h4 { font-size:15px; font-weight:600; margin-bottom:14px; color:var(--text-primary); }
.footer-col a { display:block; font-size:13px; color:var(--text-secondary); padding:4px 0; }
.footer-col a:hover { color:var(--accent-red); }

.footer-toolbar {
    display:flex; justify-content:center; gap:20px;
    padding:20px 0; border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
    margin-bottom:20px; flex-wrap:wrap;
}
.footer-toolbar a {
    display:flex; align-items:center; gap:6px;
    font-size:13px; color:var(--text-secondary);
    padding:6px 12px; border-radius:var(--radius-full);
    background:rgba(255,255,255,0.05);
}
.footer-toolbar a:hover { background:rgba(255,255,255,0.1); color:#fff; }

.footer-regions {
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:12px 0;
}
.footer-regions a { font-size:12px; color:var(--text-muted); padding:3px 8px; border-radius:var(--radius-sm); }
.footer-regions a:hover { color:#fff; }
.footer-regions a.active { color:var(--accent-red); }

.footer-copyright {
    text-align:center; font-size:12px; color:var(--text-muted); padding-top:16px; line-height:1.8;
}

/* ====== Mobile Bottom Nav ====== */
.mobile-bottom-nav {
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000;
    background:var(--bg-nav-solid);
    border-top:1px solid var(--border-color);
    justify-content:space-around;
    padding:6px 0 env(safe-area-inset-bottom, 4px);
}
.mobile-bottom-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:10px; color:var(--text-muted); padding:4px 12px;
}
.mobile-bottom-item.active { color:var(--accent-red); }
.mobile-bottom-icon { font-size:20px; }

/* ====== Floating Sidebar ====== */
.floating-bar { position:fixed; right:16px; bottom:100px; z-index:900; display:flex; flex-direction:column; gap:8px; }
.floating-btn {
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:var(--bg-card); border:1px solid var(--border-color);
    border-radius:var(--radius-md); font-size:16px; cursor:pointer;
    transition:var(--transition); color:var(--text-secondary);
}
.floating-btn:hover { background:var(--bg-card-hover); color:#fff; transform:translateY(-2px); }

/* ====== Mobile Menu ====== */
.mobile-menu-overlay { display:none; position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,0.6); }
.mobile-menu-overlay.active { display:block; }
.mobile-menu {
    position:fixed; top:0; right:-280px; width:280px; height:100vh;
    background:var(--bg-secondary); z-index:1101;
    transition: right 0.3s ease; display:flex; flex-direction:column; overflow-y:auto;
}
.mobile-menu.active { right:0; }
.mobile-menu-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; border-bottom:1px solid var(--border-color);
    font-size:16px; font-weight:600;
}
.mobile-menu-close { font-size:22px; cursor:pointer; padding:4px; }
.mobile-menu-links { padding:12px 0; }
.mobile-menu-links a {
    display:block; padding:12px 20px; font-size:15px; color:var(--text-secondary);
    border-bottom:1px solid var(--border-color);
}
.mobile-menu-links a:hover { color:#fff; background:rgba(255,255,255,0.03); }
.mobile-menu-search { padding:16px 20px; }
.mobile-menu-search form { display:flex; gap:8px; }
.mobile-menu-search input {
    flex:1; padding:10px 14px; background:var(--search-bg);
    border-radius:var(--radius-full); color:#fff; font-size:14px;
}
.mobile-menu-search button {
    padding:10px 16px; background:var(--accent-red);
    border-radius:var(--radius-full); color:#fff; font-size:14px;
}