/* ============================================================
   SHARED SITE CHROME — top bar + sticky header (nav, brand, CTA,
   segment toggle), plus the cross-page rules for the floating
   overlays (offer tabs / FOMO toasts) at the bottom of this file.

   SINGLE SOURCE OF TRUTH. Two consumers, one file:
     1. Next.js routes  — src/app/globals.css @imports this file.
     2. Static pages    — public/*.html <link> it as /partials/site-chrome.css,
                          with markup from /partials/site-chrome.js.
   Edit the chrome here ONLY, so both stay aligned. Do not copy these
   rules back into a page's inline <style>.

   Depends on tokens the consumer must define (:root):
     --mp-primary --mp-primary-dark --mp-ink-2 --mp-muted --mp-soft
     --mp-line --mp-accent --mp-shadow --mp-ease --mp-font-display
     --mp-font-mono --seg
   ============================================================ */

/* Hover-lift used by .nav a:hover below and by .mp-btn:hover in globals.css.
   Defined here so the static pages (which have no globals.css) get it too. */
@keyframes mp-lift-sm { 0%{transform:translateY(0)} 65%{transform:translateY(-4px)} 100%{transform:translateY(-3px)} }

/* ---------- top bar ---------- */
.topbar { background: linear-gradient(90deg, var(--mp-primary-dark) 0%, var(--mp-primary) 100%); color: rgba(255,255,255,.85); font-size: .8125rem; }
.topbar .mp-container { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 1rem; }
.topbar a { color: #fff; font-weight: 600; }
.topbar .tb-right { display: flex; gap: 1.25rem; align-items: center; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: transparent; padding: 14px 0; transition: padding .3s var(--mp-ease); }
.nav-pill { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 60px; padding: 0 0.5rem 0 1.25rem; border-radius: 999px; background: rgba(11,28,37,0.42); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 6px 28px rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.22); transition: background 0.4s var(--mp-ease), box-shadow 0.4s var(--mp-ease), border-color 0.4s var(--mp-ease); }
.header.scrolled .nav-pill { background: rgba(255,255,255,0.92); border-color: var(--mp-line); box-shadow: var(--mp-shadow); }
.brand { display: flex; align-items: center; gap: .65rem; font-family: var(--mp-font-display); font-weight: 600; font-size: 1.15rem; }
.brand img { background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: 0 2px 10px rgba(14,30,39,.14); }
.brand small { display: block; font-family: var(--mp-font-mono); font-size: .58rem; letter-spacing: .18em; color: var(--mp-muted); text-transform: uppercase; font-weight: 500; }
.nav { display: flex; gap: 1.75rem; font-size: .9rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.4); }
.nav a { transition: transform .55s cubic-bezier(.16,1,.3,1); white-space: nowrap; }
.nav a:hover { color: var(--mp-accent); animation: mp-lift-sm .95s cubic-bezier(.16,1,.3,1) forwards; }
.header.scrolled .nav { color: var(--mp-ink-2); text-shadow: none; }
.header.scrolled .nav a:hover { color: var(--seg); }
.header-cta { display: flex; align-items: center; gap: 1rem; }

/* segment toggle */
.seg-toggle { display: inline-flex; background: var(--mp-soft); border-radius: 999px; padding: 4px; gap: 2px; border: 1px solid var(--mp-line); }
.seg-toggle button { padding: .5rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--mp-muted); transition: all .3s var(--mp-ease); }
.seg-toggle button .en { display: block; font-family: var(--mp-font-mono); font-size: .58rem; letter-spacing: .1em; opacity: .7; font-weight: 500; }
body[data-segment="b2c"] .seg-toggle button[data-seg="b2c"],
body[data-segment="b2b"] .seg-toggle button[data-seg="b2b"] { background: var(--seg); color: #fff; }

/* ---------- chrome responsive ---------- */
@media (max-width: 1120px) {
  .nav { gap: 1.2rem; font-size: .85rem; }
}
@media (max-width: 980px) {
  /* Nav wraps to its own row under the brand/CTA and becomes a swipeable
     service strip — the links stay in the DOM once, no drawer to open. */
  .nav-pill { flex-wrap: wrap; height: auto; gap: 1rem; row-gap: 0; padding: 8px 10px 0; border-radius: 22px; }
  .nav {
    order: 3;
    flex-basis: 100%;
    gap: .5rem;
    margin-top: 8px;
    padding: 8px 2px 10px;
    font-size: .82rem;
    border-top: 1px solid rgba(255,255,255,.16);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* fade the right edge so there is a visual cue more items exist */
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
  }
  .header.scrolled .nav { border-top-color: var(--mp-line); }
  .header.scrolled .nav a { background: var(--mp-soft); border-color: var(--mp-line); }
}
@media (max-width: 760px) {
  .topbar .tb-right span { display: none; }
  .seg-toggle button { padding: .45rem .75rem; font-size: .76rem; }
}
@media (max-width: 640px) {
  .header-cta .mp-btn { padding: .55rem .85rem; font-size: .82rem; }
}
@media (max-width: 460px) {
  .seg-toggle button .en { display: none; }
  .seg-toggle button { padding: .5rem .8rem; }
  .brand img { height: 34px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a:hover { animation: none; }
}

/* ---------- floating overlays: desktop + tablet only ---------- */
/* The left-edge offer tabs (訂閱優惠/葵青優惠/醫護專享優惠) and the FOMO toasts
   crowd a phone screen and sit on top of the content and the WhatsApp FAB, so
   they stop at 767px — iPad portrait (768px) and up still show them.
   Both are pure CSS (no JS timers), so display:none fully stops them.

   The `body ` prefix is load-bearing: this file is loaded BEFORE each
   consumer's own CSS, which later sets `.promo-stack { display: flex }`. A bare
   `.promo-stack` here would tie on specificity and lose on source order, so we
   take (0,1,1) to win outright — cheaper than !important or repeating this rule
   in globals.css and all four static pages. */
@media (max-width: 767px) {
  body .promo-stack,
  body .fomo { display: none; }
}

/* ---- quote form status ---------------------------------------------------
   Injected by /partials/quote-form.js after the submit button. Lives here, not
   in a page's inline <style>, so all the static pages stay in step. */
.quote-status { display: none; margin-top: 1rem; padding: .9rem 1.05rem; border-radius: 10px; font-size: .86rem; line-height: 1.6; }
.quote-status a { text-decoration: underline; font-weight: 600; }
.quote-status.is-ok { display: block; background: rgba(37, 211, 102, .14); border: 1px solid rgba(18, 140, 75, .35); color: #0B5C33; }
.quote-status.is-err { display: block; background: rgba(200, 60, 60, .1); border: 1px solid rgba(170, 45, 45, .35); color: #8A2020; }
.quote-card .quote-hint { margin: .55rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--mp-ink-2); opacity: .82; text-align: center; }