/* The supplied design. The full menu stays in the header down to 1241 px, so
   the common 1280 and 1366 px laptops keep it (the client did not notice the
   three-bar button there, 2026-10-16); narrower screens use the drop-down. */
@media (max-width:1240px) {
  /* The drop-down fades and slides in; closed, it stays hidden from focus and readers. */
  .nav-links {position:fixed;inset:88px 0 auto;display:grid;grid-template-columns:1fr;gap:0;padding:20px var(--content-pad);background:#fff;border-bottom:1px solid var(--line);max-height:calc(100svh - 89px);overflow:auto;
    visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;}
  body.menu-open .nav-links {visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s;}
  .nav-links a,.nav-links .nav-cta {padding:14px 0;}
  /* One label per row: the full-width underline read as a divider between two
     items. The current page keeps its green line, under its own label only. */
  .nav-links a:not(.nav-cta)::after {display:none;}
  .nav-links a:not(.nav-cta):hover {color:var(--green);}
  .nav-links a:not(.nav-cta)[aria-current="page"] {color:var(--green);text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:currentColor;text-underline-offset:7px;}
  .menu-toggle {display:block;}
  html:not(.js) .nav-links {position:static;display:grid;max-height:none;visibility:visible;opacity:1;transform:none;}
  html:not(.js) .menu-toggle {display:none;}
}
.nav-links a:focus-visible,.menu-toggle:focus-visible {outline:2px solid var(--green);outline-offset:5px;}
/* The three bars carry a visible word: an icon alone read as a settings button. */
.menu-toggle {position:relative;}
.menu-toggle::before {content:"Menü";position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.menu-toggle[aria-expanded="true"]::before {content:"Bezárás";}
/* Open menu: the three bars turn into a cross (bar centres are 7 px apart). */
.menu-toggle span {transition:transform .25s ease,opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0;transform:scaleX(.4);}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
@media (prefers-reduced-motion:reduce) {
  .menu-toggle span,.nav-links,body.menu-open .nav-links {transition:none;}
}
/* Single-line menu labels on desktop. The tagline yields its space first. */
@media (min-width:1241px) {
  .nav-links a {white-space:nowrap;}
}
@media (min-width:1241px) and (max-width:1600px) {
  .brand small {display:none;}
}
/* 1241-1320 px: a tighter gap keeps all seven items and the button on one line. */
@media (min-width:1241px) and (max-width:1320px) {
  .nav-links {gap:14px;}
}
/* Phones: a compact sticky header (logo and menu button only), in the usual
   56-64 px range; the opened menu starts right under it. */
@media (max-width:760px) {
  .nav {min-height:60px;}
  .brand-mark {width:100px;}
  .nav-links {inset:60px 0 auto;max-height:calc(100svh - 61px);}
}