/**
 * OS Mega Menu — header menu items (blocks/mega-menu) and their panels (parts/mega-*.html).
 * Look from the client prototype (client-html/header-mega-menu). Desktop ≥1340px: panels drop
 * under the header, aligned with the logo. Below 1340px (the hamburger menu): accordions.
 * Panel content classes (os-mega-grid …) are styled on their own, so the template parts look
 * the same in the Site Editor.
 */

/* ---------- Top-level item ---------- */
.os-mega__trigger { display: flex; align-items: center; gap: 4px; position: relative; }
.os-mega__toggle,
.os-mega > .os-mega__trigger > .os-mega__toggle { /* beats core's .wp-block-navigation-item__content display: block */
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--ink); /* same as the header's link items */
	cursor: pointer;
	transition: color var(--os-fast) var(--os-ease);
}
.os-mega > .os-mega__trigger > .os-mega__toggle.is-caret { justify-content: center; height: 20px; }
.os-mega__caret {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../images/ui/nav-arrow-down.svg") center / 12px no-repeat;
	mask: url("../images/ui/nav-arrow-down.svg") center / 12px no-repeat;
	transition: transform var(--os-fast) var(--os-ease);
}
.os-mega__toggle:hover,
.os-mega.is-open > .os-mega__trigger .os-mega__toggle,
.os-mega.is-open > .os-mega__trigger .os-mega__link { color: var(--wp--preset--color--brand); }
.os-mega.is-open > .os-mega__trigger .os-mega__caret { transform: rotate(180deg); }

/* ---------- Panel content (also the template parts in the Site Editor) ---------- */
.os-mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 300px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}
.os-mega-grid.is-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 24px; }
/* No featured card (hidden or left out): only the link columns, at their usual width, and the panel
   narrows to fit them (below). */
.os-mega-grid:not(.is-gallery):not(:has(> .os-mega-promo)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 350px); }
.os-mega-grid > * { margin-block: 0 !important; } /* also beats the editor's block-gap margins */
.os-mega-grid :where(.os-mega-col, .os-mega-promo, .os-mega-card, .os-mega-card__body) > * { margin-block: 0; }
.os-mega-grid p { margin: 0; }
/* Starter-layout slots an editor left empty take no space on the site (they stay in the editor). */
:where(body:not(.block-editor-iframe__body)) .os-mega-grid :is(p, li):empty { display: none; }

.os-mega-col { padding: 36px 32px; }
.os-mega-col + .os-mega-col { border-left: 1px solid #f0f1f3; }
.os-mega-col.is-scroll { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
.os-mega-col.is-continued { padding-top: calc(36px + 11px * 1.4 + 16px); } /* lines up with a labelled column */

.os-mega-label {
	margin-bottom: 16px !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--slate);
}
/* A label that links to its landing page (techniqk™ → /platforms/techniqk/, user 2026-10-12):
   the label's look, underlined on hover. */
.os-mega-label a { color: inherit; text-decoration: none; }
.os-mega-label a:hover, .os-mega-label a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.os-mega-sublabel {
	margin: 12px 0 4px 2px !important;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #b4b8bf;
}

/* Links: the sparkle slides in on hover (client .mega-arrow). */
.os-mega-grid .os-mega-links { margin: 0; padding: 0; list-style: none; }
.os-mega-grid .os-mega-links li { margin: 0; padding: 0; }
.os-mega-grid .os-mega-links ul { margin: 0; padding: 0; list-style: none; }
.os-mega-grid .os-mega-links a,
.os-mega-grid .os-mega-head a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: color var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease);
}
.os-mega-grid .os-mega-links a::after,
.os-mega-grid .os-mega-head a::after {
	content: "";
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
	mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease);
}
.os-mega-grid .os-mega-links a:hover,
.os-mega-grid .os-mega-links a:focus-visible,
.os-mega-grid .os-mega-head a:hover,
.os-mega-grid .os-mega-head a:focus-visible { color: var(--wp--preset--color--brand); transform: translateX(4px); }
.os-mega-grid .os-mega-links a:is(:hover, :focus-visible)::after,
.os-mega-grid .os-mega-head a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
/* qRace<sup>™</sup> (user, 2026-10-27): in these flex links the ™ is its own item, so it goes to the
   top of the line, right after the name (no 6px gap), as a raised mark; rows keep their height. */
.os-mega-grid :is(.os-mega-links, .os-mega-head) a > sup { align-self: flex-start; margin-left: -6px; line-height: 1; font-size: 0.7em; }

.os-mega-grid .os-mega-head { margin-bottom: 8px !important; }
.os-mega-grid .os-mega-head a { padding: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.os-mega-grid .os-mega-head a::after { width: 11px; height: 11px; }

/* Sub-links: smaller, grey, with a left rule that turns brand on hover (the text moves, the rule stays). */
.os-mega-grid .os-mega-links.is-sub a,
.os-mega-grid .os-mega-links li > ul a {
	margin-left: 2px;
	padding: 5px 0 5px 14px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wp--preset--color--gray);
}
.os-mega-grid .os-mega-links.is-sub li > ul a { padding-left: 28px; }
.os-mega-grid .os-mega-links.is-sub a::before,
.os-mega-grid .os-mega-links li > ul a::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background-color: var(--wp--preset--color--line);
	transition: background-color var(--os-fast) var(--os-ease), transform var(--os-fast) var(--os-ease);
}
.os-mega-grid .os-mega-links.is-sub a::after,
.os-mega-grid .os-mega-links li > ul a::after { width: 11px; height: 11px; }
.os-mega-grid .os-mega-links.is-sub a:is(:hover, :focus-visible),
.os-mega-grid .os-mega-links li > ul a:is(:hover, :focus-visible) { color: var(--wp--preset--color--brand); }
.os-mega-grid .os-mega-links.is-sub a:is(:hover, :focus-visible)::before,
.os-mega-grid .os-mega-links li > ul a:is(:hover, :focus-visible)::before { background-color: var(--wp--preset--color--brand); transform: translateX(-4px); }

/* Accordions (core Details): chevron turns when open, body indented with a left rule. */
.os-mega-acc { margin: 0; interpolate-size: allow-keywords; }
.os-mega-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: color var(--os-fast) var(--os-ease);
}
.os-mega-acc > summary::-webkit-details-marker { display: none; }
.os-mega-acc > summary::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--slate);
	-webkit-mask: url("../images/ui/chevron-down.svg") center / contain no-repeat;
	mask: url("../images/ui/chevron-down.svg") center / contain no-repeat;
	transition: transform var(--os-fast) var(--os-ease);
}
.os-mega-acc[open] > summary::after { transform: rotate(180deg); }
.os-mega-acc > summary:hover { color: var(--wp--preset--color--brand); }
.os-mega-acc.is-sub > summary { font-weight: 400; }
.os-mega-acc.is-sub > summary::after { width: 12px; height: 12px; background-color: #b4b8bf; }
/* .os-mega-grid prefix: must beat `.os-mega-grid .os-mega-links { padding: 0 }`, or a link list
   loses its indent and its links' rule sits right beside this one (double line). */
.os-mega-grid .os-mega-acc > :not(summary) {
	margin: 0 0 0 2px;
	padding-left: 14px;
	border-left: 2px solid var(--wp--preset--color--line);
}
@media (prefers-reduced-motion: no-preference) {
	.os-mega-acc::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size var(--os-base) var(--os-ease), content-visibility var(--os-base) allow-discrete;
	}
	.os-mega-acc[open]::details-content { block-size: auto; }
}

/* Promo card (dark, with a coloured glow top-right). */
.os-mega-promo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 32px 28px;
	color: var(--wp--preset--color--white);
}
.os-mega-promo::before {
	content: "";
	position: absolute;
	top: -100px;
	right: -80px;
	z-index: -1;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--os-mega-glow, transparent) 0%, transparent 70%);
}
.os-mega-promo.is-glow-brand { --os-mega-glow: rgb(23 72 232 / 0.4); }
.os-mega-promo.is-glow-violet { --os-mega-glow: rgb(108 92 231 / 0.4); }
.os-mega-promo.is-glow-teal { --os-mega-glow: rgb(20 199 180 / 0.4); }
.os-mega-promo__eyebrow { margin-bottom: 14px !important; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #8a8f98; }
.os-mega-promo__title {
	margin-bottom: 10px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}
.os-mega-promo__text { margin-bottom: 18px !important; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--wp--preset--color--slate); }
.os-mega-grid .wp-block-buttons { margin: 0; }
.os-mega-promo .wp-block-button__link { color: var(--wp--preset--color--white); }

/* QK AI Labs gallery: dark card with glow rings + two image cards. */
.os-mega-labs {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	padding: 28px 24px;
	border-radius: 16px;
	background-image: url("../images/mega-menu/labs-rings.svg");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.os-mega-labs .os-mega-promo__eyebrow { margin-bottom: 12px !important; }
.os-mega-labs .os-mega-promo__title { margin-bottom: 0 !important; font-size: 22px; line-height: 1.25; }
.os-mega-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
}
.os-mega-card__media { flex-shrink: 0; height: 130px; }
.os-mega-card__media > .components-placeholder { display: none; } /* Editor: empty decorative Group. */
.os-mega-card__media.is-studio {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='none'%3E%3Cg stroke='%23fff' stroke-opacity='.35'%3E%3Cpath d='M0 20 200 55M0 60l200 35'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
		radial-gradient(circle at 20% 20%, rgb(20 199 180 / 0.7) 0%, transparent 50%),
		radial-gradient(circle at 85% 80%, rgb(23 72 232 / 0.55) 0%, transparent 55%),
		linear-gradient(160deg, #041e2b 0%, #0d5c6e 100%);
}
.os-mega-card__media.is-lab {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 130' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.3'%3E%3Ccircle cx='150' cy='30' r='24'/%3E%3Ccircle cx='150' cy='30' r='46'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
		radial-gradient(circle at 20% 20%, rgb(108 92 231 / 0.65) 0%, transparent 50%),
		radial-gradient(circle at 85% 80%, rgb(23 72 232 / 0.5) 0%, transparent 55%),
		linear-gradient(160deg, #0a0818 0%, #1e1740 100%);
}
.os-mega-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; }
.os-mega-card__eyebrow { margin-bottom: 8px !important; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--brand); }
.os-mega-card__title {
	flex-grow: 1;
	margin-bottom: 14px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--ink-deep);
}
.os-mega-card .wp-block-button__link { color: var(--wp--preset--color--ink-deep); }

/* ---------- Desktop: panels drop under the header ---------- */
@media (min-width: 1340px) {
	/* The header is the panels' positioning box (so they line up with the logo), so the
	   navigation's own positioned wrappers step aside. */
	.os-header :is(.wp-block-navigation, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content, .wp-block-navigation__container),
	.os-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
	.os-header .wp-block-navigation .os-mega { position: static; }

	/* Nine items with carets: tighter gaps until the row reaches its full 1272px (CN-4). */
	.os-header .os-header__nav .wp-block-navigation__container { gap: 14px; }
	.os-header .alignwide > .wp-block-group:has(> .os-header__nav) { gap: 16px; }

	.os-mega__panel {
		position: absolute;
		top: 100%;
		left: calc(var(--wp--style--root--padding-left, 0px) + max(0px, (100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px) - var(--wp--style--global--wide-size)) / 2));
		z-index: 60;
		width: min(1000px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px));
		overflow: hidden;
		border-radius: 0 0 20px 20px;
		background: var(--wp--preset--color--white);
		box-shadow: 0 36px 64px rgb(10 11 13 / 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity var(--os-fast) var(--os-ease-in), transform var(--os-fast) var(--os-ease-in), visibility 0s linear var(--os-fast);
	}
	.os-mega__panel:has(.is-gallery) { width: min(920px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)); }
	.os-mega__panel:not(:has(.os-mega-promo, .is-gallery)) { width: max-content; max-width: min(1000px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)); }
	.os-mega.is-open > .os-mega__panel,
	html:not(.os-js) .os-mega:is(:hover, :focus-within) > .os-mega__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--os-base) var(--os-ease), transform var(--os-base) var(--os-ease), visibility 0s;
	}
	/* Hover bridge over the header's bottom padding, so the panel stays open on the way down. */
	.os-mega.is-open > .os-mega__trigger::after {
		content: "";
		position: absolute;
		top: 100%;
		left: -12px;
		right: -12px;
		height: 28px;
	}
	.os-mega__panel .os-mega-promo:not(.os-mega-labs) { border-radius: 0 0 20px 0; }
}
@media (min-width: 1440px) {
	.os-header .os-header__nav .wp-block-navigation__container { gap: 20px; }
}

/* ---------- Hamburger menu (<1340px): accordions ---------- */
@media (max-width: 1339px) {
	/* Open hamburger menu: full-width, left-aligned rows with hairlines (client .nav-mobile-panel),
	   instead of core's right-justified items. */
	.os-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		--navigation-layout-justification-setting: stretch; /* the ul carries items-justified-right too */
		--navigation-layout-justify: flex-start;
		gap: 0;
		width: 100%;
	}
	.os-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid #f0f1f3;
	}
	.os-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.os-header__nav .is-menu-open .os-mega > .os-mega__trigger > :is(.os-mega__link, .os-mega__toggle:not(.is-caret)) {
		padding: 14px 0;
		font-size: 15.5px;
		font-weight: 600;
		color: var(--wp--preset--color--ink-deep);
	}
	.os-header__nav .is-menu-open .os-mega.is-open > .os-mega__trigger > :is(.os-mega__link, .os-mega__toggle) { color: var(--wp--preset--color--brand); }

	/* Scoped to the open hamburger menu (.is-menu-open), so the editor canvas, which is usually
	   narrower than 1340px, keeps the desktop look. */
	.os-header .is-menu-open .os-mega { flex-direction: column; align-items: stretch; width: 100%; }
	.is-menu-open .os-mega__trigger { justify-content: space-between; width: 100%; }
	.is-menu-open .os-mega__toggle { justify-content: space-between; width: 100%; }
	.is-menu-open .os-mega > .os-mega__trigger > .os-mega__toggle.is-caret { flex-shrink: 0; justify-content: flex-end; width: 44px; height: 44px; } /* touch target, caret in line with the others */
	.is-menu-open .os-mega__caret { width: 14px; height: 14px; -webkit-mask-size: 14px; mask-size: 14px; }

	.is-menu-open .os-mega__panel {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows var(--os-base) var(--os-ease), visibility 0s linear var(--os-base);
	}
	.is-menu-open .os-mega.is-open > .os-mega__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
	.is-menu-open .os-mega__inner { min-height: 0; overflow: hidden; }

	.is-menu-open .os-mega__panel .os-mega-grid,
	.is-menu-open .os-mega__panel .os-mega-grid.is-gallery { display: block; padding: 4px 0 8px; }
	.is-menu-open .os-mega__panel .os-mega-col { max-height: none; padding: 0 0 0 14px; margin-left: 2px; border-left: 2px solid var(--wp--preset--color--line); }
	.is-menu-open .os-mega__panel .os-mega-col + .os-mega-col { margin-top: 4px !important; }
	.is-menu-open .os-mega__panel .os-mega-col.is-continued { padding-top: 0; }
	.is-menu-open .os-mega__panel .os-mega-label { margin: 12px 0 4px 0 !important; }
	.is-menu-open .os-mega__panel .os-mega-promo:not(.os-mega-labs) { display: none; }

	/* QK AI Labs: compact cards. */
	.is-menu-open .os-mega__panel .os-mega-grid.is-gallery > * + * { margin-top: 12px; }
	.is-menu-open .os-mega__panel .os-mega-labs { min-height: 0; gap: 16px; padding: 20px; }
	.is-menu-open .os-mega__panel .os-mega-labs .os-mega-promo__title { font-size: 18px; }
	.is-menu-open .os-mega__panel .os-mega-card__media { height: 72px; }
	.is-menu-open .os-mega__panel .os-mega-card__body { padding: 16px; }
}

/* ---------- Editor canvas (.is-root-container exists only there) ---------- */
/* Always the desktop row, whatever the canvas width, so every item is reachable. */
.is-root-container .os-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; }
.is-root-container .os-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block !important; }
/* The selected item's panel drops under the header, as on the site. The editor makes every
   block relative, so the header's inner wrappers step aside (not the panel's own blocks). */
.is-root-container .os-header :is(.wp-block-group, .wp-block-navigation, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-dialog, .wp-block-navigation__container, .os-mega):not(.os-mega__panel *) { position: static !important; }
.is-root-container .os-mega > .os-mega__panel { display: none; }
.is-root-container .os-mega.is-editing > .os-mega__panel {
	display: block;
	position: absolute;
	top: 100%;
	left: calc(var(--wp--style--root--padding-left, 0px) + max(0px, (100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px) - var(--wp--style--global--wide-size)) / 2));
	z-index: 60;
	width: min(1000px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px));
	border-radius: 0 0 20px 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 36px 64px rgb(10 11 13 / 0.18);
	text-align: left;
}
.is-root-container .os-mega.is-editing > .os-mega__panel:has(.is-gallery) { width: min(920px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)); }
.is-root-container .os-mega.is-editing > .os-mega__panel:not(:has(.os-mega-promo, .is-gallery)) { width: max-content; max-width: min(1000px, 100% - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)); }
.is-root-container .os-mega__panel .os-mega-promo:not(.os-mega-labs) { border-radius: 0 0 20px 0; }
.is-root-container .os-mega__panel .os-mega-col.is-scroll { max-height: none; } /* editors see everything */
.is-root-container .os-mega__panel .components-notice { margin: 0; padding: 20px 24px; }

@media (prefers-reduced-motion: reduce) {
	.os-mega__panel,
	.os-mega__caret,
	.os-mega-grid a,
	.os-mega-grid a::before,
	.os-mega-grid a::after { transition: none !important; }
}

/* A group heading can open its own page (Services: each group is a service page, 2026-10-08):
   a link inside the summary. The link's text goes to the page; the rest of the row and the
   chevron still open and close the group (keyboard: the link and the summary are separate stops). */
.os-mega-acc > summary > a { color: inherit; text-decoration: none; }
.os-mega-acc > summary > a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; text-underline-offset: 3px; }
.os-mega-acc > summary > a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; border-radius: 2px; }