/* Forever Azeroth - site styles shared by every page (Tailwind CDN provides the utilities) */

/* Class picker */
.class-pick { --c: #fff; opacity: .55; filter: grayscale(.6); transition: opacity .15s, filter .15s, transform .15s; }
.class-pick:hover, .class-pick:focus-visible, .class-pick.is-active { opacity: 1; filter: none; }
.class-pick.is-active img, .class-pick:hover img { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.class-pick.is-active { transform: translateY(-2px); }
.class-pick.is-active span { color: var(--c); }

/* Talent grid: 4 columns x 7 rows, kept at a fixed ratio so the arrow overlay lines up */
.talent-grid {
    position: relative; display: grid; aspect-ratio: 400 / 532; /* 4 cols x 100, 7 rows x 76 (see ROW_H in calculator.js) */
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr);
    background-size: cover; background-position: center;
}
.talent-grid::before { content: ""; position: absolute; inset: 0; background: rgba(2, 6, 23, .72); }
.talent-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.talent-arrows g path { fill: none; stroke-width: 4; }
.talent-arrows g[data-state="off"] { stroke: #475569; fill: #475569; }
.talent-arrows g[data-state="on"]  { stroke: #fbbf24; fill: #fbbf24; }

.talent {
    position: relative; place-self: center; width: 56%; aspect-ratio: 1; /* 56% of a column; rows are 76 units tall so this must stay under 76% */
    border: 2px solid #475569; border-radius: 6px; background: #000; cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.talent img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.talent:hover, .talent:focus-visible { transform: scale(1.08); outline: none; z-index: 1; }
.talent[data-state="locked"] { border-color: #334155; }
.talent[data-state="locked"] img { filter: grayscale(1) brightness(.45); }
.talent[data-state="open"]  { border-color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .35); }
.talent[data-state="maxed"] { border-color: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .45); }
.talent-rank {
    position: absolute; right: -6px; bottom: -6px; min-width: 1.6rem; padding: 0 3px;
    border: 1px solid #475569; border-radius: 4px; background: #020617;
    font-size: .65rem; line-height: 1rem; font-weight: 600; text-align: center; color: #94a3b8;
}
.talent[data-state="open"]  .talent-rank { color: #4ade80; border-color: #22c55e; }
.talent[data-state="maxed"] .talent-rank { color: #fbbf24; border-color: #fbbf24; }

/* Legacy trees: 4 columns x 4 rows, same row height as the class trees */
.legacy-grid { aspect-ratio: 400 / 304; grid-template-rows: repeat(4, 1fr); background: transparent; }
.legacy-grid::before { background: linear-gradient(180deg, rgba(2, 6, 23, .35), rgba(2, 6, 23, .7)); }
.legacy-gate { border-radius: 999px; border: 1px solid #334155; color: #64748b; padding: 1px 0; }
.legacy-gate[data-met="1"] { border-color: #fbbf24; color: #fbbf24; }
.talent[data-locked] { cursor: not-allowed; border-style: dashed; }
.talent[data-locked] img { filter: grayscale(1) brightness(.35); }
.talent[data-locked]:hover { transform: none; }

#talent-tooltip { position: fixed; z-index: 50; width: max-content; max-width: min(20rem, calc(100vw - 1rem)); pointer-events: none; }

/* Racials page */
.class-filter.is-active { border-color: var(--c, #fbbf24); color: #fff; box-shadow: 0 0 0 1px var(--c, #fbbf24) inset; }
.race-class.ring-1 { --tw-ring-color: #fbbf24; }

/* Sidebar navigation */
.side-brand { position: relative; display: block; padding: 22px 20px 18px; border-bottom: 1px solid #1e293b; background-size: cover; background-position: center; }
.side-brand::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, .55), rgba(15, 23, 42, .95)); }
.side-label { margin: 0 0 6px; padding: 0 12px; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.side-link, .side-class { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 7px 12px; color: #cbd5e1; transition: background .12s, color .12s; }
.side-link { font-weight: 600; }
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.side-class { font-size: .82rem; color: #94a3b8; }
.side-class img { flex: none; }
.side-link:hover, .side-class:hover { background: #1e293b; color: #fff; }
.side-class:hover { color: var(--c, #fff); }
.side-link.is-active { background: rgba(251, 191, 36, .1); color: #fbbf24; }
.side-link.is-active svg { opacity: 1; }
.side-class.is-active { background: #1e293b; color: var(--c, #fbbf24); }
.side-link.is-active::before, .side-class.is-active::before {
    content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: #fbbf24;
}
.side-class.is-active::before { background: var(--c, #fbbf24); }