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

/* --- Header --- */
.honista-header {
	user-select: none;
	height: var(--header-height);
}
.honista-header .wrp { display: flex; align-items: center; height: inherit; padding-top: 16px; padding-bottom: 16px; }

.logo-honista { display: flex; align-items: center; color: var(--color-text) !important; margin-right: 48px; padding: 4px 0; }
.logo-honista svg { fill: currentColor; }
.logo-honista-icon { border-radius: 10px; color: var(--color-primary); box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.1); margin-right: 15px; }

:dir(rtl) .logo-honista { margin-right: 0; margin-left: 48px; } 
:dir(rtl) .logo-honista-icon { margin-left: 15px; margin-right: 0; }

@media (min-width: 768px) {
	:root { --header-height: var(--header-tablet); }
	.honista-header .wrp { padding-top: 32px; padding-bottom: 16px; }
}
@media (min-width: 992px) {
	:root { --header-height: var(--header-pc); }
	.honista-header {
		font-size: var(--text-md-size);
	}
	.honista-header .wrp { padding-top: 24px; padding-bottom: 8px; }

	.honista-menu, .honista-menu-in { display: flex !important; align-items: center; flex: 1 1 auto; }
	.honista-menu-list { display: flex; order: -1; flex: 1 1 auto; }
	.honista-menu-list > a { height: 48px; line-height: 24px; padding: 12px 16px; color: inherit; transition: color .2s ease; white-space: nowrap; }
	.honista-menu-list > a:hover { color: var(--color-primary); }
	.honista-menu-list > a.active { color: var(--color-primary); cursor: default; }

	.honista-header .btn-download { height: 44px; padding: 10px 20px; margin-left: 12px; }
	:dir(rtl) .honista-header .btn-download { margin-right: 12px; margin-left: 0; }
	.honista-header .btn-download::after { display: none; }
}

/* Lang */
.honista-lang .dropdown-trigger {
	display: flex; align-items: center; padding: 12px 16px;
	height: 48px; line-height: 24px; cursor: pointer; opacity: .6;
	transition: opacity .2s ease;
}
.honista-lang:hover .dropdown-trigger { opacity: .8; }
.honista-lang .dropdown-trigger .ic:first-child { margin-right: 4px; }
.honista-lang .dropdown-trigger .ic:last-child { margin-left: 4px; }
:dir(rtl) .honista-lang .dropdown-trigger .ic:first-child { margin-left: 4px; margin-right: 0 }
:dir(rtl) .honista-lang .dropdown-trigger .ic:last-child { margin-right: 4px; margin-left: 0; }

.honista-lang:has(.show) .dropdown-trigger { opacity: 1; }
.honista-lang-list { padding: 12px 0; display: grid; grid-template-columns: repeat(2,1fr); grid-auto-flow: row dense;}
.honista-lang-list a { display: block; color: inherit; min-width: 128px; padding: 4px 24px; }
.honista-lang-list a:hover { color: var(--color-primary); }
.honista-lang-list a.active { color: inherit; opacity: .4; pointer-events: none; }

/* Mobile Menu */
@media (max-width: 991px) {
	.mobile-menu-btn, .mobile-menu-close {
		display: flex !important; align-items: center; justify-content: center; margin-left: auto;
		padding: 12px; width: 48px; height: 48px; border: 0 none !important; background: none !important;
		color: inherit !important; outline: none;
	}
	.mobile-menu-btn { margin-right: -8px; }
	.mobile-menu-close { position: absolute; z-index: 1; right: 0; top: 0; margin-right: calc(var(--wrp-pad) - 8px); margin-top: 32px; }

	:dir(rtl) .mobile-menu-btn { margin-right: auto; margin-left: -8px; }
	:dir(rtl) .mobile-menu-close { left: 0; right: auto; margin-right: auto; margin-left: calc(var(--wrp-pad) - 8px); }

	html.mm body { overflow: hidden; }
	.honista-menu { position: fixed; z-index: 99; inset: 0; opacity: 0; visibility: hidden; background-color: var(--color-body); }

	.honista-menu-in {
		height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding-top: 32px; display: flex; flex-direction: column;
	}
	.honista-lang { margin-left: calc(var(--wrp-pad) - 16px); }
	:dir(rtl) .honista-lang { margin-right: calc(var(--wrp-pad) - 16px); margin-left: 0; }
	.honista-menu-list { padding: 24px 0; transition: transform .5s ease, opacity .5s ease; transform: translateX(16px); opacity: 0; }
	.honista-menu-list > a { display: block; font-size: 24px; line-height: 36px; padding: 12px var(--wrp-pad); color: inherit !important; }

	.honista-head-btn { margin-top: auto; padding: var(--wrp-pad); opacity: 0; transition: opacity .6s ease .2s; }
	.honista-head-btn .btn { width: 100%; }

	html.mm .honista-menu { display: block !important; }
	html.mm .honista-menu.open { opacity: 1; visibility: visible; }
	.honista-menu.open .honista-menu-list { transform: translateX(0); opacity: 1; }
	.honista-menu.open .honista-head-btn { opacity: 1; }
}
@media (max-width: 767px) {
	:root { --header-height: var(--header-mobile); }
	.honista-menu-in { padding-top: 16px; }
	.mobile-menu-close { margin-top: 16px; }
}