/* Article visuals on /guides/ (inc/modules/article-visuals.php). Four topic colours, all site tokens, one job each: navy hospitals and
   the NHS system, green community care, claret how-to and next steps, gold money and things to bring. Red is for 999 only.
   Diagrams are HTML with inline SVG, so the words stay real text, large enough on a phone. */
.t-navy{--c:var(--ukhc-teal);--t:var(--ukhc-teal-tint)}
.t-green{--c:var(--ukhc-green);--t:var(--ukhc-green-tint)}
.t-claret{--c:var(--ukhc-claret);--t:var(--ukhc-claret-tint)}
.t-gold{--c:var(--ukhc-gold-text);--t:var(--ukhc-gold-tint)}
.t-red{--c:var(--ukhc-urgent);--t:var(--ukhc-urgent-tint)}
.av-i{fill:none;stroke:var(--c,var(--ukhc-teal));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;--acc:var(--ukhc-gold);--pharm:var(--c)}
.av-i .g{stroke:var(--acc)}.av-i .f{fill:var(--acc);stroke:none}

.av-hero{display:block;width:100%;height:auto;aspect-ratio:1000/240;min-height:110px;border-radius:12px;margin:0 0 18px}

/* contents: icon tiles instead of a bullet list */
.entry-content .nav.av-toc{padding:14px 16px}
.entry-content .nav.av-toc ul{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.entry-content .nav.av-toc li{margin:0}
.entry-content .nav.av-toc a{display:flex;align-items:center;gap:10px;height:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;background:var(--t);color:var(--ukhc-ink);text-decoration:none;font-weight:600;line-height:1.25}
.entry-content .nav.av-toc a:hover{box-shadow:inset 0 0 0 2px var(--c)}
.av-toc svg{width:1.45em;height:1.45em;flex:none}

/* section headings */
.entry-content h2.av-h{display:flex;align-items:center;gap:12px;border-top:0;padding-top:0;margin-top:2.4rem}
.av-h .av-b{flex:none;width:46px;height:46px;border-radius:50%;background:var(--t);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--c)}
.av-h .av-b svg{width:26px;height:26px}
.entry-content .av-h.is-ukhc-selected{display:flex}

/* figure frame */
.entry-content .av-fig{margin:1.2rem 0 1.5rem;padding:16px;background:#fff;border:1px solid var(--ukhc-line);border-radius:12px;max-width:none}
.av-fig>figcaption{font-family:var(--ukhc-serif);font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--ukhc-ink);margin:0 0 12px}

/* rows: which service for what. No order of urgency is implied */
.entry-content ul.av-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:none}
.entry-content .av-rows>li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:12px;align-items:center;margin:0;padding:10px 12px;border-radius:10px;background:var(--t);border-left:6px solid var(--c)}
.av-rows svg{width:40px;height:40px;justify-self:center}
.av-rows b{display:block;color:var(--ukhc-ink);font-size:1.02rem}
.av-rows span{display:block;font-size:.92rem;line-height:1.35;color:var(--ukhc-text)}

/* steps */
.entry-content ol.av-steps{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0;padding:0;max-width:none}
.entry-content .av-steps>li{position:relative;margin:0;padding:0 8px;text-align:center;font-size:.92rem;line-height:1.3;color:var(--ukhc-text)}
.av-steps>li::before{content:"";position:absolute;top:27px;left:0;right:0;height:3px;background:var(--ukhc-line)}
.av-steps>li:first-child::before{left:50%}.av-steps>li:last-child::before{right:50%}
.av-steps .n{position:relative;display:flex;margin:0 auto 8px;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;background:var(--t);box-shadow:inset 0 0 0 2px var(--c)}
.av-steps .n svg{width:30px;height:30px}
.av-steps b{display:block;color:var(--ukhc-ink);font-size:1rem}
.av-steps .tx{display:block}
@media (max-width:720px){
  .entry-content ol.av-steps{grid-auto-flow:row}
  .entry-content .av-steps>li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;text-align:left;padding:0 0 14px}
  .av-steps>li::before{top:0;bottom:0;left:27px;right:auto;width:3px;height:auto}
  .av-steps>li:first-child::before{left:27px;top:28px}.av-steps>li:last-child::before{right:auto;bottom:auto;height:28px}
  .av-steps .n{grid-row:1/3;margin:0}
}

/* cards */
.entry-content ul.av-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:1rem 0;padding:0;list-style:none;max-width:none}
.av-fig ul.av-cards{margin:0}
.entry-content .av-card{margin:0;padding:12px;border-radius:10px;background:var(--t);border-top:4px solid var(--c);line-height:1.3;font-size:.95rem;color:var(--ukhc-text)}
.av-card svg{display:block;width:34px;height:34px;margin:0 0 6px}
.av-card b{display:block;color:var(--ukhc-ink);font-size:1rem;margin-bottom:2px}
.av-card .big{display:block;font-family:var(--ukhc-serif);font-weight:700;font-size:1.5rem;line-height:1.15;color:var(--c);margin:2px 0 6px}

/* per-item charge and PPC dots: one dot for each item */
.av-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-weight:700;color:var(--ukhc-ink)}
.av-tok{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:.82rem}
.av-tok svg{width:44px;height:44px}
.av-dots{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}.av-dots i{width:13px;height:13px;border-radius:50%;background:var(--c)}

/* two panels */
.av-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.av-two>div{padding:12px 14px;border-radius:10px;background:var(--t);border-top:4px solid var(--c)}
.av-two b{display:block;color:var(--ukhc-ink);margin-bottom:6px}
.entry-content .av-two ul{margin:0;padding-left:20px;font-size:.95rem;max-width:none}

/* compared in a table */
.entry-content table.av-compare{margin:0}
.entry-content .av-compare td{text-align:center;font-weight:700;vertical-align:middle}
.entry-content .av-compare th[scope=row]{font-weight:500}
.entry-content .av-compare .y{background:var(--ukhc-green-tint);color:var(--ukhc-green)}
.entry-content .av-compare .n{background:var(--ukhc-gold-tint);color:#6E5518}

/* lists kept as they are, drawn as ticks or tiles */
.entry-content ul.av-ticks{list-style:none;padding-left:0}
.entry-content ul.av-ticks>li{position:relative;padding-left:34px}
.av-ticks>li::before{content:"";position:absolute;left:0;top:.12em;width:24px;height:24px;border-radius:50%;background:var(--ukhc-green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231F4E3D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.entry-content ul.av-tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;max-width:none}
.entry-content ul.av-tiles>li{margin:0;padding:10px 12px;background:#fff;border:1px solid var(--ukhc-line);border-left:4px solid var(--ukhc-gold-soft);border-radius:8px;line-height:1.4}

@media (max-width:640px){
  .av-h .av-b{width:38px;height:38px}.av-h .av-b svg{width:22px;height:22px}
  .entry-content h2.av-h{gap:10px}
  .entry-content .av-fig{padding:12px}
}

/* narrow screens: the table must not break "Voucher" across two lines */
.entry-content .av-compare th,.entry-content .av-compare td{overflow-wrap:normal}
@media (max-width:640px){
  .entry-content .av-compare th,.entry-content .av-compare td{padding:7px 6px;font-size:.88rem}
  .av-card .big{font-size:1.3rem}
}