/* ═══════════════════════════════════════════════════════════
   Layout: header, header search, footer
   ═══════════════════════════════════════════════════════════ */

/* ── Header: white glass, 64px, with rounded bottom corners — a panel laid over the page,
   not a strip across it; the content scrolls by under the corners. Under it the CRM
   topbar's teal-into-blue line, fading out before the curves. ── */
.site-header {
  /* Every control in the header is this tall: search and the demo button. */
  --control-h: 40px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 990;
  height: var(--header-height);
  background: var(--header-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--header-radius) var(--header-radius);
  box-shadow: var(--sh-sm);
}
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline: var(--header-radius);
  height: 1px;
  background: var(--brand-line);
  pointer-events: none;
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--sp-5);
}

/* Fenibs × Blog: the logo, a light «×» and the product. On a phone too narrow for the
   whole lockup, "× Blog" wraps onto a second line that the fixed height clips, so only
   the logo is left. */
.logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: var(--sp-10) var(--sp-3); /* the row gap pushes a wrapped "× Blog" past the clip */
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  overflow: hidden;
}
.logo-svg { flex-shrink: 0; width: auto; height: 32px; }
.logo-suffix { display: flex; align-items: center; gap: var(--sp-3); height: 32px; white-space: nowrap; }
.logo-times { font-size: var(--text-xl); line-height: var(--lh-20); color: var(--border-strong); }
.logo-product {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-20);
  letter-spacing: -0.02em;
  color: var(--brand-navy);
}

/* No menu: home is the logo, the categories are in the feed's bottom bar. */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
/* The toggle only: the close button inside the field is an .icon-btn too, sized by itself. */
.header-search__toggle { width: var(--control-h); height: var(--control-h); }
.header-platform { height: var(--control-h); }
.header-platform .icon { width: 16px; height: 16px; }
/* The short label stands in on a phone; the long one stays the link's name. */
.header-platform__short { display: none; }

/* ── Header search: the button itself stretches into the field ──
   The field is positioned on .header-inner from the end side, and the controller
   animates two numbers: --hs-end (gap to the row's end) and --hs-width. Closed, they
   are the button's own box, so the field covers it pixel for pixel; open, the end
   stays and the start edge travels toward the logo, carrying the magnifier with it.
   Closing is a fade (.is-closing): the field, still looking open, dissolves where it
   stands while the button fades in under it. It used to shrink back into the button,
   and however its last frame was dressed, the hand-over to the button showed. */
.header-search { position: static; }
/* No button while the field is open (visibility: hidden — out of the tab order too).
   While it fades out the button only fades in: it must take focus, as Esc moves it
   there. The field's cross stands where the button's magnifier does, so the two take
   turns instead of crossing: the cross leaves in the first 100ms (easing in, as an exit),
   the button comes in over the other 100 and ends with the field, at 200. The transition
   lists .icon-btn's own as well, or this one would drop them. */
.header-search.is-open:not(.is-closing) .header-search__toggle { visibility: hidden; }
.header-search.is-visible .header-search__toggle { opacity: 0; }
.header-search.is-closing .header-search__toggle {
  opacity: 1;
  transition: opacity var(--dur-1) var(--ease) var(--dur-1), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.header-search.is-closing .header-search__close {
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-exit), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.header-search__field {
  position: absolute;
  z-index: 2;
  top: calc(50% - var(--control-h) / 2);
  inset-inline-end: var(--hs-end, 0px);
  width: var(--hs-width, var(--control-h));
  visibility: hidden;
  transition: width var(--dur-3) var(--ease-morph), inset-inline-end var(--dur-3) var(--ease-morph),
              opacity var(--dur-2) var(--ease-morph);
}
.header-search.is-visible .header-search__field { visibility: visible; }
/* The pointer goes through the fading field: the button under it is hovered from the
   start, so its hover fill comes in with it instead of popping up once the field is gone
   (a click there reopens the field — the button's own action). */
.header-search.is-closing .header-search__field {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-exit);
}
.header-search.is-instant .header-search__field { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .header-search__field { transition: none; }
}
.header-search__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--control-h);
  overflow: hidden;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  transition: background var(--dur-3) var(--ease-morph), border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.header-search.is-open .header-search__bar { background: var(--surface); border-color: var(--border-control); }
.header-search__bar:focus-within { border-color: var(--accent-ink); box-shadow: var(--ring); }

/* The leading magnifier only arrives once the field has opened, so it never slides
   over the one in the button; on closing it leaves first. */
.header-search__glyph {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: calc(var(--control-h) - 2px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-1) var(--ease-exit), transform var(--dur-1) var(--ease-exit);
}
.header-search__glyph .icon { width: 20px; height: 20px; }
.header-search.is-open .header-search__glyph {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-2) var(--ease) var(--dur-2), transform var(--dur-2) var(--ease) var(--dur-2);
}

.header-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  /* Room for the leading magnifier and the close button laid over the edges. A margin,
     not the bar's padding: at the closed 40px the bar would have to grow to fit padding,
     while an overflowing margin is simply clipped. */
  margin-inline: calc(var(--control-h) - 2px);
  /* 16px: anything smaller makes iOS zoom the page on focus. */
  font-size: var(--text-base);
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-exit);
}
.header-search.is-open .header-search__input { opacity: 1; transition: opacity var(--dur-2) var(--ease) var(--dur-1); }
.header-search__input::placeholder { color: var(--text-tertiary); }

/* The close button covers the toggle's magnifier exactly (same centre: 1px border + 3px
   inset + half of control-h − 8 = half of control-h). Its two glyphs morph: closed, it
   shows the magnifier, so the field takes over from the button seamlessly; open, the
   magnifier turns away and the cross turns in. */
.header-search__close {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: calc(var(--control-h) - 8px);
  height: calc(var(--control-h) - 8px);
  border-color: transparent;
  border-radius: var(--r-sm);
}
.header-search__morph {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--dur-2) var(--ease-morph), transform var(--dur-2) var(--ease-morph);
}
.icon-btn .header-search__morph { width: 20px; height: 20px; }
.header-search__morph--close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.header-search.is-open .header-search__morph--search { opacity: 0; transform: rotate(90deg) scale(0.5); }
.header-search.is-open .header-search__morph--close { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .header-search__morph { transition-duration: 1ms; }
}

.header-search__results {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  max-height: min(480px, calc(100vh - var(--header-height) - 24px));
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Only the list scrolls; the footer below it is always in view. */
.header-search__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
@starting-style {
  .header-search__results { opacity: 0; transform: translateY(-4px); }
}
/* Closing: the suggestions fade first, then the field fades out over the button. */
.header-search:not(.is-open) .header-search__results {
  opacity: 0;
  transform: translateY(-4px);
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-exit);
}
/* Nested corners: the panel's 14 less its 4px padding gives the items' 10. */
.header-search__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.header-search__title {
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.header-search__title mark { color: var(--accent-ink); font-weight: 600; background: none; }
.header-search__meta { font-size: var(--text-xs); line-height: var(--lh-16); color: var(--text-tertiary); }
.header-search__footer {
  flex: none;
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--border);
}
.header-search__all {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-20);
  color: var(--text);
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease);
}
.header-search__all-label { flex: 1; }
.header-search__count {
  padding: 2px var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--tint);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-full);
}
.header-search__all-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: translate var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.header-search__item.is-active, .header-search__all.is-active { background: var(--tint); }
.header-search__all.is-active .header-search__all-arrow { color: var(--accent-ink); translate: 2px 0; }
@media (hover: hover) {
  .header-search__item:hover, .header-search__all:hover { background: var(--tint); }
  .header-search__all:hover .header-search__all-arrow { color: var(--accent-ink); translate: 2px 0; }
}
.header-search__empty { padding: var(--sp-3); font-size: var(--text-sm); line-height: var(--lh-20); color: var(--text-tertiary); }

/* ── Phones: everything stays in one row, every control 36px; the logo 28px — the least at
   which «FENIBS GROUP» still reads — and the demo button's short label. The open search
   field covers the whole row. ── */
@media (max-width: 900px) {
  .site-header { --control-h: 36px; }
  .header-inner { gap: var(--sp-2); }
  .header-platform { padding: 0 var(--sp-3); font-size: var(--text-xs); }
  .header-platform .icon { display: none; }
}
@media (max-width: 640px) {
  .logo, .logo-suffix { height: 28px; column-gap: var(--sp-2); }
  .logo-svg { height: 28px; }
  .logo-times, .logo-product { font-size: var(--text-lg); }
  .header-platform__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-platform__short { display: inline; }
}

/* ── Footer: a white panel with rounded top corners — the header's mirror at the page's
   end. The brand with its description and channels, then the columns: the rubrics,
   «Fenibs» and «Связаться» (Admin → Footer Links), the blog's pages and documents; under
   them the copyright. Sections part by space, not lines. ── */
.site-footer {
  --footer-gap: var(--sp-8); /* between the columns */
  position: relative;
  margin-top: var(--sp-20);
  padding: var(--sp-16) 0 var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-footer);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: var(--r-xl);
  height: 1px;
  background: var(--brand-line);
  pointer-events: none;
}
/* The brand and the four columns in one row: each column as wide as its content, equal
   gaps between them, the brand taking what is left (its text wraps in it). Every column
   fits on one line. Narrower than 1280 the brand takes a row of its own above the four,
   spread across the width; from 1024 they go two by two; on a phone the rubrics and the
   documents, the longest names, take a row each. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, max-content);
  gap: var(--sp-10) var(--footer-gap);
}
.footer-brand { max-width: 320px; }
.footer-brand .logo { height: 40px; }
.footer-brand .logo-svg { height: 40px; }
.footer-desc {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
}
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer-social .icon-btn { border-radius: var(--r-full); }
/* The CRM's card titles: small capitals with air. */
.footer-col-title {
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a {
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  transition: color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .footer-col a:hover { color: var(--accent-ink); }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  color: var(--text-tertiary);
}

@media (max-width: 1279px) {
  .site-footer { --footer-gap: var(--sp-6); }
  .footer-grid { grid-template-columns: repeat(4, max-content); justify-content: space-between; }
  .footer-brand { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
}
@media (max-width: 640px) {
  .site-footer { margin-top: var(--sp-16); padding-top: var(--sp-10); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .site-footer::before { inset-inline: var(--r-lg); }
  /* Their long names would wrap in half a phone's width, their titles out of line with the
     neighbour's: the rubrics and the documents take the whole row. */
  .footer-col--rubrics, .footer-col--legal { grid-column: 1 / -1; }
  /* «Готовые отчёты Power BI» keeps one line beside the contacts. */
  .footer-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}