/* CLNT-4597 · Platform, Megoldások and Tudásanyag dropdowns in the shared public header (desktop panel,
   inline on the mobile menu). Each panel opens under its own item, left edges aligned; the header script
   shifts it left only as far as needed to stay on screen (--nav-menu-shift). */
.nav-platform { position: relative; }
.nav-platform-toggle { list-style: none; cursor: pointer; gap: .45rem; }
.nav-platform-toggle::-webkit-details-marker { display: none; }
.nav-platform[open] .nav-account-caret { transform: rotate(180deg); }
.nav-platform-menu { position: absolute; top: calc(100% + .5rem); left: 0; transform: translateX(calc(-1 * var(--nav-menu-shift, 0px))); z-index: 20; width: min(40rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); box-shadow: 0 18px 40px var(--color-shadow); text-align: left; }
.nav-platform-menu a { display: grid; gap: .15rem; align-content: start; padding: .85rem 1rem; border-radius: 0; color: var(--color-ink); text-decoration: none; text-transform: none; letter-spacing: normal; }
.nav-platform-menu strong { font: 600 .84rem/1.3 var(--font-body); }
.nav-platform-menu span { font: 400 .75rem/1.45 var(--font-body); color: var(--color-muted); }
.nav-platform-menu a[aria-current="page"] strong { color: var(--color-accent-text); }
.nav-platform-menu a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.nav-platform-overview { border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.nav-platform-overview strong { font: 600 1.15rem/1.2 var(--font-display) !important; }
.nav-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (hover: hover) { .nav-platform-menu a:hover { background: var(--color-paper-alt); } }

/* One anatomy for every dropdown (CLNT-4798): overview band on top, the grid, one next step in a band at
   the bottom (Tudásanyag's is its featured articles). Megoldások has nine items, so it is 3×3 and wider. */
.nav-menu-wide { width: min(54rem, calc(100vw - 2rem)); }
.nav-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-menu-next { display: grid; border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.nav-platform-menu a.nav-menu-next { gap: .15rem; }
.nav-menu-next strong span { font: inherit !important; color: inherit !important; }
.nav-resources-featured .small-label { margin: 0; padding: .75rem 1rem 0; font-size: .7rem; }
.nav-resources-featured strong { font-weight: 500 !important; }

/* The panel is tiled edge to edge with links: no dead strips, so the cursor stays a hand across the whole menu. */
.nav-platform[open] .nav-platform-menu { animation: nav-platform-in 160ms var(--ease-out); }
@keyframes nav-platform-in { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .nav-platform[open] .nav-platform-menu { animation: none; } }

/* Inside the mobile menu the panel flows inline, one column. */
.mobile-navigation .nav-platform { width: 100%; }
.mobile-navigation .nav-platform-toggle { width: 100%; justify-content: space-between; }
.mobile-navigation .nav-platform-menu { position: static; transform: none; width: auto; margin: .25rem 0 .5rem; box-shadow: none; animation: none; }
.mobile-navigation .nav-platform-grid { grid-template-columns: minmax(0, 1fr); }
.mobile-navigation .nav-menu-wide { width: auto; }
.mobile-navigation .nav-platform-menu span { display: none; }
.mobile-navigation .nav-platform-menu a { padding: .6rem .75rem; }

/* Header hierarchy (CLNT-4597 review): sentence case, one filled primary action, everything else plain.
   This sheet loads after the page stylesheets, so equal-specificity rules here win. */
.site-header .nav-link { font: 500 .9rem/1.4 var(--font-body); letter-spacing: normal; text-transform: none; }
.site-header .nav-link[aria-current="page"] { color: var(--color-accent-text); }
.site-header .nav-link-lex { border-color: transparent; color: var(--color-ink); }
.site-header .nav-link-lex:hover { background: transparent; border-color: transparent; }
.site-header .nav-login { margin-left: .5rem; }
.site-header .nav-invitation, .site-header .nav-workspace { margin-left: .25rem; padding-inline: 1rem; border: 1px solid transparent; border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.site-header .nav-invitation:hover, .site-header .nav-workspace:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.mobile-navigation > summary { font: 600 .9rem/1.4 var(--font-body); letter-spacing: normal; text-transform: none; }
.mobile-navigation .nav-invitation, .mobile-navigation .nav-workspace { justify-content: center; margin: .5rem 0 0; }

/* Phones and tablets: the primary action stays one tap away next to the menu. */
.header-cta-mobile { margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .85rem; border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-accent-ink); font: 600 .84rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.header-cta-mobile:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (min-width: 64rem) { .header-cta-mobile { display: none; } }
@media (max-width: 22.5rem) {
  /* 320–360px: logo, button and Menü must share one row. */
  .header-inner { gap: .5rem; }
  .header-cta-mobile { padding-inline: .6rem; }
  .mobile-navigation > summary { gap: .35rem; }
}

/* Mobile menu rhythm (CLNT-4597 review): one left edge, one typeface, 44px tap targets. */
.mobile-navigation .nav-link { min-height: 44px; }
.mobile-navigation .nav-login { margin-left: 0; }
.mobile-navigation .nav-platform-menu a { min-height: 44px; align-content: center; }
.mobile-navigation .nav-platform-overview strong { font: 600 .84rem/1.3 var(--font-body) !important; }

/* Footer (CLNT-4647). This sheet is loaded on every public page via public_header.html, so the
   footer's shared overrides live here rather than twice in landing.css and info.css.
   Links are the content and headings are quiet labels (the reverse of before), with list-like rows. */
.footer-column h2 { font: 500 .8rem/1.5 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--color-muted); }
.footer-column a, .footer-column button.footer-link-button { color: var(--color-ink-soft); }
.footer-brand p { font-size: 1.1rem; }
@media (min-width: 64rem) and (hover: hover) {
  /* Mouse users do not need 44px touch rows. */
  .footer-column a, .footer-column button.footer-link-button { min-height: 32px; }
}
/* Footer headings stay quiet but distinguishable from the links under them, especially in the
   single-column phone footer (CLNT-4653 review). */
.footer-column h2 { font-weight: 600; color: var(--color-ink); }

/* Focus ring on the menu toggles (CLNT-4798): a thin ring for keyboard users only. Chrome also matches
   :focus-visible on a <summary> after a mouse click, so the header script marks pointer use on <html>. */
.site-header :is(.nav-platform-toggle, .nav-account-toggle):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
html[data-pointer-nav] .site-header :is(.nav-platform-toggle, .nav-account-toggle):focus-visible { outline: none; }

/* CLNT-5135: the account menu's links (Munkaterület, Súgó) look and size like its Kilépés button; 44px tap targets. */
.nav-account-menu a.nav-account-action { display: flex; align-items: center; box-sizing: border-box; text-decoration: none; text-transform: none; letter-spacing: normal; border-radius: 0; }
.nav-account-menu .nav-account-action { min-height: 44px; }
.nav-account-menu a.nav-account-action:focus-visible, .nav-account-menu button.nav-account-action:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }