/* Norse Demigods Wiki styles. Class reference and usage rules: WIKI_GUIDE.md, "Visual components". */

/* ----------------------------------------------------------------------------------------------------
   Theme colors: fjord blue primary, bronze-gold accent
   ---------------------------------------------------------------------------------------------------- */

:root {
    --md-primary-fg-color: #24394d;
    --md-primary-fg-color--light: #3b5873;
    --md-primary-fg-color--dark: #172636;
    --md-accent-fg-color: #b07a22;
    --md-accent-fg-color--transparent: rgba(176, 122, 34, 0.1);
    --md-typeset-a-color: #2a5d88;

    --nd-panel-bg: #f4f1ea;
    --nd-panel-border: #d9cfbd;
    --nd-overview-head-bg: #24394d;
    --nd-overview-head-fg: #ffffff;
    --nd-overview-stripe: #faf8f4;
}

[data-md-color-scheme="slate"] {
    --md-hue: 210;
    --md-primary-fg-color: #1a2836;
    --md-primary-fg-color--light: #2c4155;
    --md-primary-fg-color--dark: #111b25;
    --md-accent-fg-color: #e2b354;
    --md-accent-fg-color--transparent: rgba(226, 179, 84, 0.1);
    --md-typeset-a-color: #8cbbe3;

    --nd-panel-bg: #1f2a36;
    --nd-panel-border: #34465a;
    --nd-overview-head-bg: #2c4155;
    --nd-overview-head-fg: #ffffff;
    --nd-overview-stripe: rgba(255, 255, 255, 0.025);
}

.md-typeset h1 {
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.md-typeset h2 {
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--nd-panel-border);
}

/* ----------------------------------------------------------------------------------------------------
   Last-updated date after the site name in the header (overrides/partials/header.html)
   ---------------------------------------------------------------------------------------------------- */

.md-header .nd-updated {
    margin-left: 0.6rem;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
}

/* Download links in the header, right of the title. Hidden on narrow screens, like the repo link. */

.nd-header-links {
    display: none;
    flex-shrink: 0;
    margin: 0 0.8rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

@media screen and (min-width: 60em) {
    .nd-header-links {
        display: block;
    }
}

.nd-header-links a {
    color: inherit;
}

.nd-header-links a:hover {
    color: var(--md-accent-fg-color);
}

.nd-header-links__sep {
    margin: 0 0.4rem;
    opacity: 0.5;
}

/* ----------------------------------------------------------------------------------------------------
   Plain table: every other table (level tables, effect tables, recipes). Lighter than the infobox and the
   overview table: thin panel border, rounded corners, a tinted header row, no stripes or accent.
   The infobox and overview rules below are more specific and override these.
   ---------------------------------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
    border: 1px solid var(--nd-panel-border);
    border-radius: 0.3rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.md-typeset table:not([class]) th {
    background: var(--nd-panel-bg);
    border-bottom: 1px solid var(--nd-panel-border);
}

.md-typeset table:not([class]) td {
    border-top: 1px solid var(--nd-panel-border);
}

.md-typeset table:not([class]) tbody tr:first-child > td {
    border-top: none;
}

/* ----------------------------------------------------------------------------------------------------
   Infobox: <div class="nd-infobox" markdown> around a two-column table
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .nd-infobox {
    margin: 1em 0 1.5em;
    padding: 0.3rem 0.8rem;
    background: var(--nd-panel-bg);
    border: 1px solid var(--nd-panel-border);
    border-left: 0.25rem solid var(--md-accent-fg-color);
    border-radius: 0.3rem;
}

.md-typeset .nd-infobox .md-typeset__scrollwrap,
.md-typeset .nd-infobox .md-typeset__table {
    display: block;
    margin: 0;
    padding: 0;
}

.md-typeset .nd-infobox table:not([class]) {
    display: table;
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 0.75rem;
}

.md-typeset .nd-infobox thead {
    display: none;
}

.md-typeset .nd-infobox table:not([class]) td {
    padding: 0.45em 0.6em;
    border-top: 1px solid var(--nd-panel-border);
    vertical-align: top;
}

.md-typeset .nd-infobox table:not([class]) tr:first-child td {
    border-top: none;
}

.md-typeset .nd-infobox table:not([class]) tr:hover {
    background: transparent;
    box-shadow: none;
}

.md-typeset .nd-infobox td:first-child {
    width: 1%;
    white-space: nowrap;
    color: var(--md-default-fg-color--light);
}

/* ----------------------------------------------------------------------------------------------------
   Overview table: <div class="nd-overview" markdown> around a section index or overview table
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .nd-overview .md-typeset__table {
    display: block;
}

.md-typeset .nd-overview table:not([class]) {
    display: table;
    width: 100%;
    border: 1px solid var(--nd-panel-border);
    border-top: 0.2rem solid var(--md-accent-fg-color);
    border-radius: 0.3rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.md-typeset .nd-overview table:not([class]) th {
    background: var(--nd-overview-head-bg);
    color: var(--nd-overview-head-fg);
    border-bottom: none;
    letter-spacing: 0.02em;
}

.md-typeset .nd-overview table:not([class]) td {
    border-top: 1px solid var(--nd-panel-border);
}

.md-typeset .nd-overview table:not([class]) tr:first-child td {
    border-top: none;
}

.md-typeset .nd-overview table:not([class]) td:first-child {
    font-weight: 700;
}

.md-typeset .nd-overview table:not([class]) tbody tr:nth-child(even) > td {
    background: var(--nd-overview-stripe);
}

.md-typeset .nd-overview table:not([class]) tbody tr:hover {
    box-shadow: none;
}

.md-typeset .nd-overview table:not([class]) tbody tr:hover > td {
    background: var(--md-accent-fg-color--transparent);
}

/* ----------------------------------------------------------------------------------------------------
   Exception row in a table: | [Kvasir](…){ .nd-row-exception } | … |
   ---------------------------------------------------------------------------------------------------- */

.md-typeset table:not([class]) tbody tr:has(.nd-row-exception) > td,
.md-typeset .nd-overview table:not([class]) tbody tr:has(.nd-row-exception) > td {
    background: var(--nd-panel-bg);
}

/* ----------------------------------------------------------------------------------------------------
   Damage type and element badges: *Lightning*{.dmg .lightning}
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .dmg {
    --nd-dmg-bg: #616161;
    --nd-dmg-fg: #ffffff;

    display: inline-block;
    padding: 0 0.45em;
    border-radius: 0.3em;
    background: var(--nd-dmg-bg);
    color: var(--nd-dmg-fg);
    font-size: 0.8em;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: 0.05em;
}

.md-typeset .dmg.blunt     { --nd-dmg-bg: #795548; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.slash     { --nd-dmg-bg: #b03a3a; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.pierce    { --nd-dmg-bg: #3f51b5; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.chop      { --nd-dmg-bg: #5d4037; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.pickaxe   { --nd-dmg-bg: #546e7a; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.fire      { --nd-dmg-bg: #d84315; --nd-dmg-fg: #ffffff; }
.md-typeset .dmg.frost     { --nd-dmg-bg: #4fc3f7; --nd-dmg-fg: #0b2a3a; }
.md-typeset .dmg.lightning { --nd-dmg-bg: #fdd835; --nd-dmg-fg: #2b2400; }
.md-typeset .dmg.poison    { --nd-dmg-bg: #7cb342; --nd-dmg-fg: #15260a; }
.md-typeset .dmg.spirit    { --nd-dmg-bg: #8e24aa; --nd-dmg-fg: #ffffff; }

/* ----------------------------------------------------------------------------------------------------
   Damage values in tables: the total is the main value; a mixed-type breakdown goes on a second, smaller line.
   **50**<br><span class="nd-split">25 *Fire*{.dmg .fire} + 25 *Spirit*{.dmg .spirit}</span>
   ---------------------------------------------------------------------------------------------------- */

.md-typeset td:not(:first-child) > strong {
    font-size: 1.15em;
}

.md-typeset .nd-split {
    display: inline-block;
    margin-top: 0.15em;
    color: var(--md-default-fg-color--light);
    font-size: 0.8em;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------------------------------
   Keys (pymdownx.keys): never wrap a key combination
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .keys {
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------------------------------
   Lore: !!! quote "Lore"
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .admonition.quote,
.md-typeset details.quote {
    border-color: var(--md-accent-fg-color);
}

.md-typeset .quote > .admonition-title,
.md-typeset .quote > summary {
    background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .quote > .admonition-title::before,
.md-typeset .quote > summary::before {
    background-color: var(--md-accent-fg-color);
}

.md-typeset .admonition.quote > p {
    font-style: italic;
}

/* ----------------------------------------------------------------------------------------------------
   Card grid (Material grid cards)
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
    border-top: 0.15rem solid var(--md-accent-fg-color);
}

.md-typeset .grid.cards .lg {
    color: var(--md-accent-fg-color);
}

.md-typeset .grid.cards > ul > li > p:first-child > a {
    color: var(--md-default-fg-color);
}

.md-typeset .grid.cards > ul > li > p:first-child > a:hover {
    color: var(--md-accent-fg-color);
}

/* Whole card is clickable: the title link stretches over the card; other links in the card stay on top. */
.md-typeset .grid.cards > ul > li {
    position: relative;
}

.md-typeset .grid.cards > ul > li > p:first-child > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child > a {
    color: var(--md-accent-fg-color);
}

.md-typeset .grid.cards > ul > li > :not(p:first-child) a {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------------------------------------------------
   FAQ entry: <div class="nd-faq" markdown> around one ### question and its answer. The question is a
   tinted header bar, so it stays a real heading (table of contents, search, permalink).
   ---------------------------------------------------------------------------------------------------- */

.md-typeset .nd-faq {
    margin: 1em 0;
    padding: 0 0.9rem 0.1rem;
    border: 1px solid var(--nd-panel-border);
    border-left: 0.25rem solid var(--md-accent-fg-color);
    border-radius: 0.3rem;
}

.md-typeset .nd-faq > h3 {
    margin: 0 -0.9rem 0.8em;
    padding: 0.55em 0.9rem;
    background: var(--nd-panel-bg);
    border-bottom: 1px solid var(--nd-panel-border);
    font-size: 0.85rem;
    font-weight: 700;
}

.md-typeset .nd-faq > h3::before {
    content: "Q";
    margin-right: 0.5em;
    color: var(--md-accent-fg-color);
}

/* ----------------------------------------------------------------------------------------------------
   Discord tab (last nav entry, external link): Discord-blurple pill with the Discord logo
   ---------------------------------------------------------------------------------------------------- */

.md-tabs__link[href*="discord.gg"] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    padding: 0.15rem 0.6rem;
    border-radius: 0.3rem;
    background-color: #5865f2;
    color: #fff;
    opacity: 1;
    font-weight: 700;
}

.md-tabs__link[href*="discord.gg"]:hover {
    background-color: #4752c4;
    color: #fff;
}

.md-tabs__link[href*="discord.gg"]::before,
.md-nav__link[href*="discord.gg"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-color: currentcolor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0 13 13 0 0 0-.617-1.25.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.08.08 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13 13 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10 10 0 0 0 .372-.292.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028 19.8 19.8 0 0 0 6.002-3.03.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0 13 13 0 0 0-.617-1.25.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.08.08 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13 13 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10 10 0 0 0 .372-.292.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028 19.8 19.8 0 0 0 6.002-3.03.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418'/></svg>") center / contain no-repeat;
}

.md-nav__link[href*="discord.gg"] {
    gap: 0.4rem;
    justify-content: flex-start;
    color: #5865f2;
    font-weight: 700;
}