/**
 * Kizmio Logo Color System
 * 
 * Provides dynamic logo color support across all pages/plugins.
 * The --kizmio-logo-color CSS variable is set server-side via the logo color mapping.
 * SVG logos use fill="currentColor" to inherit this value.
 */

:root {
  --kizmio-logo-color: #fa470d;
}

/* Logo wrapper - sets the color context for all nested elements */
.logo-wrapper,
.logo,
.main-header .logo,
.kizmiotheme .logo {
  color: var(--kizmio-logo-color, #fa470d);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure logo maintains proper flexbox alignment and sizing */
.logo-wrapper a.logo,
.main-header a.logo,
.kizmiotheme .logo,
a.logo {
  display: flex !important;
  align-items: center;
  text-decoration: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* SVG logo sizing - explicit height prevents flexbox collapse */
.logo-wrapper svg.kizmio-logo,
.main-header svg.kizmio-logo,
.logo svg.kizmio-logo,
svg.kizmio-logo {
  display: inline-block !important;
  height: 36px !important;
  width: auto !important;
  max-width: 140px !important;
  color: inherit;
  fill: currentColor;
  vertical-align: middle;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsive mobile sizing */
@media (max-width: 767.98px) {
  .logo-wrapper svg.kizmio-logo,
  .main-header svg.kizmio-logo,
  svg.kizmio-logo {
    height: 30px !important;
  }
}

@media (max-width: 350px) {
  .logo-wrapper svg.kizmio-logo,
  .main-header svg.kizmio-logo,
  svg.kizmio-logo {
    height: 24px !important;
  }
}

/* Paths inside SVG inherit currentColor */
svg.kizmio-logo path,
svg.kizmio-logo g {
  fill: currentColor !important;
  stroke: none !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .logo-wrapper a.logo,
  .logo a,
  .logo {
    color: var(--kizmio-logo-color, inherit);
  }
  
  .kizmio-logo {
    color: inherit;
  }
}

/* Accessibility improvements */
.logo-wrapper a.logo:focus-visible,
.logo:focus-visible,
.logo a:focus-visible {
  outline: 3px solid var(--kizmio-logo-color, #fa470d);
  outline-offset: 2px;
  border-radius: 4px;
}