/* 
 * Logo Component Styles
 * Implements responsive, accessible, and performant logo display
 */

.logo-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Prevent layout shift */
  aspect-ratio: 644.64 / 187.79;
  /* Ensure the logo scales properly */
  width: 100%;
  max-width: 120px; /* Further reduced from 160px for more compact look */
  max-height: 36px; /* Further reduced from 48px for better fit */
  height: auto;
}

/* Size variants */
.logo-container.size-small {
  max-width: 60px; /* Further reduced from 80px */
  max-height: 18px; /* Further reduced from 24px */
}

.logo-container.size-medium {
  max-width: 120px; /* Further reduced from 160px */
  max-height: 36px; /* Further reduced from 48px */
}

.logo-container.size-large {
  max-width: 180px; /* Further reduced from 240px */
  max-height: 54px; /* Further reduced from 72px */
}

.logo-container.size-xlarge {
  max-width: 240px; /* Further reduced from 320px */
  max-height: 72px; /* Further reduced from 96px */
}

.logo-container.size-full {
  max-width: 100%;
  max-height: none;
}

/* Ensure SVG scales properly */
.logo-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Improve rendering performance */
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
  image-rendering: crisp-edges;
  /* Ensure it's focusable for accessibility */
  pointer-events: none;
}

/* Link styling */
.logo-link {
  display: block;
  text-decoration: none;
  border: none;
  /* Improve performance */
  will-change: transform;
}

/* Focus styles for accessibility */
.logo-link:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0e47a1;
  border-radius: 4px;
}

.logo-link:focus:not(:focus-visible) {
  box-shadow: none;
}

.logo-link:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0e47a1;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .logo-link:focus {
    box-shadow: 0 0 0 2px #000000, 0 0 0 4px #ffffff;
  }
}

/* Responsive behavior */
@media (max-width: 768px) {
  .logo-container {
    max-width: 100px; /* Further reduced from 120px */
  }

  .logo-container.size-large,
  .logo-container.size-xlarge {
    max-width: 120px; /* Further reduced from 160px */
  }
}

@media (max-width: 480px) {
  .logo-container {
    max-width: 80px; /* Further reduced from 100px */
  }

  .logo-container.size-small {
    max-width: 50px; /* Further reduced from 70px */
  }

  .logo-container.size-large,
  .logo-container.size-xlarge {
    max-width: 100px; /* Further reduced from 120px */
  }
}

/* Print styles */
@media print {
  .logo-svg .logo-text-primary,
  .logo-svg .logo-text-secondary,
  .logo-svg .logo-path {
    fill: #000000 !important;
  }
}