/* FreecalcHub Brand Enhancement Styles */

/* Main Logo Styling */
.main-logo {
  height: 70px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Logo container enhancements */
.logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-container a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Responsive logo switching */
@media (max-width: 768px) {
  .main-logo {
    content: url('/images/logos/vertical-stacked.png') !important;
    height: 65px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 480px) {
  .main-logo {
    content: url('/images/logos/vertical-stacked.png') !important;
    height: 55px !important;
    max-width: 140px !important;
  }
}

/* Compact logo for constrained spaces */
.compact-logo {
  max-width: 200px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

/* Icon-only logo for very small spaces */
.icon-logo {
  max-width: 40px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

/* Brand color integration */
:root {
  --brand-orange: #f39c12;
  --brand-blue: #4a6fa5;
  --brand-dark-blue: #345a8a;
  --brand-contrast-ratio: 1.2;
}

/* Enhanced hover effects for logo */
.logo-container a:hover .main-logo {
  opacity: 0.9;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

/* Dark mode logo adjustments */
[data-theme="dark"] .main-logo {
  filter: brightness(1.1);
}

/* Print styles - use monochrome logo */
@media print {
  .main-logo {
    content: url('/images/FreecalcHub/logo_monochrome.png');
    max-width: 200px;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .main-logo {
    filter: contrast(1.3);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .main-logo {
    transition: none;
  }
  
  .logo-container a:hover .main-logo {
    transform: none;
  }
}

/* Mobile menu logo styling */
.mobile-menu .logo-container {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.mobile-menu .main-logo {
  max-width: 150px;
  max-height: 40px;
}

/* Logo loading states */
.main-logo {
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.main-logo[src] {
  background: none;
  animation: none;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Accessibility improvements */
.main-logo:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Social sharing optimizations */
.og-image {
  display: none;
}

/* PWA and mobile app icon styling */
.pwa-icon {
  border-radius: 20%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}