@import url('css/v3/26-tape.css');

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  min-height: var(--header-h-s);
  padding: 0.5rem max(1.25rem, calc((100% - 70rem) / 2));
  background: var(--color-surface);
  color: var(--color-text);
}

@media (min-width: 48rem) {
  .site-header { min-height: var(--header-h); }
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  line-height: 0;
}

.site-header__brand img,
.site-header__brand .brand-logo__img {
  display: block;
  height: 32px;
  width: auto;
}


.site-nav {
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  font-size: var(--pp-text-sm, 0.875rem);
}

.site-nav a { white-space: nowrap; }
.site-nav a:not(:first-child) { display: none; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  color: var(--color-text);
  text-decoration: none;
}


.site-nav a:hover {
  background: var(--color-accent);
  color: var(--color-ink);
}

.site-header__session .hero__mode {
  color: var(--color-text);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-header__session {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  min-height: 44px;
}


.site-header .pp-login-entry {
  min-height: 44px;
  min-width: 44px;
  padding: 0.3rem 0.75rem;
  font-size: var(--pp-text-md);
  line-height: 1.2;
  color: var(--color-text);
  border: var(--border-thin) solid var(--color-ink);
}

.site-header__cta {
  display: none;
  white-space: nowrap;
}

.site-header a:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-gap);
}


.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  padding: 10px 16px; background: var(--color-surface); color: var(--color-text);
}
.skip-link:focus { left: 8px; top: 8px; }

.skip-link:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-gap);
}


@media (min-width: 48rem) {
  .site-nav {
    flex: 1 1 auto;
    justify-content: center;
  }

  .site-nav a:not(:first-child) { display: inline-flex; }

  .site-header__cta {
    display: inline-flex;
    flex: 0 0 auto;
  }
}


@media (min-width: 48rem) and (max-width: 56.25rem) {
  .site-header--authed .hero__mode { display: none; }
  .site-header--authed .site-nav a:not(:first-child) { display: none; }
}


@media (min-width: 48rem) and (max-width: 56.25rem) {
  .site-nav a:not(:first-child) { display: none; }
  .site-header .pp-login-entry { white-space: nowrap; }
}


@media (min-width: 56.25rem) and (max-width: 62.5rem) {
  .site-header--authed .hero__mode { display: none; }
  .site-nav a:not(:first-child) { display: none; }
  .site-header .pp-login-entry { white-space: nowrap; }
}


@media (max-width: 47.99rem) {
  .site-header--authed .hero__mode { display: none; }
}


.site-header__brand {
  min-width: 44px;
  justify-content: center;
}


.promo-strip {
  box-sizing: border-box;
  min-height: 44px; 
  padding: 0.25rem 1rem;
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--fs-body-s);
  line-height: 1.25;
  text-align: center;
}


@media (max-width: 47.99rem) {
  .promo-strip { font-size: var(--fs-caption); }
}


.promo-strip strong {
  color: var(--color-accent);
  font-weight: 700;
}

.promo-strip[data-state='pending'] {
  visibility: hidden;
}

.promo-strip[data-state='closed'] {
  display: none;
}


.promo-strip a {
  white-space: nowrap;
  padding: 0.25em 0.125em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.promo-strip a:focus-visible {
  outline: 3px solid var(--color-focus-gap);
  outline-offset: 2px;
}


.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


html[data-platform='ios'] .footer__col a.ios-only {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


html:not([data-platform='ios']) .footer__col a.ios-only {
  display: none;
}


.site-nav a[hidden],
.site-nav a[hidden]:not(:first-child) { display: none; }


@media (max-width: 47.99rem) {
  .site-header { flex-wrap: wrap; }

  .site-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav a:nth-child(-n+3):not([hidden]) {
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-ink) 40%, transparent);
    border-radius: 999px;
  }

  
  .site-nav {
    flex: 1 1 0;
    min-width: 0;
  }

  .site-header__session {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


.footer {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.footer p,
.footer__bio,
.footer__phones {
  color: var(--color-on-ink-secondary);
}

.footer a {
  color: var(--color-on-ink);
}

.footer a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


.footer a[href^='https://max.ru']::before,
.footer a[href^='https://t.me']::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.footer a[href^='https://max.ru']::before {
  background-image: url('/img/brand/third-party/max.svg');
}

.footer a[href^='https://t.me']::before {
  background-image: url('/img/brand/third-party/telegram.svg');
}


.footer__phones a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.375rem;
}

.footer__col h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-accent);
}


.footer__ai {
  color: var(--color-on-ink-secondary);
  font-size: var(--fs-caption);
}


.footer :focus-visible {
  outline: var(--focus-width) solid var(--color-focus-gap);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-ink);
}


.phone-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-header);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px));
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: var(--border) solid var(--color-border);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 200ms ease-out, visibility 0s linear 200ms;
}

.phone-bar[data-state='shown'] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 200ms ease-out, visibility 0s;
}

.phone-bar__cta,
.phone-bar__feed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--tap-l);
  padding: 0 var(--space-3);
  border: var(--border) solid var(--color-ink);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body-s);
  text-decoration: none;
  white-space: nowrap;
}


.phone-bar__cta {
  flex: 0 1 65%;
  background: var(--color-ink);
  color: var(--color-accent);
}

.phone-bar__feed {
  flex: 1 1 auto;
  background: var(--color-surface);
  color: var(--color-ink);
}

.phone-bar :focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-gap);
}

@media (min-width: 48rem) {
  .phone-bar { display: none; }
}

@media (max-width: 47.99rem) {
  
  main:has(~ .phone-bar) {
    padding-bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  
  .phone-bar {
    gap: var(--space-1);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .phone-bar__cta,
  .phone-bar__feed {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--space-2);
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .phone-bar__cta { flex-grow: 1.6; }

  
  body:has(.phone-bar[data-state='shown']) .cookie-notice {
    bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-bar { transition: none; }
}


html {
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  scroll-padding-bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px) + var(--space-4));
}


@media (min-width: 40rem) and (max-width: 47.99rem) {
  .site-header .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    overflow: visible;
    justify-content: flex-start;
  }

  .site-header .site-nav a:not([hidden]) { display: inline-flex; }

  .site-header__cta {
    display: inline-flex;
    flex: 0 0 auto;
    order: 2;
    margin-left: auto;
  }
}


.feed-bell-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0 max(1.25rem, calc((100% - 70rem) / 2));
}