/* Logo centering — loaded after header.css (2026-07-24) */
.header-inner {
  --logo-aspect: 1.161;
  --logo-slot-w: calc((var(--bar-h) + var(--logo-hang)) * var(--logo-scale) * var(--logo-aspect));
}

.header-logo-link {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
  width: var(--logo-slot-w);
  line-height: 0;
}

.header-logo {
  display: block;
  flex: 0 0 auto;
  height: calc(var(--bar-h) + var(--logo-hang));
  width: auto;
  max-width: none;
  margin: 0;
  transform: scale(var(--logo-scale));
  transform-origin: top center;
}

@media (min-width: 992px) {
  .header-inner {
    height: var(--bar-h);
    min-height: var(--bar-h);
    max-height: var(--bar-h);
    align-items: center;
    grid-template-columns: var(--logo-slot-w) minmax(0, 1fr) auto;
    padding: 0 clamp(20px, 2.2vw, 40px) 0 clamp(12px, 1.4vw, 24px);
  }

  .header-logo-link {
    grid-area: logo;
    position: relative;
    left: auto;
    top: -12px;
    width: 100%;
    max-width: var(--logo-slot-w);
    height: var(--bar-h);
    align-self: start;
    justify-self: start;
  }

  .header-nav,
  .header-actions {
    align-self: center;
  }
}

@media (max-width: 991px) {
  .header-inner {
    --logo-slot-factor: 0.88;
    --logo-slot-w: calc((var(--bar-h) + var(--logo-hang)) * var(--logo-scale) * var(--logo-aspect) * var(--logo-slot-factor));
    padding: 5px 10px 5px calc(clamp(4px, 1.5vw, 10px) + var(--logo-slot-w));
  }

  .header-logo-link {
    left: clamp(4px, 1.5vw, 10px);
    top: -8px;
    width: var(--logo-slot-w);
  }

  .header-logo {
    transform: scale(calc(var(--logo-scale) * var(--logo-slot-factor)));
  }
}