/* Smart Glass Header — frontend styles */

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

.scpgh-header{
	position: fixed;
	top: var(--scpgh-margin-top-d);
	left: var(--scpgh-margin-x-d);
	right: var(--scpgh-margin-x-d);
	z-index: 9999;
	width: auto;
	margin: 0;
	background: var(--scpgh-bg);
	-webkit-backdrop-filter: blur(var(--scpgh-blur));
	backdrop-filter: blur(var(--scpgh-blur));
	border-bottom: 1px solid var(--scpgh-border);
	box-shadow: var(--scpgh-shadow);
	border-radius: var(--scpgh-radius);
	transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease;
	overflow: visible;
}
/* "off" keeps the header inline in normal document flow (no overlay, reserves its own space) */
.scpgh-header[data-sticky-mode="off"]{ position: relative; top: auto; left: auto; right: auto; margin: var(--scpgh-margin-top-d) var(--scpgh-margin-x-d) 0; }
/* "sticky" and default: fixed overlay, transparent, sits directly above page content with no reserved gap */
.scpgh-header[data-sticky-mode="sticky"]{ position: fixed; }
.scpgh-header[data-sticky-mode="reveal"]{
	position: fixed; left:0; right:0;
	transform: translateY(calc(-100% - var(--scpgh-margin-top-d) - 40px));
	transition: transform .35s ease, background .3s ease, backdrop-filter .3s ease;
}
.scpgh-header[data-sticky-mode="reveal"].scpgh-reveal-visible{ transform: translateY(0); }
@media (max-width: 991px){
	.scpgh-header[data-sticky-mode="reveal"]{
		transform: translateY(calc(-100% - var(--scpgh-margin-top-m) - 40px));
	}
	.scpgh-header[data-sticky-mode="reveal"].scpgh-reveal-visible{ transform: translateY(0); }
}

.scpgh-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;
}

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

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

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

.scpgh-desktop-nav{ order:2; }
.scpgh-menu{ list-style:none; display:flex; align-items:center; gap: 6px; margin:0; padding:0; }
.scpgh-menu li{ position:relative; }
.scpgh-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;
}
.scpgh-menu > li:hover > a{ background: rgba(0,0,0,.06); }

.scpgh-menu > li.menu-item-has-children > a{ display:flex; align-items:center; gap:5px; }
.scpgh-header[data-dd-arrow="on"] .scpgh-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;
}
.scpgh-header[data-dd-arrow="on"] .scpgh-menu li.menu-item-has-children:hover > a::after,
.scpgh-header[data-dd-arrow="on"] .scpgh-menu li.menu-item-has-children.scpgh-open > a::after{
	transform: rotate(225deg);
	margin-top: 3px;
}
.scpgh-mobile-menu li.menu-item-has-children > a{ display:flex; align-items:center; justify-content:space-between; }
.scpgh-mobile-menu li.menu-item-has-children > a::after{
	content: "▾"; font-size:14px; opacity:.7;
}

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

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

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

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

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

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

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

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

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

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

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

.scpgh-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(--scpgh-toggle-btn-size); height: var(--scpgh-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;
}
.scpgh-offcanvas-close:active,
.scpgh-offcanvas-close:focus,
.scpgh-offcanvas-close:hover{ background:none !important; outline:none; box-shadow:none; }
.scpgh-offcanvas.is-open .scpgh-offcanvas-close{ opacity:1; transform:none; }
.scpgh-offcanvas-close-icon{ width: var(--scpgh-toggle-size); height: var(--scpgh-toggle-size); object-fit:contain; display:block; }
.scpgh-offcanvas-close .scpgh-icon-fallback-x{ position:static; transform:none; }
.scpgh-offcanvas-close .scpgh-x-bar{ background: var(--scpgh-oc-text); }
.scpgh-mobile-menu{ list-style:none; margin:0; padding:0; }
.scpgh-mobile-menu li{ border-bottom:1px solid rgba(255,255,255,.1); }
.scpgh-mobile-menu a{ display:block; padding:14px 4px; color:inherit; text-decoration:none; font-size:17px; }
.scpgh-mobile-menu .sub-menu{ list-style:none; padding-left:16px; margin:0; }
.scpgh-mobile-menu .sub-menu a{ font-size:15px; opacity:.85; padding:10px 4px; }

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