/* i guess i have to move all those style blocks to here -nekori64 */
/* KuroWiki Styling File */

/* should we include this in the self-host version??? */

/* VARIABLE LAND */
/* first things first */
/* this should work as this file gets loaded everywhere */
html {
    /* dark mode */
    /* --kurowiki-accent-dark: rgb(137, 182, 240); */
    --kurowiki-accent-dark: rgb(177, 187, 216);
    --accent-dark: /*rgb(137, 182, 240)*/ rgb(177, 187, 216); /* these two are practically the same thing*/
    --contentbox-background-color-dark: rgba(5,5,5,0.3);
    --search-background-color-dark: rgba(50,50,50,1);
    --mdlcard-background-color-dark: rgba(15,15,15,0.4);
    --gallery-bg-dark: rgba(50,50,50,1);
    --gallery-border-dark: rgba(30,30,30,1);
    --hatnote-color-dark: rgba(8,8,8,0.3);
    --text-color-white: white;
    --background-image-dark: url('../../resources/img/bg-dark.jpg'); 
    --scrollbar-color-dark: rgb(54,55,58) rgb(9,12,19);
    --drawer-color-dark: rgba(0, 0, 0, 0.5);
    --navhoverlink-dark: rgba(0, 0, 0, 0.6);

    /* light mode */
    --kurowiki-accent-light:rgb(177,126,73);
    --accent-light: rgb(177,126,73);
    --contentbox-background-color-light: rgba(255,255,255,0.85);
    --search-background-color-light: white;
    --gallery-bg-light: #f8f8f8;
    --gallery-border-light: #ccc;
    --hatnote-color-light: rgba(255,255,255,0.75);
    --mdlcard-background-color-light: white;
    --text-color-black: black;   
    --background-image-light: url('../../resources/img/bg-light.jpg'); 
    --scrollbar-color-light: rgb(177,126,73) rgb(212,210,210);
    --drawer-color-light: rgba(255,255,255,0.85);
    --navhoverlink-light: rgba(255, 255, 255, 0.6);


    --kurowiki-accent: var(--kurowiki-accent-dark);
    --accent: var(--accent-dark);
    --contentbox-background-color: var(--contentbox-background-color-dark);
    --search-background-color: var(--search-background-color-dark);
    --mdlcard-background-color: var(--mdlcard-background-color-dark);
    --gallery-bg: var(--gallery-bg-dark);
    --gallery-border: var(--gallery-border-dark);
    --hatnote-color: var(--hatnote-color-dark);
    --text-color: var(--text-color-white); 
    --background-image: var(--background-image-dark); 
    --scrollbar-color: var(--scrollbar-color-dark);
    --drawer-color: var(--drawer-color-dark);
    --navhoverlink: var(--navhoverlink-dark);
    

    /* Light Mode adjustments */
        &.light-mode {
            --kurowiki-accent: var(--kurowiki-accent-light);
            --accent: var(--accent-light);
            --contentbox-background-color: var(--contentbox-background-color-light);
            --search-background-color: var(--search-background-color-light);
            --mdlcard-background-color: var(--mdlcard-background-color-light);
            --gallery-bg: var(--gallery-bg-light);
            --gallery-border: var(--gallery-border-light);
            --hatnote-color: var(--hatnote-color-light);
            --background-image: var(--background-image-light); 
            --text-color: var(--text-color-black); 
            --scrollbar-color: var(--scrollbar-color-light);
            --drawer-color: var(--drawer-color-light);
            --navhoverlink: var(--navhoverlink-light);
        }

    /* button status */
    --button-status: var(--buttonstatus-set);
    --buttonstatus-set: block;
}


/* for firefox */
html {
    color: var(--text-color-white);
    &.light-mode {
    color: var(--text-color-black) !important;
}
}

/* the fucking font:tm: */
/* if this fails to load i will explode */
* {
    font-family: 'Roboto', sans-serif;
}

/* mdl-layout stuff */
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
 /* This background is dark, so we set text to white. Use 87% black instead if
    your background is light. */
 color: white;
}

/* so the links dont have that ugly underline */
a {
    text-decoration: none !important;
}

/* i forgor what this is */
.mdl-layout__header, .is-casting-shadow {
    display:block !important;
    word-wrap: normal;
}

/* this too */
.mdl-hidden {
    display: none !important;
}

/* this too, two! */
.mdl-navigation__link:hover {
 background-color: var(--navhoverlink) !important;
}

/* custom mdl stuff: the drawer */
.mdl-layout__drawer {
 background-color: var(--drawer-color);
 backdrop-filter: blur(20px);
 color: var(--text-color) !important;
 border-color: none;
 border-right: 0px;
}

.mdl-layout__drawer-button {
    z-index: 4 !important;
}

/* i guess this is for the drawer idk */
/* wait is this a leftover from lexsite???? */
.mdl-navigation__link {
 color:var(--text-color) !important;
 
}

/* its hatnote time */
.hatnote {
 background-color: var(--hatnote-color);
 margin-top: 20px;
 margin-right: 15px;
 padding-left: 10px;
 padding-right: 10px;
 font-style: italic;
}

/* image boxshadow */
img {
    box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);
}

/* what was this for??????? */
.mdl-layout__header {
    background-color: rgba(0, 0, 0, 0) !important;
}

/* waf cool bg :3 */
html {
    background-image: var(--background-image);
    background-size: cover;
    background-attachment: fixed;

    /* scrollbar */
    overflow: scroll;
    scrollbar-color: var(--scrollbar-color);
    overflow-y: hidden;
    overflow-x: hidden !important;
}

.mdl-layout__drawer-button {
    display: var(--button-status) !important;
}

.mdl-card {
    background-color: var(--mdlcard-background-color);
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* debug watermark style */
#watermark {
    position: fixed;
    bottom: 0;
    left: 0;
    font-family: sans-serif;
    text-align: left;
    padding: 1px;
    margin-bottom: -1px;
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000000006;
}

/* springviewer watermark */
#viewer-watermark {
    position: fixed;
    bottom: 0;
    right: 0; 
    left: auto;
    font-family: sans-serif;
    text-align: left;
    padding: 1px;
    margin-bottom: -1px;
    font-size: 14px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000000006; 
}


/* springviewer moment */
#springviewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mdl-hidden {
    display: none !important;
}

/* so now i go here, i remove one letter and it should all work */
/* ....right? */
/* RIGHT? */
/* YOU PIECE OF COMPUTER SOFTWARE JUST FUCKING WORK MAN */
/* ok it was cache,, */
/* wait this viewer thing still deosnt work ALL I DID WAS RENAME IT- */
.viewer-hidde {
    display: none !important;
    opacity: 0;
}

.viewer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85%;
}

#viewer-media-container {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#viewer-media-element {
    max-width: 80%;
    max-height: 95%;
    height: auto; 
    width: auto;
    border: none;
    background-color: transparent;
}

#viewer-media-container video,
#viewer-media-container audio {
    display: block;
    margin: auto;
}

#viewer-caption {
    color: white;
    font-size: 1.1em;
    margin-top: 10px;
    padding: 0 50px;
    text-align: center;
    max-width: 80%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 1000000007;
}

.viewer-counter {
    position: absolute;
    top: 60px;
    right: 40px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    z-index: 1000000007;
}

/* is this a copy paste? it absolutely is. */
.flscr-btn {
    position: absolute;
    top: 10px;
    right: 100px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 1000000007;
}

.dl-btn {
    position: absolute;
    top: 10px;
    right: 68px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 1000000007;
}

.close-btn:hover {
    color: #bdbdbd; 
}
.dl-btn:hover {
    color: #bdbdbd; 
}
.flscr-btn:hover {
    color: #bdbdbd; 
}


.nav-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    padding: 0 15px;
    transition: opacity 0.2s, background-color 0.2s;
    user-select: none;
    opacity: 0.7;
    height: 100%;
    margin: 0 10px;
    padding: 0 15px; 
    height: 100%;
}

.nav-btn:hover {
    opacity: 1;
}

.prev-btn {
    position:absolute;
    left:0px!important;
}

.next-btn {
    position:absolute;
    right:0px!important;
}

/* remember when we said its gallery time and it gallered all over the pla- */
.wiki-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; 
    margin: 1em 0;
    justify-content: left;
    text-align: center; 
}
.wiki-gallery .gallery-item {
    width: 220px; 
    margin: 0;
    padding: 0;
    display: block;
}
.wiki-gallery .thumb-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px; 
    width: 100%;
    border: 1px solid var(--gallery-border);
    background-color: var(--gallery-bg);
    padding: 6px;
    margin-bottom: 4px;
}
.wiki-gallery .thumb-frame img {
    max-height: 100%; 
    max-width: 100%;
    object-fit: contain;
    box-shadow: none;
    display: block;
}
.gallery-caption {
    padding: 0 4px;
    margin-top: 4px;
    font-size: 0.9em !important; /* using the generic figcaption font-size */
    line-height: 1.4;
    color:var(--text-color);
    text-align: left;
}

/* gallery item but its not on the gallery ahh moment */
figure:not(.gallery-item) {
    max-width: 80%; 
    margin: 1em auto;
    border: none;
    background-color: transparent;
    padding: 0;
    display: block;
    text-align: center; 
}
figure:not(.gallery-item) img {
    border: 1px solid var(--gallery-border);
    background-color: var(--gallery-bg);
    padding: 6px;
    display: inline-block;
    margin: 0 auto 5px auto;
    box-shadow: none;
    height: auto;
}
figure:not(.gallery-item) figcaption {
    display: block;
    padding: 5px 0 0 0;
    margin: 0 auto;
    max-width: 70%;
    font-size: 1em;
    line-height: 1.4;
    color:var(--text-color);
    text-align: center;
}
/* figcaption normal edition */
figcaption {
    font-size: 0.9em !important; 
}

/* can the code fucking code now thanks mr code */
code {
    font-family: 'Consolas', 'Hack' !important;
.demo-card-wide.mdl-card {
  width: 512px;
}
}

/* Resistance is futile. Work. Now. Please. */
@media (max-width: 1160px) {
    .featured-article,
    .did-you-know,
    .recent-news {
     width: 100%;
     margin-top: 5%;
     margin-bottom: 5%;
    }
    #desktop-search {
     display: none;
}
    #mobile-search {
     display: block;
}
}

@media (min-width: 1160px) {
.homepage-cards {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 20px;
}
.homepage-cards .demo-card-wide {
    display: table-cell;
    vertical-align: top;
    text-align: left;
}
#desktop-search {
    display: block;
}
#mobile-search {
    display: none;
}
}

/* why the fuck cant i just merge these ~~two~~ ~~OOPS SIX NOW~~ WAIT THREE NOW fucking hell */
.featured-article.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 60px;
  background-image: linear-gradient(rgb(120, 120, 120), rgb(90, 97, 136)) !important;
}
.did-you-know.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 60px;
  background-image: linear-gradient(rgb(120, 120, 120), rgb(158, 111, 117)) !important;
}
.recent-news.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 60px;
  background-image: linear-gradient(rgb(120, 120, 120), rgb(136, 107, 148)) !important;
}

/* CSS FOR RECENT NEWS */
summary {
    font-size: 20px;
    padding: 5px;
    line-height: 25px;
    color: var(--kurowiki-accent);
}

summary:hover {
    cursor: pointer;
}

/* mdl's h1-h3 are way tooooo gigantic so we make them use mdl's h4-h6 styling */
h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    margin: 24px 0 16px;
    letter-spacing: 0em;
    -moz-osx-font-smoothing: grayscale;
}

h2 {
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    margin: 24px 0 16px;
    letter-spacing: 0em;
}

h3, h4, h5, h6 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin: 24px 0 16px;
    letter-spacing: .04em;
}

/* these are infoboxes */

.infobox {
    width: 300px; 
    float: right; 
    margin: 0 0 1em 1em; /* top, right, bottom, left margin */
    border: 1px solid var(--gallery-border);
    background-color:  var(--gallery-bg);
    color: var(--text-color);
    font-size: 90%;
    line-height: 1.4;
}

.infobox-title {
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    padding: 0.25em 0.5em;
    color: var(--text-color);
}

/* img style + container */
.infobox-img-container {
    padding: 0;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    display: block;
}

.infobox-img {
    max-width: 95%; /* wont go full width as its weird like that */
    height: auto;
    display: block;
    justify-content: center !important;
    margin: 0 auto !important;
    display: block !important;
    box-shadow: none !important; /* just so it doesnt look weird */
}

.infobox-img-caption {
    padding: 0.5em 0.5em 0.7em 0.5em;
    color: darkgray;
}

/* table style */
.infobox-data-table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

/* table rows */
.infobox-data-table tr {
    border-bottom: 0px;
}

.infobox-data-table tr:last-child {
    border-bottom: none;
}

/* table headers */
.infobox-data-table th {
    text-align: left;
    font-weight: bold;
    padding: 0.3em 0.6em;
    width: 40%;
}

/* value column */
.infobox-data-table td {
    padding: 0.3em 0.6em;
    text-align: left;
    word-wrap: break-word;
}
/* the infobox goes out of bounds when there is not enough content, so we make the main content box adjust itself instead */
#mainbox {
    background-color: var(--contentbox-background-color); 
    backdrop-filter: blur(15px); 
    width:96%; 
    justify-content: center; 
    display: block; 
    margin: 0 auto; 
    padding: 8px;
    overflow: hidden;
}