/*
 * public-foundation.css
 * ---------------------------------------------------------------------------
 * Single source of truth for the PUBLIC site (.public-site).
 *
 * Why this file exists:
 *   _layout.ftlh loads, in order:
 *     app.css -> page css -> institutional-theme.css -> site-shell.css
 *     -> hotline.css -> optional late page css -> public-foundation.css
 *   app.css and institutional-theme.css contain UNSCOPED public rules that leak
 *   through and fight site-shell (three font stacks, three button radii, mixed
 *   card corners). This file is loaded LAST and scoped to .public-site so it
 *   wins the cascade and enforces ONE coherent system. It does NOT delete or
 *   rewrite any existing stylesheet; it only re-asserts canonical values.
 *
 * Safe by construction:
 *   - Every rule is scoped under .public-site.
 *   - Search / header-search controls keep their bespoke pill geometry because
 *     site-shell styles them with HIGHER specificity (so they win automatically)
 *     and any residual override is restored explicitly further down.
 *   - A single multilingual sans stack is used for every visible UI role;
 *     code and preformatted content remain monospace.
 *   - No descendant selectors inside :not() (kept valid in all browsers).
 * ---------------------------------------------------------------------------
 */

.public-site {
  /* Canonical typography */
  --font-sans: "Inter", "Noto Sans SC", "Noto Sans", "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, system-ui, sans-serif;
  --font-head: var(--font-sans);

  /* Multilingual type scale and spacing rhythm */
  --type-page-title: clamp(22px, 1.7vw, 24px);
  --type-section-title: clamp(18px, 1.35vw, 20px);
  --type-hero-title: clamp(32px, 3.8vw, 48px);
  --type-card-title: 18px;
  --type-body: 16px;
  --type-supporting: 14px;
  --type-control: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Canonical shape & rhythm (was 2px in app/institutional, mixed elsewhere) */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.7;
  color: var(--site-ink, #0d2b55);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:lang(mn) .public-site {
  font-family: "Noto Sans", "Segoe UI", Arial, var(--font-sans);
  line-height: 1.78;
}

/* One font everywhere (kills Arial / Arial Narrow / Georgia leaks on public). */
.public-site,
.public-site input,
.public-site textarea,
.public-site select,
.public-site button {
  font-family: var(--font-sans);
}

.public-site :where(
  h1, h2, h3, h4, h5, h6,
  p, a, span, strong, b, em, small,
  li, dt, dd, label, legend, summary,
  button, input, select, textarea, th, td
) {
  font-family: var(--font-sans) !important;
}

.public-site :where(code, pre, kbd, samp) {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

.public-site p,
.public-site li,
.public-site dd,
.public-site dt,
.public-site label,
.public-site legend,
.public-site td,
.public-site th {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
 * Headings: one family, one weight rhythm.
 * Specific, higher-specificity sections below keep their own sizes.
 */
.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site h5,
.public-site h6,
.public-site .section-title,
.public-site .hero-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--site-ink, #0d2b55);
}
.public-site h1,
.public-site .hero-title { font-size: var(--type-page-title); line-height: 1.34; }
.public-site h2,
.public-site .section-title { font-size: var(--type-section-title); line-height: 1.42; }
.public-site h3 { font-size: 18px; line-height: 1.48; }
.public-site h4 { font-size: 17px; line-height: 1.5; }
.public-site h5,
.public-site h6 { font-size: 16px; line-height: 1.55; }

body.public-site main :is(h1, .hero-title) {
  font-size: var(--type-page-title);
  line-height: 1.34;
}

body.public-site main :is(h2, .section-title) {
  font-size: var(--type-section-title);
  line-height: 1.42;
}

/* Size follows visual role, so the same role is consistent across every page. */
.public-site main section[class*="hero"] :is(h1, h2),
.public-site main :is(.page-hero, .dashboard-head, .resource-detail-header, .auth-aside, .ref-carousel-content) :is(h1, h2) {
  font-size: var(--type-hero-title) !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em;
}

/* Article detail: keep the semantic H1 visually prominent on its dark masthead. */
.public-site .news-detail-hero {
  border-bottom: 5px solid #f4b400;
  background: linear-gradient(115deg, #062b63 0%, #083f91 62%, #0b62b1 100%);
}

.public-site .news-detail-hero h1 {
  max-width: 1040px;
  margin: 18px 0 16px;
  color: #fff;
  font-weight: 850;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0, 24, 61, .28);
}

.public-site .news-detail-hero .back-link {
  color: #fff;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .52);
  text-underline-offset: 5px;
}

.public-site .news-detail-hero p {
  margin: 0;
  color: #e8f1ff;
  font-size: .95rem;
  font-weight: 650;
}

@media (max-width: 600px) {
  .public-site .news-detail-hero h1 {
    margin-top: 14px;
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    line-height: 1.22 !important;
    text-wrap: pretty;
  }
}

/* Cost guide (index + detail): bespoke dark masthead. Same story as
 * news-detail-hero above — the generic .page-hero blue (institutional-theme)
 * and the generic heading ink color would paint the title dark-on-dark, so
 * re-assert the page's own navy gradient and light text here. */
.public-site .cost-guide-hero,
.public-site .cost-guide-detail-hero {
  background: linear-gradient(160deg, #0a1f38 0%, #06182b 100%);
  color: #fff;
}
.public-site .cost-guide-hero h1,
.public-site .cost-guide-detail-hero h1 {
  max-width: 1040px;
  margin: 0 0 .8rem;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 12, 30, .3);
}
.public-site .cost-guide-hero .back-link,
.public-site .cost-guide-detail-hero .back-link {
  color: rgba(255, 255, 255, .72);
  font-weight: 650;
}
.public-site .cost-guide-hero .back-link:hover,
.public-site .cost-guide-detail-hero .back-link:hover {
  color: #d7b56d;
}

.public-site main :is(article, .card, .panel, .resource-card, .news-card) :is(h2, h3) {
  font-size: var(--type-card-title);
  line-height: 1.45;
}

/* Keep the same multilingual sans stack in editorial and directory sections. */
.public-site .formatted-content h2,
.public-site .formatted-content h3,
.public-site .formatted-content h4,
.public-site .doctor-directory-header h1 {
  font-family: var(--font-head);
}

/* Consistent vertical rhythm for stacked sections. */
.public-site .section + .section { margin-top: 0; }

/* =========================================================================
 * Unified button system
 * Base primitive targets class-based buttons + submit buttons + .btn.
 * Search / header-search submit buttons are restored to their pill shape
 * further down (higher/equal specificity + later in file).
 * ========================================================================= */
.public-site .button,
.public-site button[type="submit"],
.public-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--type-control);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .01em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.public-site .button:hover,
.public-site button[type="submit"]:hover {
  transform: translateY(-1px);
}

/* Primary -> canonical red */
.public-site .button.primary,
.public-site button.primary,
.public-site button[type="submit"],
.public-site .search-form button,
.public-site .inline-form button {
  background: var(--site-red, #f1272f);
  border-color: var(--site-red-dark, #d91c24);
  color: #fff;
}
.public-site .button.primary:hover,
.public-site button.primary:hover,
.public-site button[type="submit"]:hover,
.public-site .inline-form button:hover {
  background: var(--site-red-dark, #d91c24);
  border-color: var(--site-red-dark, #d91c24);
  color: #fff;
}

/* 发送验证码按钮：文案保持单行，不被压成两行 */
.public-site .inline-form button {
  white-space: nowrap;
}
/* 注册页/重置密码页发码表单：邮箱输入与发送按钮之间留出间距，避免贴在一起 */
.public-site .register-auth-shell .inline-form,
.public-site .reset-auth-shell .inline-form {
  gap: 12px;
  align-items: center;
}
.public-site .register-auth-shell .inline-form input,
.public-site .reset-auth-shell .inline-form input {
  flex: 1 1 auto;
}
/* 发码后的冷却期：按钮置灰且不可点 */
.public-site .inline-form button:disabled,
.public-site .inline-form button:disabled:hover {
  background: #c9ced6;
  border-color: #c9ced6;
  color: #fff;
  cursor: not-allowed;
}

/* Secondary / default outline -> navy */
.public-site .button.secondary,
.public-site .button:not(.primary):not(.ghost):not(.facebook):not(.nav-login) {
  background: #fff;
  border-color: var(--site-blue, #0f63c7);
  color: var(--site-navy, #083f91);
}
.public-site .button.secondary:hover,
.public-site .button:not(.primary):not(.ghost):not(.facebook):not(.nav-login):hover {
  background: #f1f6fc;
  border-color: var(--site-navy, #083f91);
}

/* Ghost -> quiet */
.public-site .button.ghost {
  background: transparent;
  border-color: #c7d2de;
  color: var(--site-navy, #083f91);
}
.public-site .button.ghost:hover { background: #f1f6fc; }

/* Disabled state stays coherent */
.public-site .button:disabled,
.public-site button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Restore search / header-search control geometry (pill ends). These win by
 * being more specific / later than the base button primitive above. */
.public-site .search-form button,
.public-site .header-search button,
.public-site .search-page-form button,
.public-site .search-results-form button {
  min-height: auto;
  padding: 0 18px;
  border-radius: 0 9px 9px 0;
  transform: none;
}
.public-site .search-form button:hover,
.public-site .header-search button:hover,
.public-site .search-page-form button:hover,
.public-site .search-results-form button:hover {
  transform: none;
}

/* =========================================================================
 * Unified surface radius (cards / panels / inputs were 2px in older layers).
 * Search-form internals keep their shape automatically because site-shell
 * styles them with HIGHER specificity (.public-site .search-page-form input …).
 * ========================================================================= */
.public-site .panel,
.public-site .card,
.public-site .news-card,
.public-site .hospital-list-item,
.public-site .department-doctor-card,
.public-site .resource-card,
.public-site .service-card,
.public-site .feature-card,
.public-site .form-card,
.public-site .appointment-form,
.public-site .favorite-card,
.public-site .relation-link,
.public-site .badge,
.public-site .status,
.public-site input,
.public-site select,
.public-site textarea {
  border-radius: var(--radius);
}

/* Consistent focus ring across interactive elements (one accent, one offset). */
.public-site a:focus-visible,
.public-site .button:focus-visible,
.public-site button:focus-visible,
.public-site input:focus-visible,
.public-site select:focus-visible,
.public-site textarea:focus-visible {
  outline: 3px solid rgba(241, 39, 47, .35);
  outline-offset: 2px;
}

/* =========================================================================
 * Multilingual global UI refinement
 * CSS-only: preserves the existing color system and all document structure.
 * ========================================================================= */

/* Body copy, supporting text and readable long-form content. */
.public-site main,
.public-site footer,
.public-site input,
.public-site select,
.public-site textarea {
  font-size: var(--type-body);
}

.public-site small,
.public-site .muted,
.public-site .muted-text,
.public-site .help-text,
.public-site .hint,
.public-site .form-help,
.public-site .field-help {
  font-size: var(--type-supporting);
  line-height: 1.65;
}

/* Shared neutral hierarchy. Contextual success/warning/error and dark-hero
 * colors remain owned by their components. */
.public-site main :where(.muted, .muted-text, .help-text, .hint, .form-help, .field-help),
.public-site main :where(dt, small) {
  color: var(--site-muted, #66758a);
}

.public-site main :where(label, legend, th) {
  color: #263d5b;
}

.public-site .formatted-content,
.public-site .department-introduction-content,
.public-site .privacy-notice-content,
.public-site .modal p,
.public-site .modal li,
.public-site dialog p,
.public-site dialog li,
.public-site dialog label {
  font-size: var(--type-body);
  line-height: 1.82;
  overflow-wrap: anywhere;
  word-break: normal;
}

html:lang(mn) .public-site .formatted-content,
html:lang(mn) .public-site .department-introduction-content,
html:lang(mn) .public-site .privacy-notice-content,
html:lang(mn) .public-site .modal p,
html:lang(mn) .public-site .modal li,
html:lang(mn) .public-site dialog p,
html:lang(mn) .public-site dialog li,
html:lang(mn) .public-site dialog label {
  line-height: 1.92;
}

/* Navigation: 16px in every language, with controlled two-line wrapping. */
.public-site .site-header .nav-wrap {
  min-height: 80px;
  gap: var(--space-4);
}

.public-site .site-header .brand {
  min-width: 0;
  line-height: 1.35;
}

.public-site .site-header .brand > span:last-child {
  overflow-wrap: anywhere;
  word-break: normal;
}

.public-site .site-header .main-nav,
html:lang(zh) .public-site .site-header .main-nav,
html:lang(en) .public-site .site-header .main-nav,
html:lang(mn) .public-site .site-header .main-nav {
  align-items: stretch;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 1.4;
}

.public-site .site-header .main-nav > a,
.public-site .site-header .main-nav .link-button,
html:lang(zh) .public-site .site-header .main-nav > a,
html:lang(zh) .public-site .site-header .main-nav .link-button,
html:lang(en) .public-site .site-header .main-nav > a,
html:lang(en) .public-site .site-header .main-nav .link-button,
html:lang(mn) .public-site .site-header .main-nav > a,
html:lang(mn) .public-site .site-header .main-nav .link-button {
  display: flex;
  min-width: 0;
  min-height: 80px;
  max-width: 136px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 9px 9px;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

html:lang(mn) .public-site .site-header .main-nav > a,
html:lang(mn) .public-site .site-header .main-nav .link-button {
  max-width: none;
  line-height: 1.48;
  white-space: nowrap;
  overflow-wrap: normal;
}

html:lang(en) .public-site .site-header .main-nav > a,
html:lang(en) .public-site .site-header .main-nav .link-button {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.public-site .site-header .main-nav > a:hover,
.public-site .site-header .main-nav .link-button:hover,
.public-site .site-header .main-nav > a:focus-visible,
.public-site .site-header .main-nav .link-button:focus-visible {
  text-decoration: none;
}

.public-site .site-header .main-nav > a.active,
.public-site .site-header .main-nav > a[aria-current="page"] {
  font-weight: 750;
}

.public-site .site-header .main-nav .nav-login,
.public-site .site-header .main-nav .nav-login.active {
  min-height: 44px;
  align-self: center;
  padding: 9px 14px;
}

/* Form controls share one comfortable, multilingual geometry. */
.public-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.public-site select,
.public-site textarea {
  max-width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-size: var(--type-body);
  line-height: 1.5;
}

.public-site textarea {
  min-height: 120px;
  line-height: 1.75;
  resize: vertical;
}

/* Retain the established joined search-control proportions. */
.public-site .search-form input {
  min-height: 54px;
}

.public-site .search-page-form input,
.public-site .search-results-form input {
  min-height: 62px;
  padding-right: 18px;
  border: 0;
  border-radius: 10px 0 0 10px;
}

.public-site input[type="checkbox"],
.public-site input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin-top: 3px;
  accent-color: var(--site-blue, #0f63c7);
}

.public-site label:has(> input[type="checkbox"]),
.public-site label:has(> input[type="radio"]),
.public-site .consult-consent,
.public-site .checkbox-label,
.public-site .consent-label {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--type-supporting);
  line-height: 1.7;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Cards and forms use a shared spacing rhythm without changing their colors. */
.public-site .panel:not(.hospital-disease-panel),
.public-site .form-card,
.public-site .appointment-form {
  padding: clamp(20px, 2.2vw, 28px);
}

.public-site .card,
.public-site .news-card,
.public-site .hospital-list-item,
.public-site .department-doctor-card,
.public-site .resource-card,
.public-site .service-card,
.public-site .feature-card,
.public-site .favorite-card {
  min-width: 0;
}

.public-site .form-grid,
.public-site .filter-grid {
  gap: var(--space-4) var(--space-5);
}

/* Dialogs scroll within the viewport; headers/actions remain reachable. */
.public-site dialog,
.public-site .modal {
  max-width: calc(100vw - 32px);
  max-height: min(86vh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
}

.public-site .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 22px;
  background: inherit;
}

.public-site .modal-head h2,
.public-site .modal-head h3 {
  margin: 0;
  font-size: var(--type-section-title);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.public-site .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 16px 22px;
  background: inherit;
}

@media (max-width: 1400px) {
  .public-site .site-header .main-nav {
    top: 80px;
    max-height: calc(100vh - 80px);
    align-items: stretch;
  }

  .public-site .site-header .main-nav > a,
  .public-site .site-header .main-nav .link-button,
  html:lang(zh) .public-site .site-header .main-nav > a,
  html:lang(zh) .public-site .site-header .main-nav .link-button,
  html:lang(en) .public-site .site-header .main-nav > a,
  html:lang(en) .public-site .site-header .main-nav .link-button,
  html:lang(mn) .public-site .site-header .main-nav > a,
  html:lang(mn) .public-site .site-header .main-nav .link-button {
    width: 100%;
    max-width: none;
    min-height: 48px;
    justify-content: flex-start;
    padding: 12px 10px;
    text-align: left;
  }

  .public-site .site-header .main-nav .nav-login,
  .public-site .site-header .main-nav .nav-login.active {
    align-self: stretch;
  }
}

@media (max-width: 900px) {
  .public-site .site-header .nav-wrap { min-height: 72px; }
  .public-site .site-header .main-nav {
    top: 72px;
    max-height: calc(100vh - 72px);
  }
  .public-site .panel:not(.hospital-disease-panel),
  .public-site .form-card,
  .public-site .appointment-form { padding: 20px; }
}

@media (max-width: 620px) {
  .public-site { line-height: 1.72; }
  .public-site { --type-hero-title: clamp(28px, 9vw, 36px); }
  .public-site .site-header .brand { font-size: 14px; }
  .public-site .site-header .brand > span:last-child { overflow-wrap: anywhere; }
  .public-site .modal-head,
  .public-site .modal-actions { padding-right: 16px; padding-left: 16px; }
  .public-site .modal-actions > * { flex: 1 1 120px; }
  .public-site .search-page-form input,
  .public-site .search-results-form input { border-radius: 9px 9px 0 0; }
}

/* 功能分组导航：桌面悬停展开，移动端（≤1400px）点击手风琴展开，取代原"更多" */
.public-site .site-header .main-nav .nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.public-site .site-header .main-nav .nav-group-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin: 0;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  color: #263d5b;
  font: inherit;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.public-site .site-header .main-nav .nav-group-trigger:hover,
.public-site .site-header .main-nav .nav-group:hover .nav-group-trigger,
.public-site .site-header .main-nav .nav-group.is-active .nav-group-trigger,
.public-site .site-header .main-nav .nav-group-trigger:focus-visible {
  background: #f5f8fc;
  color: var(--site-navy);
}
.public-site .site-header .main-nav .nav-caret {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.public-site .site-header .main-nav .nav-group:hover .nav-caret,
.public-site .site-header .main-nav .nav-group.is-active .nav-caret {
  border-top-color: var(--site-navy);
}
.public-site .site-header .main-nav .nav-group-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 184px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e2e6e9;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(8, 63, 145, .14);
}
.public-site .site-header .main-nav .nav-group:hover .nav-group-panel,
.public-site .site-header .main-nav .nav-group:focus-within .nav-group-panel,
.public-site .site-header .main-nav .nav-group.open .nav-group-panel {
  display: block;
}
.public-site .site-header .main-nav .nav-group-panel a {
  display: block;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #173b60;
  text-decoration: none;
  white-space: nowrap;
}
.public-site .site-header .main-nav .nav-group-panel a:hover { background: #eef5fa; color: var(--site-navy); }
.public-site .site-header .main-nav .nav-group-panel a.active { background: #e7f1f8; font-weight: 750; }

/* 拉丁/蒙古文分组名需要更多横向空间 */
html:lang(en) .public-site .site-header .main-nav .nav-group-trigger { font-size: .95rem; padding-right: 12px; padding-left: 12px; }
html:lang(mn) .public-site .site-header .main-nav .nav-group-trigger { font-size: .9rem; padding-right: 12px; padding-left: 12px; }

/* 折叠态（≤1400px 汉堡菜单）：分组占满整行，面板默认收起、点击展开 */
@media (max-width: 1400px) {
  .public-site .site-header .main-nav .nav-group { width: 100%; }
  .public-site .site-header .main-nav .nav-group-trigger {
    width: 100%;
    min-height: 0;
    justify-content: space-between;
    padding: 11px 8px;
    text-align: left;
  }
  .public-site .site-header .main-nav .nav-group:hover .nav-group-panel { display: none; }
  .public-site .site-header .main-nav .nav-group-panel {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #edf0f4;
    border-radius: 0;
    box-shadow: none;
  }
  .public-site .site-header .main-nav .nav-group-panel a { padding: 11px 8px 11px 24px; }
  .public-site .site-header .main-nav .nav-group.open .nav-group-panel { display: block; }
}