/*
 * ForeverTome site styles.
 * Tabler supplies the base (Bootstrap + theme); this file only adds what Tabler
 * has no equivalent for: game colour tokens and a few content-site components.
 */

/* ---------------------------------------------------------------- tokens */

:root {
    /* Class colours as published by Blizzard. WoW Forever ships the nine
       original classes; the rest are kept for later game versions. */
    --ft-class-druid: #ff7c0a;
    --ft-class-hunter: #aad372;
    --ft-class-mage: #3fc7eb;
    --ft-class-paladin: #f48cba;
    --ft-class-priest: #ffffff;
    --ft-class-rogue: #fff468;
    --ft-class-shaman: #0070dd;
    --ft-class-warlock: #8788ee;
    --ft-class-warrior: #c69b6d;

    --ft-class-death-knight: #c41e3a;
    --ft-class-demon-hunter: #a330c9;
    --ft-class-evoker: #33937f;
    --ft-class-monk: #00ff98;

    /* Item quality colours. */
    --ft-quality-poor: #9d9d9d;
    --ft-quality-common: #ffffff;
    --ft-quality-uncommon: #1eff00;
    --ft-quality-rare: #0070dd;
    --ft-quality-epic: #a335ee;
    --ft-quality-legendary: #ff8000;
    --ft-quality-artifact: #e6cc80;
    --ft-quality-heirloom: #00ccff;
}

/*
 * Blizzard's class colours are tuned for a dark UI. On the parchment light
 * background (#F0E6D2) the pale ones fall well below a readable contrast ratio,
 * so they get darkened variants in light mode only. Dark mode keeps the canon
 * values untouched.
 */
:root:not([data-bs-theme="dark"]) {
    --ft-class-druid: #b35400;
    --ft-class-hunter: #5f8f2f;
    --ft-class-mage: #1a7f9c;
    --ft-class-paladin: #b9487e;
    --ft-class-priest: #566169;
    --ft-class-rogue: #8a7800;
    --ft-class-warlock: #5d5ec9;
    --ft-class-warrior: #8a6440;
    --ft-class-monk: #00875a;
    --ft-quality-common: #495057;
    --ft-quality-uncommon: #16a34a;
    --ft-quality-artifact: #9a7c2e;
}

/* ------------------------------------------------------- class + quality */

.wow-class,
.wow-quality {
    font-weight: 500;
}

.wow-druid        { --ft-class: var(--ft-class-druid); }
.wow-hunter       { --ft-class: var(--ft-class-hunter); }
.wow-mage         { --ft-class: var(--ft-class-mage); }
.wow-paladin      { --ft-class: var(--ft-class-paladin); }
.wow-priest       { --ft-class: var(--ft-class-priest); }
.wow-rogue        { --ft-class: var(--ft-class-rogue); }
.wow-shaman       { --ft-class: var(--ft-class-shaman); }
.wow-warlock      { --ft-class: var(--ft-class-warlock); }
.wow-warrior      { --ft-class: var(--ft-class-warrior); }
.wow-death-knight { --ft-class: var(--ft-class-death-knight); }
.wow-demon-hunter { --ft-class: var(--ft-class-demon-hunter); }
.wow-evoker       { --ft-class: var(--ft-class-evoker); }
.wow-monk         { --ft-class: var(--ft-class-monk); }

/* The wow-<slug> class only sets the token; this decides how it is used. */
.wow-class        { color: var(--ft-class); }

.wow-q-poor       { color: var(--ft-quality-poor); }
.wow-q-common     { color: var(--ft-quality-common); }
.wow-q-uncommon   { color: var(--ft-quality-uncommon); }
.wow-q-rare       { color: var(--ft-quality-rare); }
.wow-q-epic       { color: var(--ft-quality-epic); }
.wow-q-legendary  { color: var(--ft-quality-legendary); }
.wow-q-artifact   { color: var(--ft-quality-artifact); }
.wow-q-heirloom   { color: var(--ft-quality-heirloom); }

/*
 * Official Blizzard class icons (wwwroot/img/classes). They are square JPEGs with
 * no transparency, so they get their own rounding and a hairline ring rather than
 * sitting flush against the surface.
 */
.ft-class-icon {
    flex: 0 0 auto;
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ft-class, var(--tblr-border-color)) 55%, transparent);
}

.ft-class-icon-sm {
    border-radius: calc(var(--tblr-border-radius) * .75);
}

/* ----------------------------------------------------------- site chrome */

/* Menu bar sits directly under the sticky header and scrolls away with the page. */
.ft-navbar {
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

.ft-hero {
    background:
        radial-gradient(90% 120% at 12% 0%, rgba(var(--tblr-primary-rgb), .16), transparent 62%),
        var(--tblr-bg-surface);
}

/* ------------------------------------------------------------ home page */

.ft-class-tile {
    border-inline-start: 3px solid var(--ft-class, var(--tblr-border-color));
}

.ft-tile-muted {
    opacity: .55;
}

/*
 * Stand-in for an article cover image. Tinted per category so the feed reads as
 * a grid of distinct stories; replace with real <img> covers when they exist.
 */
.ft-thumb {
    height: 7rem;
    border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
    background-color: var(--tblr-bg-surface-secondary);
    background-image:
        radial-gradient(110% 140% at 12% 0%, color-mix(in srgb, var(--ft-thumb, var(--ft-teal)) 62%, transparent), transparent 62%),
        linear-gradient(135deg, color-mix(in srgb, var(--ft-thumb, var(--ft-teal)) 34%, transparent), transparent 78%);
}

.ft-thumb-lg {
    height: 12rem;
}

/* Tints match the three brand accents in theme.css. */
.ft-thumb-teal  { --ft-thumb: var(--ft-teal-bright); }
.ft-thumb-gold  { --ft-thumb: var(--ft-gold); }
.ft-thumb-ocean { --ft-thumb: var(--ft-ocean-high); }

/* Lets a flex child shrink far enough for text-truncate to take effect. */
.min-w-0 {
    min-width: 0;
}

/* ---------------------------------------------------------- post body ---
 * Styling for Markdown rendered by PostStore. Scoped to .ft-prose so post
 * content cannot leak styles into the surrounding chrome.
 */
.ft-prose {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.ft-prose > :first-child {
    margin-top: 0;
}

.ft-prose h2 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 1.5rem;
}

.ft-prose h3 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1.25rem;
}

.ft-prose p,
.ft-prose ul,
.ft-prose ol {
    margin-bottom: 1.15rem;
}

.ft-prose li + li {
    margin-top: .35rem;
}

.ft-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--tblr-border-radius);
}

.ft-prose table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.ft-prose th,
.ft-prose td {
    padding: .5rem .75rem;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
    text-align: left;
}

.ft-prose thead th {
    color: var(--ft-gold);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ft-prose blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-inline-start: 3px solid var(--ft-gold);
    color: var(--tblr-secondary);
}

.ft-prose pre {
    padding: 1rem;
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    overflow-x: auto;
}

/* Cover images reuse the placeholder thumbnail's aspect and cropping. */
.ft-thumb-img {
    height: 7rem;
    object-fit: cover;
}

.ft-thumb-img.ft-thumb-lg {
    height: 12rem;
}