/* assets/chordy-nav.css
   Site-wide navigation shared by every page: the header search and 曲庫 / 歌手 links on desktop, and on phones
   (<= 768px) a bottom tab bar and a full-screen search sheet. Markup comes from
   build_common.py (generated pages) and src/seo/site.mjs (song and artist pages); behaviour from chordy-nav.js. */

:root, [data-theme="day-blue"] {
    --cn-text: #0f172a;
    --cn-muted: #475569;
    --cn-border: #e2e8f0;
    --cn-field: #f1f5f9;
    --cn-surface: rgba(255, 255, 255, 0.97);
    --cn-accent: #0284c7;
    --cn-accent-soft: #e0f2fe;
}
[data-theme="night-green"] {
    --cn-text: #f0f6fc;
    --cn-muted: #8b949e;
    --cn-border: #30363d;
    --cn-field: #161b22;
    --cn-surface: rgba(13, 17, 23, 0.97);
    --cn-accent: #34d399;
    --cn-accent-soft: rgba(52, 211, 153, 0.12);
}

.site-nav-bar { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }

.site-search { position: relative; display: flex; flex: 1; max-width: 520px; margin: 0; }
.site-search input {
    width: 100%; height: 42px; padding: 0 16px 0 42px; border-radius: 999px;
    border: 1px solid var(--cn-border); background: var(--cn-field); color: var(--cn-text);
    font-size: 15px; font-family: inherit; outline: none;
}
.site-search input::placeholder { color: var(--cn-muted); }
.site-search input:focus { border-color: var(--cn-accent); box-shadow: 0 0 0 3px var(--cn-accent-soft); }
.site-search .site-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--cn-muted); pointer-events: none;
}

.site-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
    color: var(--cn-muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.site-nav a:hover { color: var(--cn-text); background: var(--cn-field); }
.site-nav a.active { color: var(--cn-accent); background: var(--cn-accent-soft); }

.site-header .site-nav-bar { margin: 0 20px; }

.btn-site-search {
    display: inline-flex; width: 40px; height: 40px; border-radius: 10px; padding: 0;
    border: 1px solid var(--cn-border); background: transparent; color: var(--cn-text);
    align-items: center; justify-content: center; cursor: pointer;
}

.site-nav a:focus-visible, .btn-site-search:focus-visible, .site-search input:focus-visible,
.mobile-tabbar a:focus-visible, .mobile-tabbar button:focus-visible, .search-sheet button:focus-visible {
    outline: 3px solid var(--cn-accent); outline-offset: 2px;
}

/* Bottom tab bar (phones only) */
.mobile-tabbar {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--cn-surface); border-top: 1px solid var(--cn-border); backdrop-filter: blur(10px);
}
.mobile-tabbar a, .mobile-tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--cn-muted); text-decoration: none; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
}
.mobile-tabbar .active { color: var(--cn-accent); }

/* Full-screen search sheet (opened by the search button and the 搜尋 tab) */
.search-sheet { display: none; position: fixed; inset: 0; z-index: 1500; padding: 16px; background: var(--cn-surface); color: var(--cn-text); }
.search-sheet.open { display: block; }
.search-sheet-row { display: flex; gap: 10px; align-items: center; }
.search-sheet .site-search { max-width: none; }
.search-sheet .btn-site-search { flex-shrink: 0; width: 44px; height: 44px; }
.search-sheet-hint { margin-top: 18px; color: var(--cn-muted); font-size: 14px; line-height: 1.7; }

@media (max-width: 768px) {
    .site-nav-bar { display: none; }
    .mobile-tabbar { display: flex; }
    /* Keep the header on one row: the login button shows its icon only */
    .btn-nav-account .account-text { display: none; }
    body.has-mobile-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    /* The reader's auto-scroll bar (up to 64px tall) sits above the tab bar; the page end must clear both */
    body.has-mobile-tabbar .floating-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
    body.has-mobile-tabbar.has-floating-bar { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* While playing in the reader's 專注閱讀模式, nothing but the sheet */
body.reading-mode .mobile-tabbar { display: none; }
body.reading-mode.has-mobile-tabbar { padding-bottom: 90px; } /* the reader's own room for its auto-scroll bar */
body.reading-mode.has-mobile-tabbar .floating-bar { bottom: 16px; }

@media (prefers-reduced-motion: no-preference) {
    .site-nav a, .site-search input { transition: background-color .2s, color .2s, border-color .2s; }
}