/* ==========================================================================
   Bestlab Fast — mega menu, "egyszerre egy döntés" design (v2)
   Loaded only while this design is selected in Bestlab Suite → Options → Menü;
   the alternative is mega-menu-classic.css. Both designs reuse the same class
   names, so exactly one of these files is ever on the page.
   Depends on main.css for the header, container and drawer shell.
   ========================================================================== */

/* The nav is a plain block: .blf-nav__row does the horizontal layout, and
   .blf-nav__extra only appears inside the mobile drawer. */
.blf-nav{display:block}

/* ---- Mega menu — one panel, one category at a time --------------------
   The nav row sits on its own line under the header bar; the panel anchors to
   that row so it can span the header edge to edge. Every main category shares
   one panel: the rail on the left picks which one is on screen, the middle
   shows only that category's groups, and the aside (planner + configurators)
   is the same whichever category you are in. See mega-nav.php / mega-menu.js. */

.blf-header__nav{position:relative;border-top:1px solid var(--bl-line)}
.blf-nav__row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px}
.blf-menu--main{display:flex;gap:2px;margin-left:-12px}
.blf-menu--util{display:flex;align-items:center;gap:2px;margin-right:-12px}

.blf-menu__item{position:relative;display:flex;align-items:center}
/* Must beat the earlier `.blf-menu > li{position:relative}` (higher specificity)
   so the panel anchors to the full-width nav row, not the narrow menu item. */
.blf-menu > li.blf-has-mega{position:static}
.blf-menu__top{display:flex;align-items:center;gap:.35em;padding:12px 14px;font-weight:600;color:var(--bl-navy);font-size:.95rem;border-radius:9px;white-space:nowrap}
.blf-menu__top:hover{color:var(--bl-blue);text-decoration:none}

/* A category reads as one pill: the label navigates, the caret opens. */
.blf-has-mega{border-radius:9px;transition:background .16s ease}
.blf-has-mega .blf-menu__top{padding-right:4px;border-radius:9px 0 0 9px}
.blf-has-mega .blf-menu__top:hover{color:var(--bl-navy)}
.blf-menu__caret{display:flex;align-items:center;padding:12px 12px 12px 4px;border:0;background:none;color:var(--bl-navy);border-radius:0 9px 9px 0}
.blf-menu__caret svg{opacity:.6;transition:transform .2s ease}
.blf-has-mega:hover{background:var(--bl-soft)}
.blf-has-mega.is-active{background:var(--bl-navy)}
.blf-has-mega.is-active .blf-menu__top,
.blf-has-mega.is-active .blf-menu__caret{color:#fff}
.blf-has-mega.is-active .blf-menu__caret svg{opacity:1;transform:rotate(180deg)}

/* Utility links are quieter than the categories — they are not the main path. */
.blf-menu--util .blf-menu__top{color:var(--bl-muted);font-weight:500}
.blf-menu--util .blf-menu__top:hover{color:var(--bl-navy);background:var(--bl-soft)}
.blf-menu__top--accent{color:var(--bl-orange);font-weight:700}
.blf-menu__top--accent:hover{color:var(--bl-orange-d)}

.blf-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--bl-line);border-bottom:1px solid var(--bl-line);box-shadow:var(--bl-shadow-lg);z-index:90;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1),visibility .2s}
.blf-mega.is-open{opacity:1;visibility:visible;transform:none}
/* Full-bleed: the panel spans the viewport, so its grid does too. The rail and
   the aside would otherwise sit against the screen edge — the gutter that the
   `.container` class used to provide is now this padding, which is why the rail
   has no left padding and the aside no right padding of their own. */
.blf-mega__inner{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr) minmax(230px,270px);align-items:stretch;padding-inline:clamp(16px,2.5vw,48px)}

/* Left rail — the five categories, always all five, one of them selected. */
.blf-mega__rail{display:flex;flex-direction:column;gap:2px;padding:20px 22px 24px 0;border-right:1px solid var(--bl-line)}
.blf-mega__railitem{position:relative;display:flex;align-items:center;border-radius:10px;transition:background .14s ease}
.blf-mega__raillink{display:flex;align-items:flex-start;gap:13px;flex:1;min-width:0;padding:11px 14px;color:var(--bl-navy);border-radius:10px}
.blf-mega__raillink:hover{text-decoration:none}
.blf-mega__railico{width:24px;height:24px;flex:none;margin-top:2px;opacity:.75}
.blf-mega__railtxt{min-width:0}
.blf-mega__railname{display:block;font-size:1rem;font-weight:700;line-height:1.25}
.blf-mega__raildesc{display:block;margin-top:2px;color:var(--bl-muted);font-size:.81rem;font-weight:400;line-height:1.35}
.blf-mega__railitem:hover{background:var(--bl-soft)}
.blf-mega__railitem.is-active{background:var(--bl-soft)}
.blf-mega__railitem.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--bl-orange)}
.blf-mega__railitem.is-active .blf-mega__railico{opacity:1}

/* Middle — the selected category's groups, laid out as horizontal bands.
   Each band is a grid: the orange group heading sits in a fixed left column and
   the group's links flow across even auto-fit columns beside it, filling the
   whole width instead of stranding two links at the panel's edges. A hairline
   rule between bands gives the panel a scannable, catalogue-like rhythm.
   `.blf-mega__group`'s two children — the heading, then the `<ul>` — are the
   two grid columns, so this needs no extra markup. */
.blf-mega__body{padding:22px 30px 24px}
.blf-mega__panel{display:flex;flex-direction:column}
.blf-mega__panel[hidden]{display:none}

.blf-mega__group{display:grid;grid-template-columns:minmax(120px,152px) minmax(0,1fr);gap:8px 32px;padding:15px 0;border-top:1px solid var(--bl-line)}
.blf-mega__group:first-child{padding-top:0;border-top:0}
.blf-mega__group:last-child{padding-bottom:0}

/* Heading sits at the top of its band, aligned to the first link's baseline. */
.blf-mega__heading{align-self:start;padding-top:7px;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;font-weight:800;line-height:1.3;color:var(--bl-orange)}
a.blf-mega__heading--link{transition:color .15s}
a.blf-mega__heading--link:hover{color:var(--bl-orange-d);text-decoration:underline}

/* Links fill the band in as many even columns as fit — no fixed 2-up gutter. */
.blf-mega__links{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:1px 20px;margin:0;padding:0;list-style:none}
.blf-mega__links a{display:block;padding:7px 10px;margin-left:-10px;border-radius:7px;color:var(--bl-ink);font-size:.93rem;font-weight:500;transition:background .13s ease,color .13s ease}
.blf-mega__links a:hover{background:var(--bl-soft);color:var(--bl-navy);text-decoration:none}

/* Right — the tools, in a place people actually look. Shared by every panel. */
.blf-mega__aside{display:flex;flex-direction:column;gap:16px;padding:20px 0 26px 28px;border-left:1px solid var(--bl-line)}
.blf-mega__promo{display:block;padding:14px;border:1px solid var(--bl-line);border-radius:12px;background:var(--bl-soft);color:inherit;transition:border-color .15s ease}
.blf-mega__promo:hover{border-color:var(--bl-blue);text-decoration:none}
.blf-mega__promo-media{display:flex;align-items:center;justify-content:center;height:84px;margin-bottom:11px;border:1px solid var(--bl-line);border-radius:9px;background:#fff}
.blf-mega__promo-media img{width:40px;height:40px;opacity:.8}
.blf-mega__promo-title{display:block;margin-bottom:3px;font-size:1rem;font-weight:800;color:var(--bl-navy);line-height:1.2}
.blf-mega__promo-text{display:block;color:var(--bl-muted);font-size:.84rem;line-height:1.45}
.blf-mega__tools{display:flex;flex-direction:column;gap:1px;padding-top:14px;border-top:1px solid var(--bl-line)}
.blf-mega__tools a{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-left:-10px;border-radius:8px;color:var(--bl-navy);font-size:.87rem;font-weight:600;line-height:1.3}
.blf-mega__tools a:hover{background:var(--bl-soft);text-decoration:none}
.blf-mega__toolico{width:20px;height:20px;flex:none;opacity:.75}

/* Drill-down controls belong to the mobile drawer only. */
.blf-mega__drill,.blf-mega__back{display:none}

/* Keyboard focus has to stay legible on the navy pill too, so the ring is
   drawn inside the element rather than around it. */
.blf-menu__caret:focus-visible,
.blf-menu__top:focus-visible,
.blf-mega__raillink:focus-visible,
.blf-mega__links a:focus-visible,
.blf-mega__heading--link:focus-visible,
.blf-mega__promo:focus-visible,
.blf-mega__tools a:focus-visible,
.blf-mega__drill:focus-visible,
.blf-mega__back:focus-visible{outline:2px solid var(--bl-blue);outline-offset:-2px;border-radius:8px}
.blf-has-mega.is-active .blf-menu__top:focus-visible,
.blf-has-mega.is-active .blf-menu__caret:focus-visible{outline-color:#fff}

@media(prefers-reduced-motion:reduce){
	.blf-mega{transition:none}
	.blf-menu__caret svg{transition:none}
}

/* Narrower desktops: drop the aside before the groups get cramped. */
@media(max-width:1180px){
	.blf-mega__inner{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}
	.blf-mega__aside{display:none}
}

/* ---- Mobile drawer ---------------------------------------------------- */
@media(max-width:900px){
	/* ---- Mega menu: the rail *is* the mobile menu ----------------------
	   The nav row stacks, the five top-level category pills are dropped (the
	   rail already lists them, with their subtitles), and tapping a rail row's
	   chevron drills into that category. The panel stays visible even with the
	   `hidden` attribute still on it, so a visitor without JS at least gets the
	   five category links. */
	.blf-header__nav{border-top:0}
	.blf-nav__row{flex-direction:column;align-items:stretch;gap:0;min-height:0;max-width:none}
	.blf-menu--main{display:none}
	.blf-menu--util{flex-direction:column;align-items:stretch;gap:0;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--bl-line)}
	.blf-menu--util .blf-menu__top{padding:12px 10px;font-size:1rem}
	.blf-menu--util .blf-menu__top:hover{background:var(--bl-soft)}

	.blf-mega,.blf-mega[hidden]{display:block;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;z-index:auto;transition:none}
	.blf-mega__inner{display:block;max-width:none;padding:0}

	.blf-mega__rail{display:flex;gap:0;padding:0;border-right:0}
	.blf-mega__railitem{border-radius:8px}
	.blf-mega__railitem:hover,.blf-mega__railitem.is-active{background:none}
	.blf-mega__railitem.is-active::before{display:none}
	.blf-mega__raillink{padding:12px 10px}
	.blf-mega__drill{display:flex;align-items:center;justify-content:center;flex:none;width:42px;align-self:stretch;border:0;background:none;color:var(--bl-navy);border-radius:8px}
	.blf-mega__drill:hover{background:var(--bl-soft)}

	.blf-mega__body{display:none;padding:0}
	/* Drilled in: the category's groups are the only thing on screen. */
	.blf-nav.is-drilled .blf-mega__rail,
	.blf-nav.is-drilled .blf-menu--util,
	.blf-nav.is-drilled .blf-nav__extra{display:none}
	.blf-nav.is-drilled .blf-mega__body{display:block}
	.blf-mega__back{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:12px 10px;border:0;border-bottom:1px solid var(--bl-line);border-radius:0;background:none;color:var(--bl-navy);font-size:1rem;font-weight:700;text-align:left}
	/* Bands collapse: heading stacks above a single column of links. */
	.blf-mega__group{display:block;padding:14px 0}
	.blf-mega__group:first-child{padding-top:0}
	.blf-mega__links{grid-template-columns:1fr;gap:0}
	.blf-mega__links a{padding:10px;margin-left:0;font-size:.98rem}
	.blf-mega__heading{padding-top:0;margin-bottom:4px}

	/* display: the ≤1180px rule above hides the aside; the drawer wants it back. */
	.blf-mega__aside{display:flex;gap:12px;margin-top:12px;padding:14px 0 0;border-left:0;border-top:1px solid var(--bl-line)}
	.blf-nav.is-drilled .blf-mega__aside{display:none}
	.blf-mega__promo-media{height:64px}
	.blf-mega__tools a{padding:11px 10px;margin-left:0;font-size:.95rem}
}