/* IMPORTANT */
body {
    --nav-sticky-margin: 2rem;

    --colour-scrollbar: var(--colour-accent-1);
    --colour-selection: var(--colour-accent-1);
}
#lightbox {
    --lightbox-background-colour: var(--colour-background);
    --lightbox-image-border-colour: var(--colour-border);
    --lightbox-image-border-size: 0px;
    --lightbox-image-border-radius: var(--border-radius);
}

/* body */
body {
  background: rgb(var(--colour-background)) var(--background-image) no-repeat center fixed; background-size: cover;
  color: rgb(var(--colour-text)); font-size: 1rem; word-wrap: break-word;

  min-height: calc(100vh - var(--body-margin)*2);
  margin: var(--body-margin);
  display: flex; align-items: center; justify-content: center;
}
a { color: rgb(var(--colour-accent-1)); }
a:hover { color: rgb(var(--colour-accent-2)); }


body:not(.full_nav) {
    /* min 3rem */
    --nav-button-size: 3rem;
    --nav-size: calc(3rem + var(--nav-button-size));
    --header-full-height: calc(var(--header-height) + var(--nav-size));
}
body.full_nav {
    /* min 3rem */
    --nav-button-size: 4rem;
    --nav-size: var(--nav-button-size);
    --header-full-height: calc(var(--header-height) + var(--nav-size));
}

/* main */
#main_container {
    grid-column: main-start / main-end; grid-row: main-start / main-end;

    /* HIDE UNTIL js LOADED */ display: none;
    grid-column-gap: var(--content-margin);
    grid-template-rows:
        [full-start header-start]
            auto
        [header-end nav-start]
            auto
        [nav-end content-start]
            auto
        [content-end full-end]
    ;
    grid-template-columns:
        [content-start header-start nav-start]
            0
        [sidebar-start]
            calc(100% - var(--content-margin)*2)
        [section-end]
            0
        [header-end nav-end content-end]
    ;
}

/* no header */
#main_container.no_header {
    grid-template-rows:
        [full-start nav-start]
            auto
        [nav-end content-start]
            auto
        [content-end full-end]
    ;
}
#main_container.no_header #header_container { display: none!important; }

#content_container {
    grid-column: content-start / content-end; grid-row: content-start / content-end;

    display: grid;
    grid-gap: var(--sidebar-post-margin);
    grid-template-columns:
        [sidebar-start]
            var(--sidebar-width)
        [sidebar-end section-start]
            minmax(calc(var(--post-width)/2), var(--post-width))
        [section-end]
    ;
    justify-content: center;
    padding: var(--content-margin);

    background: rgb(var(--colour-container-background)) var(--container-image) no-repeat center fixed; background-size: cover;
    border: rgb(var(--colour-border)) solid var(--border-size);
    border-top-width: 0px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}


#header_container { grid-column: header-start / header-end; grid-row: header-start / header-end; }
#nav_container { grid-column: nav-start / nav-end; grid-row: nav-start / nav-end; }
#nav_container > * { grid-column: sidebar-start / section-end; }
body.full_nav #nav_container > * { grid-column: content-start / content-end; }
#side_container { grid-column: sidebar-start / sidebar-end; grid-row: sidebar-start / sidebar-end; }
#section_container { grid-column: section-start / section-end; grid-row: section-start / section-end; }

/* FALSE BG */
body::after {
    content: ""; background: inherit;
    position: fixed; left: 0; top: 0; right: 0; z-index: 2;
    height: calc(var(--nav-sticky-margin) + var(--border-radius) + var(--border-size));
}

/* HEADER */
#header_container {
    z-index: 9;

    background: rgb(var(--colour-header-background));
    border: var(--border-size) solid rgb(var(--colour-border));
    border-radius: var(--border-radius);
    overflow: hidden;

    height: var(--header-full-height);
    min-height: var(--nav-size);
    margin-bottom: calc(-1 * var(--nav-size));
}
header, .header_image { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* NAV */
#nav_container {
    display: grid; grid-template-columns: inherit; grid-gap: inherit;
    position: sticky; top: var(--nav-sticky-margin); z-index: 9;
    min-height: var(--nav-size); overflow: hidden;
    background: rgb(var(--colour-nav-background)); border: var(--border-size) solid rgb(var(--colour-border)); border-radius: var(--border-radius) var(--border-radius) 0 0;
}
nav { display: flex; justify-content: space-between; }
body:not(.full_nav) nav { grid-gap: 1rem; align-items: center; }

#nav_container:not(.has_tabs) [data-section-label="posts"], #nav_container.has_tabs span.no_tabs { display: none; }

nav > * {
    display: flex; align-items: center; overflow: hidden;
    transition: 1s; -webkit-transition: 1s;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
}
nav > *:not(.no_tabs) { color: rgb(var(--colour-accent-1)); background-color: rgba(var(--colour-accent-1), 0.3); }
body:not(.full_nav) nav > * { flex-basis: var(--nav-button-size); height: var(--nav-button-size); border-radius: var(--nav-button-size); }
body.full_nav nav > * { flex-basis: var(--nav-size); height: var(--nav-size); }

nav > *.search { justify-content: flex-end; }

nav > *:not([data-section-open="true"]):not(.pagination):hover, nav > *:focus-within:not(.pagination) { flex: 3; }
nav > *[data-section-open="true"], nav > *.no_tabs { flex: 4; }

nav > *:not([data-section-open="true"]):hover, nav > *:focus-within {
    color: rgb(var(--colour-accent-2)); background-color: rgba(var(--colour-accent-2), 0.3);
}
nav > *[data-section-open="true"] { color: rgb(var(--colour-open-tab)); background-color: rgba(var(--colour-open-tab), 0.3); }

nav .nav_label { flex: 1; overflow: hidden; }
nav span, nav input { white-space: nowrap; padding: 0 1rem; }
nav input { width: 100%; height: var(--nav-button-size); letter-spacing: 1px; text-align: right; }

nav i.nav_icon, nav button {
    flex-shrink: 0; display: flex; place-content: center; place-items: center;
    background-color: rgba(var(--colour-nav-background), 0.5);
}
body:not(.full_nav) nav i.nav_icon, body:not(.full_nav) nav button {
    width: var(--nav-button-size); height: var(--nav-button-size);
}
body.full_nav nav i.nav_icon, body.full_nav nav button {
    width: var(--nav-size); height: var(--nav-size);
}

nav button { cursor: pointer; transition: 1s; -webkit-transition: 1s; }
nav button:hover { color: rgba(var(--colour-accent-2), 0.7); }
nav svg { font-size: 1.5rem; }
nav > *[data-section-open="true"] .closed, nav > *[data-section-open="false"] .opened { display: none; }
nav > *[data-section-open="true"] { cursor: default; }
nav .pagi_back { order: -1; }

/* SIDEBAR */
#side_container {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1rem;
    align-items: flex-start;
}
aside {
    position: sticky;
    top: calc(var(--nav-sticky-margin) + var(--nav-size) + var(--content-margin));

    display: flex;
    place-content: center;
    flex-direction: column;
    grid-gap: 1rem;
}
aside > div {
    background-color: rgb(var(--colour-sidebar-background));
    border: rgb(var(--colour-border)) solid var(--border-size);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;

    display: grid;
    /* align-content: flex-start; */
}

/* sidebar icon */
.sidebar_icon {
    height: var(--sidebar-icon-size); width: var(--sidebar-icon-size); overflow: hidden;
    position: absolute; left: 0; top: 0;
    border-bottom-right-radius: var(--border-radius);
}
.sidebar_icon img { height: 100%; width: 100%; object-fit: cover; }

/* sidebar image */
.sidebar_image {
    height: var(--sidebar-image-height);
    width: 100%;
    overflow: hidden;
}
.sidebar_image img {
    height: 100%;
    width: 100%;
    object-position: center;
    object-fit: cover;
}
/* title */
.sidebar_title {
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 1em;
    font-size: 1.3rem; height: 3em;
    background: rgb(var(--colour-sidebar-background));
}

.sidebar_title:not(:first-child):not(:last-child) {
    height: 5em; margin: -1.5em -1.5em -1rem;
    clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 75%);
}
.sidebar_title:not(:first-child):not(:last-child):hover { clip-path: polygon(0 0%, 100% 25%, 100% 75%, 0% 100%); }

.sidebar_title:first-child:not(:last-child) {
    height: 5em; margin: 0em -1.5em -1rem;
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 75%);
}
.sidebar_title:first-child:not(:last-child):hover { clip-path: polygon(0 0%, 100% 0%, 100% 75%, 0% 100%); }

.sidebar_title:not(:first-child):last-child {
    height: 5em; margin: -1.5em -1.5em 0rem;
    clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
}
.sidebar_title:not(:first-child):last-child:hover { clip-path: polygon(0 0%, 100% 25%, 100% 100%, 0% 100%); }

.sidebar_title span {
    color: rgb(var(--colour-accent-1)); background-color: rgba(var(--colour-accent-1), 0.3);
    width: 100%; height: 100%;
    display: flex; grid-gap: 1rem; place-content: center; place-items: center;
    text-align: center;
    padding: 1.5em;

    transition: 1s; -webkit-transition: 1s;
}
.sidebar_title:hover span { color: rgb(var(--colour-accent-2)); background-color: rgba(var(--colour-accent-2), 0.3); }

/* description */
.sidebar_description { padding: 1rem calc(var(--border-radius)/4 + 1rem) calc(var(--border-radius)/4 + 1rem); text-align: justify; }
.sidebar_description a { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

/* sidebar heading & links */
.sidebar_heading, .sidebar_links a, .featured_tags a {
    display: flex; justify-content: space-between;
    text-transform: uppercase; letter-spacing: 1px; line-height: 1em;
    padding: 1rem calc(var(--border-radius)/4 + 1rem);
}
.sidebar_heading, .sidebar_links a:last-child, .featured_tags a:last-child { padding: 1rem calc(var(--border-radius)/4 + 1rem) calc(var(--border-radius)/4 + 1rem); }
.sidebar_heading { padding-top: calc(var(--border-radius)/4 + 1rem); }

/* sidebar headings */
.sidebar_heading { align-items: center; grid-gap: 1rem; font-weight: bold; }
i.box_icon { font-size: 1.25rem; }
[data-toggle-open="false"] svg.close_icon, [data-toggle-open="true"] svg:not(.close_icon) { display: none; }

/* links & featured tags */
.sidebar_links a, .featured_tags a { align-items: flex-start; grid-gap: 0.5rem; font-size: 0.8rem; }
/* links */
.sidebar_links a { font-weight: bold; text-transform: uppercase; }
.sidebar_links a:hover { background-color: rgba(var(--colour-accent-2), 0.3); }

/* featured tags */
.featured_tags .name { font-weight: bold; text-transform: uppercase; }
.featured_tags .count { color: rgb(var(--colour-text)); }
.featured_tags .count:empty { display: none; }
.featured_tags a[data-current-page="true"] { cursor: default; color: rgb(var(--colour-accent-2)); background-color: rgba(var(--colour-accent-2), 0.3); pointer-events: none; }
.featured_tags a:not([data-current-page="true"]):hover { color: rgba(var(--colour-accent-2), 0.7); background-color: rgba(var(--colour-accent-2), 0.3); }

/* SECTIONS */
[data-section][data-section-open="false"] { display:none!important; }
section a:not([data-post-content-block="link"]) { word-break: break-all; } /* break long urls */
section article { width: 100%; display: flex; flex-direction: column; }
article > div { display: grid; }

/* NOT POST SECTIONS */
section:not([data-section="posts"]) { display: grid; grid-gap: 2rem; }
section:not([data-section="posts"]) article img { max-width: 100%; display: block; margin: auto; }
section:not([data-section="posts"]) article figure { overflow: hidden; }
section:not([data-section="posts"]) figure img { width: 100%; }

/* SECTION STYLING */
article:not([data-article-type="post"]) .article_heading,
[data-article-type="links"] > div > *,
[data-article-type="profile"] > div > *,
[data-article-type="faq"] > div > *,
[data-article-type="ask"] > div,
[data-article-type="submit"] > div {
    overflow: hidden;
    border-radius: var(--border-radius);
    border: var(--border-size) solid rgb(var(--colour-border));
    background-color: rgb(var(--colour-post-background));
}
[data-article-type="submit"] > div {
    background: white;
}

article:not([data-article-type="post"]), article:not([data-article-type="post"]) > div { display: flex; flex-wrap: wrap; grid-gap: 1rem; }

/* SECTION HEADINGS */
section:not([data-section="posts"]) .article_heading {
    display: flex; grid-gap: 1rem; align-items: center;
    text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
    color: rgb(var(--colour-accent-1)); background-color: rgba(var(--colour-accent-1), 0.3);
    padding: 1rem;
}
section:not([data-section="posts"]) article:not([data-article-type="faq"]) > .article_heading { border-radius: var(--border-radius); }

/* article items */
.article_item { flex-grow: 1; flex-basis: 100%; display: flex; }
[data-article-type="faq"] .article_item { ; flex-direction: column; }
.article_item > * { display: flex; flex-wrap: wrap; grid-gap: 1rem; align-items: center; padding: 1em; }
.article_item > .item_label, .article_item a  {
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px; line-height: 1rem;
    color: rgb(var(--colour-accent-1)); background-color: rgba(var(--colour-accent-1), 0.3);
}
article.toggles_on .article_item.is_toggle .item_label { cursor: pointer; transition: 1s; -webkit-transition: 1s; }
.article_item a { padding: 0.5em; border-radius: var(--border-radius);  }
.article_item a:hover,
article.toggles_on .article_item.is_toggle .item_label:hover,
article.toggles_on .article_item.is_toggle.open .item_label { color: rgb(var(--colour-accent-2)); background-color: rgba(var(--colour-accent-2), 0.3); }

/* links */
[data-article-type="links"] > div {
    flex-wrap: wrap;
}
[data-article-type="links"] > div a {
    flex-grow: 1; padding: 1rem;

    display: flex; grid-gap: 0.5rem;
    justify-content: space-between; align-items: center;

    font-size: 0.8rem; line-height: 1em;
    letter-spacing: 1px; font-weight: bold; text-transform: uppercase;

    background-color: rgba(var(--colour-accent-1), 0.3);
}
[data-article-type="links"] a:hover { background-color: rgba(var(--colour-accent-2), 0.3); }

/* ask & faq */