/*
Theme Name: HelpHub Theme 2021
Theme URI: https://helphub.gyanthub.com
Author: the GyantHub team
Author URI: https://gyanthub.com
Description: HelpHub Theme 2021
Version: 0.9.14
Requires PHP: 7.4.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, left-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sidebar-menu, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready
Text Domain: helphub-theme
*/

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #303030;
    font-size: max(14px, min(1.185vw, 24px));
    font-weight: 300;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/*** main layout ***/

.grid {
    display: grid;
    grid-template-columns: 22% 1fr;
    grid-template-rows: fit-content(100vh);
    max-height: 100vh;
    background-image: url('../images/GYANT-bg.png');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 26%;
}

@media screen and (max-width: 900px) {
  .grid {
	background: none;
  }
}

/*** header ***/

.header {
    grid-column: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    height: 12vh;
    padding: 0 5vw 0 4vw;
}

@media screen and (max-width: 900px) {
  .header {
    position: relative;
    justify-content: initial;
    flex-wrap: wrap;
    height: 25vh;
    min-height: 120px;
  }
}

.header__sideMenuAnchor {
    display: none;
}

@media screen and (max-width: 900px) {
    .header__sideMenuAnchor {
        display: initial;
        background: transparent;
        border: none;
        height: 2vh;
        margin-right: 6vw;
    }

    .header__sideMenuAnchor img {
        height: 100%;
    }
}

.logo {
    display: flex;
    align-items: center;
    color: inherit;
	text-decoration: none;
}

@media screen and (max-width: 900px) {
  .logo {
	font-size: 1.05em;
  }
}

.logo img {
    height: 5vh;
    min-height: 36px;
    max-height: 72px;
}

@media screen and (max-width: 900px) {
    .logo img {
        height: 6vh;
    }
}

.logo__caption {
    font-size: 0.875em;
    font-weight: 500;
    margin-left: 1vw;
}

@media screen and (max-width: 900px) {
    .logo__caption {
        font-size: 1em;
        line-height: 1.25em;
        margin-left: 3vw;
        width: 50%;
    }
}

.menu {
    display: grid;
    grid-template-columns: 15vw repeat(2, auto);
    grid-gap: 0 1.5vw;
    align-items: center;
    font-size: 0.875em;
}

@media screen and (max-width: 900px) {
  .menu {
    grid-template-columns: 1fr;
	grid-gap: 2vh 0;
    font-size: 1.05em;
	width: 100%;
  }
}

.menu__search,
.wp-block-search .wp-block-search__input {
    border: none;
    border-bottom: 1px solid #303030;
    background-image: url('../images/ic_search.svg');
    background-repeat: no-repeat;
	padding: 5px 0 5px 30px;
    transition: border-bottom 300ms;
}

.menu__search {
    background-size: 6%;
    background-position: 0 55%;
	width: 100%;
	display: none;
}

@media screen and (max-width: 900px) {
  .menu__search {
    background: none;
    padding: 5px 2px;
  }
}



.wp-block-search .wp-block-search__label {
	display: none;
}

.wp-block-search .wp-block-search__input {
	background-size: auto 0.75em;
    background-position: 0 center;
    font-size: 1em;
	margin: 0 auto;
}

.wp-block-search .wp-block-search__button {
	display: none;
}

.menu__search:focus,
.wp-block-search .wp-block-search__input:focus {
    border-bottom: 1px solid #0CC5C9;
    outline: none;
}

.menu__links {
    display: flex;
    margin-left: auto;
}

@media screen and (max-width: 900px) {
  .menu__links {
	grid-row: 1;
    margin-left: 0;
  }
}

.menu__link {
    color: inherit;
    font-weight: 500;
    margin: 0 1.5vw;
    text-decoration: none;
    display: none;
}

@media screen and (max-width: 900px) {
  .menu__link {
	margin-left: 0;
    margin-right: 6vw;
  }
}

.menu__link_active, .menu__link_active:visited, .current_page_item, .current-menu-item {
    color: #0CC5C9;
}

.menu__languageSwitcher {
    position: relative;
}

@media screen and (max-width: 900px) {
  .menu__languageSwitcher {
    position: absolute;
	top: calc(5vh - 4px);
    right: 20px;
  }
}

.menu__button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    font-size: inherit;
    padding: 0 10px;
    text-transform: uppercase;
    cursor: pointer;
}

.menu__button::after {
    content: '';
    display: block;
    background-image:
            linear-gradient(#000 2px, transparent 2px),
            linear-gradient(90deg, #000 2px, transparent 2px);
    height: 8px;
    margin-left: 4px;
    transform: translateY(-25%) rotate(225deg);
    width: 8px;
}

.menu__dropdown {
    display: none;
    position: absolute;
    right: 0;
    box-shadow: 0px 4px 31px rgba(0, 0, 0, 0.06);
    padding: 4px 0;
}

.menu__dropdownItem {
    display: block;
    padding: 8px 40px 8px 20px;
    text-decoration: none;
}

.current-lang {
    font-weight: 400;
}

.menu__dropdownItem:hover, .menu__dropdownItem:visited a, .menu__dropdownItem:visited {
    color: #303030;
    text-decoration: none;
    background: #F9F9F9;
}

.menu__dropdownItem a:-webkit-any-link {
    color: #303030;
    cursor: pointer;
    text-decoration: none;
}

/*** sidebar navigation ***/

.navigation {
    grid-row: 2 / span 2;
    box-sizing: border-box;
    min-height: 83vh;
    overflow-y: hidden;
    padding: 1.5vw 4vw;
    display: none;
}

.toggled-on {
    transform: translateX(80vw);
    -webkit-transform: translateX(80vw);
    -ms-transform: translateX(80vw);
}

@media screen and (max-width: 900px) {
    .navigation {
        position: fixed;
        left: -80vw;
        background: #fff;
        font-size: 1.45em;
        height: 100vh;
        width: 80vw;
    }
}

.navigation__title {
    font-size: 2vw;
    margin-bottom: 2vh;
}

.categories {
    list-style: none;
    height: 78vh;
    overflow-y: auto;
    padding: 0;
}

@media screen and (max-width: 900px) {
    .categories {
        height: 100vh;
    }
}

.category {

}

.category_link, .category_link:visited {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    padding: 0.6vw 0;
}

@media screen and (max-width: 900px) {
    .category_link, .category_link:visited {
        padding: 1.15vh 0;
    }
}

.veil {
    display: none;
}

@media screen and (max-width: 900px) {
    .veil {
        position: fixed;
        top: 0; left: 0;
        display: initial;
        background: rgba(0,0,0,0.1);
        height: 0;
        width: 0;
    }
}

/*** search paging ***/

.pagination {
    margin: 2em 0;
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .prev {
    margin-right: 1em;
}

.pagination .next {
    margin-left: 1em;
}

.pagination .page-numbers {
    color: inherit;
    margin: 0 0.5em;
    text-decoration: none;
}

.pagination .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #303030;
    border-radius: 50%;
    color: #fff;
    font-weight: 400;
    height: 1.5em;
    text-decoration: none;
    width: 1.5em;
}

/*** article block ***/

.content {
    box-sizing: border-box;
    height: 78vh;
    overflow: auto;
    padding: 1.5vw 12vw 1.5vw 4vw;
    display: none;
}

.content ol,
.content ul {
    list-style-position: inside;
}

.content ol li,
.content ul li {
    padding: 0.25em 0;
}

.content ol li a,
.content ul li a {
    color: inherit;
}

@media screen and (max-width: 900px) {
    .content {
        grid-column: 1 / span 2;
        height: auto;
        font-size: 1.45em;
        padding: 1.5vw 5vw 1.5vw 4vw;
    }

    .toggled-on + .content {
        position: fixed;
        top: calc(25vh + 46px);
        z-index: -1;
    }
}


.content-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*** main page ***/

p, .mainArticleParagraph {
    line-height: 2em;
}

/*** article headings ***/

.articleTitle_h1 {
    font-size: 2.5vw;
    margin-bottom: 1.5vh;
}

@media screen and (max-width: 900px) {
    .articleTitle_h1 {
        font-size: 10vw;
    }
}

.articleTitle_h2 {
    font-size: 1.5vw;
}


@media screen and (max-width: 900px) {
    .articleTitle_h2 {
        font-size: 7vw;
    }
}

.articleTitle_h3 {
    font-size: 1.25vw;
    font-weight: 500;
    margin-top: 1.75vh;
    margin-bottom: 1vh;
}

.articleTitle_h1 a, .articleTitle_h1 a:visited, .articleTitle_h2 a, .articleTitle_h2 a:visited, .articleTitle_h3 a, .articleTitle_h3 a:visited {
    text-decoration: none;
    color: #303030;
}

.articleParagraph {
    line-height: 1.75em;
}

/*** dropdown subarticles ***/

.subarticles {
    margin-top: 3.5vh;
}

.subarticle {
    display: none;
}

.subarticle__title {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(24, 23, 23, 0.22);
    padding: 1.25vh 0;
}

.subarticle__title::after {
    content: '+';
    font-size: 2vw;
    margin-right: 1.5vw;
}

@media screen and (max-width: 900px) {
    .subarticle__title::after {
        font-size: 6vw;
        font-weight: 400;
    }
}

.subarticle[open] .subarticle__title {
    border: none;
}

.subarticle[open] .subarticle__title::after {
    content: '—';
    font-size: 2vw;
}

/*** lists ***/

.articleUnorderedList {
    list-style: none;
    line-height: 1.75em;
}

.articleUnorderedList__item::before {
    content: '—';
    padding-right: 5px;
}

.articleOrderedList {
    line-height: 3em;
    padding: 0;
}

.articleOrderedList__item {
    list-style-position: inside;
}

.footer {
    display: flex;
    align-items: center;
    font-size: 0.875em;
    height: 2vh;
}

@media screen and (max-width: 900px) {
    .footer {
        grid-column: 1 / span 2;
        justify-content: center;
        font-size: 1.15em;
        height: 8vh;
    }
}

.footer a, .footer:visited a, .footer:visited {
    color: #9B9B9B;
    text-decoration: none;
}

.imprint iframe {
    visibility: hidden;
}

/*** search results ***/

.searchHeader {
	padding: 0.75em 0 0.5em;
}

.searchSummary {
	border-bottom: 1px solid rgba(24, 23, 23, 0.22);
	padding-bottom: 0.5em;
}

@media screen and (max-width: 900px) {
    .searchSummary {
        margin-bottom: 2vw;
    }
}

.more-link {
	color: inherit;
	font-weight: 400;
}