/* ggnomz — official header logo lockup (vector mushroom + wordmark) */

:root {
  --logo-green: #d4ff33;
  --logo-pink: #f06292;
  --logo-stroke: #ffffff;
}

.header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
}

.header .brand-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Legacy CSS-drawn mark — disabled when SVG is present */
.header .brand-mark::before,
.header .brand-mark::after {
  display: none !important;
  content: none !important;
}

.header .brand-mark__svg,
.header .brand-mark img {
  display: block;
  width: 48px;
  height: auto;
  aspect-ratio: 48 / 44;
}

.header .brand-text {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.5rem, 3.8vw, 1.65rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  color: var(--logo-stroke) !important;
  text-transform: lowercase;
  transform: none !important;
  translate: none !important;
}

@media (max-width: 720px) {
  .header .brand-mark,
  .header .brand-mark__svg,
  .header .brand-mark img {
    width: 44px;
  }

  .header .brand-text {
    font-size: clamp(1.5rem, 7vw, 1.85rem) !important;
  }
}