/* Logo utilities and responsive sizing */
.logo-link { display: inline-block; line-height: 1; margin-left: 14px; }
.logo-svg { display: block; width: 100%; height: auto; }

/* Container that provides the colored square behind the logo for small uses */
.logo-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Default to no background so the logo sits directly on the banner. */
  background-color: var(--logo-bg, transparent);
  /* Remove the rounded square framing by default so only the image is visible. */
  border-radius: 0;
  padding: 0;
}

/* Responsive sizes using CSS custom properties for easy override */
:root { --logo-size: 80px; }
.logo-square { width: var(--logo-size); height: var(--logo-size); }

/* Helper classes to change size quickly */
.logo-size-sm { --logo-size: 56px; }
.logo-size-md { --logo-size: 80px; }
.logo-size-lg { --logo-size: 112px; }

/* Make the SVG artwork fill available space while preserving aspect ratio */
.logo-svg svg, .logo-svg img { width: 100%; height: 100%; object-fit: contain; }

/* Remove any default image background or border */
.logo-svg img { background: transparent; border: none; }

/* Make the raw image fill the square container when used */
.logo-img { width: 100%; height: 100%; display: block; object-fit: contain; background: transparent; border-radius: 0; }

/* Brand name sizing helpers - slightly larger and bolder on larger viewports */
.brand-name { font-size: 40px; font-weight: 800; margin-left: 18px; }

@media (max-width: 720px) {
  :root { --logo-size: 56px; }
  .brand-name { font-size: 20px; font-weight: 700; }
}

@media (min-width: 1200px) {
  :root { --logo-size: 112px; }
  .brand-name { font-size: 44px; font-weight: 900; margin-left: 28px; }
  .logo-link { margin-left: 24px; }
}

/* Accessibility: ensure the link focus ring is visible */
.logo-link:focus { outline: 3px solid rgba(15,23,36,0.12); outline-offset: 3px; }

/* On very small screens reduce logo size */
@media (max-width: 480px) {
  :root { --logo-size: 48px; }
}