Oh and back to 4, the below is looking good!
Just confirming – this is manually inputting the different logo widths, there’s no dynamic way with media queries? (assuming I tweak logo sizes in future, would avoid adjusting)
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
padding-left: 210px;
}
#mobile-header .navigation-search input[type="search"]:active,
#mobile-header .navigation-search input[type="search"]:focus {
padding-left: 160px;
}