/* ==========================================================================
   alestrcek.com — the top bar (language flags + quick nav) and the
   language-suggestion banner.

   WHY ITS OWN FILE (deviation from the work order, flagged in the handover):
   the order said "put it in study-v5.css". That would have reached the home
   pages, the four legal pages and the three contact pages — but NOT the three
   /hvala/ pages, which run on assets/style.css and nothing else. A bar that is
   missing on three of the eleven pages is not a bar. So the rules live here,
   in one small file that every non-quiz page loads, and neither study-v5.css
   nor style.css has to learn about the other.

   🔴 /kje-si-zdaj/ DOES NOT LOAD THIS FILE. The quiz page carries no selling
   element and no navigation away from the check — founder rule, asserted in
   tests/pages.mjs.

   Tokens come from whichever stylesheet is already on the page (study-v5.css
   and style.css define the same :root names). Every var() below still carries
   a literal fallback so the bar cannot render unstyled if load order changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The bar

   Two positioning modes, one set of styles:

   · .topbar          — IN FLOW. The legal, contact and thank-you pages have no
                        hero; the bar sits on the dark page ground above the
                        content, and the page's own top padding gives it air.
   · .topbar--over    — ABSOLUTE, over the hero portrait on the three home
                        pages. NOT sticky and NOT fixed: it scrolls away, and
                        the sticky pill carries the persistent call. Absolute
                        (not flow) is what keeps the locked hero geometry —
                        H1 in the lower third, face clear — untouched to the
                        pixel.
   -------------------------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 3;                       /* over .hero__frame (mast is z-index 2) */
  width: 100%;
  font-family: var(--font, "EB Garamond", Garamond, Georgia, serif);
  font-size: 0.9rem;
  line-height: 1.2;
}

.topbar--over {
  position: absolute;
  /* The suggestion banner, when it is up, sits at the very top and the bar
     moves down by exactly its height — they stack, they never overlap.
     --suggest-h is set on <body> by assets/lang.js and is 0 the rest of the
     time. */
  top: var(--suggest-h, 0px);
  left: 0;
  right: 0;
  /* The scrim. The top of the hero photo is dark bookshelves, but "dark" is
     not a contrast measurement — this gradient is what makes the number true
     regardless of which pixel a link lands on. It fades to nothing before the
     portrait proper, so the photograph is untouched below the bar. */
  background: linear-gradient(
    to bottom,
    rgba(13, 10, 8, 0.95) 0%,
    rgba(13, 10, 8, 0.86) 60%,
    rgba(13, 10, 8, 0.55) 82%,
    rgba(13, 10, 8, 0) 100%
  );
  padding-bottom: 1.4rem;           /* the fade-out tail, below the links */
}

.topbar__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding-inline: var(--gutter, 1.15rem);
  padding-block: 0.35rem;
}

/* ------------------------------------------------------------- the flags -- */
.topbar__flags {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

/* Emoji flags, rendered by the system font — no images, no sprite, no request.
   The size is set so the glyph is legible at arm's length, and the box is
   padded out to a 34px tap target in both directions. */
.topbar__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 0.15rem;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.topbar__flag:hover,
.topbar__flag:focus-visible { opacity: 1; }

/* The page you are on. Full strength, and said out loud to a screen reader by
   aria-current on the element itself. */
.topbar__flag[aria-current] { opacity: 1; }

/* ---------------------------------------------------------- the quick nav -- */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem 0.9rem;
  flex: 0 1 auto;
  min-width: 0;
}

/* Interface voice: muted, small caps-spacing, lifting to parchment on hover.
   🔴 Never leather. The red is the CTA buttons' and the price's alone, and the
   leather-budget assertion in tests/pages.mjs walks every element on the page
   to prove it. */
.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: 0.1rem;
  color: var(--muted, #B0A088);
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.topbar__link:hover,
.topbar__link:focus-visible { color: var(--parchment, #EAE0CE); }

/* The book-the-call link is the heaviest thing in the bar — but it is a LINK,
   not a button and not leather. The pill and the in-page buttons carry the
   call; this is the man who already knows what he wants finding it in one
   move. */
.topbar__book {
  color: var(--parchment, #EAE0CE);
  font-weight: 500;
}

.topbar__book:hover,
.topbar__book:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   2. Phone (<45rem)

   The long book-the-call label is dropped: the sticky pill carries the call on
   every viewport, so nothing is lost, and at 320px the bar stays on one line
   instead of wrapping into a mess.
   -------------------------------------------------------------------------- */
@media (max-width: 45rem) {
  .topbar__book { display: none; }

  .topbar { font-size: 0.86rem; }

  .topbar__band {
    gap: 0.5rem;
    padding-block: 0.25rem;
  }

  .topbar__nav { gap: 0.75rem; }

  .topbar--over { padding-bottom: 1rem; }
}

/* --------------------------------------------------------------------------
   3. The language-suggestion banner (home pages only)

   Absolute, at the very top, above the bar — which moves down by exactly this
   element's height (--suggest-h). Stacked, never overlapping. Absolute rather
   than in-flow for the same reason the bar is: the hero's locked geometry must
   not move because a visitor's browser happens to be set to another language.
   The consent banner is fixed to the BOTTOM of the viewport, so the two can be
   on screen together without ever meeting.
   -------------------------------------------------------------------------- */
.langsuggest {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: var(--study-1, #131009);
  border-bottom: 1px solid var(--hairline, #3A2C21);
  color: var(--parchment, #EAE0CE);
  font-family: var(--font, "EB Garamond", Garamond, Georgia, serif);
  font-size: 0.88rem;
  line-height: 1.4;
}

.langsuggest__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem var(--gutter, 1.15rem);
}

.langsuggest__text {
  margin: 0;
  min-width: 0;
}

.langsuggest__link {
  color: var(--parchment, #EAE0CE);
  font-weight: 500;
}

/* The dismiss control. Same 34px target as everything else in the bar, and it
   wears no colour of its own — refusing a suggestion must cost nothing. */
.langsuggest__x {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  margin-inline-start: auto;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted, #B0A088);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.langsuggest__x:hover,
.langsuggest__x:focus-visible { color: var(--parchment, #EAE0CE); }

@media (max-width: 45rem) {
  .langsuggest { font-size: 0.82rem; }
  .langsuggest__band { justify-content: flex-start; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__flag,
  .topbar__link,
  .langsuggest__x { transition: none; }
}