/*
 * Shared Clementine header sizing.
 *
 * This file loads after all page-specific styles so the logo has one
 * consistent footprint on every page, including the older cart/contact
 * header markup.
 */

:root {
  --clementine-header-logo-width: 12.5rem;
  --clementine-header-logo-height: 3.75rem;
  --clementine-header-logo-image-width: 13rem;
}

body .warm-nav .warm-logo-link,
body .site-nav nav > a:first-child {
  position: relative !important;
  width: var(--clementine-header-logo-width) !important;
  min-width: var(--clementine-header-logo-width) !important;
  max-width: var(--clementine-header-logo-width) !important;
  height: var(--clementine-header-logo-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(201, 167, 104, 0.2) !important;
  border-radius: 0.55rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body .warm-nav .warm-logo,
body .site-nav nav > a:first-child img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--clementine-header-logo-image-width) !important;
  min-width: var(--clementine-header-logo-image-width) !important;
  max-width: var(--clementine-header-logo-image-width) !important;
  height: auto !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: initial !important;
}

body .warm-nav .warm-nav-inner,
body .site-nav nav {
  min-height: 5.25rem !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  :root {
    --clementine-header-logo-width: 9.75rem;
    --clementine-header-logo-height: 3.15rem;
    --clementine-header-logo-image-width: 10.25rem;
  }

  body .warm-nav .warm-nav-inner,
  body .site-nav nav {
    min-height: 4.5rem !important;
  }
}

@media (max-width: 420px) {
  :root {
    --clementine-header-logo-width: 8.75rem;
    --clementine-header-logo-height: 2.9rem;
    --clementine-header-logo-image-width: 9.25rem;
  }
}