/* =========== © 2024 Centroarts.com - https://honista.com =========== */

@media (min-width: 992px) {
	.help-str { display: flex; }
	.help-side { display: block !important; flex: 0 0 30%; max-width: 376px; min-width: 280px; }
	.help-cont { padding-left: 72px; flex: 1 1 auto; }
	.help-menu-block { position: sticky; top: var(--wrp-pad); }
	.help-menu-head { margin-bottom: 16px; }

	:dir(rtl) .help-cont { padding-right: 72px; padding-left: 0; }
}
@media (max-width: 991px) {
	.help-section { overflow: hidden; }
	.help-menu-btn {
		position: sticky; top: 0; z-index: 20; padding: 16px 0; cursor: pointer;
		display: block !important; background: var(--color-body); outline: none !important; border: 0 none;
		border-bottom: 1px solid rgba(var(--color-text-rgb), 0.1);
	}
	.help-menu-btn .wrp { display: flex; padding-top: 20px; min-width: 0; }
	.help-menu-btn-title { flex: 1 1 auto; min-width: 0; position: relative; display: block; }
	.help-menu-btn-title::after {
		content: attr(title); position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; line-height: 16px; height: 16px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		font-size: var(--text-xsm-size); opacity: .5;
	}
	.help-menu-btn .wrp .ic { min-width: 24px; width: 24px; height: 24px; margin-left: 12px; opacity: .3; transition: opacity .2s ease; }
	.help-menu-btn:active .wrp .ic { opacity: .8; }
	.help-menu-btn + .honista-content { padding-top: var(--wrp-pad); }

	:dir(rtl) .help-menu-btn-title::after { left: auto; right: 0; }
	:dir(rtl) .help-menu-btn .wrp .ic { margin-right: 12px; margin-left: 0; }

	html.hm body { overflow: hidden; }
	.help-side {
		position: fixed; z-index: 99; inset: 0; padding-top: var(--wrp-pad); opacity: 0; pointer-events: none;
		visibility: hidden; background-color: rgba(0,0,0, 0.2); align-items: flex-end;
	}
	.help-menu-close, .help-menu-overlay { display: block !important; }
	.help-menu-overlay { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: all; }

	.help-menu-block {
		background-color: var(--color-body); display: flex; flex-direction: column; flex: 1 1 auto; max-height: 100%; border-radius: 32px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transform: translateY(80px); opacity: 0;
		transition: transform .3s ease, opacity .2s ease; pointer-events: all;
	}
	.help-menu-head { display: flex; padding: var(--wrp-pad); align-items: center; }
	.help-menu-head .title { flex: 1 1 auto; }
	.help-menu-cont { flex: 1 1 auto; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.help-menu-list { padding: var(--wrp-pad); padding-top: 0; }
	.help-menu-close {
		width: 48px; height: 48px; padding: 12px; margin: -12px; display: flex; align-items: center; justify-content: center;
		border: 0 none; color: inherit; outline: none; background: none;
	}

	html.hm .help-side { display: flex !important; }
	html.hm .help-side.open { opacity: 1; visibility: visible; }
	.help-side.open .help-menu-block { transform: translateY(0); opacity: 1; }
}

.help-cont .heading { margin-bottom: 16px; }

/* Menu */
.help-menu-head .title { margin-bottom: 0; display: block; }

.help-menu-list a { display: block; line-height: 24px; padding: 8px 0; padding-left: 32px !important; position: relative; color: inherit; }
.help-menu-list a:hover { color: var(--color-primary); }
.help-menu-list a::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; border-left: 1px solid var(--color-text); opacity: 0.1; }

:dir(rtl) .help-menu-list a { padding-right: 32px !important; padding-left: 0 !important; }
:dir(rtl) .help-menu-list a::before { right: 3px; left: auto; }

.help-menu-list li.active > a { color: var(--color-primary); cursor: default; }

.help-menu-list li.active > a::before { border-left-color: var(--color-primary); opacity: 1; }

.help-menu-list > li > a { font-weight: bold; }
.help-menu-list li:not(:last-child) ul { padding-bottom: 12px; }
.help-menu-list li ul a { padding: 6px 0; }

.help-menu-list li:has(ul) a::before { border-left-color: var(--color-primary); }
.help-menu-list li:has(ul) > a,
.help-menu-list li.active > a { color: var(--color-primary); }

/* Topics */
.topic-list { --grid-cols: 1; --grid-gap: 12px; }
.topic { border-radius: 24px; padding: 24px; border: 1px solid rgba(var(--color-text-rgb), 0.1); transition: border-color .2s ease; }
.topic-icon { display: block; margin-bottom: 20px; color: var(--color-primary); }
.topic-icon .ic { width: 36px; height: 36px; }
.topic-title { transition: color .2s ease; }

.topic:hover { border-color: rgba(var(--color-primary-rgb), 0.2); }
.topic:hover .topic-title { color: var(--color-primary); }

@media (min-width: 480px) {
	.topic-list { --grid-cols: 2; }
}
@media (min-width: 576px) {
	.topic-list { --grid-gap: 24px; }
}
@media (min-width: 768px) {
	.topic { padding: 32px; }
}
@media (min-width: 1100px) {
	.topic-list { --grid-cols: 3; --grid-gap: 32px; }
}

/* Search */
.help-search { position: relative; z-index: 1; margin-top: 32px; }
.help-search-box { border-radius: 24px; padding: 8px; background-color: var(--color-body); box-shadow: 0 12px 32px -12px rgba(var(--color-primary-rgb), 0.2), 0 0 0 1px rgba(var(--color-primary-rgb), 0.1); }
@media (min-width: 768px) {
	.help-search-box { padding: 12px; }
}

.help-search .gradient-bg { position: absolute; inset: 0; z-index: -1; }
.help-search .gradient-bg::after, .help-search .gradient-bg::before { top: 50%; left: 0; width: 420px; height: 420px; opacity: .125; }
.help-search .gradient-bg::after { transform: translate(-30%, -50%); }
.help-search .gradient-bg::before { transform: translate(10%, -50%); }

:dir(rtl) .help-search .gradient-bg::after, :dir(rtl) .help-search .gradient-bg::before { left: auto; right: 0; }
:dir(rtl) .help-search .gradient-bg::after { transform: translate(30%, -50%); }
:dir(rtl) .help-search .gradient-bg::before { transform: translate(-10%, -50%); }

.help-search-field { position: relative; }
.help-search-field .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: color .2s ease; }
.help-search-field .search-input { padding-left: 52px !important; }
.help-search-field .search-input:focus + .ic { color: var(--color-primary); }

:dir(rtl) .help-search-field .ic { left: auto; right: 20px; }
:dir(rtl) .help-search-field .search-input { padding-right: 52px !important; padding-left: 19px !important; }

/* Articles */
.article-list > a { display: flex; padding: 16px 0; border-top: 1px solid rgba(var(--color-text-rgb), 0.1); color: inherit; font-weight: bold; }
.article-list > a > .ic {
	display: block; min-width: 24px; width: 24px; height: 24px; margin-right: 8px;
	opacity: 0.3; transition: color .2s ease, opacity .2s ease;
}
:dir(rtl) .article-list > a > .ic { margin-left: 8px; margin-right: 0; }
.article-list > a:hover > .ic { opacity: 1; color: var(--color-primary); }

@media (min-width: 768px) {
	.article-list > a { padding: 24px 0; }
	.article-list > a > .ic { margin: 4px 0; margin-right: 12px; }
	:dir(rtl) .article-list > a > .ic { margin-left: 12px; margin-right: 0; }
}

/* Help View */
.helpview .viewline { margin: 0 calc(var(--post-pad) / -1); margin-bottom: 20px; }
.helpview .viewline::before { display: none; }
@media (max-width: 991px) {
	.helpview .heading { margin-bottom: 16px; }
}
@media (max-width: 575px) {
	.helpview .viewline { font-size: var(--text-sm-size); }
}
@media (min-width: 992px) {
	.helpview .viewline { margin-bottom: 36px; }
}