/* =================================================================
 * Inkwell Theme — unifies sub-pages with the homepage light style.
 *
 * The 7 sub-pages (unlimited, 6-word-wordle, six-letter-wordle,
 * wordle-6-letter, wordle6, word-lists, es/word-lists) load the old
 * dark "unified-theme.css" and additionally bake dark colors into
 * inline styles (body #1a1a1a, header #2a2a2a, headings #fde047,
 * text #ffffff/#9ca3af, cards #222). This file is linked AFTER
 * unified-theme.css so its !important rules win over both the
 * stylesheet and the inline (non-!important) colors.
 *
 * Only the page SHELL + content chrome is restyled. The wordle game
 * board (#game-board / #keyboard) keeps its own --color-* variables,
 * which are already light, so it is explicitly protected at the end.
 * ================================================================= */

:root {
    --ui-bg:             #FBF7F0;
    --ui-surface:        #FFFFFF;
    --ui-primary:        #2D3A8C;
    --ui-primary-hover:  #3A4AA6;
    --ui-primary-active: #242F72;
    --ui-accent:         #E07A5F;
    --ui-text:           #1A1A2E;
    --ui-text-soft:      #4A4A68;
    --ui-text-muted:     #7A7A94;
    --ui-border:         #EDEDF2;
    --ui-shadow-sm:      0 2px 8px rgba(26,26,46,0.06);
    --ui-shadow-md:      0 8px 24px rgba(26,26,46,0.08);
    --ui-shadow-lg:      0 16px 48px rgba(26,26,46,0.10);
}

/* ---- page background -> cream ---- */
body { background-color: var(--ui-bg) !important; color: var(--ui-text) !important; }
main, section { background-color: var(--ui-bg) !important; }

/* ---- neutralize hardcoded dark inline backgrounds ---- */
[style*="background-color: #1a1a1a"],
[style*="background-color: #2a2a2a"] { background-color: var(--ui-bg) !important; }

/* dark cards (#222 / #1a1a1a with a border) -> white surface + light border */
[style*="background-color: #222"],
[style*="background-color: #1a1a1a; border"] {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
}

/* dark borders -> light */
[style*="border: 1px solid #3a3a3a"],
[style*="border:1px solid #3a3a3a"] { border-color: var(--ui-border) !important; }

/* ---- header -> light translucent (overrides inline #2a2a2a) ---- */
header.site-header {
    background-color: rgba(255,255,255,0.90) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    color: var(--ui-text) !important;
}

/* ---- nav + dropdown ---- */
header.site-header nav a,
header.site-header .nav-game-link,
header.site-header a:not(.btn):not(.cta-btn) {
    color: var(--ui-text-soft) !important;
    font-weight: 600 !important;
}
header.site-header nav a:hover { color: var(--ui-primary) !important; }

/* 下拉弹窗保持深色（与首页一致），否则白字在浅色 surface 上看不见。
   下拉 div 内联样式本就是 #2a2a2a 深色，这里显式锁定，避免被浅色主题覆盖。 */
header.site-header nav .dropdown-menu {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #4a4a4a !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3) !important;
}
header.site-header nav .dropdown-menu a { color: var(--ui-text-soft) !important; }
header.site-header nav .dropdown-menu a:hover { color: var(--ui-primary) !important; }
/* "Other Games" sub-label on light dropdown */
header.site-header nav .dropdown-menu .text-gray-500 { color: var(--ui-text-muted) !important; }

/* ---- logo black (never footer) ---- */
.logo a:not(.footer-logo-link),
.brand-name,
header .logo a,
a.brand-text { color: #0B0F19 !important; }

/* ---- headings -> indigo (overrides inline #ffffff / #fde047) ---- */
h1, h2, h3, h4, h5, h6 { color: var(--ui-primary) !important; }

/* ---- body text -> dark soft (overrides inline white / #9ca3af) ---- */
p, li, label, small, span, div { color: var(--ui-text-soft) !important; }

/* emphasis -> accent */
strong, b, em { color: var(--ui-accent) !important; }

a { color: var(--ui-primary) !important; }
a:hover { color: var(--ui-primary-hover) !important; }

/* "More Ways to Play" quick-link chips: dark chip (#3a3a3a) -> bright golden-yellow text */
a[style*="background-color: #3a3a3a"] {
    color: #FBBF24 !important;
    font-weight: 600 !important;
}
a[style*="background-color: #3a3a3a"]:hover {
    color: #FCD34D !important;
}

/* ---- form fields -> light ---- */
input, textarea, select {
    background-color: #fff !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--ui-text-muted) !important; }

/* ---- footer: keep Inkwell dark footer, links gray (matches homepage) ---- */
.site-footer .footer-col ul li a,
.site-footer .footer-col a,
.site-footer .footer-bottom .legal-links a,
.site-footer .legal-links a { color: #9DA0B6 !important; text-decoration: none; }
.site-footer .footer-col ul li a:hover,
.site-footer .legal-links a:hover { color: #FFFFFF !important; }
.site-footer .footer-bottom .legal-links a { color: #7A7E96 !important; }

/* ================================================================
 * PROTECT GAME BOARD
 * Restore the wordle tiles / keyboard to their own CSS variables so
 * the light game look is preserved (the broad div/span color rules
 * above would otherwise recolor empty-tile letters).
 * ================================================================ */
#game-board .tile {
    color: var(--color-on-surface) !important;
    background: var(--color-surface) !important;
    border-color: var(--color-secondary) !important;
}
#keyboard .key {
    color: var(--color-on-primary) !important;
    background-color: var(--color-secondary) !important;
}