/* English-locale visual redesign, loaded only on /en/ pages, after
   style.css. Every rule here is scoped under :is(html[lang="en"], html[lang="vi"], html[lang="id"]) so it can
   never leak onto zh/zh-cn/vi/id, which keep the site's original serif
   green design untouched. Structure, interactivity and data (nav markup,
   BUILD-marker regions, subscribe/share/booking-switch/lang-switch,
   article/category data) are all still generated by the shared
   scripts/build.js pipeline and shared assets/js scripts; this file only
   restyles them for English, mostly by overriding the same color, font and
   radius custom properties every component already consumes, so the
   reskin cascades for free instead of needing a rule per component.
   See CLAUDE.md ("English design system") for the future-article workflow. */

/* ---------- Design tokens ---------- */

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) {
  --wide-max: 1200px;
  --radius: 8px;
  /* No web fonts: system-ui/Segoe UI/Arial only, per the design brief. This
     single override reskins every heading, eyebrow and label site-wide for
     English, since style.css's components all read --font-serif/--font-mono
     rather than hard-coding a family. */
  --font-serif: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Colors used to be overridden here too (English's navy/blue palette vs.
   zh/zh-cn's separate dark-green one). The 2026-09 site-wide color
   unification made English's palette the shared one for every locale —
   see style.css's :root / html[data-color-mode="light"] / the no-JS
   @media(prefers-color-scheme:light) fallback, which are now the single
   source of truth for --color-bg/-surface/-ink/-text/-sub/-line/-accent/
   -accent-hover/-accent-fill/-accent-ink/-amber in both light and dark
   mode. Don't reintroduce a color override block here — every locale reads
   the same tokens now, which is the whole point; duplicating them here
   would just risk the two copies drifting apart again. */

/* ---------- Type ---------- */

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) h1,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) h2,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .logo,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .section-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .feature-story-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .side-story-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .quote-story-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .team-main-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .team-list-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .education-grid h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .related-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .faq-heading,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .subscribe-block-heading,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .notice-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-feature-body h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-lecture-body h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-news-card h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-coverage h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-topic-note h3,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-section-head h2,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-intro-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page-card-hospital {
  font-weight: 700;
  letter-spacing: -0.03em;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .post-content h2,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .post-content h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Section headings inside the About page's prose ("Training & Experience",
   "Why I Started This Page") should read as the same kind of label as the
   credential-columns' "Current Position"/"Education" headings right above
   them, not switch to plain body-text color. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .post-content h2 {
  color: var(--color-accent);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .section-eyebrow,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-eyebrow,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .post-category,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .related-category,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .friend-links-label,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .subscribe-block-label,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .related-heading {
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ---------- Header / nav ---------- */
/* Two rows, like the original design brief's masthead + primary-nav: the
   logo, the one "essential" action (Book an Appointment) and the hamburger
   live in the top row; everything else (the six section links, LINE,
   language, share) lives in .site-nav, always forced onto its own row via
   flex-basis, and hidden behind the hamburger below ENGLISH_BREAKPOINT
   (860px, see assets/js/mobile-nav.js) so a phone never has to scroll past
   a wall of wrapped nav links before reaching the page's actual content.
   Above that width .site-nav shows inline as normal — nothing is ever
   permanently hidden, just collapsed behind a toggle on narrow screens. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header {
  padding: 10px 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header .container {
  max-width: 1300px;
  gap: 10px 16px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .tagline {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  font-weight: 600;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-nav {
  flex-basis: 100%;
  padding-top: 8px;
  gap: 10px 20px;
}

/* Booking lives permanently in the masthead row for English (not lifted
   in/out by JS like the other locales), so the collapsed-nav rules meant
   for a booking button stacked inside the vertical mobile menu don't apply
   to it here — reset back to a normal inline header button. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .booking-switch {
  order: 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .booking-switch-toggle {
  width: auto;
  margin-top: 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .booking-switch-menu {
  position: absolute;
  margin-top: 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .booking-switch-menu a {
  text-align: left;
}

/* Language and share are secondary, so they read as quiet text links, not
   pill buttons competing with the six primary section links next to them. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .lang-switch-toggle,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-share-toggle {
  border: none;
  padding: 4px 0;
  min-height: 32px;
  color: var(--color-sub);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .lang-switch-toggle:hover,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-share-toggle:hover {
  color: var(--color-accent);
  border-color: transparent;
}

@media (max-width: 860px) {
  /* Higher specificity than style.css's generic .nav-collapsed .lang-switch
     { order: -1 } (which pulls these to the top of the stacked mobile
     menu for other locales) — for English they should read as low-key,
     after the primary links and LINE, not compete for first position. */
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .lang-switch,
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-header.nav-collapsed .site-share {
    order: 1;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .lang-switch-toggle,
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .site-share-toggle {
    width: auto;
    justify-content: flex-start;
  }
}

/* ---------- Home hero / profile hero: name as the headline ---------- */
/* Keeping the complete name on one line, at any width, including with
   "MD, PhD" attached — container query sizing rather than a fixed clamp,
   so the font shrinks to whatever room the column actually has instead of
   guessing a breakpoint. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-copy,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-intro-head {
  min-width: 0;
  container-type: inline-size;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-title,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-header h1 {
  font-size: clamp(1.7rem, 8.5cqi, 3.4rem);
  line-height: 1.15;
  text-wrap: unset;
  word-break: normal;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .full-name {
  white-space: nowrap;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .name-degrees {
  display: inline-block;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
  margin-left: 0.25em;
  color: var(--color-sub);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-specialty,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-specialty {
  margin: 10px 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-accent);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-affiliation {
  display: block;
  margin-top: 28px;
  padding-left: 16px;
  border-left: 3px solid var(--color-accent);
  font-size: 0.85rem;
  color: var(--color-ink);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-affiliation small {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--color-sub);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-visual {
  border-radius: 14px;
  background: var(--color-surface-raised);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-visual-caption {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-visual-caption span {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* The rest of the site reorders the photo above the copy under 900px;
   English keeps the name/specialty/intro first so the photo never buries
   who-this-is above the fold on a phone. */
@media (max-width: 900px) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-visual {
    order: 0;
  }
}

/* ---------- Buttons / links ---------- */

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-actions .button,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-switch-toggle,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .subscribe-submit,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .media-btn,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .line-cta {
  border-radius: 7px;
  font-weight: 700;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .hero-actions .button {
  border-width: 1px;
}

/* ---------- Category sections ---------- */

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .feature-story,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .team-main img,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .notice-banner,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page-card,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-toc,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .subscribe-block {
  border-radius: 12px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .feature-story-image {
  border-radius: 12px 12px 0 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .feature-story-image img {
  border-radius: 12px 12px 0 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .feature-story-badge {
  border-radius: 999px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .side-story img {
  border-radius: 10px;
}

/* ---------- Article layout: reading rail ---------- */
/* New for English only — a slim sidebar naming the section/author, echoing
   a magazine byline column. Purely decorative/orientational; every link
   inside it points at real site URLs. Falls back to a single column below
   1050px, same breakpoint style.css already uses for other 2-column article
   chrome. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail {
  padding-top: 36px;
  font-size: 0.85rem;
  color: var(--color-sub);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail .eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-category {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-line);
  margin: 18px 0;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-author {
  display: block;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-author:hover {
  color: var(--color-accent);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-role {
  display: block;
  margin: 2px 0 18px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail-back {
  display: inline-block;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.85rem;
}

/* Only above 1050px, where .article-layout is an actual two-column grid
   and the second column IS the content box (so .post doesn't need its own
   side padding on top of the grid's own gap/margin). Below that the grid
   collapses to a plain block (see the media query right below) and .post
   is once again the outermost box on the page, so it must keep real side
   padding — a P1 bug here previously left English article text running
   edge-to-edge with zero margin at 390px. */
@media (min-width: 1051px) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-layout .post {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    max-width: none;
  }
}

@media (max-width: 1050px) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-layout {
    display: block;
    max-width: none;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-rail {
    display: none;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .article-layout .post {
    padding: 28px var(--reader-post-padding-x, 20px) 48px;
    max-width: none;
  }
}

/* ---------- About page ---------- */
/* .profile-post/.article-toc/.profile-intro-text are now shared (style.css)
   since vi/id also use the grouped-experience About layout — see there.
   Only the things that are genuinely English-specific stay here: the wider
   photo column and the (English-only) eyebrow label. */
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-header {
  grid-template-columns: 280px 1fr;
  gap: 56px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-photo-frame,
:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-photo {
  border-radius: 14px;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 10px;
}

/* .credential-columns/.training-group/.training-label moved to the shared
   style.css (2026-09 multilingual audit) — vi/id's About pages now use the
   same grouped-experience structure as English, so the rules can't stay
   English-only. See style.css for the actual declarations. */

@media (max-width: 900px) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-header {
    grid-template-columns: 1fr;
  }

  /* Name, credentials and intro must appear before the photo on a phone —
     otherwise a tall portrait pushes the doctor's own name off the first
     screen. Desktop keeps photo-then-text (unchanged, no order set there). */
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-header > div:first-child {
    order: 2;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .profile-intro-head {
    order: 1;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .credential-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------- Utility pages (booking) ---------- */

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page {
  max-width: 720px;
  width: calc(100% - 40px);
  margin: 40px auto;
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page h1 {
  font-size: clamp(2rem, 6vw, 2.8rem);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page .clinic-reminder {
  padding: 14px 0 0;
  margin: 14px 0 0;
  border-top: 1px solid var(--color-line);
}

:is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-page .clinic-reminder:first-of-type {
  margin-top: 24px;
}

@media (max-width: 420px) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .logo {
    font-size: 1.05rem;
  }

  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) .booking-switch-toggle {
    padding: 9px 14px;
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(html[lang="en"], html[lang="vi"], html[lang="id"]) * {
    transition: none !important;
  }
}