/* Logo rules: use with inline SVG, <img src="assets/logo.svg">, or background-image */
:root {
  --logo-size-min: 36px;
  --logo-size-max: 56px;
  --logo-size: clamp(var(--logo-size-min), 4.5vw, var(--logo-size-max));
  --logo-color: #2b7af6; /* default blue, override as needed */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

/* When using the external SVG with <img> */
.logo-img {
  width: var(--logo-size);
  height: var(--logo-size);
  display: block;
  object-fit: contain;
  /* color can't directly affect an <img>; if you need to recolor, use inline SVG or CSS filters */
}

/* When inlining the SVG, this targets the <svg> element and uses currentColor inside the file */
.logo-svg {
  width: var(--logo-size);
  height: var(--logo-size);
  display: block;
  color: var(--logo-color); /* controls stroke inside inline SVG */
}

/* Logo link wrapper */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

/* Text label next to logo */
.logo-text {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  color: #111;
}

/* Hover/focus effects */
.logo:focus-visible,
.logo:hover {
  --logo-color: #1e6de6;
}

.logo-svg,
.logo-img {
  transition: transform 180ms ease, opacity 180ms ease;
}
.logo:hover .logo-svg,
.logo:focus .logo-svg,
.logo:hover .logo-img,
.logo:focus .logo-img {
  transform: scale(1.06);
}

/* Small screens: hide the text and scale logo down */
@media (max-width: 640px) {
  :root { --logo-size-min: 32px; --logo-size-max: 42px; }
  .logo-text { display: none; }
}