/* ============================================================
   Zip AI disclosure kit — <details class="dx">/<summary> accordion
   + .dx-clamp read-more toggle.
   Built 2026-09-02, Solution A (ops/SITE-REDESIGN-PLAN-2026-09-02.md).
   Tokens read from the anchor (/medical-tourism) + /pin-google-maps
   page-local :root and css/shared.css v3 collapsed tokens
   (--r3-card, --line, --card, --ink, --muted, --sky, --font-display,
   --font-body). Falls back to the anchor's literal values so this file
   still renders sane on a page that hasn't defined the v3 tokens.

   RULES (do not violate on any page that loads this file):
   - Never restyle gate-checked classes: .answer-box .faq-item .vs-col
     .cmpgrid .cmpbox .cmp-us .cmp-lbl .proofgrid .mt-stat .blk
   - Any max-width element here gets margin-inline:auto
   - .zp-sticky / mobile sticky-CTA footer clearance is untouched —
     this file adds no fixed/sticky positioning of its own
   - Native <details> = zero JS required to open; js/disclose.js only
     adds hash-open, per-page remembered state, and the clamp toggle
   ============================================================ */

.dx{
  background:var(--card,#FFFFFF);
  border:1.5px solid var(--line,#E8ECF4);
  border-radius:var(--r3-card,16px);
  max-width:900px;
  margin:14px auto;
  margin-inline:auto;
  box-shadow:0 4px 16px rgba(34,48,74,.05);
  overflow:hidden;
}
.dx + .dx{margin-top:14px}

.dx > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 22px;
  min-height:44px;
  font-family:var(--font-display,"Anuphan",system-ui,sans-serif);
  font-weight:700;
  font-size:18px;
  line-height:1.4;
  color:var(--ink,#22304A);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.dx > summary::-webkit-details-marker{display:none}
.dx > summary::marker{content:""}

.dx > summary .dx-chev{
  flex:0 0 auto;
  width:22px;
  height:22px;
  color:var(--sky,#3E8EF7);
  transition:transform .2s ease;
}
.dx[open] > summary .dx-chev{transform:rotate(180deg)}

.dx > summary:hover{background:rgba(0,0,0,.025)}
.dx > summary:focus-visible{
  outline:2px solid var(--sky,#3E8EF7);
  outline-offset:-2px;
  background:rgba(0,0,0,.025);
}

.dx-body{
  padding:0 22px 22px;
  padding-top:18px;
  border-top:1px solid var(--line,#E8ECF4);
  color:var(--muted,#5D6B84);
}
.dx-body > *:first-child{margin-top:0}

@media(max-width:480px){
  .dx > summary{padding:15px 16px;font-size:16.5px;gap:10px}
  .dx-body{padding:0 16px 18px;padding-top:16px}
}

/* ---------- read-more clamp for long paragraph runs ---------- */
.dx-clamp{
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dx-clamp.dx-open{
  -webkit-line-clamp:unset;
  display:block;
  overflow:visible;
}
.dx-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  margin-top:6px;
  padding:0;
  background:none;
  border:none;
  color:var(--sky,#3E8EF7);
  font-family:var(--font-display,"Anuphan",system-ui,sans-serif);
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.dx-more:hover{text-decoration:underline}
.dx-more:focus-visible{outline:2px solid var(--sky,#3E8EF7);outline-offset:3px}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  .dx > summary .dx-chev{transition:none}
}