/* ---------------------------------------------------------------------------
   M+B mega menu.

   Colours come from the theme's own custom properties, with a fallback after
   each one so the plugin still looks right if it is ever activated on a
   different theme.
   --------------------------------------------------------------------------- */

/* Wrapped in :where(), which carries no specificity at all, so ANY rule the
   theme has on .nav-links beats it. That matters for one rule in particular:
   the theme hides the bar below its own breakpoint with .nav-links{display:none}
   inside a media query. A media query adds no weight, so a plain .nav-links
   rule here tied with it — and because this stylesheet loads after the theme's,
   the tie went to display:flex and the bar stayed visible on a phone while the
   burger never appeared. Defaults belong in :where(); the theme decides. */
:where(.nav-links){display:flex;align-items:center;gap:2px;flex:1 1 auto;height:100%;margin:0;padding:0;list-style:none}
.nav-links > li{list-style:none;height:100%;display:flex;align-items:center;position:static}

.nav-links .nav-top{
	display:flex;align-items:center;gap:5px;padding:10px 13px;border-radius:9px;
	font-weight:600;font-size:15px;white-space:nowrap;color:var(--ink,#131B2E);text-decoration:none;
	transition:background .15s,color .15s;
}
.nav-links .nav-top:hover,
.nav-links .nav-top:focus-visible{background:var(--paper-2,#F5F8FF);color:var(--accent,#3458FA)}
.nav-links li.is-here > .nav-top{color:var(--accent,#3458FA)}

.nav-links .chev{
	width:6px;height:6px;
	border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
	transform:rotate(45deg) translateY(-2px);transition:transform .2s;opacity:.55;
}
.nav-links li.open > .nav-top{background:var(--accent-soft,#E9EDFE);color:var(--accent,#3458FA)}
.nav-links li.open > .nav-top .chev{transform:rotate(-135deg) translateY(-1px)}

/* The panel spans the header, so the header is the positioning context and
   each item is position:static. Making the li relative would pin every panel
   under its own label. */
.mega{
	position:absolute;left:0;right:0;top:100%;
	background:var(--paper,#fff);border-bottom:1px solid var(--line,#E3E9F5);
	box-shadow:0 24px 40px -28px rgba(19,27,46,.28);
	display:none;z-index:290;
}
.nav-links li.open > .mega{display:block}

.mega-in{display:grid;gap:26px;padding:24px 0 28px;grid-template-columns:repeat(3,minmax(0,1fr)) 262px}
.mega-in.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-in .col{min-width:0}

.mega .col h3{
	margin:0 0 11px;font-family:var(--mono,ui-monospace,monospace);
	font-size:10px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--faint,#8891A8);font-weight:500;
}
.mega .col ul{margin:0;padding:0;list-style:none}
.mega .col li a{
	display:flex;align-items:center;gap:8px;padding:6px 8px;margin-left:-8px;
	border-radius:7px;font-size:14px;font-weight:500;line-height:1.3;
	color:var(--ink,#131B2E);text-decoration:none;
}
.mega .col li a:hover,
.mega .col li a:focus-visible{background:var(--paper-2,#F5F8FF);color:var(--accent,#3458FA)}

.mega .ranked li a{align-items:baseline}
.mega .rk{
	flex:0 0 auto;width:17px;font-style:normal;
	font-family:var(--mono,ui-monospace,monospace);font-size:10px;color:var(--faint,#8891A8);
}
.mega .ranked li a:hover .rk{color:var(--accent,#3458FA)}

.mega .all{
	display:inline-flex;align-items:center;gap:6px;margin-top:9px;
	padding:6px 8px;margin-left:-8px;border-radius:7px;
	font-size:13.5px;font-weight:700;color:var(--accent,#3458FA);text-decoration:none;
}
.mega .all:hover{background:var(--accent-soft,#E9EDFE)}

.mega .hub{
	display:block;padding:11px 12px;margin:0 0 13px;border-radius:10px;
	background:var(--paper-2,#F5F8FF);border:1px solid var(--line,#E3E9F5);text-decoration:none;
}
.mega .hub b{display:block;font-size:14.5px;font-weight:700;color:var(--ink,#131B2E)}
.mega .hub span{
	display:block;margin-top:3px;letter-spacing:.05em;
	font-family:var(--mono,ui-monospace,monospace);font-size:10px;color:var(--faint,#8891A8);
}
.mega .hub:hover{border-color:var(--accent,#3458FA);background:var(--accent-soft,#E9EDFE)}

.mega .pill-set{display:flex;flex-wrap:wrap;gap:5px}
.mega .pill{
	display:inline-block;padding:4px 9px;border-radius:999px;
	background:var(--paper-2,#F5F8FF);border:1px solid var(--line,#E3E9F5);
	font-size:12.5px;color:var(--muted,#5B6478);text-decoration:none;
}
.mega .pill:hover{border-color:var(--accent,#3458FA);color:var(--accent,#3458FA)}

.mega .cav{
	margin:9px 0 0;line-height:1.5;
	font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;color:var(--faint,#8891A8);
}

.mega .feat{border-left:1px solid var(--line,#E3E9F5);padding-left:24px}
.mega .feat-link{display:block;text-decoration:none;color:inherit}
.mega .feat .shot{
	display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:10px;
	background:linear-gradient(135deg,var(--accent-soft,#E9EDFE),var(--data-soft,#FCE7F3));
}
.mega .feat .shot img{width:100%;height:100%;object-fit:cover;display:block}
.mega .feat .kicker{
	display:block;text-transform:uppercase;letter-spacing:.12em;
	font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;color:var(--accent,#3458FA);
}
.mega .feat .h4{display:block;margin:6px 0 5px;font-size:14.5px;line-height:1.3;font-weight:700}
.mega .feat .meta{
	display:block;line-height:1.5;
	font-family:var(--mono,ui-monospace,monospace);font-size:10px;color:var(--faint,#8891A8);
}
.mega .feat-link:hover .h4{color:var(--accent,#3458FA)}

/* badges */
.mb-badge{
	flex:0 0 auto;margin-left:auto;font-style:normal;
	font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.06em;
	text-transform:uppercase;padding:2px 6px;border-radius:5px;font-weight:500;
	background:var(--paper-3,#E9EDFE);color:var(--muted,#5B6478);
}
.mb-badge.is-blue{background:var(--accent-soft,#E9EDFE);color:var(--accent,#3458FA)}
.mb-badge.is-pink{background:var(--data-soft,#FCE7F3);color:#9D174D}
.mb-badge.is-green{background:#DEF7EC;color:#03543F}
.mb-badge.is-amber{background:#FEF3C7;color:#92400E}
.nav-top .mb-badge{margin-left:2px}

/* ---------- drawer ----------
   Every selector here is prefixed with .d-list. The theme styles its drawer
   with ".drawer a", which has the same weight as a bare ".d-body a", so which
   one won would come down to stylesheet order — and every link would have come
   out bold and bordered. The extra class settles it either way. */
.d-list{display:block}
.d-list .d-sec{border-bottom:1px solid var(--line,#E3E9F5)}
.d-list .d-sec .d-top{
	display:flex;align-items:center;justify-content:space-between;gap:8px;
	width:100%;padding:14px 0;font-size:15.5px;font-weight:650;text-align:left;
	background:none;border:0;border-bottom:0;color:inherit;text-decoration:none;cursor:pointer;
	font-family:inherit;line-height:1.3;
}
.d-list .d-sec .d-top .chev{
	width:8px;height:8px;flex:0 0 auto;
	border-right:2px solid var(--faint,#8891A8);border-bottom:2px solid var(--faint,#8891A8);
	transform:rotate(45deg);transition:transform .25s;
}
.d-list .d-sec.open .d-top{color:var(--accent,#3458FA)}
.d-list .d-sec.open .d-top .chev{transform:rotate(-135deg);border-color:var(--accent,#3458FA)}
.d-list .d-body{display:none;padding:0 0 12px 2px}
.d-list .d-sec.open .d-body{display:block}
.d-list .d-body a{
	display:flex;align-items:center;gap:8px;padding:8px 0;
	font-family:inherit;font-size:14px;font-weight:500;line-height:1.35;
	border-bottom:0;color:var(--muted,#5B6478);text-decoration:none;
}
.d-list .d-body a:hover{color:var(--accent,#3458FA)}
.d-list .d-body a.hubl{font-weight:700;color:var(--ink,#131B2E)}
.d-list .d-body .mb-badge{margin-left:auto}

@media(max-width:1240px){
	.nav-links .nav-top{font-size:13.5px;padding:8px 9px}
}
@media(max-width:1040px){
	.mega-in.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
	.mega-in{grid-template-columns:1fr}
	.mega .feat{border-left:0;padding-left:0;border-top:1px solid var(--line,#E3E9F5);padding-top:18px}
}
@media(prefers-reduced-motion:reduce){
	.nav-links .chev,.d-sec .d-top .chev{transition:none}
}

/* ---------------------------------------------------------------------------
   Menu items drawn as buttons.

   Set per item at Appearance → Menus — "Show as a button" — so nothing depends
   on remembering a CSS class. Works on a top-level item, where it becomes the
   call to action in the bar, and on the links inside a panel.
   --------------------------------------------------------------------------- */
.mb-btn {
	border-radius: 9px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

/* --- in the bar --- */
.nav-links .nav-top.mb-btn--solid {
	padding: 9px 16px;
	background: var(--data, #EC4899);
	color: #fff;
}

.nav-links .nav-top.mb-btn--solid:hover,
.nav-links .nav-top.mb-btn--solid:focus-visible {
	background: var(--data, #EC4899);
	color: #fff;
	filter: brightness(.94);
}

.nav-links .nav-top.mb-btn--outline {
	padding: 8px 15px;
	border: 1.5px solid var(--accent, #3458FA);
	background: none;
	color: var(--accent, #3458FA);
}

.nav-links .nav-top.mb-btn--outline:hover,
.nav-links .nav-top.mb-btn--outline:focus-visible {
	background: var(--accent-soft, #E9EDFE);
	color: var(--accent, #3458FA);
}

/* --- inside a panel --- */
.mega .col li.is-btn-row {
	margin-top: 10px;
}

.mega .col li.is-btn-row a {
	justify-content: center;
	margin-left: 0;
	padding: 10px 14px;
	font-size: 13.5px;
}

.mega .col li.is-btn-row a.mb-btn--solid {
	background: var(--accent, #3458FA);
	color: #fff;
}

.mega .col li.is-btn-row a.mb-btn--solid:hover {
	background: var(--accent-hover, #2B49E0);
	color: #fff;
}

.mega .col li.is-btn-row a.mb-btn--outline {
	border: 1.5px solid var(--line-strong, #C7D0E8);
	color: var(--ink, #131B2E);
}

.mega .col li.is-btn-row a.mb-btn--outline:hover {
	border-color: var(--accent, #3458FA);
	background: none;
	color: var(--accent, #3458FA);
}

/* A badge on a filled button has to sit on the fill, not on the page. */
.mb-btn--solid .mb-badge {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* In the drawer a top-level button is a full-width row, since the bar it was
   sized for is not there. */
.d-list .d-sec .d-top.mb-btn {
	justify-content: center;
	margin: 10px 0;
	padding: 12px 16px;
}

.d-list .d-sec .d-top.mb-btn--solid {
	background: var(--data, #EC4899);
	color: #fff;
}

.d-list .d-sec .d-top.mb-btn--outline {
	border: 1.5px solid var(--accent, #3458FA);
	color: var(--accent, #3458FA);
}

@media (prefers-reduced-motion: reduce) {
	.mb-btn {
		transition: none;
	}
}