/**
 * 12D – Logo
 * File: assets/css/logo.css
 *
 * Structural styles for the Logo widget.
 * Elementor controls own configurable presentation.
 * Shared hover motion is owned by d12-hover-effects.
 */

.d12-logo {
  line-height: 0;
}

.d12-logo__link {
  display: inline-block;
  max-width: 100%;
}

.d12-logo__image {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*
 * Box Shadow transition.
 *
 * Logo owns the configurable shadow-transition duration. When no shared hover
 * motion effect is active, this declaration provides the shadow transition.
 * When shared hover motion is active, d12-hover-effects composes the transition
 * and consumes the same duration variable.
 */
.d12-logo__image {
  transition: box-shadow var(--d12-logo-shadow-duration, 0.3s) ease;
}

/*
 * Canonical keyboard Focus Indicator.
 *
 * Focus belongs to the interactive Logo link rather than the image inside it.
 * The canonical treatment follows the shared 12D focus convention while
 * allowing Elementor controls to override the configurable properties.
 */
.d12-logo__link:focus-visible {
  background-color: var(--d12-logo-focus-background, transparent) !important;
  box-shadow: none !important;
  outline-style: solid !important;
  outline-width: var(--d12-logo-focus-width, 2px) !important;
  outline-color: var(
    --d12-logo-focus-color,
    var(--d12-accent-hover, var(--e-global-color-accent))
  ) !important;
  outline-offset: var(--d12-logo-focus-offset, 0px) !important;
}

/*
 * Suppress the normal image border while the Logo link owns keyboard focus.
 *
 * The border remains structurally present so focus does not cause layout shift;
 * only its color is suppressed while the canonical focus indicator is visible.
 */
.d12-logo__link:focus-visible .d12-logo__image {
  border-color: transparent !important;
}

/* End of file assets/css/logo.css */