/*
 * MadTheme Blocks — site brand block (site name, logo, or both).
 *
 * Four jobs, in this order: lay the brand out (logo and name next to each other), pick
 * which logo the visitor sees, size both according to the three device ranges, and keep
 * the compact-header behaviour the site title already had.
 *
 * Why CSS and not PHP for the logo switch: the visitor's light/dark choice lives in
 * localStorage and in a class on <html>/<body> (the theme's own hooks), so the server
 * cannot know it. Both logos are printed and one rule hides the one that does not apply.
 *
 * The two `:has()` rules are what make a half-configured brand safe: hiding a variant
 * only happens when the other variant is actually there, so a site that uploaded a
 * single logo keeps seeing it in both modes instead of getting an empty header.
 */

.mw-site-brand {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--15, 16px );
	min-width: 0;
}

.mw-site-brand__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.mw-site-brand__logo {
	display: block;
	width: var( --mw-brand-logo-desktop, 160px );
	height: auto;
	max-width: 100%;
}

/* Which logo is visible: light by default, dark when the visitor is in dark mode. */
.mw-site-brand:has( .mw-site-brand__logo--light ) .mw-site-brand__logo--dark {
	display: none;
}

html.dark-mode:not( .dark-mode-off ) .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--light,
html[data-theme="dark"] .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--light {
	display: none;
}

html.dark-mode:not( .dark-mode-off ) .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--dark,
html[data-theme="dark"] .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--dark {
	display: block;
}

/* Automatic mode (the site follows the system: the theme's `dark-mode-auto` hook). */
@media (prefers-color-scheme: dark) {
	html.dark-mode-auto:not( .dark-mode-off ) .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--light {
		display: none;
	}

	html.dark-mode-auto:not( .dark-mode-off ) .mw-site-brand:has( .mw-site-brand__logo--dark ) .mw-site-brand__logo--dark {
		display: block;
	}
}

/* Tablet: 782-1023px. */
@media (max-width: 1023px) {
	.mw-site-brand__logo {
		width: var( --mw-brand-logo-tablet, 140px );
	}
}

/* Mobile: below the theme's 782px navigation breakpoint. */
@media (max-width: 781px) {
	.mw-site-brand__logo {
		width: var( --mw-brand-logo-mobile, 120px );
	}

	/* "Logo and name" keeps only the icon on small screens (unless the site turned it off). */
	.mw-site-brand--name-mobile-off .mw-site-brand__name {
		display: none;
	}
}

/*
 * Site name sizes. Only applied when the site moved the sliders (0 means "leave the theme
 * alone"), so the theme's own typography stays the default. The compact-header rule in the
 * theme targets `.wp-block-site-title a`, which this element reuses.
 */
.mw-site-brand__link,
.mw-site-brand__name a {
	text-decoration: none;
}

.mw-site-brand__name a:hover,
.mw-site-brand__name a:focus {
	text-decoration: none;
}

.mw-site-brand__name {
	margin: 0;
}

.mw-site-brand--has-logo .mw-site-brand__name {
	line-height: 1.1;
}

@media (min-width: 1024px) {
	.mw-site-brand__name {
		font-size: var( --mw-brand-name-desktop, inherit );
	}
}

@media (max-width: 1023px) {
	.mw-site-brand__name {
		font-size: var( --mw-brand-name-tablet, inherit );
	}
}

@media (max-width: 781px) {
	.mw-site-brand__name {
		font-size: var( --mw-brand-name-mobile, inherit );
	}
}

/*
 * Compact header (the theme adds `mw-header-compact` to the header after 30px of scroll and
 * shrinks the site title). The logo follows the same 0.86 factor, otherwise it would stay
 * full size while the rest of the header retracts.
 */
header.wp-block-template-part.mw-header-compact .mw-site-brand__logo {
	width: calc( var( --mw-brand-logo-desktop, 160px ) * 0.86 );
}

@media (max-width: 1023px) {
	header.wp-block-template-part.mw-header-compact .mw-site-brand__logo {
		width: calc( var( --mw-brand-logo-tablet, 140px ) * 0.86 );
	}
}

@media (max-width: 781px) {
	header.wp-block-template-part.mw-header-compact .mw-site-brand__logo {
		width: calc( var( --mw-brand-logo-mobile, 120px ) * 0.86 );
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-site-brand__logo {
		transition: none;
	}
}

.mw-site-brand__logo {
	transition: width 0.2s ease;
}