/*** Colors ***/

:root {
    --black: #000000;
    --white: #FFFFFF;
    --grey-bg: #F0F0F0;
    --grey-border: #CCCCCC;
    --grey-medium: #808080;
    --grey-stripe-light: #F8F8F8;
    --grey-stripe-dark: #E8E8E8;
    --grey-stripe-light-border: #E8E8E8;
    --grey-stripe-dark-border: #D8D8D8;
    --turquoise: #5094B8;
    --turquoise-border: #4884A5;
    --turquoise-hover: #68ACD0;
    --turquoise-light: #CFDDE4;
    --turquoise-light-border: #B0CBDA;
    --turquoise-out-of-bounds: #244252;
}


/*** Page layout ***/

html { font-size: 16px; }

@media (min-width: 1921px) {
    /* The letterbox colour for superwide monitors.  Only apply it when needed;
       if something somehow overflows on a smaller size, we don't want it to
       stick out onto the dark turquoise bg. */
    html { background: var(--turquoise-out-of-bounds); }
}

body {
    padding: 0;
    background: var(--grey-bg);
    line-height: 1.4;
    font-family: Noto Sans, DejaVu Sans, Helvetica, Calibri, sans-serif;

    --top-bar-height: 4.5rem;

    /* Cap width for superwide monitors */
    max-width: 1920px;
    margin: auto;
}

/* Desktop: nav on the left as a sidebar, page on the right; scroll the right
   half while the sidebar stays fixed */
@media (min-width: 1280px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 16rem;
        height: 100vh;
    }

    div#page {
        margin-left: 16rem;
        min-height: 100vh;
    }
}

@media (min-width: 1921px) {
    /* Keep the header in the right place when we're wide enough to letterbox
    */
    header { left: calc(50% - 960px); }
}

/* Smaller screens: nav on top, then page */
@media (max-width: 1279px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    div#page { flex: 1; }
}


/* Header (site title + main nav) */

header {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) and (max-width: 1279px) {
    /* Site title and nav on same row on medium screens only */
    header {
        flex-direction: row;
        height: var(--top-bar-height);
    }
}


/* Site title */

a#site-title {
    position: relative;
    min-width: 16rem;
    height: var(--top-bar-height);
    box-sizing: border-box;
    text-align: right;
    background: var(--turquoise-border);
    color: var(--white);
    font-size: 1.875rem;
    font-weight: bold;
    padding: 0.75rem 1rem;
}

a#site-title > img {
    position: absolute;
    bottom: -36px;
    left: 0.5rem;
    pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1279px) {
    a#site-title { background: var(--turquoise); }
}


/* Main nav */

nav#main-nav {
    display: flex;
    flex: 1;
    background: var(--turquoise);
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
}

nav#main-nav > ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav#main-nav a { color: inherit; }

@media (min-width: 1280px) {
    /* Vertical links in the sidebar */
    nav#main-nav { flex-direction: column; }
    nav#main-nav > ul { flex-direction: column; }
    nav#main-nav > ul > li {
        border-bottom: 2px solid var(--turquoise-border);
    }
    nav#main-nav > ul > li > a {
        display: block;
        padding: 0.75rem 1.5rem;
    }
    nav#main-nav > ul > li > a:hover {
        background: var(--turquoise-border);
    }
}

@media (max-width: 1279px) {
    /* Inline list at the top of the page */
    nav#main-nav {
        flex-direction: row;
    }
    nav#main-nav > ul {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    nav#main-nav > ul > li {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
    nav#main-nav > ul > li > a:hover { text-decoration: underline; }
}

@media (max-width: 767px) {
    nav#main-nav {
        flex-direction: column;
        padding: 0.5rem 0;
    }
    nav#main-nav > ul { justify-content: center; }
}


/* Page nav */

nav#page-nav {
    display: flex;
    align-items: center;
    height: var(--top-bar-height);
    box-sizing: border-box;
    background: var(--white);
    border-bottom: 2px solid var(--grey-border);
    padding-left: 2rem;
    padding-right: 2rem;
    line-height: 1.2;
}

@media (max-width: 767px) {
    nav#page-nav { padding-right: 1rem; padding-left: 1rem; }
}

ul#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    align-items: baseline;
    line-height: 1.125;
    margin: 0;
    padding: 0;
}

ul#breadcrumbs > li:not(:last-child)::after {
    content: '»';
    margin: 0 0.375em;
}

ul#breadcrumbs > li:last-child {
    width: 100%;
    font-size: 1.875rem;
    font-weight: bold;
}


/* Main */

main { padding: 1rem 2rem; }
main > *:first-child { margin-top: 0; }

@media (max-width: 768px) {
    main { padding: 0.75rem 1rem; }
}


/*** General styles ***/

/* Links */
a { color: var(--turquoise); text-decoration: none; }
a:hover { color: var(--turquoise-hover); }
main a { font-weight: bold; }

/* Headings */
h1 {
    background: var(--turquoise);
    font-size: 1.5rem;
    color: var(--white);
    border: 2px solid var(--turquoise-border);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin: 1.25rem calc(-0.5rem - 2px);
    line-height: 1;
}

h2 {
    margin-top: 0;
    border-bottom: 2px solid var(--turquoise);
}

/* Images */
img { vertical-align: middle; }

img.sprite {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

img.pokemon-icon {
    background: url(/static/circle.svg) center/36px no-repeat;
    width: 68px;
    height: 40px;
    margin: 0 -14px;
    object-fit: none;
    object-position: center bottom;
}
img.pokemon-icon.tall { object-position: center; }

/* Misc. general-use classes */
*.pokemon-form-name { font-size: 0.8em; font-style: italic; }
*.hidden-ability { font-style: italic; }
*.data-pending, *.not-applicable {
    color: var(--grey-medium);
    font-style: italic;
}

/* dls with dts on the left and dds on the right */
dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
    grid-row-gap: 0.5rem;
    margin: 0;
}

dt {
    grid-column-start: 1;
    background: var(--turquoise-light);
    border: solid var(--turquoise-light-border);
    border-radius: 0.5rem 0 0 0.5rem;
    border-width: 1px 0 1px 1px;
    padding: 0.125rem 0.5rem;
    font-weight: bold;
    text-align: right;
}

dd {
    grid-column-start: 2;
    background: var(--grey-stripe-light);
    border: 1px solid var(--grey-border);
    margin: 0;
    padding: 0.125rem 0.5rem;
}

dd + dd {
    margin-top: -0.5rem;  /* Cancel out the grid gap */
    border-top: none;
}

dd > dl {
    /* Sub-dl for further breakdown */
    margin: -0.125rem -0.5rem;  /* Cancel out outer dd's padding */
    grid-row-gap: 0;
}

dd > dl > dt {
    align-self: stretch;
    text-align: left;
}

dd > dl > dt,
dd > dl > dd {
    margin-top: 0;
    border: none;
}

dd > dl > dt:not(:first-of-type),
dd > dl > dd:not(:first-of-type) {
    border-top: 1px solid var(--grey-border);
}

dd > dl > dt {
    background: var(--grey-stripe-dark);
    border-radius:0;
}

@supports (grid-template-columns: subgrid) {
    /*
        If *every* <dd> is going to be broken down further, we can use this to make
        the second-level <dt>s line up.

        Only Firefox supports subgrid at the time of writing, so individual
        two-tier <dl>s will have to have widths set for the second-level <dt>s as
        fallback.
    */
    dl.two-tier {
        grid-template-columns: max-content max-content 1fr;
    }

    dl.two-tier > dd {
        display: grid;
        grid-column: 2 / span 2;
        grid-template-columns: subgrid;
    }

    dl.two-tier > dd > dl {
        grid-template-columns: subgrid;
        grid-column: 1 / span 2;
    }
}

dl.two-tier > dd > dl > dt { text-align: right; }


/*** Tables ***/

/* Border around all the tbodies as a whole */
tbody { border: solid var(--grey-border); border-width: 0 2px; }
tbody:first-of-type { border-top-width: 2px; }
tbody:last-of-type { border-bottom-width: 2px; }

/* Stripy rows */
tbody:nth-of-type(odd) { background-color: var(--grey-stripe-light); }
tbody:nth-of-type(even) { background-color: var(--grey-stripe-dark); }

tbody + tbody,
tbody:nth-of-type(even) > tr + tr {
    /* Darker border between two dark rows or one dark one light */
    border-top: 1px solid var(--grey-stripe-dark-border);
}

tbody:nth-of-type(odd) > tr + tr {
    /* Lighter border between two light rows */
    border-top: 1px solid var(--grey-stripe-light-border);
}

td, th { padding: 0 0.5rem; }

*.pokemon-icon-cell { width: 40px; }
*.pokemon-icon-cell + * { padding-left: 0; }

*.pokemon-cell { width: 8rem; }
*.pokemon-cell > a {
    /* Display form name as a subtitle */
    display: flex;
    flex-direction: column;
    line-height: 1;
}

*.type-cell { width: calc(4.5rem + 4px); }
*.type-list-cell { width: calc((4.5rem + 4px) * 2); }

*.ability-list-cell { width: 8.5rem; }

td.ability-list-cell > ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1;
}

td.stat-cell { width: 3ch; text-align: right; }
th.stat-cell {
    /* Let stat headers butt into the padding area; SpA and SpD in particular
       are a little wider than 3ch */
    width: calc(3ch + 1rem);
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1024px) {
    /* Only display as an actual table on large enough screens */
    table {
        table-layout: fixed;
        width: 0;
        border-collapse: collapse;
        vertical-align: middle;
        white-space: nowrap;
    }
    td:first-child, th:first-child { padding-left: 1.5rem; }
    td:last-child, th:last-child { padding-right: 1.5rem; }
    *.pokemon-icon-cell:first-child { padding-left: calc(1.5rem - 2px); }
    th.stat-cell:last-child { padding-right: 1rem; }
}

@media (max-width: 1023px) {
    /* On screens too small for tables, dismantle the whole thing and arrange
       cells manually */
    table { width: auto; }
    table, tbody {
        display: flex;
        flex-direction: column;
    }
    thead { display: none; }

    tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 0.5rem 0.25rem;
    }

    /*
        Pokemon           Type
        Abilities
        HP Atk Def SpA SpD Spe
    */
    /* XXX This is a bit sparse above 500px or so; would be nice to have a
       middle layout */
    td.pokemon-cell, td.stat-cell { flex: 1; }
    td.pokemon-icon-cell { flex: 0; }
    td.type-list-cell > ul.type-list { justify-content: flex-end; }
    td.ability-list-cell { width: 100%; }

    /* Display regular/hidden abilities as separate lines, e.g.:

       Abilities: Adaptability, Download
       Hidden ability: Analytic
    */
    td.ability-list-cell > ul { display: flex; font-size: 1rem; }
    td.ability-list-cell > ul > li { display: flex; }

    td.ability-list-regular > ul > li:not(:last-child)::after {
        content: ',\A0';
    }
    td.ability-list-regular > ul::before {
        content: 'Abilities:\A0';
        font-weight: bold;
    }

    td.ability-list-hidden > ul {
        /* Separate lines for hidden/unique */
        flex-direction: column;
    }
    td.ability-list-hidden > ul > li.hidden-ability::before {
        content: 'Hidden ability:\A0';
        font-weight: bold;
    }
    td.ability-list-hidden > ul > li.unique-ability::before {
        content: 'Unique ability:\A0';
        font-weight: bold;
    }

    /* Label all the stats */
    td.stat-cell {
        display: flex;  /* To make the width on the ::before work */
        flex: 1 0 auto;
        text-align: left;
    }


    td.stat-cell::before { font-weight: bold; }
    td.stat-cell-hp::before { content: 'HP:\A0' }
    td.stat-cell-attack::before { content: 'Atk:\A0' }
    td.stat-cell-defense::before { content: 'Def:\A0' }
    td.stat-cell-special-attack::before { content: 'SpA:\A0' }
    td.stat-cell-special-defense::before { content: 'SpD:\A0' }
    td.stat-cell-speed::before { content: 'Spe:\A0' }
    td.stat-cell-special::before { content: 'Spc:\A0' }
}

@media (max-width: 499px) {
    /* Split the stats into two rows of three on small enough screens */
    /* (< 500px is about where they stop fitting on one row) */
    td.stat-cell {
        width: calc(100%/3);
        box-sizing: border-box;
    }

    td.stat-cell::before {
        /* Make sure the colons line up vertically */
        width: 2.5rem;
        text-align: right;
    }
}


/*** Type icons ***/

a.type {
    display: inline-block;
    width: 4.5em;

    padding: 1px;
    border: 1px solid var(--type-border);
    border-radius: 5px;
    box-shadow: 0 0 1.2px var(--type-border) inset;

    text-align: center;
    color: var(--white);
    text-shadow: 1px 0 var(--black), 1px 1px var(--black), 0 1px var(--black);
}

a.type:hover { text-decoration: underline; }

ul.type-list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a.type-normal   { background: #ADAD7B; --type-border: #735A4A; }
a.type-fire     { background: #F75231; --type-border: #943129; }
a.type-water    { background: #6B94F7; --type-border: #847B73; }
a.type-grass    { background: #7BCE52; --type-border: #5A8442; }
a.type-electric { background: #FFD631; --type-border: #BDA53A; }
a.type-ice      { background: #9CDEDE; --type-border: #9494A5; }
a.type-fighting { background: #943129; --type-border: #4A423A; }
a.type-poison   { background: #A542A5; --type-border: #4A3A52; }
a.type-ground   { background: #E6C56B; --type-border: #8C6B31; }
a.type-flying   { background: #AD94F7; --type-border: #7A5A9C; }
a.type-psychic  { background: #FF5A8C; --type-border: #946363; }
a.type-bug      { background: #ADBD21; --type-border: #7B9410; }
a.type-rock     { background: #BDA53A; --type-border: #8C6B31; }
a.type-ghost    { background: #735A9C; --type-border: #4A3A52; }
a.type-dragon   { background: #733AFF; --type-border: #4A3A94; }
a.type-dark     { background: #735A4A; --type-border: #4A423A; }
a.type-steel    { background: #BDBDD6; --type-border: #847B73; }
a.type-fairy    { background: #FFA5E6; --type-border: #B56B84; }
a.type-question { background: #6BA594; --type-border: #216B63; }


/*** Misc. shared page parts ***/
dl.type-matchups > dd > dl > dd:not(.not-applicable) {
    padding-top: 0;
    padding-bottom: 0;
}

dl.type-matchups > dd > dl > dd > ul.type-list {
    flex-wrap: wrap;
}

@supports not (grid-template-columns: subgrid) {
    dl.type-matchups > dd > dl > dt { min-width: 1.5rem; }
}


/*** Pokémon page ***/

ul#breadcrumbs span.pokemon-form-name {
    font-weight: normal;

    /* Undo the usual *.pokemon-form-name stuff */
    /* XXX If it turns out some other page also needs an unbolded subtitle it
       would be very nice to just have a class for that */
    font-style: normal;
    font-size: inherit;
}

div#pokemon-basics {
    display: grid;
    gap: 1rem;
    grid-template-columns: max-content 1fr 37.5% 25%;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
        "portrait stats    stats     misc"
        "matchups matchups abilities misc";
}

div#pokemon-portrait { grid-area: portrait; }
div#pokemon-misc { grid-area: misc; }
div#pokemon-stats { grid-area: stats; }
div#pokemon-matchups { grid-area: matchups; }
div#pokemon-abilities { grid-area: abilities; }

div#pokemon-portrait {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

div#pokemon-portrait > img {
    width: 10rem;
    height: 10rem;
    background: url(/static/circle.svg) center/100% no-repeat;
}

dd.pokemon-stat-bar {
    /* --pokemon-stat is set on the element itself in the style attribute */
    --pokemon-stat-percent: calc(100% * var(--pokemon-stat) / 255);
    background: linear-gradient(
        to right,
        var(--turquoise) 0,
        var(--turquoise) var(--pokemon-stat-percent),
        var(--grey-stripe-light) var(--pokemon-stat-percent)
    );
}

svg.pokemon-stat-number {
    /*
        We do some pretty specific positioning here:

        1. The SVG has 4px extra space on all sides so the text strokes don't
        get cut off, hence the -4px margin.

        2. The text should be 3ch wide and right-aligned, but SVG doesn't seem
        to accept different units when positioning text.  Instead, the right of
        the text is at 40px, and then we negate that 40px and add 3ch here.
    */
    position: relative;
    margin: -4px;
    left: calc(-40px + 3ch);

    /*
        Keep white number on white bg visible when the bar is too skinny.

        Chrome only supports paint-order on SVG text, not HTML text, which is
        why we're using an inline SVG in the first place.
    */
    font-weight: bold;
    fill: white;
    stroke: var(--turquoise);
    stroke-width: 0.375rem;
    stroke-linecap: round;
    stroke-linejoin: round;
    paint-order: stroke fill;
}


/*** Type page ***/

div#type-basics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

div#type-basics > * { flex: 1; }