/* 
Some might say "don't write comments, write documentation".
God no! We will spam comments instead!
*/

/* Global variables */
/* Used to sync colours across pages without having to change them manually every time */
:root {
    /* Backgrounds */
    --colour-background-general: #5E5C57;
    --colour-background-header: #3D3D41;
    --colour-background-sidebar: #3D3B40;
    --colour-background-contentbox: #302F29;

    /* UI Elements */
    --colour-borders: #00000085;

    /* Text Elements */
    --colour-text-default: #ffffff;
    --colour-text-link: #9aaeca;
    --colour-text-hover: #ffffff;

    /* Border Curvature */
    --size-bordercurves: 10px
}

/* All-element selector */
/* For when we need to blanket-apply specific formatting */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

/* Header Formatting */
/* The Header is applied to all HTML pages via the include system; it should be ontop of all other content, and moves along with page scrolling. */
header {
    /* Enforces Position */
    top: 0;
    position: sticky;
    z-index: 1000;

    /* Determines content positioning */
    height: 60px;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centers vertically */

    /* Customization */
    background: var(--colour-background-header);
    border-bottom: 1.5px solid var(--colour-borders);
}

header h2 a {
    color: var(--colour-text-link);
    text-decoration: none;
}

header h2 a:hover {
    color: var(--colour-text-hover);
}

/* Navigation Bar */
/* Determines how the Navigation bar looks and where it sits. Part of the Header. */
.topnav input{
    /* Enforces Position */
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    width: 250px;

    /* Customization */
    transition: width 0.2s ease;
    border: 1.5px solid var(--colour-borders);
}

/* Navigation Bar Focussing */
/* Once clicked on, the navigation bar grows a bit both for feedback and to give more visual space. */
.topnav input:focus{
    width: 350px;
    max-width: 70vw;
}

/* Allow better listing of results*/
.search-wrapper {
    position: relative;
    display: inline-block; 
}

/* Style the dropdown results */
#results {
    /* Determines content positioning */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Customization */
    background: var(--colour-background-general);
    border-top: none;
    border: 1.5px solid var(--colour-borders);
    border-radius: var(--size-bordercurves);
}

#results li {
    list-style: none;
}

#results a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--colour-text-default);
}

#results a:hover {
    background: var(--colour-background-general);
}

/* Body Formatting */
/* Present in all pages since it's part of the Default Layout. All content (except for the header / sidebar) fit within here*/
body {
    /* Determines content positioning */
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.6;

    /* Customization */
    color: var(--colour-text-default);
    background-color: var(--colour-background-general);
}

/* Container Formatting */
/* Used to seperate the Sidebar from the rest of the page (excluding the header); in Default and Contentpage layouts. */
.container {
    /* Determines content positioning */
    display: flex;
    flex: 1;
}

/* Sidebar Formatting */
/* Like the header, present on all pages using Include. Always visible, though the content within does not stay sticky. Flips horizontally when on mobile. */
#sidebar {
    /* Enforces Position */
    top: 60px;
    position: sticky;
    z-index: 999;
    height: 100vh; /* Ensures it goes all the way down and doesn't randomly cut off. There must be a better way for this */
    width: 180px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;

    /* Determines content positioning */
    overflow-y: auto;
    overflow-x: hidden;

    /* Customization */
    background: var(--colour-background-sidebar);
    border-right: 1.5px solid var(--colour-borders);
}

/* Sidebar 'links' */
/* Determines the looks / size of the text links in the sidebar. */
#sidebar a {
    /* Determines content positioning */
    border-radius: 0.5em;
    padding: 0.2em;
    display: flex;
    align-items: center;

    /* Customization */
    margin-bottom: 1rem;
    background: var(--colour-background-contentbox);
    border: 1.5px solid var(--colour-borders);
    color: var(--colour-text-default);
    text-decoration: none;
}

/* Determines the look of links when hovering the cursor on them */
sidebar a:hover {
    color: var(--colour-text-hover);
}

/* Main Formatting */
/* Part of the Body element that is supposed to properly contain page content alongside the Sidebar */
main {
    /* Determines content positioning */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* Content Header Formatting */
/* Effectively title text for that page, though not naming it the title to keep from confusing it with the *actual* title (which displays at the top of the page in the tab) */
.contentheader {
    /* Determines content positioning */
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;

    /* Styling */
    border-bottom: 1.5px solid var(--colour-borders);
}

/* Scale the image next to the title so it doesn't take up half the page */
.contentheader img {
    height: 2em;
    width: auto;
}

/* Home Page Content Formatting */
/* We want the blocks of information to be put side by side, though not as big as Content Page blocks and not in columns like Category Page blocks. */
.blocks-homepage {
    /* Determines content positioning */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    padding: 0.5rem 0;
}

/* The block of text with information at the top of the home page. */
.homepage-top-block {
    /* Determines content positioning */
    margin-bottom: 3rem;
    padding: 1rem;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;

    /* Customization */
    background: var(--colour-background-contentbox);
    border: 1.5px solid var(--colour-borders);
    border-radius: 5px;
}

/* Links within the top block */
.homepage-top-block a {
    border: 1.5px solid var(--colour-borders);
    padding: 4px;
    display: inline-block;
    margin: 0.20rem;

    transition: transform 0.15s ease, box-shadow 0.15s ease;

    /* Customization */
    border-radius: var(--size-bordercurves);
    text-decoration: none;
    color: var(--colour-text-link);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.homepage-top-block a:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Text within the top block */
.homepage-top-block p {
    margin-bottom: 1rem;
}

.homepage-top-block h3 {
    margin-bottom: 0.5rem;
}

/* Category Page Content Formatting */
/* We turn these into columns so we dont end up with a large amount of empty space in case specific blocks are larger than others (damn you, symptoms list!) */
.blocks-categorypage_afflictions {
    /* Determines content positioning */
    column-count: 4;
    column-gap: 40px;
    padding: 0.5rem 0;
}

/* Middle-ground for Addon content */
.blocks-categorypage_addons {
    /* Determines content positioning */
    column-count: 3;
    column-gap: 40px;
    padding: 0.5rem 0;
}

/* The items page, since it has different content lengths per element, works better with less columns. Goofy fix but it works for now */
.blocks-categorypage_items {
    /* Determines content positioning */
    column-count: 2;
    column-gap: 40px;
    padding: 0.5rem 0;
}

/* Content Page Content Formatting */
/* The deepest layer, this is where actual information is given. Similar to the homepage, but standalone for more unique customization. */
.blocks-contentpage {
    /* Determines content positioning */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: auto;
    gap: 1.5rem;
    align-items: start;
}

.contentpage-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.content-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 1rem;
}

/* Info card on the right side, similar to Baro Wiki's table */
.infobox-card {
    padding: 1.5rem;
    background: var(--colour-background-contentbox);
    border: 1.5px solid var(--colour-borders);
    border-radius: var(--size-bordercurves);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Title! */
.infobox-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--colour-borders);
}

/* Subheader! */
.infobox-section-header {
    font-weight: 600;
    opacity: 0.9;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem;
}

/* Empty row for the table-esque content */
.infobox-row {
    padding: 0.2rem 0;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Linked page text */
.infobox-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--colour-text-link);
}

/* Icon next to the linked text */
.infobox-inlineicon {
    height: 24px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* LABELS */
/* Container for the labels */
.infobox-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Label look, similar to the other links */
.infobox-label {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.infobox-label:hover {
    filter: brightness(1.2);
}

/* GO MY LABELS!!! */
.infobox-label--item { background-color: #216E4E; color: #000000; }
.infobox-label--not-visible-ingame { background-color: #4BCE97; color: #000000; }
.infobox-label--visible-on-health-interface { background-color: #4BCE97; color: #000000; }
.infobox-label--visible-on-hematology-analyzer { background-color: #4BCE97; color: #000000; }
.infobox-label--visible-on-scanner { background-color: #4BCE97; color: #000000; }
.infobox-label--affliction { background-color: #7F5F01; color: #000000; }
.infobox-label--lethality-depends { background-color: #9E4C00; color: #000000; }
.infobox-label--very-important { background-color: #FCA700; color: #000000; }
.infobox-label--first-aid { background-color: #AE2E24; color: #000000; }
.infobox-label--lethal { background-color: #F87168; color: #000000; }
.infobox-label--important { background-color: #C97CF4; color: #000000; }
.infobox-label--non-lethal { background-color: #C97CF4; color: #000000; }
.infobox-label--mechanic { background-color: #1558BC; color: #000000; }
.infobox-label--information { background-color: #669DF1; color: #000000; }
.infobox-label--procedure { background-color: #206A83; color: #000000; }
.infobox-label--surgery { background-color: #206A83; color: #000000; }
.infobox-label--essential { background-color: #94C748; color: #000000; }
.infobox-label--mental-symptom { background-color: #50253F; color: #000000; }
.infobox-label--niche { background-color: #96999E; color: #000000; }
.infobox-label--toggleable { background-color: #1558BC; color: #000000; }

/* Expansions */
.infobox-label--cybernetics-expansion { background-color: #164555; color: #000000; }
.infobox-label--surgery-plus-expansion { background-color: #6CC3E0; color: #000000; }
.infobox-label--eyes-expansion { background-color: #6CC3E0; color: #000000; }
.infobox-label--infections-expansion { background-color: #6CC3E0; color: #000000; }
.infobox-label--pharmacy-expansion { background-color: #6CC3E0; color: #000000; }

/* Just list all pages side by side in the Label-specific pages */
.blocks-labelpage {
    width: 100%;
}

.blocks-labelpage-grid {
    width: 100%;
}

.blocks-labelpage-grid .block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

/* Content Page Blocks */
/* These contain the text, images or other information we want to display on this page. */
.block-contentpage {
    /* Determines content positioning */
    padding: 1.5rem;

    /* Customization */
    background: var(--colour-background-contentbox);
    border: 1.5px solid var(--colour-borders);
    border-radius: var(--size-bordercurves);
}

/* Content Block Links */
/* Like before, formatting for links. These will be inline, so we want to ensure they dont feel out of place but still clearly clickable. */
.block-contentpage a,
.meta-item-link {
    /* Customization */
    text-decoration: none;
    color: var(--colour-text-link);
    background: var(--colour-background-contentbox);
}

/* Content Block H2 */
/* Really kicking in open doors with these comments. Edits the H2 within content blocks (auto-used by Liquid scripts) for better readability. */
.block-contentpage h2 {
    font-size: 1.4rem;
}

/* Content Block Text Area */
/* Self explanatory but alas; edits the text within content blocks for better readability. */
.block-contentpage-text {
    line-height: 1.6;
}

/* Category Page Blocks */
/* Each block is an element in which the 'links' to content pages are stored. */
.block {
    /* Determines content positioning */
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
    text-align: center;
    padding: 1.5rem;

    /* Customization */
    background: var(--colour-background-contentbox);
    border: 1.5px solid var(--colour-borders);
    border-radius: var(--size-bordercurves);
}

.block h2 {
    margin-bottom: 5px;
}

/* Homepage category title links */
.block h2 a {
    color: var(--colour-text-link);
    text-decoration: none;
    cursor: pointer;
}

.block h2 a:hover {
    color: var(--colour-text-hover);
}

/* 'Links' to Content Pages */
/* The thing mentioned above. Contains text and an image corresponding to a content page, sorted into categories. */
.block > a {
    /* Enforces Size */
    min-height: 40px;
    padding: 8px 10px;
    margin-bottom: 5px;
    margin-top: 5px;

    /* Determines content positioning */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    /* Customization */
    background: var(--colour-background-inlinelink) 0.15s ease;
    border: 1.5px solid var(--colour-borders);
    border-radius: var(--size-bordercurves);
    text-decoration: none;
    color: var(--colour-text-default);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* Link-To-Content on hover */
/* How should it look when hovering? */
.block > a:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Link-To-Content image */
/* How should the image look while in that block? */
.block > a img {
    height: 2em;
    width: auto;
}

/* Addon Overrides */
/* On specific pages, gives you the option to switch to page view for an addon instead of just Base NT */
.addon-switcher {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Make the button a rectangle to differentiate it from the rest of the content on the page */
.addon-button {
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--colour-borders);
  background: var(--colour-background-contentbox);
  color: var(--colour-text-default);
  cursor: pointer;
}

/* Make it 'glow' to highlight */
.addon-button.active {
  background: #555;
  border-color: #aaa;
}

/* Changes for Mobile */
/* Makes sure that things remain readable on mobile devices. */
@media (max-width: 768px){

    .container{
        flex-direction: column;
    }

    #sidebar{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding-top: 10px;
        padding-right: 5px;
        padding-left: 5px;
        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        height: 50px;
        width: 100%;

        border-right: none;
        border-top: 1.5px solid var(--colour-borders);

        position: fixed;
        bottom: 0;
        top: unset;
    }

    #sidebar a{
        display: block;
        font-size: 18px;
        padding: 10px;
    }

    .contentpage-layout {
        grid-template-columns: 1fr;
    }

    .blocks-categorypage_afflictions{
        column-count: 1;
    }

    .blocks-categorypage_items{
        column-count: 1;
    }

    .topnav input,
    .topnav input:focus{
        width: 100%;
        max-width: 200px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .container{
        flex-direction: column;
    }

    #sidebar{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding-top: 10px;
        padding-right: 5px;
        padding-left: 5px;
        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        height: 50px;
        width: 100%;

        border-right: none;
        border-top: 1.5px solid var(--colour-borders);

        position: fixed;
        bottom: 0;
        top: unset;
    }

    #sidebar a{
        display: block;
        font-size: 18px;
        padding: 10px;
    }

    .contentpage-layout {
        grid-template-columns: 1fr;
    }

    .blocks-categorypage_afflictions{
        column-count: 2;
    }

    .blocks-categorypage_items{
        column-count: 2;
    }

    .topnav input,
    .topnav input:focus{
        width: 100%;
        max-width: 200px;
    }
}