/**
 * Sticky QR - compact site header.
 *
 * One slim bar: brand on the left, navigation and account on the right. The
 * whole thing is around 64px tall so the builder starts near the top of the
 * first screen instead of below a wall of theme furniture.
 */

.sqr-head {
	--sqr-head-bg: #0f172a;
	--sqr-head-ink: #e2e8f0;
	--sqr-head-muted: #94a3b8;
	--sqr-head-brand: #0f766e;

	background: var(--sqr-head-bg);
	color: var(--sqr-head-ink);
	position: relative;
	z-index: 20;
}

.sqr-head *,
.sqr-head *::before,
.sqr-head *::after {
	box-sizing: border-box;
}

.sqr-head__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* ---------------------------------------------------------------- Brand */

.sqr-head__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	min-width: 0;
}

.sqr-head__logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	padding: 3px;
	flex: 0 0 auto;
	display: block;
}

.sqr-head__names {
	display: grid;
	line-height: 1.15;
	min-width: 0;
}

.sqr-head__name {
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sqr-head__tag {
	color: var(--sqr-head-muted);
	font-size: 11.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 480px) {
	.sqr-head__tag {
		display: none;
	}

	.sqr-head__name {
		font-size: 15.5px;
	}
}

/* ----------------------------------------------------------- Navigation */

.sqr-head__nav {
	display: flex;
	align-items: center;
	gap: 22px;
}

.sqr-head__menu,
.sqr-head__nav ul,
.sqr-head__nav .menu {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sqr-head__menu li,
.sqr-head__nav ul li {
	position: relative;
	margin: 0;
	list-style: none;
}

.sqr-head__menu a,
.sqr-head__nav ul a {
	color: var(--sqr-head-ink);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
}

.sqr-head__menu a:hover,
.sqr-head__menu .current-menu-item > a,
.sqr-head__menu .current_page_item > a {
	color: #fff;
	border-bottom-color: var(--sqr-head-brand);
}

/* Second level, shown on hover on a pointer device. */
.sqr-head__nav .sub-menu {
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	position: absolute;
	top: 100%;
	left: -12px;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #1e293b;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.sqr-head__menu li:hover > .sub-menu,
.sqr-head__menu li:focus-within > .sub-menu {
	display: block;
}

.sqr-head__menu .sub-menu a {
	display: block;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	font-weight: 500;
}

.sqr-head__menu .sub-menu a:hover {
	background: rgba(255, 255, 255, .07);
}

/* ------------------------------------------------------------- Actions */

.sqr-head__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sqr-head__link {
	color: var(--sqr-head-muted);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sqr-head__link:hover {
	color: #fff;
}

.sqr-head__btn {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--sqr-head-brand);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 120ms ease;
}

.sqr-head__btn:hover {
	filter: brightness(1.1);
	color: #fff;
}

/* -------------------------------------------------------------- Toggle */

.sqr-head__toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 9px;
	background: none;
	cursor: pointer;
	padding: 0;
	place-items: center;
}

.sqr-head__bars,
.sqr-head__bars::before,
.sqr-head__bars::after {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform 160ms ease, opacity 160ms ease;
}

.sqr-head__bars {
	position: relative;
}

.sqr-head__bars::before,
.sqr-head__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.sqr-head__bars::before {
	top: -6px;
}

.sqr-head__bars::after {
	top: 6px;
}

.sqr-head.is-open .sqr-head__bars {
	background: transparent;
}

.sqr-head.is-open .sqr-head__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.sqr-head.is-open .sqr-head__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 860px) {
	.sqr-head__toggle {
		display: grid;
	}

	.sqr-head__inner {
		flex-wrap: wrap;
	}

	.sqr-head__nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 6px 0 10px;
		border-top: 1px solid rgba(255, 255, 255, .1);
		margin-top: 10px;
	}

	.sqr-head.is-open .sqr-head__nav {
		display: flex;
	}

	.sqr-head__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sqr-head__menu a,
.sqr-head__nav ul a {
		padding: 12px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		width: 100%;
	}

	.sqr-head__menu .sub-menu {
		display: block;
		position: static;
		background: none;
		box-shadow: none;
		padding: 0 0 0 14px;
	}

	.sqr-head__actions {
		padding-top: 10px;
		gap: 12px;
	}

	.sqr-head__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* Storefront reserves space under its header and above the content, and the
   page template still prints an (now empty) entry header. With our own bar
   in place both become an empty white stripe above the builder.

   These carry !important deliberately: the theme sets them from several
   places including inline customiser CSS, and losing this particular fight
   leaves a visible band that looks like a bug. */
.sqr-has-builder .site-content,
.sqr-has-builder #content.site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.sqr-has-builder .site-content > .col-full {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.sqr-hide-title .entry-header {
	display: none !important;
}

.sqr-has-builder .hentry,
.sqr-has-builder .entry-content,
.sqr-has-builder .site-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Storefront gives the header a 4.23em bottom margin. With a slim bar that
   reads as an unexplained white stripe above the builder. */
.sqr-has-builder .site-header,
.sqr-has-builder.storefront-full-width-content .site-header {
	margin-bottom: 0 !important;
}

/* Storefront leaves an empty band where its header used to sit. */
.sqr-has-builder .site-header,
.storefront-full-width-content .site-header {
	padding: 0 !important;
	margin: 0 !important;
	border: 0;
	background: #0f172a;
}

.site-header .sqr-head {
	margin: 0;
}

/* ------------------------------------------------------------- Mega menu */

.sqr-head__menu--mega {
	margin-right: 4px;
}

/* Higher specificity than the generic "li { position: relative }" rule
   above, which would otherwise anchor the panel to this one item. */
.sqr-head__menu li.sqr-head__item--mega,
.sqr-head__nav ul li.sqr-head__item--mega {
	position: static;
}

.sqr-head__megabtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 14px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--sqr-head-ink);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.sqr-head__megabtn:hover,
.sqr-head__item--mega.is-open .sqr-head__megabtn {
	color: #fff;
	border-bottom-color: var(--sqr-head-brand);
}

.sqr-head__caret {
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform 180ms ease;
}

.sqr-head__item--mega.is-open .sqr-head__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.sqr-mega::before {
	/* The dead zone: the header's bottom padding sits between the trigger and
	   the panel. Without this bridge the pointer briefly leaves the item on
	   the way down and the menu snaps shut. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 18px;
}

.sqr-mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid #e2e8f0;
	box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
	z-index: 30;
}

.sqr-head__item--mega.is-open .sqr-mega {
	display: block;
}

/* Hover to open on a pointer device; tap to open on touch. */
@media (hover: hover) and (min-width: 861px) {
	.sqr-head__item--mega:hover .sqr-mega,
	.sqr-head__item--mega:focus-within .sqr-mega {
		display: block;
	}
}

.sqr-mega__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 16px 24px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
}

.sqr-mega__tabs {
	display: grid;
	gap: 5px;
	align-content: start;
	border-right: 1px solid #e2e8f0;
	padding-right: 18px;
}

.sqr-mega__tab {
	display: grid;
	gap: 2px;
	text-align: left;
	padding: 11px 13px;
	border: 0;
	border-radius: 10px;
	background: none;
	cursor: pointer;
	font: inherit;
	color: #0f172a;
	transition: background 130ms ease;
}

.sqr-mega__tab strong {
	font-size: 14.5px;
	font-weight: 700;
}

.sqr-mega__tab span {
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.4;
}

.sqr-mega__tab:hover {
	background: #f8fafc;
}

.sqr-mega__tab.is-active {
	background: color-mix(in srgb, var(--sqr-head-brand) 10%, #fff);
}

.sqr-mega__tab.is-active strong {
	color: var(--sqr-head-brand);
}

.sqr-mega__panel {
	display: none;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

.sqr-mega__panel.is-active {
	display: grid;
}

/* Menu links are nowrap so they never break mid-item. Mega cards are
   paragraphs of description, so they must opt back out of that. */
.sqr-head .sqr-mega__card,
.sqr-head .sqr-mega__card strong,
.sqr-head .sqr-mega__card span,
.sqr-head .sqr-mega__tab,
.sqr-head .sqr-mega__tab strong,
.sqr-head .sqr-mega__tab span {
	white-space: normal;
}

.sqr-head .sqr-mega__card {
	display: flex;
	gap: 12px;
	padding: 13px;
	border-radius: 11px;
	text-decoration: none;
	color: #0f172a;
	transition: background 130ms ease;
}

.sqr-head .sqr-mega__card:hover {
	background: #f8fafc;
	color: #0f172a;
}

.sqr-mega__ic {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--sqr-head-brand) 12%, transparent);
	position: relative;
}

.sqr-mega__ic::before {
	content: "";
	position: absolute;
	inset: 9px;
	border: 2px solid var(--sqr-head-brand);
	border-radius: 3px;
}

.sqr-mega__ic[data-ic="leaf"]::before,
.sqr-mega__ic[data-ic="shield"]::before {
	border-radius: 50% 4px 50% 4px;
}

.sqr-mega__ic[data-ic="link"]::before,
.sqr-mega__ic[data-ic="recycle"]::before {
	border-radius: 50%;
}

.sqr-mega__ic[data-ic="warning"]::before {
	inset: 10px;
	border-radius: 2px;
	transform: rotate(45deg);
}

.sqr-head .sqr-mega__tx {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.sqr-mega__tx strong {
	font-size: 14.5px;
}

.sqr-mega__tx span {
	font-size: 12.5px;
	line-height: 1.45;
	color: #64748b;
}

/* The brand must never be squeezed out by a long menu. */
.sqr-head__brand {
	flex: 0 0 auto;
	max-width: 52%;
}

.sqr-head__nav {
	min-width: 0;
}

@media (max-width: 860px) {
	.sqr-head__menu--mega {
		margin: 0;
	}

	.sqr-head__item--mega {
		position: relative;
	}

	.sqr-head__megabtn {
		width: 100%;
		justify-content: space-between;
		padding: 12px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
	}

	.sqr-mega {
		position: static;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.sqr-mega__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 8px 0 12px;
	}

	.sqr-mega__tabs {
		border-right: 0;
		padding-right: 0;
		grid-auto-flow: column;
		grid-auto-columns: minmax(150px, 1fr);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sqr-mega__tab {
		background: rgba(255, 255, 255, .06);
		color: #e2e8f0;
	}

	.sqr-mega__tab span {
		color: #94a3b8;
	}

	.sqr-mega__tab.is-active {
		background: var(--sqr-head-brand);
	}

	.sqr-mega__tab.is-active strong,
	.sqr-mega__tab.is-active span {
		color: #fff;
	}

	.sqr-mega__card {
		background: rgba(255, 255, 255, .05);
		color: #e2e8f0;
	}

	.sqr-head .sqr-mega__card:hover {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}

	.sqr-mega__tx span {
		color: #94a3b8;
	}
}

/* Miniature QR icons in the mega menu. */
.sqr-head .sqr-mega__ic {
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	padding: 3px;
	overflow: hidden;
}

.sqr-head .sqr-mega__ic::before {
	content: none;   /* the drawn code replaces the placeholder glyph */
}

.sqr-mega__qr {
	width: 100% !important;
	height: auto !important;
	display: block;
}

/* Key glyph for the lost and found template. */
.sqr-mega__ic[data-ic="key"]::before {
	border-radius: 50% 50% 2px 2px;
	inset: 8px 11px;
}