/* chrome.css — page furniture
 *
 * The three controls that float over every section rather than belonging to
 * any one of them: the availability banner (z-60), the floating MENU (z-65)
 * and the menu panel (z-70). They used to live at the bottom of hero.css,
 * because the hero is where they first appear — but they are on screen for the
 * whole page, and a change to the banner should not mean opening the hero's
 * scaling contract. Their markup is template-parts/chrome-*.php.
 *
 * The hero's OWN top-bar MENU control (.menubtn) is not here: it is part of the
 * hero's type layer, it is cloned into the knockout, and it scales on the hero's
 * container-query tokens. It stays in hero.css.
 *
 * Below 1024px: chrome.small.css.
 */


/* =========================================================================
   Availability banner — z-60
   ========================================================================= */

.banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  padding: 0 clamp(24px, 3.4vw, 52px);
  background: var(--banner-black);
  font-family: var(--hud); font-weight: 500;
  font-size: clamp(8px, .66vw, 10px); line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  transition: transform 380ms var(--ease-io);
}
.banner.is-closed { transform: translateY(101%); }
.banner__left  { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.banner__avail { display: flex; align-items: center; gap: 10px; }
/* The banner's second line exists only below 768px, where the centre sentence
   is dropped and the SAME sentence stacks under the availability line instead —
   one slot per layout, one wording. */
.banner__short { display: none; }
.banner__dot   { width: 7px; height: 7px; background: var(--red-dark); display: block; flex: none; }
.banner__mid   { color: #fff; text-align: center; }
.banner__right { display: flex; align-items: center; gap: 18px; flex: none; }
.banner__cta {
  color: #fff; text-decoration: none;
  font-family: var(--hud); font-weight: 700;
  font-size: clamp(9px, .78vw, 11px); line-height: 1;
  letter-spacing: .14em; white-space: nowrap;
}
.banner__cta:hover { color: #fff; }
.banner__brk   { color: var(--red-dark); }   /* dark ground: 4.78:1, vs 3.94:1 on --red */
.banner__close {
  cursor: pointer; flex: none; padding: 6px;
  color: rgba(255, 255, 255, .65);
  font-family: var(--body); font-weight: 600; font-size: 13px; line-height: 1;
  transition: color 160ms ease;
}
.banner__close:hover { color: #fff; }


/* =========================================================================
   Floating MENU — z-65
   -------------------------------------------------------------------------
   No background of any kind: it sits directly on whatever section is behind it,
   exactly like the hero's own MENU control. Because it crosses both the red
   Clients field and the grey 08/09 panels, it inverts instead — main.js adds
   .is-inverted while a dark section is behind it and the type and squares go white.
   ========================================================================= */

.floatmenu {
  position: fixed;
  top: clamp(18px, 2.2vw, 30px);
  right: clamp(20px, 2.6vw, 44px);
  z-index: 65;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-family: var(--hud); font-weight: 500;
  font-size: clamp(9px, .8vw, 11px); line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--near-black);

  /* Hidden until main.js decides the hero has left. pointer-events guards against
     an invisible control swallowing clicks over the hero. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 320ms var(--ease-io), transform 320ms var(--ease-io),
              color 200ms ease;
}
.floatmenu.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.floatmenu:hover { color: var(--red); }

.floatmenu__grid {
  display: grid;
  grid-template-columns: 5px 5px;
  grid-template-rows: 5px 5px;
  gap: 3px;
}
.floatmenu__grid i { background: var(--red); transition: background 200ms ease; }

/* Over a dark section the red squares lose contrast and dark type disappears. */
.floatmenu.is-inverted { color: #fff; }
.floatmenu.is-inverted:hover { color: rgba(255, 255, 255, .72); }
.floatmenu.is-inverted .floatmenu__grid i { background: #fff; }

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


/* =========================================================================
   Menu panel — z-70
   ========================================================================= */

.menu {
  position: fixed; right: 0; top: 0;
  z-index: 70;
  width: min(25vw, 380px);
  height: 100vh;
  box-sizing: border-box;
  padding: 26px 30px 30px;
  background: var(--red);
  color: #fff;
  display: flex; flex-direction: column;
  transform: translateX(101%);

  /* THE PANEL IS 100vh AND ITS CONTENTS ARE NOT. Eight nav rows, the language
     chips and the contact pair overran a 560px-tall window by 28px once the
     contact rows gained their rules, and with no overflow rule the overrun was
     simply unreachable — clipped, with no scrollbar and no way to get to it.
     `auto` costs nothing at the heights where everything already fits.

     overscroll-behavior stops the scroll chaining to the page underneath once
     the panel reaches its end, which is what makes a fixed panel feel like a
     panel rather than a hole in the page. */
  overflow-y: auto;
  overscroll-behavior: contain;

  /* N8 — A CLOSED PANEL IS `visibility: hidden`, NOT MERELY TRANSLATED AWAY.
     Off-canvas by transform alone, it stayed visible to layout, hit-testing and
     the TAB ORDER: tabbing into a closed panel focused an invisible link and
     shunted the page 384px sideways, with no visible way back. A keyboard trap.

     `aria-hidden` does NOT fix this — it hides the panel from assistive tech
     while leaving its links tabbable, which is worse than either state alone.
     `visibility: hidden` removes it from the tab order and from hit-testing in
     one property, and it is inherited, so every descendant goes with it.

     THE 420ms DELAY IS THE WHOLE TRICK. `visibility` is not interpolable, so it
     is transitioned with a duration of 0 and a DELAY: closing waits the length
     of the slide before disappearing, so the panel animates out fully; opening
     uses no delay, so it is visible before the slide starts. Without the delay
     the panel vanishes instantly and the close animation is never seen. */
  visibility: hidden;
  transition: transform 420ms var(--ease-io),
              box-shadow 420ms var(--ease-io),
              visibility 0s linear 420ms;
}
.menu.is-open {
  transform: translateX(0);
  box-shadow: -30px 0 60px -20px rgba(60, 0, 12, .45);
  visibility: visible;
  transition: transform 420ms var(--ease-io),
              box-shadow 420ms var(--ease-io),
              visibility 0s linear 0s;
}
.menu__head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--hud); font-weight: 500; font-size: 9px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.menu__title { display: flex; align-items: center; gap: 7px; }
.menu__sq    { width: 6px; height: 6px; background: #fff; display: block; }
.menu__close {
  cursor: pointer;
  font-family: var(--body); font-weight: 600; font-size: 12px; line-height: 1;
  letter-spacing: 0; text-transform: none;
}
.menu__items { margin: auto 0; display: flex; flex-direction: column; }
/* --hair-on-red, not a literal. This rule carried its own copy of the value
   while the contact rows below read the token, so one panel had two sources for
   one hairline and they drifted apart. Both read the token now. */
.menu__item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--hair-on-red);
  color: #fff; text-decoration: none;
}
.menu__item:hover { color: #fff; }
.menu__i { font-family: var(--hud); font-weight: 500; font-size: 9px; line-height: 1; opacity: .72; }
.menu__label {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(20px, 1.7vw, 28px); line-height: 1;
  letter-spacing: -.02em;
}
.menu__langs {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--hud); font-weight: 500; font-size: 9px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.menu__lang {
  cursor: pointer;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: rgba(255, 255, 255, .72);
}
.menu__lang.is-active { background: #fff; color: var(--red); }
/* THE CONTACT PAIR — TWO RULED ROWS, NOT A FOOTNOTE. Chosen 2026-08-14 from
   four treatments; this is the one that gives the address and number a
   structure rather than only a bigger size, so they read as the last two
   entries of the menu instead of small print under it.

   IT IS ALSO A CONTRAST FIX. The pair was 9px white at `opacity: .82` on this
   red ground, which measures 3.46:1 — under the 4.5:1 floor for normal text.
   Full white on --red is 4.77:1, so the opacity is what had to go. Do not put
   it back to dim the rows; if they need to recede, take size, not contrast.

   THE HOVER AFFORDANCE MOVED WITH IT. Brightness used to be the whole signal —
   dimmed white at rest, full white on hover, matching .menu__item. That is no
   longer available now the rest state is already full white, so the arrow
   carries it instead: it brightens and steps 4px right. Same idiom and the same
   200ms/--ease-io as the Contact section's CALL and WRITE rows, which is where
   the arrow comes from.

   Red is still not an option for any of this — the panel's own background is
   var(--red), so the Contact section's red link colour would be invisible. */
.menu__foot {
  font-family: var(--hud); font-weight: 500; font-size: 10px; line-height: 1.6;
  letter-spacing: .12em; text-transform: uppercase;
  border-top: 1px solid var(--hair-on-red);
  padding-top: 4px;
}
/* The two links are separated by a <br> in chrome-menu.php, which is frozen
   markup. Each link is its own flex row here, so the break is a stray empty
   line box between them — removed rather than worked around. */
.menu__foot br { display: none; }

.menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-on-red);
  color: #fff;
  text-decoration: none;
}
/* WHITE ON HOVER, EXPLICITLY. main.css sets a global `a:hover { color:
   var(--red) }`, and --red IS this panel's background — an unstyled link turns
   the exact colour of the ground it sits on and disappears. .menu__item carries
   the same rule for the same reason. It is not redundant with the rest colour
   above: without it the global wins the moment the pointer lands. */
.menu__link:hover { color: #fff; }

.menu__link::after {
  content: '\2192';
  opacity: .7;
  transition: transform 200ms var(--ease-io), opacity 200ms var(--ease-io);
}
.menu__link:hover::after { opacity: 1; transform: translateX(4px); }


/* =========================================================================
   MOVED HERE FROM page.css ON 2026-08-06.
   -------------------------------------------------------------------------
   The strip renders on every NON-FRONT page (header.php decides), but page.css
   is enqueued only for `is_page()`. The Journal and the article view are not
   pages, so they were serving the strip's markup with none of its CSS: the
   brand, all eight nav rows with their index numerals, EN/HU and MENU came out
   as a stack of unstyled links above the masthead.

   chrome.css is where it belongs by this project's own file map — "page
   furniture that floats over every section". Nothing about the rules changed.
   ========================================================================= */
/* =========================================================================
   The 62px header strip — fixed furniture on secondary pages
   -------------------------------------------------------------------------
   FIT CONTRACT: nav links are nowrap + flex:none. Without it the browser
   resolves any shortfall by wrapping the only two-word label, which drops that
   one link to two lines and misaligns the row. nowrap alone converts the
   shortfall into a spill, so the gaps are tightened to go with it.

   Known gap, carried from the handoff: this does NOT reflow below ~800px. The
   right group spills. A mobile rule has not been designed.
   ========================================================================= */

.pgbar {
  position: relative;
  z-index: 40;
  height: 62px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 2vw, 32px);
  padding: 0 5%;
  background: #0e0f12;
  color: var(--on-dark);
}

.pgbar__brand {
  font-family: var(--hud); font-weight: 800;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--on-dark); text-decoration: none;
  white-space: nowrap; flex: none;
}
/* On-dark ground, so the dot takes the dark-surface red. */
.pgbar__dot { color: var(--red-dark); }

/* HOVER INVERTS THE MARK — the exact swap of the rest state. At rest the words
   are light on this #0e0f12 strip and the dot is red; on hover the words take
   the red and the dot takes the light.

   BOTH HALVES ARE EXPLICIT, and neither is redundant. main.css sets a global
   `a:hover { color: var(--red) }`, so without the first rule the mark would go
   the LIGHT-ground red on a dark strip, and without the second the dot would be
   dragged along with it and the inversion would never happen — the whole
   wordmark would simply turn one colour.

   --red-dark, not --red: tokens.css contracts --red-dark to dark grounds and
   lists #0e0f12 among them. Keyboard users get the same swap, since the global
   focus ring alone does not show which of the two states the mark is in. */
.pgbar__brand:hover,
.pgbar__brand:focus-visible { color: var(--red-dark); }
.pgbar__brand:hover .pgbar__dot,
.pgbar__brand:focus-visible .pgbar__dot { color: var(--on-dark); }

/* The horizontal link strip that sat between the brand and .pgbar__right is
   gone — markup and rules both, on Zsolt's instruction of 2026-08-13. Its five
   rules (.pgbar__nav and four .pgbar__nav .menu__* overrides) styled nothing
   else, so they came out with it. The .menu__item / .menu__i / .menu__label
   base rules above stay: the overlay panel is their real owner and always was.
   See chrome-pageheader.php for why it went. */

.pgbar__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); flex: none; }

.pgbar__langs {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--hud); font-weight: 400;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.pgbar__lang { color: rgba(244, 242, 237, .5); text-decoration: none; }
.pgbar__lang.is-active { color: var(--on-dark); }
.pgbar__lang:hover { color: var(--on-dark); }
.pgbar__sep { color: rgba(244, 242, 237, .3); }

.pgbar__menu {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-family: var(--hud); font-weight: 500;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark);
  white-space: nowrap;
}
.pgbar__menu i { width: 6px; height: 6px; background: var(--red-dark); display: block; flex: none; }