/*
    Ex Officio Theme
    [2020 Wikidot Theme]
    Created by Rounderhouse and aismallard.
    Thanks to wctaiwan, [TODO: list of people] for reviewing this theme.
    Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
    The GOC logo was created by 7happy7. Licensed under CC BY SA 3.0.
*/

/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Russo+One&display=swap');

/* All Vars Used */

:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: 'black-highlighter';
    /* must be either 'black-highlighter' or 'sigma9' */
    --theme-id: 'black-highlighter';
    /* set this to the URL of your theme's page - e.g. for 'component:ar-theme', set it to 'ar-theme' */
    --theme-name: 'goc';
    /* set this to your theme's full name */
    --theme-name-full: 'Ex Officio Theme'; /* no idea if this is the right var or not */

    /* Header */
    --logo-image: url("https://the-scp.foundation/assets/images/template/tags/gamers-against-weed.svg");
    --header-title: 'Gamers Against Weed';
    --header-subtitle: 'Sic Semper Cannabis';

    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Russo One', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --mono-font: 'PT Mono', 'Andale Mono', 'Courier New', Courier, monospace;

    /* Standard Colors */
    --white-monochrome: 252, 252, 252;
    /* white */
    --pale-gray-monochrome: 244, 244, 244;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 170, 170, 170;
    /* light accent gray for login status */
    --gray-monochrome: 66, 66, 72;
    /* gray */
    --dark-gray-monochrome: 48, 48, 52;
    /* dark accent gray for sidebar background */
    --black-monochrome: 12, 12, 12;
    /* black */
    --bright-accent: 39, 149, 43;
    /* bright blue */
    --medium-accent: 117, 230, 92;
    /* pale blue */
    --dark-accent: 169, 236, 164;
    /* v pale blue */
    --newpage-color: 112, 255, 99;

    /* Primary Theme Colors */
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--bright-accent);
    --swatch-primary-darkest: var(--bright-accent);

    /* Primary Menu Colors */
    --swatch-menubg-color: var(--pale-gray-monochrome);
    --swatch-menubg-light-color: var(--white-monochrome);
    --swatch-menubg-medium-color: var(--medium-accent);
    --swatch-menubg-medium-dark-color: var(--black-monochrome);
    --swatch-menubg-dark-color: var(--medium-accent);
    --swatch-menubg-hover-color: var(--gray-monochrome);
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-border-color: var(--dark-accent);

    /* Primary Header Colors */
    --swatch-headerh1-color: var(--bright-accent);
    --swatch-headerh2-color: var(--bright-accent);
    --swatch-topmenu-border-color: var(--medium-accent);
    --swatch-topmenu-bg-color: var(--dark-accent);
    --rating-module-button-color: var(--black-monochrome);
    --rating-module-text-color: var(--black-monochrome);

    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));

    /* Header measurements */
    --header-height-on-desktop: 11rem;
    --header-height-on-mobile: 7.5rem;
    --topbar-height-on-desktop: 1.875rem;
    --topbar-height-on-mobile: 3.5rem;

    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;
    --background-gradient-color: var(--dark-accent);
    --background-gradient-distance: 20rem;
    --diagonal-stripes: none;
}

/* Add scrollbar */
html,
body,
#side-bar:hover {
    scrollbar-color: rgb(var(--bright-accent)) rgb(var(--dark-accent));
}

::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
    background-color: rgb(var(--dark-accent));
}

::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--bright-accent));
}

/* Fix wrapping issue of header on mobile */
#header h1 span::before {
    /* TODO: wrapping - this doesn't do anything? */
    max-width: 80px;
}

/* Fix placement of header subtitle on mobile (this and below) */
@media only screen and (max-width: 424px) {
    #header h2 span::before {
        translate: 0 7.5em;
    }
}
@media only screen and (min-width: 424px) and (max-width: 768px) {
    #header h2 span::before {
        translate: 0 5.5em;
    }
}

@media only screen and (max-width: 768px) {
    #header {
        background-position: calc(7.4rem - var(--size)) calc(((var(--size) * -1) + 7.5rem + var(--y-offset)) / 2);
    }

    #header h1 a,
    #header h2 span {
        margin-left: 7.75rem;
        margin-top: 0.35em;
    }

    #header h1 a {
        line-height: 1;
    }

    #header h2 span {
        margin-top: -webkit-calc(5.5rem + var(--offset-from-page-top));
        margin-top: calc(5.5rem + var(--offset-from-page-top));
    }
}

#header {
    filter: drop-shadow(.042rem .042rem .042rem rgb(150, 150, 150));
}

#header h1 a::before {
    color: rgb(var(--medium-accent));
}

/* Styles topbar menu item color */
#top-bar div.mobile-top-bar > ul > li > ul,
#top-bar div.top-bar > ul > li > ul {
    color: rgb(var(--white-monochrome));
}

/* Wraps login status in separate box for contrast */
#login-status {
    background-color: rgb(var(--white-monochrome));
    padding: .4%;
    border: 1px solid rgb(var(--dark-accent));
}

/* Styles login status link */
#login-status a {
    color: rgb(var(--bright-accent));
    font-weight: bold;
}

/* Style search box */
#search-top-box input.empty {
    background-color: rgba(var(--pale-gray-monochrome));
    color: rgb(var(--medium-accent));
}

/* Style blockquotes */
blockquote,
.blockquote {
    border-style: outset;
    border-color: rgb(var(--dark-accent));
    background-color: rgba(var(--light-gray-monochrome), 0.03);
}

/* Set horizontal rules to have the double line GOC formats have */
hr {
    border-top: 2px solid #777;
    padding: 0.5px;
    border-bottom: 1px solid #777;
    background: transparent;
}

/* Set link colors */
a {
    color: rgb(var(--medium-accent));
}
a:visited {
    color: rgb(var(--dark-accent));
}
a.newpage {
    color: rgb(var(--link-color));
}

/* Set background and style for section above topbar */
#extra-div-2 {
    --drop-shadow: rgb(var(--pale-gray-monochrome));
    display: block;
    width: 100%;
    height: 11rem;
    top: 0;
    left: 0;
    position: absolute;
    background: url('http://scptestwiki.wikidot.com/local--files/goc/tile-header-background.png');
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-filter: drop-shadow(-0.125rem 0.125rem 0rem var(--drop-shadow));
    filter: drop-shadow(-0.125rem 0.125rem 1rem var(--drop-shadow));
    pointer-events: none;
}