/* Единая шапка книжных поверхностей. Эталон: <header> лендинга fotokniga.html в обычном
   (не build) состоянии. Решение оператора 06.10: шапка при переходах между страницами не
   прыгает, поэтому размеры, шрифты и поля берутся отсюда, а не копируются в каждую страницу.
   Подключение: <link rel="stylesheet" href="/shared/fotokniga-header.css"> и <header class="fk-hdr">
   с разметкой лендинга. Состав правой зоны (.icons) каждая страница решает сама.
   Все правила под header.fk-hdr: так они перебивают одноклассовые правила style.css
   (.logo, nav, .user-menu...) на страницах, которые его подключают. Лендинг этот файл не грузит.
   Менять только вместе с шапкой в fotokniga.html. */

@font-face{font-family:'Golos';src:url('/lib/fonts/GolosText-var.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Jost';src:url('/lib/fonts/Jost-var.woff2') format('woff2');font-weight:100 900;font-display:swap}

header.fk-hdr{
  --fk-ink:#2e1c12;
  --fk-muted:#7d6f64;
  --fk-line:rgba(46,28,18,.13);
  --logo-accent:#b8652a;
  --fk-card:#fff;
  --fk-band:#f1ede5;
  --fk-r-sm:8px;
  --fk-r-lg:16px;
  --fk-hover:rgba(28,20,16,.07);
  --fk-press:rgba(28,20,16,.14);
  --fk-pick:rgba(28,20,16,.55);
  --fk-gutter:32px;
  --fk-content-max:1280px;
  --fk-hdr-h:66px;
  /* Счётчик корзины (.bc-badge из book-cart.js) красится этими ролями. Без них на страницах с
     tokens.css реставрации он терракотовый, без tokens.css висит без подложки (замер 06.10).
     Значения бренда фотокниг, tokens.css:186-188. */
  --fill-accent:#ffc95c;
  --on-fill-accent:#1c1410;
  position:sticky;top:0;z-index:50;height:var(--fk-hdr-h);
  /* Непрозрачный: под полупрозрачной шапкой просвечивал фон страницы, а он у части страниц
     реставрационный (#faf6ef). #fafaf7 = как выглядит шапка лендинга на его фоне. */
  background:#fafaf7;
  border-bottom:1px solid var(--fk-line);
  font-family:'Golos',sans-serif;font-size:16px;font-weight:400;line-height:1.6;
  color:var(--fk-ink);-webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
@media(max-width:820px){ header.fk-hdr{--fk-hdr-h:63px} }
@media(max-width:600px){ header.fk-hdr{--fk-gutter:16px} }

/* сброс как у лендинга (*{margin:0;padding:0;box-sizing:border-box}), но с нулевой
   специфичностью: правила ниже и страничные правила его перебивают */
:where(header.fk-hdr, header.fk-hdr *, header.fk-hdr *::before, header.fk-hdr *::after){
  box-sizing:border-box;margin:0;padding:0;
}
header.fk-hdr img{max-width:100%;display:block}

header.fk-hdr .head-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;width:100%;height:100%;margin:0 auto;
  max-width:calc(var(--fk-content-max) + 2*var(--fk-gutter));
  padding:0 var(--fk-gutter);
}
header.fk-hdr .head-in > .logo{justify-self:start}
header.fk-hdr .head-in > nav{justify-self:center}
/* grid-column:3 обязателен: на мобильном nav скрыт и выпадает из грида, без этого .icons
   встаёт во вторую колонку и иконки оказываются посреди шапки */
header.fk-hdr .head-in > .icons{justify-self:end;grid-column:3}

header.fk-hdr .logo{
  display:flex;align-items:center;
  font-family:'Jost',sans-serif;font-size:22px;font-weight:600;line-height:1.6;letter-spacing:.01em;
  color:var(--fk-ink);text-decoration:none;text-transform:lowercase;min-height:0;
}
header.fk-hdr .logo-icon{width:1.174em;height:1.174em;margin-right:0.304em;flex-shrink:0}
header.fk-hdr .logo-word{display:inline-flex;align-items:baseline;position:relative;top:-0.0992em}
header.fk-hdr .logo em{color:inherit;font-style:normal;font-weight:inherit;font-size:inherit;line-height:inherit}

header.fk-hdr nav{display:flex;align-items:stretch;gap:clamp(16px,2.2vw,34px);font-size:15px}
/* пункты в одну строку: что не влезает, уходит в «Ещё» (/shared/nav-overflow.js), а не переносится */
header.fk-hdr nav > a{white-space:nowrap}
header.fk-hdr nav a{color:var(--fk-muted);text-decoration:none;position:relative;padding:4px 0;font-size:15px;font-weight:400}
header.fk-hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--logo-accent);transform:scaleX(0);transition:transform .18s ease}
header.fk-hdr nav a:hover{color:var(--fk-ink)}
header.fk-hdr nav a:hover::after,
header.fk-hdr nav a:focus-visible::after{transform:scaleX(1)}
header.fk-hdr nav a.nav-current{color:var(--fk-ink)}
header.fk-hdr nav a.nav-current::after{transform:scaleX(1)}
/* «Сроки» — на лендинге кнопка с раскрывающейся панелью и стрелкой. Здесь ссылка в его раздел,
   но стрелка та же: без неё пункт уже на 17px, и центрированное меню съезжало на 8px. */
header.fk-hdr nav a.fk-dates-link{display:inline-flex;align-items:center;gap:6px}
header.fk-hdr nav a.fk-dates-link::after{display:none}
header.fk-hdr .dv-caret{display:block}
/* «Фотомастерская» видна только тому, у кого в localStorage есть сессия: признак ставит
   инлайн-скрипт в head страницы (тот же ключ, что на лендинге) */
header.fk-hdr .fk-restore-link{display:none}
html.auth-likely-logged-in header.fk-hdr .fk-restore-link{display:inline-flex}

header.fk-hdr .icons{display:flex;gap:4px;align-items:center}
header.fk-hdr #loginBtn{justify-content:center;align-items:center}
header.fk-hdr .user-box{position:relative;align-items:center;display:none}
html.auth-likely-logged-in header.fk-hdr #loginBtn{display:none}
html.auth-likely-logged-in header.fk-hdr #userInfo{display:flex}
header.fk-hdr .user-chip{width:38px;height:38px;border-radius:50%;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
header.fk-hdr .user-chip:hover{background:var(--fk-hover)}
header.fk-hdr .user-chip:active{background:var(--fk-press)}
header.fk-hdr .user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:transparent;color:var(--fk-ink);font-size:13px;font-weight:600;line-height:1}
header.fk-hdr .user-avatar svg{stroke:currentColor}
header.fk-hdr .user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
header.fk-hdr .user-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:70;
  background:var(--fk-card);border:1px solid var(--fk-line);border-radius:var(--fk-r-lg);padding:8px;
  box-shadow:0 18px 40px rgba(46,28,18,.16);
}
header.fk-hdr .user-menu[hidden]{display:none}
header.fk-hdr .user-menu-email{padding:8px 10px 10px;font-size:13px;color:var(--fk-muted);word-break:break-all;border-bottom:1px solid var(--fk-line);margin-bottom:6px}
header.fk-hdr .user-menu-link{
  display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:var(--fk-r-sm);
  background:transparent;color:var(--fk-ink);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;
}
header.fk-hdr .user-menu-link:hover{background:var(--fk-band)}
header.fk-hdr .icon-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--fk-ink);position:relative;background:transparent;border:0;text-decoration:none;
}
header.fk-hdr .icon-btn:hover{background:var(--fk-hover)}
header.fk-hdr .icon-btn:active{background:var(--fk-press);transform:scale(.93)}
header.fk-hdr .icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
header.fk-hdr .icon-btn:focus-visible,
header.fk-hdr .user-chip:focus-visible{outline:2px solid var(--fk-pick);outline-offset:2px}

@media(max-width:820px){
  header.fk-hdr nav{display:none}
  /* книги и корзина живут в drawer (#navDrawer), в ряду остаются знак, кабинет и бургер */
  header.fk-hdr .icons > a.icon-btn,
  header.fk-hdr .icons > [data-cart-button]{display:none}
  header.fk-hdr .icon-btn,
  header.fk-hdr .user-chip{width:44px;height:44px}
  header.fk-hdr .icon-btn svg{width:22px;height:22px}
}

/* Бургер и drawer (/nav-mobile.css). Токены drawer лежат вне шапки, а внутренние страницы
   держат каждая свою палитру: значения фотокниг заданы здесь, чтобы меню выглядело одинаково */
header.fk-hdr .navm-burger{border-radius:999px;border-color:var(--fk-ink)}
.navm-drawer{--fk-bg:#fafaf7;--fk-ink:#2e1c12;--fk-line:rgba(46,28,18,.13);--hdr:63px;font-family:'Golos',sans-serif}
/* Страничный сброс *{padding:0} перебивает :where()-отступ пунктов в nav-mobile.css: без этой
   строки строки drawer по 26px вместо 52px (замер 06.10), тач-цель ниже 44px */
.navm-drawer .navm-drawer-link{padding:15px 0}