/* ============================================================
   footer.css — the homepage's big footer for pages without /ui-kit.css:
   MERPY and Marcade (gnav.js buildFooter). A COPY of "SHARED BIG FOOTER" in
   /ui-kit.css; keep in sync.
   notch, the CHAMIZ wordmark and Mali in sunglasses. index.html has it
   in its markup; on MaliBills and MaliTrip gnav.js swaps each page's
   small footer.site-footer for it. Copied from home.css; keep in sync.
   ============================================================ */
footer.hm-foot {
  --hm-dark: #1c130e;
  --hm-dark-2: #2a1d16;
  --hm-on-dark: #fbeee0;
  --hm-on-dark-muted: #c8ae9b;
  --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-spring: cubic-bezier(0.34, 1.2, 0.5, 1);
  --hm-pixel: "Inter", "SukhumvitSet", var(--font-body);   /* big display type (was Pixelify Sans) */
  --hm-ws: clamp(52px, 19.2vw, 330px);           /* wordmark size */
  color: var(--text);
  overflow-x: clip;
  min-width: 0; max-width: 100%; width: 100%;
}
html[data-theme="dark"] footer.hm-foot {
  --hm-dark: #0b0705;
  --hm-dark-2: #221913;
}
.hm section { padding: 0; }                       /* style.css pads every <section> */
footer.hm-foot img { display: block; max-width: 100%; height: auto; }
footer.hm-foot .hm-in { width: min(1240px, 100% - 40px); margin-inline: auto; }
html body footer.hm-foot {
  position: relative; background: var(--hm-dark); color: var(--hm-on-dark); border: 0; text-align: left;
  padding: 0; margin: 0; overflow: hidden; font-family: var(--font-body);
}
html[data-theme="dark"] body footer.hm-foot { --hm-dark: #0b0705; }
.hm-notch { position: absolute; left: 50%; top: -1px; width: 220px; height: 46px; transform: translateX(-50%); color: var(--bg); z-index: 2; }
.hm-foot-top { display: flex; justify-content: flex-end; gap: 16px; padding: 26px 0 0; font-size: 12.5px; color: var(--hm-on-dark-muted); font-weight: 600; }
.hm-foot-top .heart { color: var(--accent); }
.hm-foot-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: end;
  padding-top: clamp(40px, 6vw, 70px);
}
.hm-foot-word { position: relative; }
.hm-ready { font-size: clamp(18px, 2.4vw, 28px); font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: -.01em; }
.hm-foot-word .hm-word2 {
  font-family: var(--hm-pixel); font-weight: 900; font-size: clamp(64px, 12.5vw, 200px); line-height: .84; letter-spacing: -0.055em;
  color: var(--hm-on-dark); white-space: nowrap; margin-top: 6px; user-select: none;
}
.hm-foot-word .hm-word2 .z { color: var(--accent); }
.hm-foot-word img {
  position: absolute; left: 46%; bottom: 0; width: clamp(160px, 25vw, 350px); transform: translate(-50%, 6%);
  filter: drop-shadow(0 0 1.5px rgba(251, 238, 224, .9)) drop-shadow(0 0 28px rgba(255, 75, 43, .22));
}
.hm-foot-side { padding-bottom: clamp(36px, 5vw, 64px); }
.hm-foot-side h3 { font-size: 20px; font-weight: 900; line-height: 1.15; text-transform: uppercase; }
html[lang="th"] .hm-foot-side h3 { text-transform: none; }
.hm-socials { display: flex; gap: 10px; margin: 16px 0 22px; }
.hm-socials a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hm-dark-2); border: 1.5px solid rgba(255, 228, 200, .25);
  transition: transform 320ms var(--hm-spring), background 200ms var(--hm-ease);
}
.hm-socials a:hover { transform: translateY(-4px); background: var(--accent); }
.hm-socials img { width: 26px; height: 26px; }
.hm-foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hm-foot-links a { font-size: 13px; font-weight: 700; color: var(--hm-on-dark-muted) !important; text-decoration: none; }
.hm-foot-links a:hover { color: var(--hm-on-dark) !important; }
/* the tool row (2026-10-10): every tool by what it does, above the site links */
.hm-foot-tools { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 228, 200, .14); }
.hm-foot-tools a { color: var(--hm-on-dark) !important; font-size: 13.5px; }
html body footer.hm-foot .hm-foot-top > span { color: var(--hm-on-dark-muted); font-weight: 600; }
html body footer.hm-foot .hm-foot-top > span span { color: var(--accent); font-weight: 700; }
html body footer.hm-foot .hm-foot-word span { font-weight: inherit; }
@media (max-width: 960px) { footer.hm-foot .hm-foot-main { grid-template-columns: 1fr; } footer.hm-foot .hm-foot-side { padding-bottom: 40px; } }
@media (max-width: 760px) { footer.hm-foot .hm-foot-word img { left: 62%; } }
@media (max-width: 520px) { footer.hm-foot .hm-foot-top { flex-direction: column; gap: 4px; padding-top: 50px; } }
/* app pages: keep the footer clear of the phone tab bar, and full width */
html.has-bn footer.hm-foot, footer.hm-foot { margin: 0 !important; width: auto; max-width: none; }
@media (max-width: 700px) { footer.hm-foot { padding-bottom: 76px !important; } }
/* each app's own p / h3 / footer rules must not thin the big footer's type */
html body footer.hm-foot .hm-word2 { font-family: "Inter", "SukhumvitSet", sans-serif !important; font-weight: 900 !important; letter-spacing: -0.055em !important; margin: 6px 0 0 !important; }
html body footer.hm-foot .hm-ready { font-weight: 900 !important; margin: 0 !important; }
html body footer.hm-foot .hm-foot-side h3 { font-weight: 900 !important; color: var(--hm-on-dark) !important; margin: 0 !important; }
html body footer.hm-foot p { line-height: normal; }

/* Fallback page transitions for browsers without cross-document View
   Transitions (gnav.js): the header, its overlay and the tab bar never move. */
html.cz-enter body > .bh, html.cz-enter body > .bh-overlay, html.cz-enter body > .ms-bottomnav { animation: none !important; }
html.cz-leave body > :not(.bh):not(.bh-overlay):not(.ms-bottomnav):not(script) {
  opacity: 0; transform: translateY(-8px);
  transition: opacity 220ms cubic-bezier(.4, 0, 1, 1), transform 220ms cubic-bezier(.4, 0, 1, 1);
}

/* Merpy-style page transitions (2026-10-03, gnav.js): the browser's View
   Transition is now only a quick swap (old page fades out, new page shows
   at once, header + tab bar still); gnav.js then slides the new page's
   blocks in from the side you're heading towards, staggered, like
   Merpy's tabs. html.cz-pre holds the content invisible until then. */
html.cz-pre body > :not(.bh):not(.bh-overlay):not(.ms-bottomnav):not(.uk-toast-wrap) { opacity: 0 !important; }
html.cz-leave body > :not(.bh):not(.bh-overlay):not(.ms-bottomnav):not(script) { transition: opacity 300ms cubic-bezier(.65, 0, .35, 1), transform 300ms cubic-bezier(.65, 0, .35, 1) !important; }


/* phones keep each page's own footer (or none); the big one is desktop only */
@media (max-width: 700px) { footer.hm-foot { display: none !important; } }
/* Marcade (gnav.js data-footer-only): the big footer sits beside the page's
   small one; desktop shows the big one, phones the small one */
@media (min-width: 701px) { html.ft-only footer.site-footer { display: none !important; } }