/* =========================================================
   Site chrome: header, phone menu, footer, phone contact dock.
   Shared by every page. Inner pages load it after styles.css, so
   rules here are scoped to their own blocks and win over the older
   generic ones (.btn, .lang-switch, h2, p).
   Markup comes from scripts/chrome-html.js.
   ========================================================= */

:root {
  --ink: #111111;
  --cream: #ece9e3;
  --cream-soft: #f3efe8;
  --cream-light: #f8f5ef;
  --pink: #f3d5d5;
  --line: rgba(17, 17, 17, 0.10);
  --c-muted: rgba(17, 17, 17, 0.68);
  --pill: 999px;
  --gut: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
  --hd-h: 72px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --c-serif: "PT Serif", "PT Serif Fallback", "PingFang TC", "Songti TC", Georgia, serif;
  --c-sans: "Satoshi", "Satoshi Fallback", "PingFang TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-padding-top: calc(var(--hd-h) + 16px); }
body { background: var(--cream-light); overflow-x: clip; }

/* the old rounded "card on cream" frame goes; pages run edge to edge */
.page { padding: 0; background: var(--cream-light); }
.shell { border-radius: 0; box-shadow: none; overflow: visible; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-en { display: none; }
html[lang^="en"] .lang-en { display: revert; }
html[lang^="en"] .lang-zh { display: none; }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--ink); color: var(--cream-light); text-decoration: none;
  font: 500 15px/1.2 var(--c-sans);
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- buttons used by the chrome ---------- */
.hd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: var(--pill); border: 1px solid transparent;
  font: 500 16px/1.2 var(--c-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.hd-btn:active { transform: scale(0.97); }
.hd-btn--sm { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.hd-btn--ink { background: var(--ink); color: var(--cream-light); }
.hd-btn--line { background: transparent; color: var(--ink); border-color: rgba(17,17,17,0.22); }
@media (hover: hover) and (pointer: fine) {
  .hd-btn--ink:hover { background: #2a2a2a; }
  .hd-btn--line:hover { border-color: var(--ink); }
}

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 50;
  height: var(--hd-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--gut);
  background: rgba(248, 245, 239, 0.86);
  font-family: var(--c-sans);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.hd.is-scrolled {
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.hd__brand { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; text-decoration: none; }
.hd__brand img { display: block; width: 96px; height: auto; }
.hd__pill {
  display: flex; gap: 2px; padding: 5px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hd__pill a {
  padding: 8px 16px; border-radius: var(--pill);
  font-size: 15px; font-weight: 500; line-height: 1.4; text-decoration: none; color: var(--ink);
  transition: background-color 200ms ease;
}
.hd__pill a[aria-current="page"] { background: var(--ink); color: var(--cream-light); }
@media (hover: hover) { .hd__pill a:not([aria-current]):hover { background: var(--cream); } }
.hd__right { justify-self: end; display: flex; align-items: center; gap: 10px; }

.hd .lang-switch, .sheet .lang-switch {
  display: inline-flex; flex: none; gap: 0; padding: 3px; margin: 0;
  border-radius: var(--pill); border: 1px solid var(--line); background: rgba(255,255,255,0.6);
}
.hd .lang-switch button, .sheet .lang-switch button {
  min-width: 40px; min-height: 34px; padding: 4px 10px; white-space: nowrap; flex: none;
  border: 0; border-radius: var(--pill); background: transparent;
  font: 500 14px/1 var(--c-sans); color: var(--c-muted); cursor: pointer; opacity: 1;
  transition: background-color 200ms ease, color 200ms ease;
}
.hd .lang-switch button.is-active, .sheet .lang-switch button.is-active { background: var(--ink); color: var(--cream-light); }
html.no-i18n .hd .lang-switch, html.no-i18n .sheet .lang-switch { display: none; }

.hd__menu {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,0.7); cursor: pointer; position: relative;
}
.hd__menu i, .hd__menu i::before {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform 260ms var(--ease-out);
}
.hd__menu i { top: 18px; }
.hd__menu i::before { content: ""; left: 0; right: 0; top: 6px; }
.hd__menu[aria-expanded="true"] i { transform: translateY(3px) rotate(45deg); }
.hd__menu[aria-expanded="true"] i::before { transform: translateY(-6px) rotate(-90deg); }

@media (max-width: 1060px) {
  .hd { grid-template-columns: 1fr auto; }
  .hd__pill { display: none; }
  .hd__menu { display: block; }
  .hd__right .lang-switch { display: none; }
}
@media (max-width: 420px) { .hd__right .hd-btn { padding: 8px 14px; } }

/* phone menu: a sheet that drops from the header */
.sheet {
  position: fixed; inset: var(--hd-h) 0 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 16px var(--gut) calc(24px + env(safe-area-inset-bottom));
  background: var(--cream-light);
  font-family: var(--c-sans);
  overflow-y: auto;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.sheet[hidden] { display: none; }
.sheet.is-closing { opacity: 0; transform: translateY(-8px); }
@starting-style { .sheet { opacity: 0; transform: translateY(-8px); } }
.sheet__nav { display: flex; flex-direction: column; }
.sheet__nav a {
  display: block; padding: 14px 0;
  font-family: var(--c-serif); font-size: 28px; line-height: 1.2; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.sheet__nav a[aria-current="page"] { font-style: italic; }
html[lang^="zh"] .sheet__nav a[aria-current="page"] { font-style: normal; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.sheet__foot { display: grid; gap: 12px; }
.sheet__foot .lang-switch { justify-self: start; }
.sheet__foot .hd-btn { width: 100%; }
html.menu-open { overflow: hidden; }

/* ---------- footer ---------- */
.ft { padding: clamp(48px, 7vw, 80px) var(--gut) 32px; background: var(--cream-light); font-family: var(--c-sans); }
.ft__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.ft__brand img { display: block; width: 104px; height: auto; }
.ft .ft__brand p { margin: 12px 0 0; color: var(--c-muted); font: italic 400 17px/1.5 var(--c-serif); }
html[lang^="zh"] .ft .ft__brand p { font-style: normal; }
.ft h2 { margin: 0 0 12px; font: 600 14px/1.4 var(--c-sans); letter-spacing: 0; color: var(--ink); }
.ft ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ft ul a { display: inline-block; padding: 5px 0; color: var(--c-muted); text-decoration: none; font-size: 15px; line-height: 1.5; transition: color 200ms ease; }
.ft ul a:hover { color: var(--ink); }
.ft .ft__bottom { max-width: var(--wrap); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--c-muted); }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }

/* ---------- phone dock ---------- */
.dock { display: none; }
@media (max-width: 700px) {
  .dock {
    position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; min-height: 54px;
    border-radius: var(--pill); background: var(--ink); color: var(--cream-light);
    font: 500 16px/1.2 var(--c-sans); text-decoration: none;
    box-shadow: 0 14px 34px rgba(17,17,17,0.28);
    transform: translateY(calc(100% + 24px)); opacity: 0;
    transition: transform 380ms var(--ease-out), opacity 300ms ease;
  }
  .dock.is-on { transform: none; opacity: 1; }
  .dock:active { transform: scale(0.97); }
  html.menu-open .dock { opacity: 0; pointer-events: none; }
  .ft { padding-bottom: 96px; }
}

/* ---------- contact rail ---------- */
.rail { position: fixed; z-index: 40; right: clamp(10px, 1.4vw, 22px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 999px; background: rgba(248,245,239,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(17,17,17,0.06), 0 12px 32px rgba(17,17,17,0.12); }
.rail a { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1); }
.rail a:hover { background: var(--ink); color: var(--cream-light); }
.rail a:active { transform: scale(0.95); }
.rail a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rail svg { width: 22px; height: 22px; display: block; }
.rail__line span, .rail__wa span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.rail__line span { background: #06C755; }
.rail__wa span { background: #25D366; }
.rail__line svg { width: 28px; height: 28px; }
.rail__wa svg { width: 25px; height: 25px; }
.rail__line:hover, .rail__wa:hover { background: transparent; }
.rail__line:hover span { background: #04a949; }
.rail__wa:hover span { background: #1ebe5d; }
.rail__th svg { width: 20px; height: 20px; }
html.menu-open .rail { opacity: 0; pointer-events: none; }
@media (max-width: 1240px) and (min-width: 701px) { .rail { gap: 4px; padding: 6px; } .rail a { width: 44px; height: 44px; } .rail__line span, .rail__wa span { width: 40px; height: 40px; } }
/* phones: LINE stays the big button, the other three sit beside it */
@media (max-width: 700px) {
  .rail { top: auto; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateY(calc(100% + 24px)); flex-direction: row; gap: 2px; padding: 3px; opacity: 0; transition: transform 380ms var(--ease-out), opacity 300ms ease; }
  .rail.is-on { transform: none; opacity: 1; }
  .rail .rail__line { display: none; }
  .rail a { width: 44px; height: 44px; }
  .rail__wa span { width: 38px; height: 38px; }
  .rail__wa svg { width: 22px; height: 22px; }
  .dock { right: 164px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .skip, .hd, .hd-btn, .hd__menu i, .hd__menu i::before, .sheet, .dock { transition-duration: 1ms !important; }
}

/* the "/ section name" labels above headings repeat the heading; the
   homepage dropped them, so the inner pages do too */
.shell .eyebrow { display: none; }
/* the nurse door in the header: a soft pink pill */
.hd-join { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-right: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--pink-soft, #f9e7e7); color: #111; font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(227,173,180,.55); transition: background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1); }
.hd-join::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9838d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-1.5-3-1-6 0-8 1 2 1.5 5 0 8zM12 12c3-1.5 6-1 8 0-2 1-5 1.5-8 0zM12 12c1.5 3 1 6 0 8-1-2-1.5-5 0-8zM12 12c-3 1.5-6 1-8 0 2-1 5-1.5 8 0z'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23c9838d'/%3E%3C/svg%3E") center / contain no-repeat; }
.hd-join:hover { background: var(--pink, #f3d5d5); color: #111; }
.hd-join:active { transform: scale(0.97); }
@media (max-width: 1360px) { .hd-join { display: none; } }