/* PrintReal — shared site header.
   One definition of the persistent header used across all four pages
   (index / app / tiling / upscale). The markup is duplicated in each HTML file
   (no build step / includes in this project), but the styling and the tool nav
   live here so they can never drift apart again.

   Layout: the LEFT side — brand + subtitle + the three tool tabs — is identical
   on every page (that's what makes the header feel consistent). The RIGHT side
   differs by page: only the landing fills it (section links via .pr-sections);
   on the module pages it stays empty, reserved for future account/login UI.

   Self-contained on purpose: uses literal palette values rather than CSS vars,
   since it's linked alongside two different stylesheets (app.css / landing.css)
   that name their variables differently. Palette matches css/app.css:
   #2563EB primary · #64748B muted · #E2E8F0 border · #0F172A text.

   NOTE: the header height here is mirrored by --header-h in landing.css, which
   feeds the scroll-margin of the section anchors. Keep the two in sync. */

.pr-header {
  flex-shrink: 0;               /* module pages put this in a 100vh flex column */
  position: sticky;             /* keeps it pinned while the landing scrolls;
                                   inert but harmless on the fixed module pages */
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

/* Brand — doubles as the link back to the landing page. */
.pr-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}

.pr-brand:hover .pr-brand-name { color: #2563eb; }

.pr-brand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.pr-brand-icon {
  display: flex;
  color: #2563eb;
}

.pr-brand-icon svg { width: 22px; height: 22px; }

.pr-brand-name {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.021em;
  color: #0f172a;
  transition: color 0.15s;
}

/* Per-page context label (module name / tagline).
   FIXED width so the tool tabs that follow it sit at the exact same X on every
   page — otherwise a longer subtitle would shove them right and they'd visibly
   jump when navigating between modules. Anything longer is ellipsised.

   220px is the LANDING's budget and it is not arbitrary: with the section links
   present, the row has no slack left. Measured across the 24 dictionaries at
   1361px (the narrowest width where this element is still shown), the Russian
   landing leaves ~216px for it — so this number cannot go up. It does not need
   to: 205px of text clears every one of the 24 landing subtitles, the widest
   being Greek at ~199px. The module pages get their own width below. */
/* On the three module pages this element is an <h1> (the landing keeps a <span>,
   its <h1> being the hero): it is the one piece of text on those pages that names
   what the page is, in the page's language, and it was the only candidate that
   did not require inventing a heading the design has no room for. The three
   resets below are what an <h1> brings and this slot does not want — the visual
   result is byte-identical to the <span> it replaced. */
.pr-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;

  width: 220px;
  box-sizing: border-box;
  flex-shrink: 0;
  color: #94a3b8;
  padding-inline-start: 14px;
  border-inline-start: 1px solid #e2e8f0;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Module pages carry no .pr-sections, which hands this row 240px (EN) to 390px
   (RU) it does not otherwise have — the same block stage 2 reclaims at 1120px.
   That is where every ellipsised subtitle actually was: all ten of them, eight
   on Real size and two on Upscale, none on a landing. The module names are
   simply longer than the landing taglines ("Печать изображений в реальном
   размере" needs 252px), and these pages can afford them — the worst case still
   leaves ~599px free at 1361px, so 300px is spent out of six times that.
   Still one fixed value shared by all three modules, so the invariant this
   element exists for — tabs at the same X when moving BETWEEN modules — holds
   exactly as before. */
.pr-header:not(:has(.pr-sections)) .pr-subtitle {
  width: 300px;
}

/* Tool nav — the same three links, in the same order, on every page.
   Sits at the INLINE START, right after the subtitle (no auto margin). */
.pr-nav {
  display: flex;
  gap: 4px;
  margin-inline-start: 6px;
}

.pr-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pr-tab-icon { display: flex; }
.pr-tab-icon svg { width: 16px; height: 16px; }

.pr-tab:hover { background: #f1f5f9; color: #0f172a; }

.pr-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.pr-tab.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

/* Section links — LANDING ONLY. Pushed to the inline END; the module pages
   simply omit this block, leaving that side free for future account UI.
   margin-inline-START:auto is what pushes a flex item to the END — the auto
   margin absorbs the free space ahead of it. It reads backwards and is the
   easiest logical-property mistake to make. */
.pr-sections {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.pr-section-link {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.pr-section-link:hover { background: #f1f5f9; color: #0f172a; }

.pr-section-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* ── Language switcher ──────────────────────────────────────────────────────
   Rightmost item in the header. On the module pages (no .pr-sections) it takes
   the free space itself; on the landing it sits just after the section links.
   Menu visibility is driven purely by the button's aria-expanded, which
   js/i18n-switcher.js toggles (same pattern as app.css's custom selects). */
.pr-lang {
  position: relative;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.pr-sections + .pr-lang { margin-inline-start: 8px; }

.pr-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pr-lang-btn svg { width: 16px; height: 16px; }
.pr-lang-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
.pr-lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.pr-lang-code { letter-spacing: 0.02em; }

/* The list scrolls at ~5 options rather than growing to the locale count: at 24
   languages it already reached the bottom edge of the viewport on common
   heights, and every locale added makes that worse.

   The metrics below are the SINGLE source for both the option's own box and the
   menu's max-height, which is why they're custom properties instead of literals:
   the height of five rows has to keep matching the rows if the padding or
   font-size is ever retuned, and two hand-kept numbers would drift. line-height
   is pinned for the same reason — left to the browser's `normal` the row height
   is unknown here, so the calc below couldn't be trusted. Options are
   white-space:nowrap and their <li> have no margin, so a row is always exactly
   one line and the rows stack with no gap: item-h * rows is the real height.

   --pr-lang-rows is 5.5, not 5, on purpose: the half-cut sixth row is the "there
   is more below" cue. The scrollbar alone can't be it — it's an invisible
   overlay on mobile until the list is already being dragged. */
.pr-lang-menu {
  --pr-lang-opt-pad-y: 8px;
  --pr-lang-opt-font: 13px;
  --pr-lang-opt-lh: 1.35;
  --pr-lang-rows: 5.5;
  --pr-lang-item-h: calc(var(--pr-lang-opt-font) * var(--pr-lang-opt-lh) + var(--pr-lang-opt-pad-y) * 2);
  --pr-lang-menu-h: calc(var(--pr-lang-item-h) * var(--pr-lang-rows) + 5px);

  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 150px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  z-index: 60;

  max-height: var(--pr-lang-menu-h);
  /* Second pass, for browsers with min()/dvh: the menu can never run past the
     bottom of the window. No flip-up counterpart on purpose — unlike the
     .cs-options / popover dropdowns in the page body (js/app.js
     positionCsOptions), this trigger lives in a position:sticky header pinned to
     top:0, so there is never more room above it than below and opening upward
     would always be the wrong choice. Only the clamp can ever bind, and only on
     viewports under ~260px tall (a small phone in landscape). dvh so the
     collapsing mobile URL bar is accounted for. */
  max-height: min(var(--pr-lang-menu-h), calc(100dvh - 88px));
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't hand the scroll to the page at the ends */

  scrollbar-width: thin;
  scrollbar-color: #d7dee7 transparent;
}
.pr-lang-btn[aria-expanded="true"] + .pr-lang-menu { display: block; }

/* Same treatment as the module panels' scrollbars (css/app.css): a 10px track
   with the thumb inset 3px via a transparent border, so it reads as a thin pill
   rather than a full-width bar. */
.pr-lang-menu::-webkit-scrollbar { width: 10px; }
.pr-lang-menu::-webkit-scrollbar-thumb {
  background: #d7dee7;
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.pr-lang-menu::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: #b9c3cf; }

.pr-lang-menu li { margin: 0; }

.pr-lang-opt {
  display: block;
  padding: var(--pr-lang-opt-pad-y) 10px;
  border-radius: 6px;
  font-size: var(--pr-lang-opt-font);
  line-height: var(--pr-lang-opt-lh);
  font-weight: 500;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
}
.pr-lang-opt:hover { background: #f1f5f9; }
.pr-lang-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.pr-lang-opt.is-current {
  color: #2563eb;
  font-weight: 600;
  background: #eff6ff;
}

/* ── Tools hamburger (mobile only) ───────────────────────────────────────────
   Sits at the far LEFT, before the brand — deliberately opposite the language
   switcher on the right, so "site navigation" and "language preference" live at
   the two ends of the bar. display:none on desktop; the mobile media query below
   reveals it and turns .pr-nav into the dropdown it toggles. Visibility of that
   dropdown is driven purely by this button's aria-expanded (js/i18n-switcher.js),
   the same aria-expanded pattern the language switcher already uses. */
.pr-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-start: -6px;    /* pull toward the leading edge, tighten gap to brand */
  padding: 0;
  border: none;
  border-radius: 7px;
  background: none;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.pr-menu-btn svg { width: 22px; height: 22px; }
.pr-menu-btn:hover { background: #f1f5f9; color: #0f172a; }
.pr-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.pr-menu-btn[aria-expanded="true"] { background: #eff6ff; color: #2563eb; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Staged degradation, in order of how little each piece is missed. The bar is
   sized by its content, so the width it needs depends on the language: the
   landing needs ~1050px in English, ~1190px in Spanish and ~1325px in Russian
   (the longest tool + section labels); the module pages, without .pr-sections,
   need ~795px / ~885px / ~940px. Everything used to collapse in one step at
   720px, so every one of those bars was broken across the whole band down to
   there — the language switcher, last in the row, was the part pushed off-screen.
   Each stage below is sized for the WORST language rather than the average: a
   fixed px breakpoint can't adapt per locale, and losing a decorative subtitle
   early is cheaper than a clipped switcher in Russian.

   The language switcher never drops. It's the one control with no other route
   (the tool tabs move into the hamburger, the section links also live in the
   page body and footer) — and it stays flex-shrink:0 at the right edge
   throughout. That changes once it moves to the landing footer; until then this
   is what keeps it reachable. */

/* Stage 1 — the per-page subtitle. Visually the single biggest win in the row at
   a fixed 220px (+14px gap). Was hidden at 640px, which was far too late to help.

   Hidden by clipping rather than by `display: none`, which is what this rule used
   to be. It takes up exactly as little space as before — position:absolute leaves
   the flex row identically — but the element is still rendered, and that matters
   twice over: on the module pages it is the page's <h1>, and Google indexes
   mobile-first, so `display: none` here meant the crawler's ~412px viewport found
   no <h1> at all on /real-size, /poster and /upscale. A screen reader now also
   gets a page heading it previously lost below 1360px. */
@media (max-width: 1360px) {
  /* Both selectors on purpose. The module-page rule above
     (.pr-header:not(:has(.pr-sections)) .pr-subtitle) sets width: 300px at a
     higher specificity than a bare .pr-subtitle, and a media query adds none —
     so the plain selector alone would lose the width declaration and leave a
     300px-wide absolutely-positioned box in the layout. Matching that
     specificity and coming later in the file wins cleanly. */
  .pr-subtitle,
  .pr-header:not(:has(.pr-sections)) .pr-subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Stage 2 — the landing's section links. Secondary: the same anchors are in the
   page body and the footer. Frees 238px (EN) to 372px (RU). */
@media (max-width: 1120px) {
  .pr-sections { display: none; }

  /* An adjacent-sibling selector still matches a display:none element, so
     .pr-sections + .pr-lang would keep handing the switcher the 8px margin and
     pull it off the trailing edge. Restore the auto margin that pins it there. */
  .pr-sections + .pr-lang { margin-inline-start: auto; }
}

/* Stage 3 — the tool tabs fold into the hamburger. 768px rather than the old
   720px: it's the site-wide stack breakpoint app.css / tiling.css / upscale.css
   already use, and stages 1–2 leave the widest language needing ~719px here, so
   720 had no margin left. */
@media (max-width: 768px) {
  /* Reveal the hamburger; the inline tool tabs become its dropdown. */
  .pr-menu-btn { display: inline-flex; }

  /* .pr-nav lifts out of the flex row into an absolute panel anchored under the
     hamburger (the sticky .pr-header is its containing block), hidden until the
     button's aria-expanded flips to true. */
  .pr-nav {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 16px;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 210px;
    margin-inline-start: 0;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 60;
  }
  .pr-header:has(.pr-menu-btn[aria-expanded="true"]) .pr-nav { display: flex; }

  /* Full-width rows showing icon + FULL label — the whole reason for the switch
     away from the old icon-only collapse (a bare icon was ambiguous). */
  .pr-nav .pr-tab {
    width: 100%;
    gap: 10px;
    padding: 10px 12px;
  }
  /* Darker than the desktop muted grey for menu legibility, but not on the
     active item — it keeps .pr-tab.active's blue. */
  .pr-nav .pr-tab:not(.active) { color: #0f172a; }
}