/* ============================================================================
   base.css —— reset、排版基线、可复用原子件（按钮 / 表单 / 无障碍工具类）
   依赖 tokens.css，必须在它之后加载。
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 中文标点挤压与更好的断行 */
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

/* ⚠️ [hidden] 必须真的隐藏。
   UA 样式表里的 [hidden] { display: none } 是【最低优先级】，任何作者定义的
   display 都会盖过它。本项目踩到两处真实后果：
     · .booking__success { display: flex }  → 提交成功面板在没提交时也显示
     · 上面的 svg { display: block }        → 按钮里的加载转圈一直亮着
   用 !important 把这个属性的语义钉死，免得以后再加一条 display 又复发。 */
[hidden] { display: none !important; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

a { color: var(--color-primary); text-underline-offset: .2em; }

/* --- 排版 ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: .02em;   /* 中文标题需要一点字距才不显拥挤 */
  font-weight: 700;
  text-wrap: balance;      /* 避免标题末行只剩一个字 */
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

/* --- 无障碍基础件 --------------------------------------------------------- */

/* 视觉隐藏但屏幕阅读器可读 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 键盘用户的跳转链接：平时藏在视口外，聚焦时滑入 */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(calc(-100% - var(--space-sm) - 4px));
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* 焦点样式：只对键盘用户显示，但绝不 outline:none */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 触摸目标 ≥44×44 —— 仅对指针不精确的设备放宽，避免桌面端按钮显得笨重 */
@media (pointer: coarse) {
  .btn, .nav-toggle, .filter-btn { min-height: 44px; }
}

/* --- 布局工具 ------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-section);
  /* 抵消吸顶导航，锚点跳转后标题不会被盖住 */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* 区块标题组：眉标 + 标题 + 引言 */
.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--color-primary);
}
/* 眉标前的短金线 —— 金色的典型用法：纯装饰 */
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--color-accent);
}

.section-lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  color: var(--color-muted);
}

/* --- 按钮 ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;                      /* 7.49:1 on 墨绿 */
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-primary-600); }

/* 次要按钮：墨绿描边 + 深色字，保持 7:1 以上的对比 */
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn--ghost:hover {
  background: var(--color-primary-050);
}

.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* 按钮内联转圈图标 */
.btn .spinner {
  width: 1rem; height: 1rem;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn .spinner { animation-duration: 1500ms; }
}

/* --- 表单控件 ------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.field__required {
  color: var(--color-danger);
  margin-left: .125rem;
}

.field__control {
  width: 100%;
  padding: .75rem .875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field__control::placeholder { color: #9AA39D; }

.field__control:hover { border-color: #D6CFC0; }

.field__control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(47 93 80 / .14);
}
/* 键盘聚焦时保留可见描边（:focus-visible 在输入框上通常也成立） */
.field__control:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

textarea.field__control {
  min-height: 6.5rem;
  resize: vertical;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6660' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.375rem;
}

/* 出错态 */
.field__control[aria-invalid="true"] {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.field__control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgb(168 50 43 / .14);
}

.field__error {
  font-size: var(--fs-sm);
  color: var(--color-danger);
}
.field__error:empty { display: none; }

.field__hint {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* 复选框 */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .3rem;
  accent-color: var(--color-primary);
}
.checkbox span { font-size: var(--fs-sm); color: var(--color-muted); }

/* 蜜罐字段：视觉与辅助技术双隐藏，且不可聚焦。机器人仍会填它。 */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- 卡片 ---------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #DED7C8;
}

/* --- 图标 ---------------------------------------------------------------- */

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 滚动入场动画 ---------------------------------------------------------
   ⚠️ 触发条件是 html.reveal-ready，不是 html.js —— 这个区别很重要。

   boot.js 在 <head> 里立刻打上 .js（用来启用折叠导航），而 reveal.js 属于
   ES module，要晚得多才执行。如果动画挂在 .js 上，那么 main.js 任何一个
   环节加载失败或抛错，这些区块就会永远停在 opacity: 0 ——
   用户看到的是整屏空白，而且刷新也没用。

   改成由 reveal.js【自己】在成功初始化时打上 .reveal-ready：
   模块没跑起来 → 没有这个类 → 内容就是普通可见的，最差情况只是没有动画。
   动画是增强，不能成为内容可见的前提。
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  }
  html.reveal-ready .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}