/* ============================================================
   bazi-elements.css — /bazi/five-elements/ and /bazi/day-master/
   Element colours follow the Chinese five-element convention:
   Wood green, Fire red, Earth deep brown, Metal gold, Water blue.
   ============================================================ */

:root{
  --el-wood:#2e7d43;
  --el-wood-soft:#e8f3ea;
  --el-fire:#c23a2b;
  --el-fire-soft:#fbebe8;
  --el-earth:#5f4326;
  --el-earth-soft:#f4eee6;
  --el-metal:#a5792d;
  --el-metal-soft:#f8f1e0;
  --el-water:#2c66ad;
  --el-water-soft:#e9f1fa;
  --el-ink:#17304f;
  --el-muted:#60758a;
  --el-line:#d5e5ed;
}

/* ---------- hero ---------- */
.av-el-hero{
  margin:18px 0 28px;padding:30px 30px 26px;border-radius:18px;
  background:var(--el-tint,#f4f9fc);border:1px solid var(--el-fringe,#d5e5ed);
  border-left:5px solid var(--el-accent,#17304f);
}
.av-el-hero .av-el-glyph{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:Georgia,"Songti SC",serif;color:var(--el-accent,#17304f);
}
.av-el-hero .av-el-glyph b{font-size:44px;line-height:1}
.av-el-hero .av-el-glyph span{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-family:'DM Sans',Inter,system-ui,sans-serif;font-weight:600}
.av-el-hero h1{margin:10px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.6rem,3.6vw,2.15rem);line-height:1.25;color:var(--el-ink)}
.av-el-hero p{margin:0;font-size:15.5px;line-height:1.7;color:var(--el-muted);max-width:70ch}
.av-el-tone-wood{--el-accent:var(--el-wood);--el-tint:var(--el-wood-soft);--el-fringe:#cfe3d4}
.av-el-tone-fire{--el-accent:var(--el-fire);--el-tint:var(--el-fire-soft);--el-fringe:#eed4cf}
.av-el-tone-earth{--el-accent:var(--el-earth);--el-tint:var(--el-earth-soft);--el-fringe:#e0d3c2}
.av-el-tone-metal{--el-accent:var(--el-metal);--el-tint:var(--el-metal-soft);--el-fringe:#e6d9b8}
.av-el-tone-water{--el-accent:var(--el-water);--el-tint:var(--el-water-soft);--el-fringe:#cbdcf0}

/* ---------- fact strip ---------- */
.av-el-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 30px}
.av-el-fact{background:#fbfdff;border:1px solid var(--el-line);border-radius:12px;padding:12px 14px}
.av-el-fact span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8d6728;margin-bottom:5px}
.av-el-fact b{font-size:15px;color:var(--el-ink);font-weight:600;line-height:1.4}

/* ---------- body copy ---------- */
.av-el-body h2{font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.3;margin:38px 0 6px;color:var(--el-ink)}
.av-el-body h3{font-size:16.5px;margin:24px 0 6px;color:var(--el-ink)}
.av-el-body p{font-size:15.5px;line-height:1.78;color:#3d5872;margin:12px 0}
.av-el-body ul,.av-el-body ol{padding-left:20px;margin:12px 0}
.av-el-body li{font-size:15.5px;line-height:1.75;color:#3d5872;margin:7px 0}
.av-el-body a{color:#8d6728;text-decoration:none;border-bottom:1px solid rgba(141,103,40,.32)}
.av-el-body a:hover,.av-el-body a:focus-visible{color:var(--el-ink);border-bottom-color:var(--el-ink)}
.av-el-lede{font-size:17px!important;line-height:1.72!important;color:#2b4763!important}

/* ---------- two-column balance cards ---------- */
.av-el-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 8px}
.av-el-card{border:1px solid var(--el-line);border-radius:14px;padding:18px 20px;background:#fbfdff}
.av-el-card h3{margin:0 0 8px;font-size:15.5px}
.av-el-card ul{margin:0;padding-left:18px}
.av-el-card li{font-size:14.5px;margin:6px 0;line-height:1.65}
.av-el-card.is-warn{background:#fdf8f6;border-color:#ecd6cf}
.av-el-card.is-warn h3{color:#a5453a}

/* ---------- stem tables ---------- */
.av-el-table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:14.5px;background:#fbfdff;border:1px solid var(--el-line);border-radius:12px;overflow:hidden}
.av-el-table th,.av-el-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--el-line);vertical-align:top}
.av-el-table th{background:#f4f9fc;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--el-muted);font-weight:600}
.av-el-table tr:last-child td{border-bottom:none}
.av-el-table td b{color:var(--el-ink)}
.av-el-table a{color:#8d6728;text-decoration:none}
.av-el-table a:hover{text-decoration:underline}

/* ---------- hub grid ---------- */
.av-el-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0 30px}
.av-el-hub a{display:block;text-decoration:none;border:1px solid var(--el-line);border-left:4px solid var(--hub-accent,#17304f);border-radius:12px;padding:16px 18px;background:#fbfdff;transition:transform .15s ease,box-shadow .15s ease}
.av-el-hub a:hover,.av-el-hub a:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,34,56,.09)}
.av-el-hub b{display:block;font-family:Georgia,serif;font-size:17px;color:var(--el-ink);margin-bottom:4px}
.av-el-hub b em{font-style:normal;color:var(--hub-accent,#17304f);margin-right:6px}
.av-el-hub span{font-size:13.5px;line-height:1.6;color:var(--el-muted)}

/* ---------- day master facts ---------- */
.av-dm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--el-line);border:1px solid var(--el-line);border-radius:12px;overflow:hidden;margin:22px 0 28px}
.av-dm-facts div{background:#fbfdff;padding:13px 15px}
.av-dm-facts span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8d6728;margin-bottom:4px}
.av-dm-facts b{font-size:14.5px;color:var(--el-ink);font-weight:600;line-height:1.45}

.av-dm-quote{margin:20px 0 26px;padding:18px 22px;border-left:3px solid var(--el-accent,#c9a45e);background:#fbfdff;border-radius:0 12px 12px 0;font-family:Georgia,"Times New Roman",serif;font-size:16.5px;line-height:1.7;color:#2b4763;font-style:italic}
.av-dm-quote cite{display:block;margin-top:8px;font-size:12.5px;font-style:normal;letter-spacing:.04em;color:var(--el-muted);font-family:'DM Sans',Inter,system-ui,sans-serif}

/* ---------- faq ---------- */
.av-faq{margin:18px 0 10px;border-top:1px solid var(--el-line)}
.av-faq details{border-bottom:1px solid var(--el-line);padding:14px 0}
.av-faq summary{cursor:pointer;font-weight:600;font-size:15.5px;color:var(--el-ink);list-style:none;display:flex;gap:10px;align-items:baseline}
.av-faq summary::-webkit-details-marker{display:none}
.av-faq summary::before{content:"+";color:var(--el-accent,#8d6728);font-weight:700;font-size:17px;line-height:1}
.av-faq details[open] summary::before{content:"–"}
.av-faq details p{margin:10px 0 2px;font-size:15px;line-height:1.75;color:#3d5872}

/* ---------- related ---------- */
.av-related{margin:40px 0 10px;border-top:1px solid var(--el-line);padding-top:22px}
.av-related h2{font-family:Georgia,serif;font-size:19px;margin:0 0 14px}
.av-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.av-rel-grid a{display:block;text-decoration:none;border:1px solid var(--el-line);border-radius:10px;padding:12px 14px;background:#fbfdff}
.av-rel-grid a:hover,.av-rel-grid a:focus-visible{background:#f4f9fc;border-color:#bcd4e0}
.av-rel-grid b{display:block;font-size:14.5px;color:var(--el-ink);margin-bottom:2px}
.av-rel-grid span{font-size:12.5px;color:var(--el-muted)}

/* ---------- cta ---------- */
.av-el-cta{margin:26px 0 34px;padding:22px 24px;border-radius:16px;background:#f8f1e2;border:1px solid #e0cba0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.av-el-cta p{margin:0;font-size:15px;line-height:1.65;color:#3d5872;max-width:56ch}
.av-el-cta a.av-el-btn{display:inline-block;background:#c9a45e;color:#12263f;text-decoration:none;font-weight:600;font-size:14.5px;padding:13px 22px;border-radius:999px;white-space:nowrap}
.av-el-cta a.av-el-btn:hover,.av-el-cta a.av-el-btn:focus-visible{background:#e3cf9f}

/* ---------- disclaimer ---------- */
.av-el-fine{margin:22px 0 40px;font-size:13px;line-height:1.7;color:#7a8b9c}

@media(max-width:680px){
  .av-el-split{grid-template-columns:1fr}
  .av-el-hero{padding:24px 20px 20px}
  .av-el-cta{flex-direction:column;align-items:flex-start}
}

/* ---------- five-element cycle diagram ---------- */
.av-cycle{margin:26px 0 30px;padding:18px 14px 14px;border:1px solid var(--el-line);border-radius:16px;background:#fbfdff}
.av-cycle svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.av-cycle figcaption{margin:12px auto 0;max-width:60ch;font-size:13px;line-height:1.65;color:var(--el-muted);text-align:center}
.av-cycle figcaption b{color:#3d5872}

/* ---------- result page: day-master deep link ---------- */
.result-dm-link{margin:6px 0 0}
.result-dm-link a{display:inline-block;font:600 14px/1.5 'DM Sans',Inter,system-ui,sans-serif;color:#8d6728;text-decoration:none;border-bottom:1px solid rgba(201,164,94,.5);padding-bottom:1px}
.result-dm-link a:hover,.result-dm-link a:focus-visible{color:#17304f;border-bottom-color:#17304f}

/* ---------- readable measure inside the 1120px page shell ---------- */
.seo-page main.av-el-body{max-width:820px}
@media(max-width:700px){.seo-page main.av-el-body{max-width:100%}}