/* ThaiHomeRB shared site chrome: header, mobile tab bar, footer and design tokens.
   Loaded by every page (React layout and server-rendered listing/homes/services pages),
   so all surfaces share one header and footer. Class-scoped on purpose: older global
   `header {}` / `footer {}` rules must not leak in. */
:root{
  --th-ink:#24212a;--th-ink-2:#4a4450;--th-muted:#6b6472;--th-line:#e7e3ea;--th-surface:#f8f7f9;
  --th-accent:#bd166e;--th-accent-strong:#a01259;--th-accent-ink:#8d1757;--th-accent-soft:#fbeef5;
  --th-radius:8px;--th-max:1240px;
  --th-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai","Sukhumvit Set","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
}

/* Header */
.th-header{position:sticky;top:0;z-index:40;display:block;min-height:0;padding:0;gap:0;background:#fff;border-bottom:1px solid var(--th-line);color:var(--th-ink)}
.th-header-inner{max-width:var(--th-max);height:64px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}
.th-brand{display:inline-flex;align-items:center;gap:9px;flex:none;color:var(--th-ink);font-size:22px;font-weight:700;letter-spacing:-.04em;line-height:1;text-decoration:none!important;white-space:nowrap}
.th-brand b{color:var(--th-accent)}
.th-brand-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--th-radius);background:var(--th-accent);color:#fff}
.th-nav{display:flex;align-items:stretch;align-self:stretch;gap:4px;min-width:0;margin-right:auto;flex:none;border:0;padding:0;width:auto;order:0}
.th-nav a,.th-nav button{display:inline-flex;align-items:center;gap:6px;height:64px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--th-ink-2);font:500 14px/1 var(--th-font);white-space:nowrap;cursor:pointer;text-decoration:none!important}
.th-nav a:hover,.th-nav button:hover{color:var(--th-ink)}
.th-nav [aria-current=page],.th-nav .active{color:var(--th-ink);border-bottom-color:var(--th-accent);font-weight:600}
.th-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.th-lang{display:flex;gap:2px;padding:3px;border:1px solid var(--th-line);border-radius:999px;background:#fff}
.th-lang a{padding:5px 10px;border-radius:999px;color:var(--th-ink-2);font:500 13px/1 var(--th-font);text-decoration:none!important;border:0}
.th-lang a[aria-current=page]{background:var(--th-ink);color:#fff}
.th-cta{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:0;border-radius:var(--th-radius);background:var(--th-accent);color:#fff!important;font:600 14px/1 var(--th-font);white-space:nowrap;text-decoration:none!important;cursor:pointer}
.th-cta:hover{background:var(--th-accent-strong)}
.th-header a:focus-visible,.th-header button:focus-visible,.th-header select:focus-visible,.th-tabbar a:focus-visible,.th-tabbar button:focus-visible,.th-footer a:focus-visible{outline:3px solid var(--th-accent);outline-offset:2px}

/* Mobile tab bar: primary navigation moves to the thumb zone below 1024px. */
.th-tabbar{display:none}
@media(max-width:1023px){
  .th-nav{display:none}
  .th-header-inner{height:56px;padding:0 16px;gap:12px}
  .th-brand{font-size:19px}.th-brand-icon{width:28px;height:28px}
  .th-cta{height:36px;padding:0 12px;font-size:13px}
  .th-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--th-line)}
  .th-tabbar a,.th-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 2px;border:0;background:none;color:var(--th-muted);font:500 11px/1.15 var(--th-font);text-align:center;text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .th-tabbar svg{width:22px;height:22px}
  .th-tabbar [aria-current=page],.th-tabbar .active{color:var(--th-accent)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media(max-width:520px){.th-lang a{padding:5px 7px;font-size:12px}.th-cta-label{display:none}.th-cta{width:36px;padding:0;justify-content:center}}

/* Footer */
.th-footer{display:block;margin:0;padding:48px 0 32px;background:var(--th-surface);border-top:1px solid var(--th-line);color:var(--th-muted);font:14px/1.6 var(--th-font)}
.th-footer-inner{max-width:var(--th-max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.th-footer h2{margin:0 0 10px;color:var(--th-ink);font:600 14px/1.3 var(--th-font)}
.th-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.th-footer a{color:var(--th-ink-2);text-decoration:none}
.th-footer a:hover{color:var(--th-accent-ink);text-decoration:underline;text-underline-offset:3px}
.th-footer-about p{margin:10px 0 0;max-width:30ch}
.th-footer-base{max-width:calc(var(--th-max) - 48px);width:calc(100% - 48px);margin:32px auto 0;padding-top:20px;border-top:1px solid var(--th-line);display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font-size:13px}
.th-footer-base a{color:var(--th-accent-ink);text-decoration:underline;text-underline-offset:2px}
.th-social{display:flex;gap:8px;margin-left:auto}
.th-social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--th-line);border-radius:50%;background:#fff;color:var(--th-ink-2);text-decoration:none}
.th-social a:hover{border-color:var(--th-accent);color:var(--th-accent)}
@media(max-width:860px){.th-footer-inner{grid-template-columns:1fr 1fr}.th-footer-about{grid-column:1/-1}}
@media(max-width:480px){.th-footer{padding:36px 0 24px}.th-footer-inner{padding:0 16px}.th-footer-base{width:calc(100% - 32px)}.th-social{margin-left:0}}

/* Shared small parts */
.th-note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--th-radius);background:var(--th-surface);border:1px solid var(--th-line);color:var(--th-ink-2);font:14px/1.5 var(--th-font)}
.th-note svg{flex:none;color:var(--th-accent);margin-top:1px}

/* Language switchers and selects passed into the header by individual pages. */
.th-actions .community-languages{flex:none;display:flex;flex-wrap:nowrap;gap:2px;padding:3px;border:1px solid var(--th-line);border-radius:999px;background:#fff}
.th-actions .community-languages a{padding:5px 10px;border:0;border-radius:999px;background:none;color:var(--th-ink-2);font:500 13px/1 var(--th-font);text-decoration:none!important;white-space:nowrap}
.th-actions .community-languages a:hover{color:var(--th-ink)}
.th-actions .community-languages [aria-current=page]{background:var(--th-ink);border-color:var(--th-ink);color:#fff}
.th-actions select{height:36px;padding:0 8px;border:1px solid var(--th-line);border-radius:var(--th-radius);background:#fff;color:var(--th-ink-2);font:500 13px/1 var(--th-font)}
.th-lang button{padding:5px 10px;border:0;border-radius:999px;background:none;color:var(--th-ink-2);font:500 13px/1 var(--th-font);cursor:pointer}
.th-lang button[aria-pressed=true]{background:var(--th-ink);color:#fff}
.th-nav .th-count,.th-tabbar .th-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--th-accent-soft);color:var(--th-accent-ink);font:600 11px/18px var(--th-font);text-align:center}
.th-footer p{font-size:14px}
@media(max-width:520px){.th-actions .community-languages a,.th-lang button{padding:5px 7px;font-size:12px}}
@media(max-width:400px){.th-header-inner{gap:8px}.th-actions{gap:6px}.th-brand{font-size:17px;gap:6px}}
html body{font-family:var(--th-font)}
/* Older global `header nav {}` rules must not reorder or stretch language links inside the header. */
.th-header .th-actions nav{order:0;flex:none;width:auto;align-self:center;justify-content:flex-start;gap:2px;padding:3px;border:1px solid var(--th-line);min-height:0}
.th-actions .th-cta{flex:none}
.th-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}