/* Smart Glass Header — frontend styles */

.sgh-header,
.sgh-header *,
.sgh-offcanvas,
.sgh-offcanvas *{
	-webkit-tap-highlight-color: transparent;
}
.sgh-header a,
.sgh-header button,
.sgh-offcanvas a,
.sgh-offcanvas button{
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.sgh-header a:focus-visible,
.sgh-offcanvas a:focus-visible,
.sgh-toggle:focus-visible,
.sgh-offcanvas-close:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sgh-header{
	position: sticky;
	top: var(--sgh-margin-top-d);
	z-index: 9999;
	width: auto;
	margin: var(--sgh-margin-top-d) var(--sgh-margin-x-d) 0;
	background: var(--sgh-bg);
	-webkit-backdrop-filter: blur(var(--sgh-blur));
	backdrop-filter: blur(var(--sgh-blur));
	border-bottom: 1px solid var(--sgh-border);
	box-shadow: var(--sgh-shadow);
	border-radius: var(--sgh-radius);
	transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease;
	overflow: visible;
}
.sgh-header[data-sticky-mode="off"]{ position: relative; }
.sgh-header[data-sticky-mode="sticky"]{ position: sticky; }
.sgh-header[data-sticky-mode="reveal"]{
	position: fixed; left:0; right:0;
	transform: translateY(calc(-100% - var(--sgh-margin-top-d) - 40px));
	transition: transform .35s ease, background .3s ease, backdrop-filter .3s ease;
}
.sgh-header[data-sticky-mode="reveal"].sgh-reveal-visible{ transform: translateY(0); }
@media (max-width: 991px){
	.sgh-header[data-sticky-mode="reveal"]{
		transform: translateY(calc(-100% - var(--sgh-margin-top-m) - 40px));
	}
	.sgh-header[data-sticky-mode="reveal"].sgh-reveal-visible{ transform: translateY(0); }
}

.sgh-sheen{
	position: absolute; inset: 0 0 auto 0; height: 50%;
	background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
	pointer-events: none;
	border-radius: inherit;
}

.sgh-header.sgh-stuck{
	background: var(--sgh-sticky-bg);
	-webkit-backdrop-filter: blur(var(--sgh-sticky-blur));
	backdrop-filter: blur(var(--sgh-sticky-blur));
}
.sgh-header.sgh-shrink{ }
.sgh-header.sgh-shrink .sgh-inner{ padding-top: calc(var(--sgh-pad-d-v) * .5); padding-bottom: calc(var(--sgh-pad-d-v) * .5); }

.sgh-inner{
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: var(--sgh-justify);
	gap: 24px;
	padding: var(--sgh-pad-d-v) var(--sgh-pad-d-h);
	transition: padding .25s ease;
}

.sgh-logo{ display:flex; align-items:center; text-decoration:none; }
.sgh-logo-img{ width: var(--sgh-logo-w-d); height:auto; display:block; }
.sgh-logo-text{ font-weight:700; font-size:20px; color:inherit; }

.sgh-desktop-nav{ order:2; }
.sgh-menu{ list-style:none; display:flex; align-items:center; gap: 6px; margin:0; padding:0; }
.sgh-menu li{ position:relative; }
.sgh-menu > li > a{
	display:block; padding: 10px 14px; text-decoration:none; color:inherit;
	border-radius: 8px; font-size:15px; transition: background .2s ease, color .2s ease;
}
.sgh-menu > li:hover > a{ background: rgba(0,0,0,.06); }

.sgh-menu > li.menu-item-has-children > a{ display:flex; align-items:center; gap:5px; }
.sgh-header[data-dd-arrow="on"] .sgh-menu li.menu-item-has-children > a::after{
	content: "";
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
	opacity: .6;
	transition: transform .2s ease;
}
.sgh-header[data-dd-arrow="on"] .sgh-menu li.menu-item-has-children:hover > a::after,
.sgh-header[data-dd-arrow="on"] .sgh-menu li.menu-item-has-children.sgh-open > a::after{
	transform: rotate(225deg);
	margin-top: 3px;
}
.sgh-mobile-menu li.menu-item-has-children > a{ display:flex; align-items:center; justify-content:space-between; }
.sgh-mobile-menu li.menu-item-has-children > a::after{
	content: "▾"; font-size:14px; opacity:.7;
}

.sgh-menu .sub-menu{
	list-style:none; margin:0; position:absolute; top:100%; left:0; min-width:200px;
	background: var(--sgh-dd-bg); color: var(--sgh-dd-text);
	border-radius: var(--sgh-dd-radius); box-shadow: var(--sgh-dd-shadow);
	padding: 8px; opacity:0; visibility:hidden; transform: translateY(6px);
	z-index: 100;
}
.sgh-header[data-dd-anim="scale"] .sub-menu{ transform: scale(.92); transform-origin: top left; }
.sgh-header[data-dd-anim="fade"] .sub-menu{ transform:none; }

.sgh-menu li:hover > .sub-menu,
.sgh-menu li.sgh-open > .sub-menu{ opacity:1; visibility:visible; transform:none; }
.sgh-menu .sub-menu a{ display:block; padding:8px 12px; color: var(--sgh-dd-text); text-decoration:none; border-radius:6px; font-size:14px; }
.sgh-menu .sub-menu a:hover{ color: var(--sgh-dd-hover); background: rgba(255,255,255,.06); }

/* Toggle button */
.sgh-toggle{
	order:3; display:none; align-items:center; justify-content:center;
	width: var(--sgh-toggle-btn-size); height: var(--sgh-toggle-btn-size);
	background: transparent; border: 0; cursor:pointer; padding:0; position:relative;
}
.sgh-toggle.sgh-shape-circle{ background: var(--sgh-toggle-bg); border-radius: 50%; }
.sgh-toggle.sgh-shape-rounded-square{ background: var(--sgh-toggle-bg); border-radius: 12px; }

.sgh-toggle .sgh-bar{
	display:block; position:absolute; left:50%; width: var(--sgh-toggle-size); height:2px;
	background: var(--sgh-toggle-icon); transform: translateX(-50%);
	transition: transform var(--sgh-toggle-speed) ease, opacity var(--sgh-toggle-speed) ease;
}
.sgh-toggle .sgh-bar1{ top: 35%; }
.sgh-toggle .sgh-bar2{ top: 50%; margin-top:-1px; }
.sgh-toggle .sgh-bar3{ top: 65%; }

.sgh-toggle.is-open .sgh-bar1{ transform: translateX(-50%) translateY(6px) rotate(45deg); }
.sgh-toggle.is-open .sgh-bar2{ opacity:0; }
.sgh-toggle.is-open .sgh-bar3{ transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.sgh-toggle-icon{
	width: var(--sgh-toggle-size); height: var(--sgh-toggle-size); object-fit:contain;
	position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
	transition: opacity var(--sgh-toggle-speed) ease, transform var(--sgh-toggle-speed) ease;
}
.sgh-toggle[data-type="image"] .sgh-icon-open{ opacity:0; }
.sgh-toggle[data-type="image"].is-open .sgh-icon-closed{ opacity:0; }
.sgh-toggle[data-type="image"].is-open .sgh-icon-open{ opacity:1; }

/* PNG/SVG toggle icons never get a button background or border, even if a shape is set */
.sgh-toggle[data-type="image"]{ background: transparent !important; border: 0 !important; box-shadow:none !important; }

.sgh-icon-fallback-x{
	display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
	width: var(--sgh-toggle-size); height: var(--sgh-toggle-size);
}
.sgh-icon-fallback-x .sgh-x-bar{
	position:absolute; top:50%; left:50%; width:100%; height:2px;
	background: var(--sgh-toggle-icon); border-radius:2px;
}
.sgh-icon-fallback-x .sgh-x-bar1{ transform: translate(-50%,-50%) rotate(45deg); }
.sgh-icon-fallback-x .sgh-x-bar2{ transform: translate(-50%,-50%) rotate(-45deg); }

.sgh-toggle[data-anim="rotate"].is-open .sgh-icon-open,
.sgh-toggle[data-anim="rotate"].is-open .sgh-icon-closed{ transform: translate(-50%,-50%) rotate(90deg); }
.sgh-toggle[data-anim="morph"].is-open{ transform: scale(1.08); }
.sgh-toggle[data-anim="none"] *{ transition:none !important; }

/* Off-canvas */
.sgh-offcanvas-overlay{
	position: fixed; inset:0; background: var(--sgh-oc-overlay);
	opacity:0; visibility:hidden; transition: opacity .3s ease; z-index: 10000;
}
.sgh-offcanvas-overlay.is-visible{ opacity:1; visibility:visible; }

.sgh-offcanvas{
	position: fixed; top:0; bottom:0; width: var(--sgh-oc-width); max-width:90vw;
	background: var(--sgh-oc-bg); color: var(--sgh-oc-text);
	-webkit-backdrop-filter: blur(var(--sgh-oc-blur)); backdrop-filter: blur(var(--sgh-oc-blur));
	z-index: 10001; padding: 24px; box-sizing:border-box;
	transition: transform .35s ease, opacity .3s ease;
	overflow-y:auto;
}
.sgh-offcanvas[data-position="right"]{ right:0; transform: translateX(100%); }
.sgh-offcanvas[data-position="left"]{ left:0; transform: translateX(-100%); }
.sgh-offcanvas.is-open{ transform: translateX(0); }
.sgh-offcanvas[data-anim="fade"]{ transform:none !important; opacity:0; pointer-events:none; }
.sgh-offcanvas[data-anim="fade"].is-open{ opacity:1; pointer-events:auto; }

.sgh-offcanvas-close{
	background:none !important; border:0; color:inherit; cursor:pointer; margin-bottom:16px;
	display:inline-flex; align-items:center; justify-content:center;
	position:relative; width: var(--sgh-toggle-btn-size); height: var(--sgh-toggle-btn-size); padding:0;
	-webkit-appearance:none; appearance:none; -webkit-tap-highlight-color: transparent; outline:none;
	opacity:0; transform: scale(.7) rotate(-30deg);
	transition: opacity .3s ease .05s, transform .3s ease .05s;
}
.sgh-offcanvas-close:active,
.sgh-offcanvas-close:focus,
.sgh-offcanvas-close:hover{ background:none !important; outline:none; box-shadow:none; }
.sgh-offcanvas.is-open .sgh-offcanvas-close{ opacity:1; transform:none; }
.sgh-offcanvas-close-icon{ width: var(--sgh-toggle-size); height: var(--sgh-toggle-size); object-fit:contain; display:block; }
.sgh-offcanvas-close .sgh-icon-fallback-x{ position:static; transform:none; }
.sgh-offcanvas-close .sgh-x-bar{ background: var(--sgh-oc-text); }
.sgh-mobile-menu{ list-style:none; margin:0; padding:0; }
.sgh-mobile-menu li{ border-bottom:1px solid rgba(255,255,255,.1); }
.sgh-mobile-menu a{ display:block; padding:14px 4px; color:inherit; text-decoration:none; font-size:17px; }
.sgh-mobile-menu .sub-menu{ list-style:none; padding-left:16px; margin:0; }
.sgh-mobile-menu .sub-menu a{ font-size:15px; opacity:.85; padding:10px 4px; }

/* Responsive */
@media (max-width: 991px){
	.sgh-header{ margin: var(--sgh-margin-top-m) var(--sgh-margin-x-m) 0; top: var(--sgh-margin-top-m); }
	.sgh-inner{
		padding: var(--sgh-pad-t-v) var(--sgh-pad-t-h);
		justify-content: space-between;
	}
	.sgh-logo-img{ width: var(--sgh-logo-w-t); }
	.sgh-desktop-nav{ display:none; }
	.sgh-toggle{ display:flex; }
	.sgh-logo{ order: 1 !important; }
	.sgh-toggle{ order: 2; }
	.sgh-header[data-toggle-align="left"] .sgh-inner{ flex-direction: row-reverse; }
}
@media (max-width: 600px){
	.sgh-inner{ padding: var(--sgh-pad-m-v) var(--sgh-pad-m-h); }
	.sgh-logo-img{ width: var(--sgh-logo-w-m); }
}