/* Wide logo (assets/images/logosiamcity.png). It already contains the shop name and slogan,
   so the old round emblem and the written name beside it are gone. Loaded after every other stylesheet.
   The logo's own background is almost the same cream as the header, so it sits on the header without a box. */

/* Header */
body .site-header .brand { gap: 0; min-width: 0; }
body .site-header #header-logo {
  display: block; width: auto; height: 78px; aspect-ratio: auto; max-width: min(320px, 62vw); object-fit: contain;
}
@media (max-width: 1150px) { body .site-header #header-logo { height: 60px; } }
@media (max-width: 560px) { body .site-header #header-logo { height: 46px; max-width: 64vw; } }
@media (max-width: 360px) { body .site-header #header-logo { height: 40px; } }

/* Footer and Visit Us: dark red backgrounds, so the logo rests on a cream plate. */
.footer-identity .brand { display: block; }
.footer-identity #footer-logo { display: block; aspect-ratio: auto; width: auto; max-width: min(240px, 100%); max-height: 112px; height: auto; margin-inline: auto; filter: drop-shadow(0 3px 8px #2a060a66); }

/* Slide-out mobile menu. */
.mobile-navigation .mobile-nav-brand > span { display: block; min-width: 0; text-align: left; }
.mobile-navigation .mobile-nav-brand strong {
  font-size: clamp(18px, 4.6vw, 28px); line-height: 1.15; letter-spacing: 0; color: #ca001b;
}
.mobile-navigation .mobile-nav-brand small {
  margin-top: 5px; font-size: clamp(11.75px, 3vw, 18.3px); line-height: 1.35; letter-spacing: 0; white-space: nowrap; color: #7a4a14;
}
.mobile-navigation .mobile-nav-brand img {
  width: auto; height: 62px; max-width: 90px; max-height: 62px; object-fit: contain; border-radius: 6px;
}
@media(max-width:370px) {
  .mobile-navigation .mobile-nav-brand img { height: 50px; max-height: 50px; max-width: 70px; }
  .mobile-navigation .mobile-nav-brand strong { font-size: 16px; }
  .mobile-navigation .mobile-nav-brand small { font-size: 10.45px; }
}
/* The same social row on every public page, including the Cheap Eats feature. */
body .menu-footer .socials { flex-wrap: wrap; }
body .menu-footer .socials #footer-cheap-eats { display: inline-flex; align-items: center; width: auto; height: auto; min-height: 40px; flex-shrink: 0; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #fffdf8; color: #811025; font-size: 14px; line-height: 1.2; white-space: nowrap; }
body .menu-footer #footer-cheap-eats svg { width: 24px; height: 24px; flex-shrink: 0; }