/* ICH_Quiz — header / top nav (organisms) | BMSoft1024 */ nav.top{position:sticky;top:0;z-index:var(--z-header);background:rgba(11,16,32,.6); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;gap:16px;height:64px;flex-wrap:nowrap} .logo{font-weight:800;font-size:1.25rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:6px} .logo b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent} .logo .pro{font-size:.62rem;color:var(--amber);border:1px solid var(--amber);padding:1px 6px;border-radius:6px;margin-left:2px} .logo img{width:26px;height:26px} .nav-right{margin-left:auto;display:flex;align-items:center;gap:8px} .nav-user{display:inline-flex;align-items:center;gap:7px;max-width:200px} .nav-avatar{width:24px;height:24px;border-radius:50%;flex:none;background:var(--grad-brand);background-size:cover;background-position:center} .nav-uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px} @media(max-width:520px){.nav-uname{display:none}} /* ---- Mobile / "compact" nav (user-reported 2026-07-11) ------------------------------------------- Driven entirely by the `.nav-compact` class on , set by js/organisms/navigation.js based on REAL measured overflow of .nav-in — not a fixed px breakpoint, which could never track the nav's actual content width (translated label length, logged-in state, dropdown item count all change it). `.nav-links li.mobile-only-item` (not the bare class) is required — nav-items.css's `.nav-links li{display:flex}` is a class+element selector, HIGHER specificity than a bare single-class one, and would otherwise silently win and keep these items visible at every width. */ .nav-links li.mobile-only-item{display:none} html.nav-compact .nav-links{ display:none;position:absolute;top:64px;right:0;left:auto; flex-direction:column;align-items:stretch;gap:0; width:min(360px, 100%);min-width:220px; background:rgba(13,17,34,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); padding:8px 0;border-bottom:1px solid var(--line); max-height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; box-shadow:0 20px 40px -12px rgba(0,0,0,.6) } html.nav-compact .nav-links.open{display:flex} /* Scroll-lock the page behind the open panel (user-reported: "átmegy a görgetés a mobil navigáción az oldalra is") — same `:has()` pattern the project already uses for .asset-modal (css/organisms/ quiz.css), so this stays consistent with the rest of the codebase instead of introducing a JS toggle. */ body:has(.nav-links.open){overflow:hidden} html.nav-compact .nav-right > .lang-switcher, html.nav-compact .nav-right > .nav-user, html.nav-compact .nav-right > .nav-logout{display:none} html.nav-compact .nav-links li.mobile-only-item{display:flex} /* Single column, right-aligned drawer under the hamburger (user-requested 2026-07-11): - panel width is min(360px, 100%) so it never squishes the background into a narrow center column - panel is anchored to the right edge (right:0), directly below the hamburger icon - every
  • stretches to the full drawer width, so all items share the same left edge - text inside each item is left-aligned, not centered. */ html.nav-compact .nav-links > li{width:100%} html.nav-compact .nav-links > li > a{ display:flex;width:100%;justify-content:flex-start;text-align:left;padding:14px 20px; font-size:1.08rem;font-weight:600;color:var(--text) } html.nav-compact .nav-links > li > a:active, html.nav-compact .nav-links > li > a:hover{background:var(--glass-2)} html.nav-compact .nav-links > li > a.active{background:rgba(99,102,241,.18);color:var(--text)} /* Lang switcher — centered pill row, own row, divider under it (stays centered above the menu box). */ html.nav-compact .lang-switcher-mobile{padding:10px 20px 16px;border-bottom:1px solid var(--line);margin-bottom:6px} html.nav-compact .lang-switcher-mobile .lang-switcher{justify-content:center;gap:8px} html.nav-compact .lang-switcher-mobile .lang-btn{padding:8px 22px;font-size:.9rem} /* "Rólunk" ("More") — plain, always-expanded nested list. The submenu is ALWAYS expanded on mobile (no collapse/expand interaction here), so the little ▾ arrow serves no purpose and was the direct cause of a horizontal scrollbar on the whole page (user screenshot, 2026-07-11) — hidden entirely in compact mode. Sub-items are indented from the shared left edge of the centered box. */ html.nav-compact .has-dropdown{flex-direction:column;align-items:stretch;width:100%} html.nav-compact .dropdown-toggle{ width:100%;justify-content:flex-start;text-align:left;padding:14px 20px;font-weight:600; font-size:1.08rem;color:var(--text) } html.nav-compact .dropdown-arrow{display:none} html.nav-compact .dropdown-menu{ display:block!important;position:static;width:auto;min-width:0;box-shadow:none; background:none;border:none;padding:0;margin:0 } html.nav-compact .dropdown-link{display:flex;justify-content:flex-start;text-align:left;padding:12px 20px 12px 40px;font-size:1rem;color:var(--muted)} html.nav-compact .dropdown-link:hover{background:var(--glass-2);color:var(--text)} /* Divider + profile + logout — last two items (user-requested order/position 2026-07-11), same left-aligned single-column row style inside the centered box. */ /* flex:0 0 auto + min-height (not just height) — as a flex item inside the column-direction .nav-links, a bare `height:1px` was getting flex-basis-resolved away to 0 (measured 0px live, 2026-07-11). */ html.nav-compact .nav-links-sep{flex:0 0 auto;min-height:1px;height:1px;background:var(--line);margin:8px 20px} html.nav-compact .nav-logout-mobile{color:var(--red,#f87171)} html.nav-compact .mobile-menu{display:flex} /* Narrow phones (user-reported 2026-07-10/11: hamburger overlapping the Google login button, then the lang switcher itself colliding with the logo) — the lang switcher/profile/logout already moved into the mobile panel above, so all that's left in the header row is logo + login/notif + hamburger; still trim the logo's BETA pill so those never crowd a very small screen. */ @media(max-width:400px){ .nav-in{gap:8px} .logo .pro{display:none} .logo span:not(.pro){font-size:1rem} .nav-right{gap:5px} .btn-google{padding:7px 10px;font-size:.82rem} }