/* Top bar, header and footer: the same on every page.
   The home page is the master. Its top bar / header / footer values live in home.css under ".home-page"; every other page has
   its own page-family palette and container widths, which used to make these three parts drift. This file gives every other
   page exactly the home page's values for them. Loaded last, after all other stylesheets. Check with:
   node .tools/check-site-chrome.cjs */

:is(.menu-page, .about-page) :is(.topbar, .site-header, footer.menu-footer, .mobile-order-bar) {
  --red: #ca001b; --deep-red: #9b0013; --cream: #fcf9f2; --ink: #252a3a; --muted: #666878; --gold: #c99a53; --line: #eae3d9;
}
:is(.menu-page, .about-page) :is(.site-header, footer.menu-footer, .mobile-order-bar) { font-size: 15px; line-height: 1.45; }
:is(.menu-page, .about-page) :is(.site-header, .mobile-order-bar) { color: var(--ink); }

/* Widths. The header's own width on wide screens comes from desktop-header.css, shared by every page. */
:is(.menu-page, .about-page) :is(.topbar, .site-header, footer.menu-footer) .container { max-width: none; }
:is(.menu-page, .about-page) :is(.topbar, footer.menu-footer) .container { width: min(1240px, calc(100% - 80px)); }
@media (max-width: 1200px) { :is(.menu-page, .about-page) :is(.topbar, footer.menu-footer) .container { width: calc(100% - 64px); } }
@media (max-width: 1100px) { :is(.menu-page, .about-page) .site-header .container { width: calc(100% - 64px); } }
@media (max-width: 760px) {
  :is(.menu-page, .about-page) :is(.topbar, footer.menu-footer) .container { width: calc(100% - 40px); }
  :is(.menu-page, .about-page) .site-header .container { width: calc(100% - 40px); }
}
@media (max-width: 560px) {
  :is(.menu-page, .about-page) :is(.topbar, footer.menu-footer) .container { width: calc(100% - 32px); }
  :is(.menu-page, .about-page) .site-header .container { width: calc(100% - 32px); }
}
@media (max-width: 360px) {
  :is(.menu-page, .about-page) :is(.topbar, footer.menu-footer) .container { width: calc(100% - 24px); }
  :is(.menu-page, .about-page) .site-header .container { width: calc(100% - 24px); }
}

/* Top bar. */
:is(.menu-page, .about-page) .topbar { background: #c40018 url("/assets/images/thai-pattern.svg?v=1f5bdc1c4ae7877ad431301b0c071b0f1195b846"); border-bottom: 1px solid #ffffff1c; }
:is(.menu-page, .about-page) .topbar-inner { min-height: 32px; font-size: 12px; gap: 28px; }
@media (max-width: 1000px) {
  :is(.menu-page, .about-page) .topbar .top-aloha { display: none; }
  :is(.menu-page, .about-page) .topbar-inner { justify-content: space-between; gap: 15px; }
}
@media (max-width: 760px) {
  :is(.menu-page, .about-page) .topbar-inner { font-size: 11px; }
  :is(.menu-page, .about-page) .topbar .top-address { display: none; }
}
@media (max-width: 560px) { :is(.menu-page, .about-page) .topbar-inner { min-height: 29px; font-size: 10px; } }

/* Header. */
:is(.menu-page, .about-page) .site-header { background: #fffdf9f5; box-shadow: 0 2px 12px #5027140a; }
:is(.menu-page, .about-page) .header-inner { min-height: 96px; gap: 23px; }
:is(.menu-page, .about-page) .site-header .brand { flex: 0 0 auto; gap: 15px; }
:is(.menu-page, .about-page) .header-order { min-height: 44px; padding-inline: 22px; border-radius: 7px; }
:is(.menu-page, .about-page) .cart-toggle { min-width: 36px; padding: 7px; }
:is(.menu-page, .about-page) .cart-toggle > .icon { width: 25px; height: 25px; }
@media (max-width: 1200px) {
  :is(.menu-page, .about-page) .header-inner { gap: 15px; min-height: 86px; }
  :is(.menu-page, .about-page) .site-header .brand { gap: 11px; }
  :is(.menu-page, .about-page) .header-order { padding-inline: 17px; font-size: 12px; }
}
@media (max-width: 1000px) { :is(.menu-page, .about-page) .header-inner { min-height: 82px; } }
@media (max-width: 560px) {
  :is(.menu-page, .about-page) .header-inner { min-height: 76px; gap: 8px; }
  :is(.menu-page, .about-page) .site-header .brand { gap: 10px; }
}
@media (max-width: 1200px) { :is(.menu-page, .about-page) .cart-toggle { display: none; } }
@media (max-width: 560px) { :is(.menu-page, .about-page) .mobile-toggle { min-width: 40px; } }