/* =========================================================
   SIMAB family navigation
   Apple-style product-family bar with disclosure panels.
   Tokens only: every colour, radius and easing comes from the
   design layer in style.css.
   ========================================================= */

:root {
	--sb-nav-panel-bg: #FFFFFF;
	--sb-nav-breakpoint: 1280px;
}

/* The panels hang off the header row, so that row owns their positioning. */
.sb-header-inner { position: relative; }

.sb-meganav {
	display: flex;
	align-items: center;
}

/* ---------- The bar ---------- */

.sb-meganav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-meganav__item { position: static; }

.sb-meganav__trigger,
.sb-meganav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	color: var(--sb-ink);
	text-decoration: none;
	cursor: pointer;
	transition: color .2s var(--sb-ease), background-color .2s var(--sb-ease);
}

.sb-meganav__trigger:hover,
.sb-meganav__link:hover { color: var(--sb-blue); background: var(--sb-sky); }

/* Current section is marked by weight and a rule, never by colour alone. */
.sb-meganav__trigger.is-current,
.sb-meganav__link.is-current {
	color: var(--sb-blue);
	box-shadow: inset 0 -2px 0 0 var(--sb-blue);
	border-radius: 10px 10px 0 0;
}

.sb-meganav__chevron {
	width: 10px;
	height: 7px;
	flex: none;
	transition: transform .25s var(--sb-ease);
}
.sb-meganav__trigger[aria-expanded="true"] { color: var(--sb-blue); background: var(--sb-sky); }
.sb-meganav__trigger[aria-expanded="true"] .sb-meganav__chevron { transform: rotate(180deg); }

/* ---------- The panels ---------- */

.sb-meganav__panel {
	position: absolute;
	top: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	width: min(1080px, calc(100vw - 32px));
	z-index: 90;
	background: var(--sb-nav-panel-bg);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow-lg);
	opacity: 0;
	visibility: hidden;
	/* visibility is a discrete property: transitioned normally it would flip at
	   the midpoint, leaving the panel unfocusable for the first ~110ms, exactly
	   when a keyboard user's focus lands. So it turns visible instantly on open
	   and is only delayed on close, until the fade has finished. */
	transition: opacity .22s var(--sb-ease), transform .22s var(--sb-ease), visibility 0s linear .22s;
}

.sb-meganav__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity .22s var(--sb-ease), transform .22s var(--sb-ease), visibility 0s;
}

.sb-meganav__panel-inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr .85fr;
	gap: 40px;
	padding: 32px 36px;
}

.sb-meganav__panel-title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sb-ink);
}
.sb-meganav__panel-lede {
	margin: 0 0 16px;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--sb-muted);
}
.sb-meganav__all {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: .9rem;
	color: var(--sb-blue);
	text-decoration: none;
}
.sb-meganav__all:hover { text-decoration: underline; }

.sb-meganav__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
	align-content: start;
}
.sb-meganav__links a {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color .18s var(--sb-ease);
}
.sb-meganav__links a:hover { background: var(--sb-surface); }
.sb-meganav__links a[aria-current="page"] { background: var(--sb-sky); }

.sb-meganav__link-label {
	display: block;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.3;
	color: var(--sb-ink);
}
.sb-meganav__links a:hover .sb-meganav__link-label { color: var(--sb-blue); }
.sb-meganav__link-desc {
	display: block;
	margin-top: 2px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--sb-muted);
}

/* ---------- Packages column ---------- */

.sb-meganav__aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 32px;
	border-left: 1px solid var(--sb-line);
}
.sb-meganav__aside-title {
	margin: 0;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sb-muted);
}
.sb-meganav__products {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}
.sb-meganav__products a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color .18s var(--sb-ease);
}
.sb-meganav__products a:hover { background: var(--sb-surface); }
.sb-meganav__product-name {
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sb-ink);
}
.sb-meganav__products a:hover .sb-meganav__product-name { color: var(--sb-blue); }
.sb-meganav__product-price {
	flex: none;
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sb-muted);
}

.sb-meganav__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--sb-blue);
	color: #FFFFFF;
	font-weight: 700;
	font-size: .88rem;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s var(--sb-ease);
}
.sb-meganav__cta:hover { background: var(--sb-blue-dark); color: #FFFFFF; }

/* ---------- Burger, hidden until the bar collapses ---------- */

.sb-meganav__burger {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	font-weight: 700;
	font-size: .92rem;
	color: var(--sb-ink);
	cursor: pointer;
}
.sb-meganav__burger-bars {
	display: grid;
	gap: 4px;
	width: 20px;
}
.sb-meganav__burger-bars span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .22s var(--sb-ease), opacity .22s var(--sb-ease);
}
.sb-meganav__burger[aria-expanded="true"] .sb-meganav__burger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sb-meganav__burger[aria-expanded="true"] .sb-meganav__burger-bars span:nth-child(2) { opacity: 0; }
.sb-meganav__burger[aria-expanded="true"] .sb-meganav__burger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Without JavaScript ---------- */
/* The triggers cannot open anything, so the panels stay put as a sitemap
   rather than leaving dead buttons behind. */
.sb-meganav:not(.sb-meganav--js) .sb-meganav__panel[hidden] {
	display: block;
	position: static;
	transform: none;
	width: auto;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	border: 0;
}
.sb-meganav:not(.sb-meganav--js) .sb-meganav__chevron { display: none; }
.sb-meganav:not(.sb-meganav--js) .sb-meganav__list { flex-wrap: wrap; }

/* =========================================================
   Collapsed navigation
   ========================================================= */
@media (max-width: 1280px) {
	.sb-meganav__burger { display: inline-flex; }

	.sb-meganav--js .sb-meganav__bar {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 90;
		max-height: calc(100dvh - 68px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 0 16px;
		background: var(--sb-nav-panel-bg);
		border-top: 1px solid var(--sb-line);
		box-shadow: var(--sb-shadow-lg);
	}
	.sb-meganav--js .sb-meganav__bar.is-open { display: block; }

	.sb-meganav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 8px;
	}

	.sb-meganav__trigger,
	.sb-meganav__link {
		width: 100%;
		min-height: 48px;
		justify-content: space-between;
		padding: 12px 14px;
		font-size: 1.02rem;
		border-radius: 12px;
	}
	.sb-meganav__trigger.is-current,
	.sb-meganav__link.is-current { box-shadow: inset 3px 0 0 0 var(--sb-blue); border-radius: 12px; }

	/* Panels become in-flow accordions. */
	.sb-meganav--js .sb-meganav__panel {
		position: static;
		transform: none;
		width: auto;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		transition: none;
	}
	.sb-meganav--js .sb-meganav__panel.is-open { transform: none; }

	.sb-meganav__panel-inner {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 4px 14px 20px;
	}
	.sb-meganav__aside {
		padding-left: 0;
		padding-top: 16px;
		border-left: 0;
		border-top: 1px solid var(--sb-line);
	}
	.sb-meganav__links a,
	.sb-meganav__products a { min-height: 44px; }
	.sb-meganav__cta { margin-top: 4px; }
}

/* Narrow phones: the word beside the burger costs more space than it gives.
   It is hidden from the eye, never from the accessibility tree, because the
   bars are decorative and that word is the button's only accessible name. */
@media (max-width: 420px) {
	.sb-meganav__burger-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.sb-meganav__burger { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-meganav__panel,
	.sb-meganav__chevron,
	.sb-meganav__burger-bars span { transition: none !important; }
}

/* Families with no fixed-price package still get a route to the shop. */
.sb-meganav__aside-note { margin: 0; font-size: .85rem; }
.sb-meganav__aside-note a { color: var(--sb-blue); font-weight: 600; text-decoration: none; }
.sb-meganav__aside-note a:hover { text-decoration: underline; }

/* =========================================================
   Two-tier desktop bar
   Lives here rather than in style.css because this file loads
   last: the base trigger sizing above would otherwise win.
   ========================================================= */
@media (min-width: 1281px) {
	.sb-meganav__list { justify-content: center; gap: 2px; }
	.sb-meganav__trigger,
	.sb-meganav__link {
		padding: 10px 7px;
		font-size: .84rem;
		border-radius: 0;
	}
	.sb-meganav__trigger.is-current,
	.sb-meganav__link.is-current { border-radius: 0; }
	.sb-meganav__chevron { width: 9px; height: 6px; }
}