/* Header fixes for theme 11 and its looks (Atelier, Prism, Nocturne and Canvas), the blogs the
   modern Design Studio edits. web-resources/header.php loads this file only for them
   (blog_theme_is_modern()), so older themes are untouched. Rules
   that depend on a blog's settings (its mobile breakpoint, its menu color) are in
   theme_design_css(). */

/* The open phone menu fits inside the header instead of running off the right edge: its
   padding and border sit inside its width. */
.menu-items.drop-show {
	box-sizing: border-box !important;
}

/* On phones the search button sits beside the menu button rather than between it and the blog
   name. (A drawer menu with a wider breakpoint gets the same rule from theme_design_css().) */
@media only screen and (max-width: 800px) {
	.top-menu .side-search {
		margin-left: auto;
	}

	/* The header's own gap (12px on phones, see theme_design_css()) spaces them. */
	.top-menu .side-search + .mobile-drop {
		margin-left: 0 !important;
	}
}

/* With the links in the header, an open search takes their place instead of wrapping onto a
   second line (tablets and narrow laptops). */
@media only screen and (min-width: 801px) {
	.top-menu .container:has(#search-hold.search-show) :is(.menu-items, .top-right-menu) {
		display: none !important;
	}

	.top-menu .container:has(#search-hold.search-show) .side-search {
		margin-left: auto;
	}
}

/* On phones an open search takes the whole header bar (theme_design_css() places it); it grows from
   where its button was. */
@keyframes modern-search-open {
	from { clip-path: inset(0 0 0 calc(100% - 44px) round 999px); }
	to { clip-path: inset(0 round 999px); }
}

@media (prefers-reduced-motion: reduce) {
	.top-menu > .container:has(#search-hold.search-show) #search-hold.search-show {
		animation: none !important;
	}
}