/*
 * common.css — 前後台共用的「殼」樣式
 * -------------------------------------------------------------------------
 * 階段 13 新增。plan/13 第 7.3 節的目錄結構列出 common/css/ 下有
 * admin.css 與 demo.css，沒有預留共用元件樣式的位置，但
 * common/partials/theme_switcher.php 是前後台共用元件，
 * 它的樣式寫進 admin.css 或 site.css 都會變成兩份，所以另立本檔。
 *
 * 載入順序：tokens.css 之後、admin.css / site.css 之前。
 * 前後台的 head.php 都要載入。
 *
 * 規則同 admin.css 與 site.css：色彩一律 var(--*)，
 * 不覆寫 Sneat 與 Bootstrap 的原生變數。
 */

/* ---------------------------------------------------------------------------
 * 1. 深淺色切換鈕
 *
 * 兩個圖示都要放在 DOM 裡（切換時不必重建節點），但同一時間只顯示一個：
 *   深色主題時顯示月亮（代表目前是深色）
 *   淺色主題時顯示太陽
 *
 * 用 CSS 依 :root[data-theme] 決定，不靠 JS 逐一設定 display。
 * head 最前面的 inline script 在任何 CSS 之前就設好了 data-theme，
 * 所以首次繪製時就只會有一個圖示，不會先兩個再消失一個。
 * ------------------------------------------------------------------------ */
.gamebase-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    color: var(--text-secondary);
    text-decoration: none;
}

.gamebase-theme-toggle:hover,
.gamebase-theme-toggle:focus-visible {
    color: var(--accent-hover);
}

.gamebase-theme-toggle .gamebase-theme-icon-dark,
.gamebase-theme-toggle .gamebase-theme-icon-light {
    display: none;
}

:root[data-theme="dark"] .gamebase-theme-toggle .gamebase-theme-icon-dark {
    display: inline-block;
}

:root[data-theme="light"] .gamebase-theme-toggle .gamebase-theme-icon-light {
    display: inline-block;
}

/* ---------------------------------------------------------------------------
 * 2. 殼裡的連結
 *
 * Sneat 的預設連結色是 #696CFF（Bootstrap primary）。實測它在本站的
 * 深色頁底 --bg-page #0F1724 上對比只有 4.48:1，低於指南的 4.5:1 門檻。
 * 殼裡的連結改用 --accent：深色 10.65:1，明顯改善。
 *
 * 只限定在 header 與 footer 這兩個由階段 13 建立的區塊，
 * 不全域覆寫 a，避免影響 Sneat 元件內部的連結外觀。
 * ------------------------------------------------------------------------ */
.frontend-header a:not(.btn),
.frontend-footer a:not(.btn) {
    color: var(--accent);
    text-decoration: none;
}

.frontend-header a:not(.btn):hover,
.frontend-header a:not(.btn):focus-visible,
.frontend-footer a:not(.btn):hover,
.frontend-footer a:not(.btn):focus-visible {
    color: var(--accent-hover);
    text-decoration: underline;
}

/*
 * 站名與主導覽是版面文字而非一般連結，維持正文色，靠位置與字重辨識。
 *
 * 選擇器要比上面那條 .frontend-header a:not(.btn) 更具體才會贏：
 * :not(.btn) 本身算一層 class specificity，所以這裡也要寫 a.navbar-brand
 * 再加 :not(.btn)，湊到 (0,3,1) 才蓋得過 (0,2,1)。
 * 第一次寫成 .frontend-header .navbar-brand（0,2,0）時輸掉，
 * 整排導覽被染成強調色。
 */
.frontend-header a.navbar-brand:not(.btn),
.frontend-header a.navbar-brand:not(.btn):hover,
.frontend-header a.nav-link:not(.btn),
.frontend-header a.nav-link:not(.btn):hover {
    color: var(--text-primary);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 3. 前台頁首與頁尾的表面
 *
 * 用 --bg-surface 與 --border-subtle 做出與頁底可辨識的階層
 * （指南要求 Surface 階層在視覺上可辨識，不是「有不同 Hex 就算不同」）。
 * ------------------------------------------------------------------------ */
.frontend-header {
    background-color: var(--bg-surface);
    border-bottom-color: var(--border-subtle) !important;
}

.frontend-footer {
    background-color: var(--bg-surface);
    border-top-color: var(--border-subtle) !important;
}

/* ---------------------------------------------------------------------------
 * 4. 跳至主要內容
 *
 * 鍵盤使用者按第一次 Tab 時要看得到它，不能只是 visually-hidden。
 * Bootstrap 的 .visually-hidden-focusable 負責顯示與否，這裡只給它外觀。
 * ------------------------------------------------------------------------ */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: absolute;
    z-index: var(--z-toast);
    top: var(--space-1);
    left: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
}