/* ============================================================================
   modules/branding/branding.css — logo sizes on every screen (loaded by the
   'head_extra' hook only while the Logo & favicon module is ON)
   Phones 320 px and up, tablets, desktops; iPhone notch handled by the core header.
   ============================================================================ */
.br-plate { box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.br-plate img { max-width: 100%; height: auto; }

/* Desktop header (≥ 760 px): the logo never pushes the search box off screen. */
.gm-logo { max-width: 30vw; min-width: 0; }
.gm-logo img { max-width: 100%; height: auto; }

/* Phone header (< 760 px): small logo left of "Deliver to". Very narrow phones (≤ 340 px, e.g. old iPhone SE):
   a bit smaller so the location stays readable. */
@media (max-width: 340px) {
  .gm-mlogo { max-width: 40%; }
  .gm-mlogo img { max-height: 22px; }
}

/* Login pages: centred on phones, never wider than the screen. */
.au-brand { max-width: 100%; min-width: 0; }
.au-brand .br-plate { max-width: 100%; }

/* Admin menu: logo fits the 220 px sidebar and the phone drawer. */
aside .logo { display: block; max-width: 100%; }
aside .logo .br-plate { max-width: 100%; }