/* Rules every page needs, including the home page (site-chrome.css is not loaded on Home). Linked by sync-site-chrome. */

/* Restaurant name and slogan beside the header logo. */
body .site-header #header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
body .site-header #header-logo { flex: none; }
body .site-header #header-brand .header-wordmark { display: block; min-width: 0; text-align: left; }
body .site-header #header-brand .header-wordmark strong { display: block; font-family: 'El Messiri', Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: 0; color: #ca001b; }
body .site-header #header-brand .header-wordmark small { display: block; margin-top: 5px; font-size: 17.7px; font-weight: 500; line-height: 1.35; letter-spacing: 0; white-space: nowrap; color: #7a4a14; }
@media (min-width: 1101px) and (max-width: 1439px) {
  body .site-header #header-brand .header-wordmark { max-width: 185px; }
  body .site-header #header-brand .header-wordmark strong { font-size: 22px; }
  body .site-header #header-brand .header-wordmark small { font-size: 13.9px; }
}
@media (max-width: 560px) {
  body .site-header #header-brand { gap: 8px; flex: 1 1 auto; }
  body .site-header #header-brand .header-wordmark strong { font-size: 18px; }
  body .site-header #header-brand .header-wordmark small { margin-top: 4px; font-size: 11.4px; }
}
@media (max-width: 360px) {
  body .site-header #header-brand { gap: 6px; }
  body .site-header #header-brand .header-wordmark strong { font-size: 16px; }
  body .site-header #header-brand .header-wordmark small { font-size: 10.1px; }
}

/* The owner's red-and-gold yaksha artwork on inner pages. Home has no side borders. */
@media (min-width: 1000px) {
  body:not(.home-page) { --yaksha-border-width: clamp(128px, 14vw, 260px); }
  body:not(.home-page)::before, body:not(.home-page)::after {
    content: ""; position: fixed; top: 0; bottom: 0; z-index: 1; pointer-events: none;
    width: var(--yaksha-border-width);
    background-color: #aa0b1a;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
  }
  body:not(.home-page)::before { left: 0; background-image: url("/assets/images/thai-yaksha-left.webp?v=5cd815a1b3b79ad66898663efaa6c94857056a0a"); background-position: left center; }
  body:not(.home-page)::after { right: 0; background-image: url("/assets/images/thai-yaksha-right.webp?v=5ce260363bf09d839cc2e8b18ce08c666ff6a7a8"); background-position: right center; }
  body:not(.home-page) > main, body:not(.home-page) > footer.menu-footer {
    width: calc(100% - 2 * var(--yaksha-border-width)); max-width: none;
    margin-inline: var(--yaksha-border-width);
  }
}
body.home-page::before, body.home-page::after { content: none; }
@media print { body::before, body::after { display: none; } }

/* Brand block at the top of the ordering dialogs: the seal plus the shop name in the site font. */
.dialog-lockup { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto; text-align: left; }
.dialog-lockup img { width: 84px; height: auto; flex: none; }
.dialog-lockup strong { display: block; font-family: 'El Messiri', Georgia, serif; font-size: 36px; line-height: 1.05; font-weight: 700; color: #ca001b; letter-spacing: .2px; }
.dialog-lockup small { display: block; margin-top: 5px; font-family: 'El Messiri', Georgia, serif; font-size: 16px; font-weight: 500; color: #7a4a14; letter-spacing: .4px; }
@media (max-width: 560px) { .dialog-lockup { gap: 10px; } .dialog-lockup img { width: 56px; } .dialog-lockup strong { font-size: 24px; } .dialog-lockup small { font-size: 12px; } }
.dialog-lockup.wide img { width: auto; height: 78px; max-width: 280px; }
.dialog-lockup.wide > div { display: none; }

/* How many times a dish has been ordered, bottom right of its photo on the menu. */
.dish-photo-button { position: relative; }
.dish-photo-button .order-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: #3a0d12e6; color: #fff; font-size: 13px; line-height: 1.2; font-weight: 500; box-shadow: 0 2px 8px #0004; pointer-events: none; }
.dish-photo-button .order-count b { color: #ffd27d; font-weight: 700; font-size: 14px; }

/* Compact shared footer; fixed contacts sit beside the last links. */
body footer.menu-footer {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 0%, #ac071b 0%, #670816 52%, #26040c 100%);
  color: #fff8e8;
  border-top: 1px solid #cba052;
  padding: 38px 0 32px;
}
body footer.menu-footer::after {
  content: none;
}
/* Home retains its original ornamental footer; inner pages omit the image. */
body.home-page footer.menu-footer {
  --footer-pattern-height: 110px;
  padding-bottom: calc(var(--footer-pattern-height) + 16px);
}
body.home-page footer.menu-footer::after {
  content: ''; position: absolute; inset: auto 0 0;
  bottom: var(--footer-orderbar-height, 0px);
  height: var(--footer-pattern-height);
  background: #42040e url("/assets/images/footer-thai-gold.webp?v=009b038b84716554861c226c5ab5844116c0e4fa") center bottom / auto 100% repeat-x;
  pointer-events: none; z-index: 0;
}
body footer.menu-footer > .container { position: relative; z-index: 1; }
body footer.menu-footer .footer-wave { display: none; }
body footer.menu-footer .footer-contact { color: #fff8e8; border-color: #d1a85866; }
body footer.menu-footer .footer-contact .icon { color: #efc87c; }
body footer.menu-footer .footer-follow > p,
body footer.menu-footer .footer-aloha { color: #f3d59b; }
body footer.menu-footer .menu-footer-bottom { border-color: #d1a85866; color: #fff5df; }
body footer.menu-footer .menu-footer-bottom :is(small, a) { color: #fff5df; }
body footer.menu-footer a:focus-visible { outline: 3px solid #f3d59b; outline-offset: 4px; }
body.home-page footer.menu-footer .menu-footer-bottom { padding-right: 148px; }
@media (max-width: 999px) {
  body footer.menu-footer .menu-footer-bottom {
    min-height: 132px;
    padding-right: 148px;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
@media (max-width: 560px) {
  body footer.menu-footer {
    padding-top: 28px;
    padding-bottom: calc(var(--footer-orderbar-height, 60px) + 20px);
  }
  body.home-page footer.menu-footer {
    --footer-pattern-height: 90px;
    padding-bottom: calc(var(--footer-pattern-height) + 16px + var(--footer-orderbar-height, 60px));
  }
}