/* ============================================================
   休斯顿老年公寓资讯网 —— 样式表
   设计原则：手机优先 / 大字体 / 高对比 / 大点击区 / 一键拨号
   ============================================================ */

:root{
  --fs: 20px;              /* 基准字号，可由"放大字体"按钮调节 */
  --ink:        #14181f;   /* 正文黑 */
  --ink-soft:   #454f5e;   /* 次要文字 */
  --paper:      #ffffff;
  --paper-2:    #f4f6f9;   /* 卡片/分区底 */
  --line:       #d3dae3;
  --brand:      #b3282d;   /* 中国红，醒目且长者易辨识 */
  --brand-dk:   #8d1f23;
  --brand-soft: #fdeceb;
  --gold:       #8a6a12;
  --gold-soft:  #fdf6e3;
  --go:         #10643f;   /* 行动/成功绿 */
  --go-soft:    #e8f4ee;
  --radius: 14px;
  --tap: 60px;             /* 最小点击高度 */
}

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

html{
  font-size: var(--fs);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Heiti SC",
              "Noto Sans CJK SC","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  line-height:1.85;
  letter-spacing:.01em;
  overflow-wrap:break-word;
}

/* ---------- 跳转到主要内容（无障碍） ---------- */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--brand); color:#fff; padding:.7rem 1rem; z-index:999;
}
.skip:focus{ left:0; }

/* ---------- 顶栏 ---------- */
.topbar{
  background:var(--brand);
  color:#fff;
  padding:.7rem 1rem;
  display:flex; align-items:center; gap:.6rem;
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.topbar a.home{
  color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; gap:.4rem; flex:1; min-height:44px;
}
.topbar .logo{ font-size:1.4rem; line-height:1; }

/* 字号调节按钮 */
.fontbtns{ display:flex; gap:.35rem; }
.fontbtns button{
  min-width:46px; min-height:46px;
  border:2px solid rgba(255,255,255,.75); background:transparent; color:#fff;
  border-radius:10px; font-size:1rem; font-weight:700; cursor:pointer;
  font-family:inherit;
}
.fontbtns button:active{ background:rgba(255,255,255,.25); }

/* ---------- 版心 ---------- */
main{ padding:1rem 1rem 2rem; max-width:820px; margin:0 auto; }
@media (min-width:860px){ main{ padding:1.5rem 1.5rem 3rem; } }

/* ---------- 标题 ---------- */
h1{ font-size:1.7rem; line-height:1.4; margin:.6rem 0 .2rem; letter-spacing:.02em; }
h2{
  font-size:1.35rem; line-height:1.45; margin:2.2rem 0 .8rem;
  padding-left:.7rem; border-left:6px solid var(--brand);
}
h3{ font-size:1.12rem; margin:1.5rem 0 .5rem; color:var(--brand-dk); }
.lede{ font-size:1.05rem; color:var(--ink-soft); margin:.4rem 0 1.4rem; }

p{ margin:.85rem 0; }
a{ color:var(--brand-dk); text-underline-offset:3px; }

/* ---------- 大按钮导航（首页） ---------- */
.bignav{ display:grid; gap:.9rem; margin:1.4rem 0; }
@media (min-width:640px){ .bignav{ grid-template-columns:1fr 1fr; } }

.bignav a{
  display:flex; align-items:center; gap:.9rem;
  min-height:var(--tap); padding:1.1rem 1rem;
  background:var(--paper-2); border:2px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); font-size:1.15rem; font-weight:700;
}
.bignav a:active{ background:var(--brand-soft); border-color:var(--brand); }
.bignav .ico{ font-size:1.9rem; line-height:1; flex:none; }
.bignav .sub{ display:block; font-size:.8rem; font-weight:400; color:var(--ink-soft); margin-top:.15rem; }

/* ---------- 电话按钮：一键拨号 ---------- */
.callbtn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  line-height:1.45; text-align:center;
  min-height:var(--tap); padding:.9rem 1rem; margin:.7rem 0;
  background:var(--go); color:#fff !important; text-decoration:none;
  border-radius:var(--radius); font-size:1.15rem; font-weight:700;
  letter-spacing:.03em;
}
.callbtn:active{ background:#0b4c30; }
.callbtn .num{ font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.06em; }
.callbtn.alt{ background:var(--brand); }
.callbtn.alt:active{ background:var(--brand-dk); }

/* 行内电话链接 */
a.tel{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-weight:700; color:var(--go); text-decoration:none;
  border-bottom:2px solid var(--go); letter-spacing:.04em;
  white-space:nowrap; padding:.1rem 0;
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--paper-2); border:2px solid var(--line);
  border-radius:var(--radius); padding:1.1rem; margin:1.1rem 0;
}
.card h3{ margin-top:0; }

/* 公寓卡片 */
.apt{ border-left:8px solid var(--brand); }
.apt .meta{ margin:.6rem 0; padding:0; list-style:none; font-size:.95rem; }
.apt .meta li{
  display:flex; gap:.55rem; padding:.4rem 0;
  border-bottom:1px dashed var(--line);
}
.apt .meta li:last-child{ border-bottom:0; }
.apt .meta .k{ flex:none; width:5.2em; color:var(--ink-soft); font-weight:700; }
.apt .meta .v{ flex:1; }

/* 标签 */
.tag{
  display:inline-block; padding:.2rem .6rem; margin:.15rem .3rem .15rem 0;
  border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap;
}
.tag.sub  { background:var(--go-soft);    color:var(--go);     border:1.5px solid var(--go); }
.tag.zone { background:var(--brand-soft); color:var(--brand-dk); border:1.5px solid var(--brand); }
.tag.mkt  { background:var(--gold-soft);  color:var(--gold);   border:1.5px solid var(--gold); }

/* ---------- 提示框 ---------- */
.note, .warn, .tip{
  border-radius:var(--radius); padding:1rem 1.1rem; margin:1.2rem 0;
  border-left:8px solid;
}
.note{ background:var(--paper-2);  border-color:var(--ink-soft); }
.warn{ background:var(--brand-soft); border-color:var(--brand); }
.tip { background:var(--go-soft);  border-color:var(--go); }
.note>:first-child,.warn>:first-child,.tip>:first-child{ margin-top:0; }
.note>:last-child, .warn>:last-child, .tip>:last-child { margin-bottom:0; }
.note b,.warn b,.tip b{ font-size:1.05rem; }

/* ---------- 步骤列表 ---------- */
ol.steps{ list-style:none; counter-reset:s; padding:0; margin:1.2rem 0; }
ol.steps>li{
  counter-increment:s; position:relative;
  padding:1rem 1rem 1rem 3.6rem; margin:.8rem 0;
  background:var(--paper-2); border:2px solid var(--line); border-radius:var(--radius);
}
ol.steps>li::before{
  content:counter(s);
  position:absolute; left:.9rem; top:1rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem;
}
ol.steps>li>b{ display:block; font-size:1.08rem; margin-bottom:.3rem; }

/* 材料清单 */
ul.check{ list-style:none; padding:0; margin:1rem 0; }
ul.check li{
  padding:.65rem 0 .65rem 2.1rem; position:relative;
  border-bottom:1px solid var(--line);
}
ul.check li::before{
  content:"☐"; position:absolute; left:.2rem; top:.5rem;
  font-size:1.35rem; color:var(--brand); line-height:1.4;
}

/* ---------- 表格（手机上转卡片） ---------- */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.1rem 0; }
table{ border-collapse:collapse; width:100%; font-size:.95rem; }
th,td{ border:1.5px solid var(--line); padding:.7rem .6rem; text-align:left; vertical-align:top; }
th{ background:var(--paper-2); font-weight:700; }

/* ---------- 常见问题（折叠） ---------- */
details.faq{
  border:2px solid var(--line); border-radius:var(--radius);
  margin:.8rem 0; background:var(--paper-2); overflow:hidden;
}
details.faq>summary{
  padding:1rem 1rem 1rem 2.6rem; min-height:var(--tap);
  font-weight:700; font-size:1.06rem; cursor:pointer; position:relative;
  list-style:none; display:flex; align-items:center;
}
details.faq>summary::-webkit-details-marker{ display:none; }
details.faq>summary::before{
  content:"＋"; position:absolute; left:.9rem;
  color:var(--brand); font-size:1.3rem; font-weight:700;
}
details.faq[open]>summary::before{ content:"－"; }
details.faq[open]>summary{ background:var(--brand-soft); }
details.faq .body{ padding:.2rem 1rem 1rem; background:var(--paper); }

/* ---------- 页脚 ---------- */
footer{
  margin-top:2.5rem; padding:1.4rem 1rem 2.5rem;
  background:var(--paper-2); border-top:3px solid var(--line);
  font-size:.88rem; color:var(--ink-soft);
}
footer .inner{ max-width:820px; margin:0 auto; }
footer a{ color:var(--brand-dk); }

/* 返回首页大按钮 */
.backhome{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); margin:2rem 0 .5rem;
  background:var(--paper-2); border:2px solid var(--brand); border-radius:var(--radius);
  color:var(--brand-dk); text-decoration:none; font-size:1.1rem; font-weight:700;
}

/* 打印 */
@media print{
  .topbar,.fontbtns,.backhome{ display:none; }
  body{ font-size:12pt; }
}

/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   手机实测修正（iPhone SE 375px 宽实机渲染发现）
   ============================================================ */

/* 1. flex 子项默认 min-width:auto，长地址/长网址会撑破版面导致左右滚动 */
.apt .meta li{ flex-wrap:wrap; }
.apt .meta .v{ min-width:0; overflow-wrap:anywhere; }

/* 2. 长者手指不灵活：把正文里的行内链接点击区撑大。
      行内元素的上下 padding 不会改变行高，但会扩大可点击范围，
      所以能在不破坏排版的前提下让老人更容易点中。 */
/* 内联元素的高度按字体度量算（约 1.2em），不是行高 —— 所以要给足内边距
   才能达到 44px 的无障碍下限。大按钮类（.callbtn/.bignav/.backhome/summary）
   有更高的选择器优先级，会保留各自的内边距，不受这条影响。 */
main a,
footer a{
  padding-top:.6rem;
  padding-bottom:.6rem;
}

/* 行内电话链接本来就该最好点 —— 给得更宽松些 */
a.tel{
  padding:.6rem .3rem;
  display:inline-block;
}

/* ============================================================
   公寓名录（由 data/properties.json 生成）
   ============================================================ */

.prop{
  border:2px solid var(--line); border-left:8px solid var(--brand);
  border-radius:var(--radius); padding:.95rem 1rem; margin:.9rem 0;
  background:var(--paper-2);
}
.prop.verified{ border-left-color:var(--go); }
.prop.unsure  { border-left-color:var(--gold); }

.prop h4{
  margin:0 0 .35rem; font-size:1.1rem; line-height:1.45; color:var(--ink);
}
.prop .pa{
  font-size:.95rem; color:var(--ink); margin:.3rem 0;
}
.prop .pfacts{
  font-size:.86rem; color:var(--ink-soft); margin:.35rem 0 .5rem;
  line-height:1.7;
}
.prop .pnote{
  font-size:.92rem; margin:.5rem 0; padding:.6rem .7rem;
  background:var(--paper); border-radius:8px; border:1px solid var(--line);
}
.prop .pwarn{
  font-size:.85rem; margin:.4rem 0 0; padding:.5rem .7rem;
  background:var(--gold-soft); border-left:4px solid var(--gold);
  border-radius:6px; color:var(--ink);
}
.prop .callbtn{ margin:.6rem 0 0; min-height:52px; font-size:1.05rem; }
.prop .nophone{
  font-size:.88rem; color:var(--ink-soft); margin:.5rem 0 0;
  padding:.5rem .7rem; background:var(--paper); border-radius:8px;
  border:1px dashed var(--line);
}

/* 区域折叠块 */
details.region{
  border:2px solid var(--line); border-radius:var(--radius);
  margin:1rem 0; background:var(--paper);
}
details.region>summary{
  padding:1.1rem 1rem 1.1rem 2.7rem; min-height:var(--tap);
  font-weight:700; font-size:1.12rem; cursor:pointer; position:relative;
  list-style:none; display:flex; align-items:center; gap:.5rem;
  background:var(--paper-2); border-radius:12px;
}
details.region>summary::-webkit-details-marker{ display:none; }
details.region>summary::before{
  content:"＋"; position:absolute; left:.9rem;
  color:var(--brand); font-size:1.35rem; font-weight:700;
}
details.region[open]>summary::before{ content:"－"; }
details.region[open]>summary{
  border-bottom:2px solid var(--line); border-radius:12px 12px 0 0;
}
details.region>summary .cnt{
  margin-left:auto; font-size:.9rem; font-weight:400; color:var(--ink-soft);
}
details.region .rbody{ padding:.3rem 1rem 1rem; }

/* 名录顶部的统计 */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.7rem; margin:1.2rem 0;
}
.stats div{
  background:var(--paper-2); border:2px solid var(--line);
  border-radius:var(--radius); padding:.9rem .7rem; text-align:center;
}
.stats b{ display:block; font-size:1.55rem; color:var(--brand-dk); line-height:1.3; }
.stats span{ font-size:.82rem; color:var(--ink-soft); }