/*
 * Navigation: the Products mega menu, the plain dropdowns, and the mark for
 * the section the visitor is in.
 * Loaded after style.css, which keeps the shared header vocabulary
 * (.site-header, .header-inner, .site-nav, .nav-link--toggle, .nav-caret,
 * .dropdown-panel, .dropdown-group) and the 780px "Menu" collapse.
 * This file adds the mega panel (geometry, tiles, action bar), the dropdown
 * rows that carry a representative image, the current-section mark, and the
 * few small-dropdown rows style.css does not have yet (.dropdown-list,
 * .dropdown-head). Colours are the existing --c-* tokens.
 * Breakpoints: >=1024px three columns | 780-1023px compact two columns |
 * <780px every panel is static and vertical inside the "Menu" disclosure.
 */

/* ==========================================================================
   Placement shared by both dropdown kinds
   ========================================================================== */

/* The mega panel is measured against the page container, so .header-inner
   becomes the containing block and the Products <li> stops being positioned
   (beats .site-nav > ul > li { position: relative } in style.css by
   specificity, not by !important).
   .site-header is already position: relative; z-index 55 lifts the whole
   header, and with it an open panel, above the fixed WhatsApp button (50)
   so the menu can never be covered by it. The skip-link (100) still wins. */
.site-header { z-index: 55; }

.header-inner { position: relative; }

.site-nav .nav-item--mega { position: static; }

/* Operable with mouse, touch and keyboard: native <details>/<summary> reacts
   to click, tap and Enter/Space on a focusable summary, so nothing here
   depends on hover and no script is needed. */
.site-nav summary.nav-link--toggle {
	cursor: pointer;
	list-style: none;
}

.site-nav summary.nav-link--toggle::-webkit-details-marker { display: none; }
.site-nav summary.nav-link--toggle::marker { content: ""; }

/* Same for the collapsed "Menu" toggle: style.css hides only the WebKit
   marker, and the caret span beside it already shows the state. */
.nav-toggle::marker { content: ""; }

/* Visible keyboard focus everywhere in the nav and panels (never outline: none). */
.site-nav summary.nav-link--toggle:focus-visible,
.dropdown-panel a:focus-visible,
.mega-panel a:focus-visible {
	outline: 2px solid var(--c-link);
	outline-offset: 2px;
}

/* ==========================================================================
   Products mega menu
   ========================================================================== */

/* Full-width panel: left/right 0 against .header-inner, dropped below the
   whole header (below 1140px the header wraps to two rows and the panel
   follows its bottom edge either way). The doubled class is what lets these
   values override .dropdown-panel's own padding/min-width from style.css. */
.dropdown-panel.mega-panel {
	left: 0;
	right: 0;
	top: 100%;
	min-width: 0;
	padding: 0;
	border-radius: 10px;
	box-shadow: 0 18px 44px rgba(23, 43, 58, 0.18);
}

/* The tiles column takes twice the width of the other two: a two-column tile
   grid needs it for the thumbnail plus two lines of description to fit
   without the text collapsing to a word per line. */
.mega-panel .mega-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 28px;
	padding: 22px 24px 20px;
}

.mega-panel .mega-col { min-width: 0; }

/* Hairline between columns, desktop only: in the compact layout the columns
   wrap and a divider would land in the wrong place. */
@media (min-width: 1024px) {
	.mega-panel .mega-col + .mega-col {
		border-left: 1px solid var(--c-line);
		padding-left: 28px;
	}
}

.mega-panel .mega-col-title {
	margin: 0 0 10px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-text-soft);
}

/* ---- Column 1: product category tiles ---------------------------------- */

.mega-panel .mega-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-panel .mega-tile { min-width: 0; }

.mega-panel .mega-tile-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 8px;
	border-radius: 8px;
	color: var(--c-text);
	text-decoration: none;
}

.mega-panel .mega-tile-link:hover {
	background: var(--c-bg-soft);
	color: var(--c-link);
}

/* 4:3 thumbnail; the soft ground shows through while the image loads. */
.mega-panel .mega-thumb {
	display: block;
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--c-bg-soft);
}

.mega-panel .mega-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A category without a picture shows the blank placeholder frame in the same
   4:3 box, so the panel does not reflow once the real image is uploaded. */

.mega-panel .mega-tile-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mega-panel .mega-tile-name {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-brand);
	overflow-wrap: anywhere;
}

.mega-panel .mega-tile-link:hover .mega-tile-name { color: var(--c-link); }

.mega-panel .mega-tile-desc {
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--c-text-soft);
	overflow-wrap: anywhere;
}

/* One title line, two description lines where the engine supports clamping.
   Written inside @supports so engines without -webkit-line-clamp keep the
   natural wrapping (a taller panel) instead of a cut sentence. */
@supports (-webkit-line-clamp: 2) {
	.mega-panel .mega-tile-name,
	.mega-panel .mega-tile-desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.mega-panel .mega-tile-name { -webkit-line-clamp: 1; }
	.mega-panel .mega-tile-desc { -webkit-line-clamp: 2; }
}

/* 1024-1199px: the page container is still narrow, so the thumbnail gives up
   width to keep a readable description beside it. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.mega-panel .mega-thumb {
		flex-basis: 80px;
		width: 80px;
	}

	.mega-panel .mega-grid { gap: 18px 22px; }
}

/* ---- Columns 2 and 3: application industry / use condition -------------
   The same tile as a product category, one per row and with a smaller
   picture: in these narrower columns the representative image and the name
   are what a visitor scans, and the description is clamped to two lines by
   the rule above. */

.mega-panel .mega-col--compact .mega-tiles { grid-template-columns: minmax(0, 1fr); }

.mega-panel .mega-col--compact .mega-tile-link {
	gap: 10px;
	padding: 6px 8px;
}

.mega-panel .mega-col--compact .mega-thumb {
	flex: 0 0 64px;
	width: 64px;
}

.mega-panel .mega-col--compact .mega-tile-name { font-size: 0.9rem; }

.mega-panel .mega-col--compact .mega-tile-desc { font-size: 0.8rem; }

/* ---- Placeholder note under the tiles ---------------------------------
   The tiles and chips above are blank frames until a category image is
   uploaded; the sentence itself comes from nw_placeholder_note() so it is
   written once. Only the spacing inside the panel lives here. */

.mega-panel .mega-note {
	margin: 0;
	padding: 0 24px 18px;
	color: var(--c-text-soft);
	font-size: 0.8rem;
	line-height: 1.4;
}

/* ---- Action bar at the foot of the mega panel -------------------------- */

.mega-panel .mega-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding: 14px 24px;
	border-top: 1px solid var(--c-line);
	border-radius: 0 0 9px 9px;
	background: var(--c-bg-soft);
}

.mega-panel .mega-foot-link {
	flex: 0 0 auto;
	padding: 4px 0;
	color: var(--c-link);
	font-weight: 600;
	text-decoration: none;
}

.mega-panel .mega-foot-link:hover { color: var(--c-accent-dark); }

/* margin-right: auto is what pushes the CTA to the right edge. */
.mega-panel .mega-foot-note {
	flex: 1 1 auto;
	margin-right: auto;
	color: var(--c-text-soft);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* The panel styles every <a> through .dropdown-panel a in style.css (padding,
   weight, hover ground). These two rules restore the shared .btn look for the
   CTA inside the panel only; .btn / .btn-primary themselves are untouched. */
.mega-panel .mega-foot-cta {
	flex: 0 0 auto;
	padding: 12px 20px;
	border-radius: 6px;
	background: var(--c-brand);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

.mega-panel .mega-foot-cta:hover {
	background: #234a63;
	color: #fff;
}

/* ==========================================================================
   Simple dropdowns (Support / Cases / Knowledge) - only the rows style.css
   does not already carry; .dropdown-group, .dropdown-group-title and
   .dropdown-panel a keep working exactly as before.
   ========================================================================== */

.dropdown-panel .dropdown-list {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* First row of a panel: the "all ..." hub link, set apart by a hairline. */
.dropdown-panel .dropdown-head {
	margin: 0 0 6px;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--c-line);
}

.dropdown-panel .dropdown-head > a {
	padding: 6px 10px;
	color: var(--c-brand);
	font-weight: 700;
}

.dropdown-panel .dropdown-head > a:hover { color: var(--c-link); }

/* A row that stands for a term shows that term's representative image - the
   same 4:3 picture as the mega panel, at the size a narrow panel can hold.
   Support and Knowledge list tasks and topics, which are text-only. */
.dropdown-panel a.dropdown-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.dropdown-panel .dropdown-thumb {
	display: block;
	flex: 0 0 40px;
	width: 40px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--c-bg-soft);
}

.dropdown-panel .dropdown-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dropdown-panel .dropdown-row-name {
	min-width: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Wide enough for a picture row plus a name such as "Calibration &
   Accuracy". The mega panel overrides this with its own min-width: 0, since
   it is measured against the page container rather than against its item. */
.dropdown-panel { min-width: 260px; }

/* ==========================================================================
   The section the visitor is in
   Plan section 18.4 asks that the current level is clear: the header marks the
   item of the section being viewed, and inside a panel the link to the very
   page that is open is marked too. aria-current carries both facts, so the
   mark is never colour-only. No item is marked on the front page, in search
   results, on the inquiry list or on 404, where no section owns the page.
   ========================================================================== */

.site-nav .nav-item.is-current > a,
.site-nav .nav-item.is-current > .nav-link--toggle {
	color: var(--c-brand);
	box-shadow: inset 0 -2px 0 0 var(--c-brand);
}

.mega-panel .mega-tile-link[aria-current="page"] { background: var(--c-bg-soft); }

.mega-panel .mega-tile-link[aria-current="page"] .mega-tile-name { color: var(--c-brand); }

.dropdown-panel a[aria-current="page"] {
	background: var(--c-bg-soft);
	color: var(--c-brand);
	font-weight: 600;
}

/* ==========================================================================
   780-1023px: compact two-column mega panel
   ========================================================================== */

@media (min-width: 780px) and (max-width: 1023px) {
	.mega-panel .mega-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 24px;
		padding: 18px 20px 16px;
	}

	/* The header is two rows at this width and the tiles band can be long, so
	   the panel scrolls itself rather than running past the bottom edge. */
	.dropdown-panel.mega-panel {
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}

	/* Tiles take the full width as one band; industry and use condition share
	   the row below it, separated by the same hairline as on desktop. */
	.mega-panel .mega-col--tiles { grid-column: 1 / -1; }

	.mega-panel .mega-col:nth-child(3) {
		border-left: 1px solid var(--c-line);
		padding-left: 24px;
	}

	.mega-panel .mega-note { padding: 0 20px 16px; }

	/* The note gets its own line so the link and the CTA never squeeze it. */
	.mega-panel .mega-foot { padding: 12px 20px; }
	.mega-panel .mega-foot-note { flex-basis: 100%; }
}

/* ==========================================================================
   <780px: the nav collapses into "Menu" (style.css). Inside that menu every
   panel is in flow - static, full width, stacked - so nothing floats, nothing
   needs hover, and nothing can push the page sideways.
   ========================================================================== */

@media (max-width: 780px) {
	/* Same specificity as style.css, later in the cascade: the 240px minimum
	   width of a narrow panel would be wider than a 320px menu's inner box. */
	.dropdown-panel { min-width: 0; }

	.dropdown-panel.mega-panel {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.mega-panel .mega-grid {
		display: block;
		padding: 4px 0 8px;
	}

	.mega-panel .mega-col + .mega-col {
		margin-top: 14px;
		border-left: 0;
		padding-left: 0;
	}

	/* One tile per row: the thumbnail keeps its 4:3 box, the text uses the rest. */
	.mega-panel .mega-tiles { grid-template-columns: minmax(0, 1fr); }

	/* Stacked in the menu, the panel has no side padding of its own. */
	.mega-panel .mega-note { padding: 0 0 8px; }

	.mega-panel .mega-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 0 4px;
		border-radius: 0;
		background: transparent;
	}

	.mega-panel .mega-foot-note {
		flex: 0 1 auto;
		margin-right: 0;
	}

	.mega-panel .mega-foot-cta {
		width: 100%;
		text-align: center;
		white-space: normal;
	}

	/* Stacked in the menu, the mark for the current section is a left edge
	   rather than a line under the label. */
	.nav-disclosure[open] ~ ul > .nav-item.is-current > a,
	.nav-disclosure[open] ~ ul > .nav-item.is-current > .nav-link--toggle {
		box-shadow: inset 3px 0 0 0 var(--c-brand);
		color: var(--c-brand);
	}
}

/* Short desktop viewports: a tall panel scrolls itself instead of running off
   the bottom of the window and hiding its own action bar. */
@media (min-width: 1024px) {
	.dropdown-panel.mega-panel {
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}
}