/*
 * Szabó Art Design brand logo integration
 * Betöltés: a szaboartdesign-global.css után.
 */

/* ================================================================
   Header wordmark and responsive monogram
   ================================================================ */

.szaboartdesign-site-header__logo-picture {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.szaboartdesign-site-header__logo-picture
.szaboartdesign-site-header__logo {
  display: block;
  width: clamp(210px, 14.5vw, 270px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22))
    drop-shadow(
      0 0 16px
      rgba(var(--szaboartdesign-brand-gold-rgb), 0.07)
    );
}

/* A mobil panel felső sávjában mindig a rövid monogram jelenik meg. */
.szaboartdesign-mobile-navigation__topbar
.szaboartdesign-site-header__logo--mobile-panel {
  display: block;
  width: 104px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 7px 18px rgba(0, 0, 0, 0.22))
    drop-shadow(
      0 0 13px
      rgba(var(--szaboartdesign-brand-gold-rgb), 0.07)
    );
}

/* ================================================================
   Footer wordmark
   ================================================================ */

.szaboartdesign-site-footer__logo {
  display: block;
  width: clamp(250px, 17vw, 320px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22))
    drop-shadow(
      0 0 18px
      rgba(var(--szaboartdesign-brand-gold-rgb), 0.07)
    );
}

/* ================================================================
   Responsive logo sizing
   ================================================================ */

@media (max-width: 1280px) and (min-width: 1181px) {
  .szaboartdesign-site-header__logo-picture
  .szaboartdesign-site-header__logo {
    width: 214px;
  }
}

@media (max-width: 1180px) {
  .szaboartdesign-site-header__logo-picture
  .szaboartdesign-site-header__logo {
    width: 102px;
  }
}

@media (max-width: 767px) {
  .szaboartdesign-site-header__logo-picture
  .szaboartdesign-site-header__logo {
    width: 96px;
  }

  .szaboartdesign-mobile-navigation__topbar
  .szaboartdesign-site-header__logo--mobile-panel {
    width: 98px;
  }

  .szaboartdesign-site-footer__logo {
    width: min(270px, 78vw);
  }
}

@media (max-width: 390px) {
  .szaboartdesign-site-header__logo-picture
  .szaboartdesign-site-header__logo {
    width: 88px;
  }

  .szaboartdesign-mobile-navigation__topbar
  .szaboartdesign-site-header__logo--mobile-panel {
    width: 92px;
  }

  .szaboartdesign-site-footer__logo {
    width: min(248px, 78vw);
  }
}