/* ────────────────────────────────────────
   themes.css — GhanaChild colour themes (23 Oct 2026)
   <html data-theme="kente|flag|redblack|dark">  (no attribute = Classic)
   Set by theme.js / fav_icons.php. Loaded last, on every public and member page.
   Semantic colours used across the CSS: --ink (text), --page (page background),
   --surface (cards), --surface-alt, --tint / --tint-2 / --tint-gold (soft boxes).
   ──────────────────────────────────────── */

/* ── Kente: gold, green, red and black, woven stripes ── */
:root[data-theme="kente"] {
    --gold: #E5A800; --gold-light: #F5C542;
    --terracotta: #B3261E; --terracotta-dark: #8C1D17;
    --green: #1B7A3A; --green-dark: #0F5A29;
    --cream: #FBF4E2; --page: #FBF4E2; --muted: #5E5345;
    --gc-band: repeating-linear-gradient(90deg,
        #E5A800 0 18px, #1B7A3A 18px 24px, #E5A800 24px 30px, #B3261E 30px 36px,
        #1A1A1A 36px 40px, #B3261E 40px 46px, #E5A800 46px 52px, #1B7A3A 52px 58px);
}

/* ── Ghana Flag: red, gold, green and the black star ── */
:root[data-theme="flag"] {
    --gold: #FCD116; --gold-light: #FFE15A;
    --terracotta: #CE1126; --terracotta-dark: #A50E1F;
    --green: #006B3F; --green-dark: #004F2E;
    --cream: #FFFCF2; --page: #FFFCF2; --muted: #5C5346;
    --gc-band: linear-gradient(90deg, #CE1126 0 33.34%, #FCD116 33.34% 66.67%, #006B3F 66.67% 100%);
}

/* ── Red and Black ── */
:root[data-theme="redblack"] {
    --gold: #EF5350; --gold-light: #F28B82;
    --terracotta: #C62828; --terracotta-dark: #8E1B1B;
    --charcoal: #0E0E0E;
    --cream: #F6F2F2; --page: #F6F2F2; --tint-gold: #FBE9E7; --muted: #5F5555;
    --gc-band: linear-gradient(90deg, #C62828, #0E0E0E 50%, #C62828);
}

/* ── Dark mode ── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #EEE7DC; --muted: #B9AC9C;
    --page: #141210; --cream: #141210;
    --surface: #1F1C19; --surface-alt: #24211D;
    --tint: #2A2622; --tint-2: #332E28; --tint-gold: #3A321F;
    --terracotta: #E58B5E; --terracotta-dark: #F0A47D;
    --charcoal: #0B0A09;
}

/* Thin decorative band under the top bar (Kente / Flag / Red and Black) */
:root[data-theme] .top-bar::after,
:root[data-theme] body > nav[aria-label="Main"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
    background: var(--gc-band, transparent); pointer-events: none;
}
:root[data-theme="dark"] .top-bar::after,
:root[data-theme="dark"] body > nav[aria-label="Main"]::after { display: none; }
/* The black star in the middle of the flag band */
:root[data-theme="flag"] .top-bar::before,
:root[data-theme="flag"] body > nav[aria-label="Main"]::before {
    content: "★"; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
    font-size: 20px; line-height: 1; color: #000; pointer-events: none; z-index: 1;
    text-shadow: 0 0 2px #FCD116;
}
/* Kente cards: woven stripe along the top */
:root[data-theme="kente"] .dashboard-card,
:root[data-theme="kente"] .st-card { border-top-color: transparent; background-image: linear-gradient(var(--surface-alt, #FAFAFA), var(--surface-alt, #FAFAFA)), var(--gc-band); background-origin: border-box; background-clip: padding-box, border-box; }
:root[data-theme="kente"] .st-card.st-tribute { background-image: none; border-top-color: #8C8478; }

/* Red and Black: gold buttons become red with white text */
:root[data-theme="redblack"] .btn-gold,
:root[data-theme="redblack"] .btn-primary,
:root[data-theme="redblack"] .nav-cta:not(.nav-cta-ghost),
:root[data-theme="redblack"] .top-bar-auth:not(.top-bar-auth-ghost) { color: #fff; }

/* ── Dark mode details ── */
:root[data-theme="dark"] body { background-color: var(--page); color: var(--ink); }
:root[data-theme="dark"] .dashboard-card { background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--tint); color: var(--ink); border-color: #4A433B;
}
:root[data-theme="dark"] input[type="file"] { color: var(--ink); }
:root[data-theme="dark"] ::placeholder { color: #8F8476; opacity: 1; }
:root[data-theme="dark"] hr { border-color: #3A342D; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: inherit; }
:root[data-theme="dark"] .dashboard-header h1, :root[data-theme="dark"] .article h1, :root[data-theme="dark"] .article h2 { color: var(--terracotta); }
:root[data-theme="dark"] .dashboard-content a:not([class]), :root[data-theme="dark"] .article a:not([class]) { color: var(--gold-light); }
:root[data-theme="dark"] code { background: var(--tint-2); color: var(--ink); }
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.94); }

/* ── Theme picker (theme.js) ── */
.gc-theme { position: relative; display: inline-block; margin: .4rem auto 0; }
.gc-theme-toggle { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: transparent; color: #F5EFE6; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.gc-theme-menu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2000; width: 230px; padding: .4rem; border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1A1A1A); box-shadow: 0 10px 34px rgba(0, 0, 0, .3); text-align: left; }
.gc-theme-menu[hidden] { display: none; }
.gc-theme-opt, .gc-theme-card { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.gc-theme-opt:hover, .gc-theme-opt:focus-visible { background: var(--tint, #F7F5F2); }
.gc-theme-opt[aria-checked="true"], .gc-theme-card[aria-checked="true"] { font-weight: 700; }
.gc-theme-opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--green, #2E8B57); }
.gc-swatch { flex: 0 0 auto; width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .15); }
.gc-swatch-classic  { background: linear-gradient(90deg, #C1693C 0 33%, #DAA520 33% 66%, #F5EFE6 66%); }
.gc-swatch-kente    { background: repeating-linear-gradient(90deg, #E5A800 0 6px, #1B7A3A 6px 9px, #B3261E 9px 12px, #1A1A1A 12px 14px); }
.gc-swatch-flag     { background: linear-gradient(90deg, #CE1126 0 33%, #FCD116 33% 66%, #006B3F 66%); position: relative; }
.gc-swatch-flag::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #000; }
.gc-swatch-redblack { background: linear-gradient(90deg, #C62828 0 50%, #0E0E0E 50%); }
.gc-swatch-dark     { background: linear-gradient(90deg, #141210 0 50%, #DAA520 50% 60%, #1F1C19 60%); }
/* Profile page: bigger cards */
.gc-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: .6rem; }
.gc-theme-card { flex-direction: column; align-items: flex-start; border: 2px solid rgba(0, 0, 0, .1); background: var(--surface, #fff); padding: .7rem; }
.gc-theme-card .gc-swatch { width: 100%; height: 34px; }
.gc-theme-card[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
:root[data-theme="dark"] .gc-theme-card { border-color: #3A342D; }
:root[data-theme="dark"] .btn-google { background: #fff; color: #1F1F1F; border-color: #747775; }