/* Бежова текстура з логотипа — header, footer, mobile nav + brand logo */

.site-header,
.mobile-nav,
.site-footer {
  background-color: var(--color-logo-bg);
  background-image: var(--logo-surface-highlight), var(--logo-texture-image);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--logo-texture-size);
  background-position: center top, center top;
  background-attachment: scroll, scroll;
}

.site-header {
  transition: box-shadow var(--duration-ui) var(--ease-out),
              border-color var(--duration-ui) var(--ease-out);
}

.site-header.is-scrolled {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.06) 100%
    ),
    var(--logo-texture-image);
  border-bottom-color: rgba(120, 100, 82, 0.2);
}

.site-footer {
  position: relative;
}

.site-footer::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 2.5rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.brand-logo-link {
  display: block;
  text-decoration: none;
  line-height: 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: opacity var(--duration-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .brand-logo-link:hover {
    opacity: 0.92;
  }
}

.brand-logo-shell {
  display: block;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: var(--brand-logo-h-header);
  max-width: var(--brand-logo-max-w-header);
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.brand-logo-shell--footer .brand-logo {
  height: var(--brand-logo-h-footer);
  max-width: var(--brand-logo-max-w-footer);
}

@media (min-width: 768px) {
  .brand-logo {
    height: var(--brand-logo-h-header-desktop);
  }

  .brand-logo-shell--footer .brand-logo {
    height: var(--brand-logo-h-footer-desktop);
    max-width: calc(var(--brand-logo-max-w-footer) + 1rem);
  }
}

@media (min-width: 1280px) {
  .brand-logo {
    max-width: 12rem;
  }
}

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

  .brand-logo-link:hover {
    opacity: 1;
  }
}