/**
 * CUME Logo: una versión por modo. En modo oscuro (el del sitio) se ve el logo
 * claro; en modo claro, el de color. Lo decide `html[data-cume-theme]`, que
 * Core pone antes de pintar la página: no hay parpadeo ni JavaScript.
 *
 * @package CUME_Widgets
 */

.cume-logo-caja {
	display: flex;
	align-items: center;
}

.cume-logo {
	display: inline-flex;
	line-height: 0;
}

.cume-logo__pic {
	display: block;
}

.cume-logo__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Por defecto (modo oscuro o sin modo): el logo claro. */
.cume-logo__pic--claro {
	display: none;
}

html[data-cume-theme="light"] .cume-logo__pic--oscuro {
	display: none;
}

html[data-cume-theme="light"] .cume-logo__pic--claro {
	display: block;
}

/*
 * Header transparente sobre una portada oscura (Sticky Header Effects pone
 * `she-header-transparent-yes` mientras está fusionado y `she-header` al hacer
 * scroll): el logo claro se ve aunque el sitio esté en modo claro.
 */
body:has(.cume-hero, .cume-portada-oscura) .she-header-transparent-yes:not(.she-header) .cume-logo-caja--portada .cume-logo__pic--oscuro {
	display: block;
}

body:has(.cume-hero, .cume-portada-oscura) .she-header-transparent-yes:not(.she-header) .cume-logo-caja--portada .cume-logo__pic--claro {
	display: none;
}

.cume-logo:focus-visible {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 4px;
}