/* =========================================================
   CN LinkLight — site layer (2026-10-20)

   Additions made for the audit fixes and the new pages. Loaded after
   base.css and theme.css so it can build on both. Uses logical
   properties so the RTL switch in base.css keeps working.
   ========================================================= */

/* ---------------------------------------------------------
   Sticky mobile action bar
   ---------------------------------------------------------
   Phone visitors used to lose the contact route after the first
   screen. This keeps WhatsApp one tap away on every page.
   --------------------------------------------------------- */
.mobile-cta {
  display: none;
}

@media (max-width: 860px) {
  .mobile-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    /* Clear the iOS Safari toolbar rather than hide behind it. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 250, 247, .94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(13, 31, 38, .08);
  }

  .mobile-cta__wa,
  .mobile-cta__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-cta__wa {
    flex: 1 1 auto;
    color: #fff;
    background: #25d366;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
  }

  .mobile-cta__book {
    flex: 0 0 auto;
    padding: 0 18px;
    color: var(--teal-deep);
    background: var(--paper);
    border: 1px solid var(--line-strong, var(--line));
  }

  /* Keep the footer clear of the fixed bar. */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------
   Halal entry band on the home page
   --------------------------------------------------------- */
.section--halal { padding-block: clamp(34px, 4vw, 56px); }

.halal-band {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(24px, 3.2vw, 40px);
  background: linear-gradient(135deg, var(--teal-soft), #f2f8f5 70%);
  border: 1px solid #cfe4dc;
  border-radius: var(--r, 20px);
}

.halal-band__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.halal-band__list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: .95rem;
  color: var(--ink-soft);
}

.halal-band__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.halal-band__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.halal-band__cta .btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .halal-band { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Halal page cards
   --------------------------------------------------------- */
.halal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.halal-card {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r, 20px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13, 31, 38, .05));
}

.halal-card__ic {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.halal-card h3 {
  margin: 0 0 10px;
  font-size: 1.06rem;
  line-height: 1.35;
}

.halal-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .halal-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Honest-scope notice (halal + visa pages)
   --------------------------------------------------------- */
.notice--honest {
  padding: clamp(20px, 2.4vw, 30px);
  background: #fdf6ec;
  border: 1px solid #f0dcc0;
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--r-sm, 12px);
}

.notice--honest h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.notice--honest p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Case record (replaces the patient testimonial)
   --------------------------------------------------------- */
.case-record {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r, 20px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(13, 31, 38, .05));
  overflow: hidden;
}

.case-record__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding: 18px clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
}

.case-record__row:last-child { border-bottom: 0; }

.case-record__k {
  color: var(--teal-deep);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.case-record__v {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.7;
}

@media (max-width: 620px) {
  .case-record__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------------------------------------------------------
   Contact page: WhatsApp first on mobile
   --------------------------------------------------------- */
.page-contact .contact-grid { align-items: start; }

.wa-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 8px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, #25d366, #1bb457);
  border-radius: var(--r-sm, 12px);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .26);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}

.wa-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, .32);
}

.wa-cta__label { font-size: .82rem; font-weight: 600; opacity: .92; }

.wa-cta__num {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.wa-cta__alt {
  margin: 0 0 4px;
  font-size: .86rem;
  color: var(--ink-soft);
}

.info-hours {
  margin: 0 0 18px;
  font-size: .86rem;
  color: var(--ink-soft);
}

.info-alt {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  color: var(--ink-soft);
}

/* Mobile: lead with WhatsApp, form second. */
@media (max-width: 860px) {
  .page-contact .contact-grid {
    display: flex;
    flex-direction: column;
  }
  .page-contact .info-card--primary { order: 1; }
  .page-contact .form-card { order: 2; }
}

.form-lead {
  margin: -6px 0 20px;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.6;
}

.opt-mark {
  font-weight: 400;
  font-size: .78rem;
  color: var(--ink-soft);
  opacity: .8;
}

.field-hint {
  margin: 6px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------
   Consent checkbox (PDP Law / PIPL require an explicit act)
   --------------------------------------------------------- */
.field--consent { margin-block: 4px 18px; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}

.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}

.consent a {
  color: var(--teal-deep);
  text-decoration: underline;
}

/* ---------------------------------------------------------
   Legal pages
   --------------------------------------------------------- */
.legal {
  max-width: 820px;
  color: var(--ink-soft);
  line-height: 1.78;
}

.legal h2 {
  margin: 2em 0 .6em;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.4;
}

.legal h2:first-child { margin-top: 0; }

.legal p { margin: 0 0 1em; }

.legal ul {
  margin: 0 0 1.2em;
  padding-inline-start: 1.3em;
  display: grid;
  gap: 6px;
}

.legal li { line-height: 1.7; }

.legal a { color: var(--teal-deep); }

.legal-meta {
  margin-top: 10px;
  font-size: .84rem;
  color: var(--ink-soft);
  opacity: .85;
}

.legal-note {
  padding: 14px 18px;
  background: var(--bg-alt, #f1f5f4);
  border-radius: var(--r-sm, 12px);
  font-size: .88rem;
}

.legal-note--strong {
  margin-top: 2.4em;
  border-inline-start: 3px solid var(--line-strong, #c8d4d1);
}

.legal-foot {
  display: flex;
  gap: 12px;
  margin-top: 2em;
}

/* ---------------------------------------------------------
   Visa page
   --------------------------------------------------------- */
.visa-fact {
  display: grid;
  /* The numeral column needs a fixed basis, not "auto": with auto the
     "240" figure and the heading competed for space and overlapped. */
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(135deg, var(--teal-soft), #eef7f3 75%);
  border: 1px solid #cfe4dc;
  border-radius: var(--r, 20px);
}

.visa-fact__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  min-width: 0;
  color: var(--teal-deep);
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
}

.visa-fact__num span {
  margin-top: 6px;
  font-family: var(--sans, sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

.visa-fact__body h2 {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.35;
}

.visa-fact__body p { margin: 0 0 8px; }

.visa-fact__src {
  font-size: .82rem;
  opacity: .75;
}

.visa-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.visa-col {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r, 20px);
}

.visa-col--yes { border-top: 3px solid #2f9e6b; }
.visa-col--no  { border-top: 3px solid var(--coral, #f4715c); }

.visa-col h3 { margin: 0 0 14px; font-size: 1rem; }

.visa-col ul {
  margin: 0;
  padding-inline-start: 1.2em;
  display: grid;
  gap: 9px;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.visa-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  counter-reset: visastep;
}

.visa-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 12px);
}

.visa-step__n {
  color: var(--gold);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding-top: 2px;
}

.visa-step h3 { margin: 0 0 8px; font-size: 1rem; }

.visa-step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .visa-fact { grid-template-columns: 1fr; text-align: center; }
  .visa-fact__num { justify-self: center; }
  .visa-cols { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Footer additions
   --------------------------------------------------------- */
.footer-hours,
.footer-addr {
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
  line-height: 1.6;
}

.footer-addr { margin-top: 2px; }

/* ---------------------------------------------------------
   Hero image
   ---------------------------------------------------------
   The hero is a plain <img> pointing at the WebP (59.6 KB, down from
   2,034 KB). An earlier attempt wrapped it in <picture>, which broke
   base.css: the aspect-ratio rule targets .hero__media .media-img, and
   inside an unstyled <picture> that box collapsed to zero height.
   Every browser current enough to render this site supports WebP, so the
   PNG fallback is not worth the layout risk.

   width/height attributes are present in the markup, so the browser
   reserves the box before the file arrives (no CLS).
   --------------------------------------------------------- */
.hero__media .media-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Logo chips (now translated, so allow less rigid text)
   --------------------------------------------------------- */
.logo-chip {
  line-height: 1.45;
  word-break: break-word;
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wa-cta { transition: none; }
  .wa-cta:hover { transform: none; }
}

/* ---------------------------------------------------------
   Header: room for the two new nav items
   ---------------------------------------------------------
   Adding "Halal & Muslim travellers" and "Visa" pushed the nav wider than
   the available space at 1440px: the links were clipped and the primary
   button wrapped onto two lines.

   Fixes, in order of effect:
     · the nav links shrink and scroll instead of wrapping;
     · the CTA labels keep one line and use tighter inline padding;
     · the brand mark and language pill are explicitly unshrinkable;
     · below 1240px the burger menu takes over, because eight labels plus a
       language switcher cannot fit a smaller header honestly.
   --------------------------------------------------------- */
.site-header .wrap.nav {
  flex-wrap: nowrap;
  gap: clamp(8px, 1vw, 18px);
}

.site-header .brand { flex: 0 0 auto; }

.site-header .nav-links {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: clamp(10px, 1.1vw, 22px);
}

/* Nine labels plus a language switcher is the ceiling at 1440px; one notch
   down on the type size is what makes it fit without clipping. */
.site-header .nav-links a { font-size: clamp(.8rem, .82vw, .9rem); }

.site-header .nav-links::-webkit-scrollbar { display: none; }

.site-header .nav-links a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.site-header .nav-cta {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.site-header .nav-cta > .btn {
  white-space: nowrap;
  padding-inline: clamp(9px, .9vw, 16px);
  font-size: clamp(.76rem, .8vw, .84rem);
}

.site-header .lang-switch { flex: 0 0 auto; }

/* base.css already collapses the nav into the burger menu at 880px. Do not
   re-show it at any width below that: the open state inherits the mobile
   drawer styling from base.css and must not be overridden here. */

/* ---------------------------------------------------------
   Hero stats
   ---------------------------------------------------------
   base.css lays these out as a wrapping flex row with a 34px inline
   padding and a trailing rule on every cell. Adding a third long label
   ("Guangzhou share of Guangdong's pilot hospitals") made the third cell
   overflow into the second.

   Restated as a three-column grid that keeps the divider styling, gives
   each cell an equal share, and lets the labels wrap inside their own box.
   --------------------------------------------------------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  align-items: start;
}

.hero__stat {
  min-width: 0;
  padding-inline-end: 0;
  margin-inline-end: 0;
  border-inline-end: 0;
}

/* Put the divider back as a border on the first two cells only, so it
   cannot sit on top of the text. */
.hero__stats .hero__stat:not(:last-child) {
  padding-inline-end: clamp(14px, 2vw, 30px);
  border-inline-end: 1px solid var(--line);
}

.hero__stat .n {
  white-space: nowrap;
  line-height: 1.15;
}

.hero__stat .l {
  margin-top: 5px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .hero__stats .hero__stat:nth-child(3) { grid-column: 1 / -1; padding-inline-end: 0; border-inline-end: 0; }
  .hero__stats .hero__stat:nth-child(2) { padding-inline-end: 0; border-inline-end: 0; }
}
/* ---------------------------------------------------------
   Mobile overflow guard
   ---------------------------------------------------------
   At 390px the hero heading and the CTA buttons ran past the right edge,
   so the page scrolled horizontally and text was clipped. The cause is
   fixed minimums in base.css that were sized for a 1440px layout.
   --------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 620px) {
  .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); overflow-wrap: break-word; }
  .hero__sub { font-size: .95rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__media .media-img { aspect-ratio: 4 / 3.4; }
  .wrap { padding-inline: clamp(16px, 5vw, 24px); }
}

/* ---------------------------------------------------------
   Sticky action bar: two buttons, both visible
   ---------------------------------------------------------
   The consultation link was being pushed off the right edge because the
   WhatsApp button had flex: 1 1 auto with no upper bound and its label could
   not shrink. Give both a sane basis and let the label ellipsis instead of
   overflowing.
   --------------------------------------------------------- */
.mobile-cta__wa,
.mobile-cta__book {
  min-width: 0;
  overflow: hidden;
}

.mobile-cta__wa span,
.mobile-cta__book {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .mobile-cta__wa   { flex: 1 1 58%; font-size: .92rem; }
  .mobile-cta__book { flex: 1 1 38%; padding-inline: 10px; }
}

@media (max-width: 380px) {
  .mobile-cta { gap: 6px; padding-inline: 8px; }
  .mobile-cta__wa   { flex: 1 1 auto; }
  .mobile-cta__book { flex: 0 0 auto; padding-inline: 12px; }
}

/* The burger button must stay tappable above the sticky bar. */
/* ---------------------------------------------------------
   Mobile overflow guard (breakpoints follow base.css: 880 / 620)
   ---------------------------------------------------------
   At 390px the page still scrolled sideways. Cause: `.hero__title` has
   `max-width: 13ch` with a 10.5vw font, so at 390px a single long word
   ("World-class") could exceed the 350px content column. Constrain the
   column and allow the word to break rather than push the layout.
   --------------------------------------------------------- */
@media (max-width: 620px) {
  .hero__title {
    max-width: 100%;
    font-size: clamp(2rem, 9.2vw, 2.75rem);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .hero__actions { display: flex; flex-direction: column; gap: 10px; }
  .hero__actions .btn { width: 100%; }
  .lead, .hero__sub, .muted { max-width: 100%; }
  .h2 { overflow-wrap: break-word; }
  .facts, .stats-row, .spec-grid, .svc-grid, .values, .process { max-width: 100%; }
}

/* Sticky bar: two buttons, both on screen. */
.mobile-cta__wa,
.mobile-cta__book { min-width: 0; }

.mobile-cta__wa > span,
.mobile-cta__book {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .mobile-cta__wa   { flex: 1 1 60%; }
  .mobile-cta__book { flex: 1 1 36%; padding-inline: 10px; }
}

@media (max-width: 380px) {
  .mobile-cta { gap: 6px; padding-inline: 8px; }
  .mobile-cta__book { flex: 0 0 auto; padding-inline: 12px; }
}