/* chrome.small.css — page furniture below 1024px
 *
 * The banner and the two menus, on small screens. Pairs with chrome.css; the
 * markup is template-parts/chrome-*.php.
 *
 * Two bands, because the chrome changes at both: the tablet band only has to
 * lose the banner's centre sentence, while below 768px the menu becomes a
 * full-screen overlay and the banner becomes two lines (MOBILE_SPEC §§7-8).
 */

/* --- tablet, 768 to 1024px ----------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
  /* The centre sentence has nowhere to go at this width. */
  .banner { gap: 14px; }
  .banner__mid { display: none; }

  .menu { width: min(60vw, 380px); }
}


/* --- mobile, below 768px -------------------------------------------------- */

@media (max-width: 767.98px) {

  /* =======================================================================
     Menu — full-screen overlay, MOBILE_SPEC §7
     ======================================================================= */

  .menu {
    width: 100vw;
    height: 100dvh;
    /* max() rather than a flat 30px: on a phone with a home indicator the last
       row otherwise sits under it. */
    padding: 26px 24px max(30px, env(safe-area-inset-bottom));
  }
  /* Nothing behind it to shade once it covers the viewport. */
  .menu.is-open { box-shadow: none; }

  /* THE ROWS SCALE WITH THE SHORT AXIS SO THE PANEL FITS WITHOUT SCROLLING.
     Flat 16px padding on a 30px label costs ~63px a row, which put eight rows
     plus the head, the language pair and the contact block at 721px — over a
     640px phone, so the phone number fell off the bottom and could only be
     reached by scrolling inside a fixed overlay. Almost nobody finds that.

     Keyed to vh, the rows give way on a short screen instead: about 43px each
     at 640px against the full 63px at 844px and taller.

     THERE IS HEADROOM FOR A NINTH ITEM, which is the point — the menu is built
     from the WordPress menu and Zsolt expects to add one. Nine rows fit both
     844px and 640px with room to spare. overflow-y: auto stays on .menu in
     chrome.css as the backstop for a landscape phone, where nothing would fit. */
  .menu__item  { padding: clamp(9px, 1.6vh, 16px) 0; }
  .menu__label { font-size: clamp(22px, 3.6vh, 30px); }
  .menu__close { padding: 8px 0 8px 12px; font-size: 13px; }
  .menu__lang  { padding: 9px 13px; }
  .menu__foot  { line-height: 1.7; }


  /* =======================================================================
     Page header — set to the hero's bar, not its own scale
     -----------------------------------------------------------------------
     .pgbar carries the same wordmark and the same two controls as the hero's
     top bar, one screen away, so a visitor moving from the front page to Prices
     sees the same furniture change size. It was 12px / 10.5px against the
     hero's 9.96px.

     Both now read --fs-bar-* from tokens.css, which is where the pairing is
     documented. Tracking comes with them: .2em on the wordmark and .14em on the
     controls are the hero's values, and they are em-based so they follow the
     size rather than needing their own token.
     ======================================================================= */

  .pgbar__brand {
    font-size: var(--fs-bar-brand);
    letter-spacing: .2em;
  }
  .pgbar__lang,
  .pgbar__menu {
    font-size: var(--fs-bar-hud);
    letter-spacing: .14em;
  }


  /* =======================================================================
     Banner — two lines, MOBILE_SPEC §8
     ======================================================================= */

  /* 66px, up from 53. The strip carries the full sentence at every width as of
     2026-08-18 — it used to drop to a shorter one below 768px — and the taller
     copy block measures 66px at 360-767. THE NUMBER IS PUBLISHED: about.small
     and achievements.small pad their last section by calc(48px + --banner-h),
     so a bar taller than the figure puts content under it.

     main.js writes the measured height over this on load and on resize, because
     one number cannot be right at every width — a 320px frame wraps to 92px.
     This value is what a scriptless page gets, and it is correct for the frames
     the handoff designs for. */
  :root { --banner-h: 66px; }

  .banner {
    height: auto;
    min-height: var(--banner-h);
    align-items: center;
    /* 10px, not 16: with the dismiss control back on the row the copy block is
       within a few px of wrapping to a third line at 360, and a third line
       takes the bar to 72px against a --banner-h of 53. The gap is the cheapest
       place to find that room. */
    gap: 10px;
    /* 9/10, down from 11/12. The four pixels are not saved, they are MOVED:
       the copy block below gains them as line spacing, and the bar still
       measures --banner-h. Outer padding is the cheapest place to find leading
       when the bar's height is a published number other sections inset
       against. */
    padding: 9px 20px 10px;
  }
  .banner__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    white-space: normal;
  }
  /* line-height 1.2, up from a flat 1. At 8.5px uppercase mono the availability
     line wraps to two lines on a 320px frame, and solid leading set those two
     lines almost touching — the ascenders of the second row ran into the
     descenders of the first. 1.2 is the ~20% Zsolt asked for and the smallest
     step that separates them cleanly. */
  .banner__avail {
    gap: 7px;
    font-size: 8.5px;
    line-height: 1.2;
    letter-spacing: .16em;
    color: #fff;
  }
  .banner__dot { width: 6px; height: 6px; }
  .banner__short {
    display: block;
    font-family: var(--body);
    font-weight: 400;
    font-size: 10px;
    /* Raised with the line above it so the block reads as one paragraph rather
       than two settings — the sentence wraps at the same widths the
       availability line does. */
    line-height: 1.55;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .7);
  }
  /* The centre sentence is gone at this width. THE DISMISS CONTROL IS NOT — it
     used to be, and that left a fixed bar across the foot of every page with no
     way to close it. On desktop you can dismiss it; on a phone it was permanent.
     Restored 2026-08-14 on Zsolt's report. The button and its handler were
     always there — main.js binds [data-banner-close] regardless of width — so
     this rule was the whole of the bug.

     44 x 44 for the touch target, WITH NEGATIVE BLOCK MARGINS so the taller
     button does not grow the bar. The row's height is set by the CTA at 30px
     and --banner-h above is declared 53px on that basis; a 44px child would
     push the bar to 67px and every 100vh panel in 08/09 would inset against a
     figure that no longer matched. -9px each side takes the button's margin box
     back to 26px, under the CTA's 30px, so the bar holds at 53px while the
     target still measures a full 44px — it overhangs into the bar's own
     padding, which is exactly where the spare room is. */
  .banner__mid { display: none; }

  .banner__close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-block: -9px;
    /* AND -12px INTO THE GUTTER, horizontally. A 44px box is far wider than the
       glyph inside it, and on a 360px phone those 12px are the difference
       between the copy holding two lines and wrapping to three — which grew the
       bar to 72px against a --banner-h of 53. The target keeps its full 44px
       and simply overhangs the bar's own right padding; the glyph still lands
       30px in from the screen edge. */
    margin-right: -12px;
    padding: 0;
    font-size: 15px;
  }

  /* Desktop's 18px between the CTA and the close is more than this row can
     spare once both are on it. */
  .banner__right { gap: 10px; }
  .banner__cta {
    font-size: 10px;
    letter-spacing: .12em;
    padding: 10px 2px;   /* 44px hit area around a 10px glyph */
  }
}