/* ==========================================================================
   Fluviaweb header — порт шапки publica.fluviaweb.com, виміряний по живому
   сайту через DevTools Protocol 30.08.2026. Кожне число нижче зняте з
   computed styles, а не підібране.

   Вимагає tokens.css зі скіла flowiteam-saas (шрифти, кольори, радіуси).
   Підключати ПІСЛЯ components.css, ДО шару продукту.

   Правила, які тримають цю шапку (пояснення — у SKILL.md скіла):
   1. Поверхня непрозора. Ніякого blur і напівпрозорості.
   2. Шапка НЕ тягнеться під вертикальний рейл — починається після нього.
   3. Свій контейнер 1720px/32px, незалежний від колонки сторінки.
   4. Бренд — лише назва продукту, на всіх ширинах.
   5. Меню від 1280px, центроване абсолютно. Нижче — дровер у шапці.
   6. Усі контроли праворуч — 48px, «привиди» на текстовій тіні.
   ========================================================================== */

/* ---- Бренд-шрифт: Geologica 700 ------------------------------------------
   Виміряно на Publica: рейл, назва продукту в шапці і вордмарк у підвалі
   набрані Geologica 700, а не display-шрифтом продукту. Це бренд-накреслення,
   спільне для всіх продуктів, тому шрифт живе в цьому скілі (селфхост,
   файли — assets/fonts/, копіювати в public/fonts/). Продуктові шрифти
   (--font-display/-body/-mono) лишаються продукту. */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geologica-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geologica-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geologica-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geologica-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-logo: 'Geologica', var(--font-display);
}

.fit-header {
  /* Фон «привида» — тінь від м'якого тексту, тому працює в обох темах. */
  --fit-ghost-bg: color-mix(in srgb, var(--text-soft) 10%, transparent);
  --fit-ghost-bg-hover: color-mix(in srgb, var(--text-soft) 20%, transparent);

  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--surface-card);            /* непрозоро: light #fff, dark графіт */
  box-shadow: 0 1px 0 var(--border-soft);     /* волосяна лінія замість border */
}

/* Контейнер шапки — ширший за колонку сторінки, і це свідомо: Publica веде
   шапку на 1720px при контентних колонках у 62–70ch. Відступи 20px до 768px,
   далі 32px. */
.fit-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .fit-header__inner { padding-inline: 32px; }
}

/* ---- Бренд: назва продукту, і тільки вона --------------------------------
   19px, заголовковий шрифт, 700, у читабельному акценті --accent-display.
   Вордмарк Fluviaweb у цій шапці не з'являється ні на якій ширині: бренд
   компанії несуть рейл (≥1024px) і підвал. */
.fit-header__brand {
  flex: none;
  font-family: var(--font-logo);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;  /* tracking-tight, як на Publica; -.475px на 19px */
  text-transform: uppercase;
  color: var(--accent-display);
  text-decoration: none;
}

/* ---- Меню: тільки від 1280px, центроване на смузі -------------------------
   Абсолютне центрування, не залишком місця: інакше меню зсувається від
   будь-якої зміни ширини бренду чи кнопок. Нижче 1280px пункти живуть у
   дровері — 6 пунктів у смузі планшета не вміщаються. */
.fit-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 4px;
}

@media (min-width: 1280px) {
  .fit-nav { display: flex; }
}

.fit-nav__link {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.fit-nav__link:hover {
  background: var(--fit-ghost-bg);
  color: var(--text-strong);
}

.fit-nav__link[aria-current="page"] {
  color: var(--accent-display);
}

/* ---- Права група: одна смуга контролів 48px ------------------------------
   Тема · мова · кабінет/вхід · бургер, gap 10px. Одна висота на всіх — контрол
   на 8px нижчий за сусідів читається не як менший, а як зламаний. */
.fit-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Форма (вихід) у смузі контролів коробки не має — кнопка стоїть у флексі
   сама. */
.fit-header__actions form { display: contents; }

/* «Привид» — базова кнопка шапки: тонований фон, без рамки, пігулка. */
.fit-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fit-ghost-bg);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.fit-ghost:hover {
  background: var(--fit-ghost-bg-hover);
  color: var(--text-strong);
}

.fit-ghost:active { transform: translateY(1px); }

.fit-ghost:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.fit-ghost--icon {
  width: 48px;
  padding-inline: 0;
  gap: 0;
}

/* Іконковий контрол, що позначає «ти тут» (кабінет). */
.fit-ghost.is-active { color: var(--accent-display); }

/* Головна дія (вхід): на найвужчих екранах лишається іконкою, але з шапки не
   зникає. */
@media (max-width: 639px) {
  .fit-header__cta { width: 48px; padding-inline: 0; gap: 0; }
  .fit-header__cta span { display: none; }
}

/* ---- Перемикач теми: сегментний ------------------------------------------
   Доріжка 48px з padding 6px, дві круглі кнопки 36px. Натиснута кнопка
   ЗАЛИТА АКЦЕНТОМ, іконка — у чорнилі акценту; це виміряно, не смак.
   Стан малює CSS із data-theme на <html>, тому він правильний до першого
   кадру; aria-pressed доганяє скрипт теми. */
.fit-theme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--fit-ghost-bg);
}

.fit-theme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.fit-theme__btn:hover { color: var(--text-strong); }

.fit-theme__btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

:root[data-theme="light"] .fit-theme__btn[data-theme-choice="light"],
:root[data-theme="dark"] .fit-theme__btn[data-theme-choice="dark"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- Перемикач мов ---------------------------------------------------------
   Кнопка: прапорець 20×15 (r3, внутрішнє кільце) + код mono 12/600 caps +
   стрілка 14. Ховається зі смуги нижче 640px і з'являється в дровері. */
.fit-lang { position: relative; }

.fit-lang__code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fit-lang__flag {
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

/* Випадний список: непрозора поверхня, радіус 20, padding 6, тінь системи.
   Пункти 44px, радіус 12: прапорець + рідна назва мови + галочка в активного.
   Назви мов — їхніми мовами: людина шукає слово, яким називає мову сама. */
.fit-lang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 196px;
  padding: 6px;
  border-radius: 20px;
  background: var(--surface-card);
  box-shadow: var(--shadow-2);
  animation: fit-rise var(--dur-1) var(--ease-out);
}

@keyframes fit-rise {
  from { opacity: 0; transform: translateY(4px); }
}

/* Меню відкривається з наведення (як на Publica). Між кнопкою і списком 8px
   повітря — місток накриває їх, інакше покажчик у зазорі «виходить» з
   компонента й меню закривається на півдорозі. */
.fit-lang__menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.fit-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}

.fit-lang__option:hover {
  background: color-mix(in srgb, var(--text-soft) 12%, transparent);
}

.fit-lang__option > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.fit-lang__option--current {
  font-weight: 600;
  color: var(--accent-display);
}

.fit-lang__check {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--accent-display);
}

/* ---- Бургер: там, де немає меню, — нижче 1280px --------------------------- */
.fit-burger { display: none; }

@media (max-width: 1279px) {
  .fit-burger { display: inline-flex; }
}

/* ---- Дровер: у шапці, під смугою ------------------------------------------
   Той самий контейнер, що в смуги. Поверхня непрозора, зверху волосяна лінія.
   Пункти 14px, радіус 12. Нижче 640px наприкінці рядок мови: підпис + той
   самий перемикач, що стояв у смузі. Обмеження висоти — щоб sticky-шапка не
   виростала вища за екран і не втрачала верх. */
.fit-drawer {
  display: none;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-card);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fit-header.is-open .fit-drawer { display: block; }

@media (min-width: 1280px) {
  .fit-header.is-open .fit-drawer { display: none; }
}

.fit-drawer__inner {
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .fit-drawer__inner { padding-inline: 32px; }
}

.fit-drawer__nav {
  display: flex;
  flex-direction: column;
  padding-block: 8px;
}

.fit-drawer__link {
  padding: 12px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-main);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}

.fit-drawer__link:hover { background: var(--fit-ghost-bg); }

/* Вихід у дровері — кнопка форми, вдягнена тим самим класом. */
.fit-drawer__nav form { display: contents; }

button.fit-drawer__link {
  border: 0;
  background: none;
  width: 100%;
  text-align: start;
  cursor: pointer;
  font-family: var(--font-body);
}

.fit-drawer__lang {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
}

.fit-drawer__lang-label {
  font-size: 13px;
  color: var(--text-soft);
}

@media (max-width: 639px) {
  .fit-drawer__lang { display: flex; }
  .fit-header__actions .fit-lang { display: none; }
}

/* ---- Рейл: накреслення ------------------------------------------------------
   Каркас вертикального рейла живе у скілі flowiteam-saas (components.css).
   Накреслення слова — тут, бо воно бренд-спільне: Geologica 700 з -.018em.
   Виміряно на Publica: слово 963px у вікні 1000px; Manrope 900 без розрядки
   давав 929px і інший силует літер. */
.fit-rail-word {
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -.018em;
}