/* ============================================================
   THE PAYMENTS EDGE — article component library (v1)
   Agency-grade content components for `.pe-entry-content`
   (posts + pe_guide). Brand-disciplined: orange is the ONLY
   saturated hue; the callout family differentiates by icon +
   label + border weight, never by new colours.
   Tokens come from the theme :root (--pe-*).
   ============================================================ */

/* ---------- Masthead: dek / standfirst + breadcrumbs ---------- */
.pe-dek { font-family: var(--pe-font-body); font-size: 20px; line-height: 1.5; color: var(--pe-off-white); opacity: 0.85; margin: 4px 0 0; max-width: 62ch; }
.pe-breadcrumbs { font-family: var(--pe-font-ui); font-size: 13px; color: var(--pe-muted); margin-bottom: 18px; letter-spacing: 0.01em; }
.pe-breadcrumbs a { color: var(--pe-muted); text-decoration: none; }
.pe-breadcrumbs a:hover { color: var(--pe-orange); }
.pe-breadcrumbs span { margin: 0 8px; opacity: 0.5; }
.pe-meta-updated { color: var(--pe-orange); }

/* ---------- Callout family ---------- */
.pe-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; margin: 32px 0; border-left: 3px solid var(--pe-border); background: var(--pe-card); border-radius: 0 6px 6px 0; }
.pe-callout__icon { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; }
.pe-callout__icon svg { width: 24px; height: 24px; display: block; }
.pe-callout__body { flex: 1; min-width: 0; }
.pe-callout__body > *:first-child { margin-top: 0; }
.pe-callout__body > *:last-child { margin-bottom: 0; }
.pe-callout__title { font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-muted); margin: 0 0 6px; }
.pe-callout p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; color: var(--pe-off-white); }
.pe-callout--warn, .pe-callout--key, .pe-callout--tip, .pe-callout--success { border-left-color: var(--pe-orange); background: rgba(240,90,32,0.06); }
.pe-callout--warn .pe-callout__title, .pe-callout--key .pe-callout__title, .pe-callout--tip .pe-callout__title, .pe-callout--success .pe-callout__title { color: var(--pe-orange); }
.pe-callout--info, .pe-callout--note { border-left-color: #4f6480; background: var(--pe-card); }
.pe-callout--note { font-size: 14px; }
.pe-callout--note p { font-size: 14px; color: var(--pe-muted); }
.pe-callout-warn { border-left: 3px solid var(--pe-orange); background: rgba(240,90,32,0.06); padding: 20px 24px; margin: 36px 0; border-radius: 0 4px 4px 0; }
.pe-callout-warn p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; color: var(--pe-off-white); }
.pe-callout-warn p:last-child { margin-bottom: 0; }

/* ---------- Key Takeaways / TL;DR ---------- */
.pe-takeaways { border: 1px solid var(--pe-border); border-top: 3px solid var(--pe-orange); background: var(--pe-card); border-radius: 0 0 8px 8px; padding: 22px 26px 24px; margin: 0 0 40px; }
.pe-takeaways__head { display: flex; align-items: center; gap: 9px; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pe-orange); margin-bottom: 14px; }
.pe-takeaways__head svg { width: 18px; height: 18px; }
.pe-takeaways ul { list-style: none; padding: 0; margin: 0; }
.pe-takeaways li { position: relative; padding-left: 26px; margin-bottom: 11px; line-height: 1.6; color: var(--pe-off-white); font-size: 16px; }
.pe-takeaways li:last-child { margin-bottom: 0; }
.pe-takeaways li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; background: var(--pe-orange); transform: rotate(45deg); }

/* ---------- Table of Contents ---------- */
.pe-toc { border: 1px solid var(--pe-border); background: rgba(255,255,255,0.02); border-radius: 8px; padding: 18px 24px; margin: 0 0 36px; }
.pe-toc__head { display: flex; align-items: center; gap: 9px; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pe-muted); margin-bottom: 12px; }
.pe-toc ol { counter-reset: toc; list-style: none; padding: 0; margin: 0; }
.pe-toc li { counter-increment: toc; margin-bottom: 9px; line-height: 1.4; }
.pe-toc li:last-child { margin-bottom: 0; }
.pe-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--pe-font-ui); font-size: 12px; font-weight: 600; color: var(--pe-orange); margin-right: 12px; }
.pe-toc a { color: var(--pe-off-white); text-decoration: none; font-size: 15px; }
.pe-toc a:hover { color: var(--pe-orange); }
.pe-toc li li { margin-left: 26px; margin-top: 9px; }

/* ---------- Pull quote ---------- */
.pe-pullquote { margin: 44px 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--pe-orange); }
.pe-pullquote p { font-family: var(--pe-font-display); font-weight: 700; font-size: 28px; line-height: 1.28; color: var(--pe-white); margin: 0; font-style: normal; }
.pe-pullquote cite { display: block; margin-top: 14px; font-family: var(--pe-font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--pe-muted); font-style: normal; }

/* ---------- Stat / big-number grid ---------- */
.pe-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0; }
.pe-stat { border: 1px solid var(--pe-border); background: var(--pe-card); border-radius: 8px; padding: 22px 20px; }
.pe-stat__num { font-family: var(--pe-font-display); font-weight: 800; font-size: 42px; line-height: 1; color: var(--pe-orange); }
.pe-stat__label, .pe-stats-label { display: block; margin-top: 8px; font-family: var(--pe-font-ui); font-size: 13px; line-height: 1.4; color: var(--pe-muted); }

/* ---------- At-a-glance / fact box ---------- */
.pe-factbox { border: 1px solid var(--pe-border); border-top: 3px solid var(--pe-orange); background: var(--pe-card); border-radius: 0 0 6px 6px; padding: 20px 26px; margin: 32px 0; }
.pe-factbox__title { display: flex; align-items: center; gap: 9px; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-orange); margin: 0 0 14px; }
.pe-factbox dl { display: grid; grid-template-columns: 38% 1fr; gap: 10px 18px; margin: 0; }
.pe-factbox dt { font-family: var(--pe-font-ui); font-size: 13px; font-weight: 600; color: var(--pe-muted); }
.pe-factbox dd { margin: 0; font-size: 15px; color: var(--pe-off-white); }

/* ---------- Key term / glossary ---------- */
.pe-keyterm { display: flex; gap: 12px; border: 1px dashed var(--pe-border); border-radius: 6px; padding: 14px 18px; margin: 28px 0; background: rgba(255,255,255,0.015); }
.pe-keyterm__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; }
.pe-keyterm dt { font-family: var(--pe-font-display); font-weight: 700; font-size: 18px; color: var(--pe-white); text-transform: uppercase; letter-spacing: 0.01em; }
.pe-keyterm dd { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--pe-off-white); }

/* ---------- Figure: caption + credit ---------- */
.pe-entry-content figure { margin: 40px 0; }
.pe-entry-content figure img { margin: 0; }
.pe-entry-content figcaption { font-family: var(--pe-font-ui); font-size: 13px; line-height: 1.5; color: var(--pe-muted); margin-top: 10px; }
.pe-entry-content figcaption .pe-credit { display: block; font-size: 12px; opacity: 0.8; margin-top: 3px; }

/* ---------- Data table: caption + source ---------- */
.pe-entry-content table caption { caption-side: top; text-align: left; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-muted); padding-bottom: 10px; }
.pe-table-source { font-family: var(--pe-font-ui); font-size: 12px; color: var(--pe-muted); margin: -22px 0 36px; }

/* ---------- Step-by-step process ---------- */
.pe-steps { counter-reset: step; list-style: none; padding: 0; margin: 32px 0; }
.pe-steps > li { position: relative; padding-left: 56px; margin-bottom: 22px; min-height: 38px; line-height: 1.7; color: var(--pe-off-white); }
.pe-steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--pe-orange); color: var(--pe-black); font-family: var(--pe-font-display); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.pe-steps > li strong { display: block; color: var(--pe-white); font-weight: 600; margin-bottom: 2px; }

/* ---------- FAQ (accordion) ---------- */
.pe-faq { margin: 36px 0; border-top: 1px solid var(--pe-border); }
.pe-faq details { border-bottom: 1px solid var(--pe-border); }
.pe-faq summary { list-style: none; cursor: pointer; padding: 18px 32px 18px 0; position: relative; font-family: var(--pe-font-display); font-weight: 700; font-size: 20px; color: var(--pe-white); }
.pe-faq summary::-webkit-details-marker { display: none; }
.pe-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--pe-font-body); font-size: 26px; font-weight: 400; color: var(--pe-orange); line-height: 1; transition: transform 0.2s ease; }
.pe-faq details[open] summary::after { content: "\2212"; }
.pe-faq__a { padding: 0 0 20px; font-size: 16px; line-height: 1.75; color: var(--pe-off-white); }
.pe-faq__a > *:first-child { margin-top: 0; }

/* ---------- Sources / references ---------- */
.pe-sources { counter-reset: src; list-style: none; padding: 22px 0 0; margin: 44px 0 0; border-top: 1px solid var(--pe-border); }
.pe-sources__head { display: flex; align-items: center; gap: 9px; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pe-muted); margin-bottom: 14px; }
.pe-sources li { counter-increment: src; position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 14px; line-height: 1.6; color: var(--pe-muted); }
.pe-sources li::before { content: counter(src); position: absolute; left: 0; top: 0; font-family: var(--pe-font-ui); font-size: 12px; font-weight: 700; color: var(--pe-orange); }
.pe-sources a { color: var(--pe-off-white); text-decoration: none; border-bottom: 1px solid var(--pe-border); }
.pe-sources a:hover { color: var(--pe-orange); }

/* ---------- Author / credibility box ---------- */
.pe-author-box { display: flex; gap: 16px; border: 1px solid var(--pe-border); background: var(--pe-card); border-radius: 8px; padding: 20px 22px; margin: 40px 0; }
.pe-author-box__avatar { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--pe-border); object-fit: cover; }
.pe-author-box__name { font-family: var(--pe-font-display); font-weight: 700; font-size: 19px; color: var(--pe-white); }
.pe-author-box__role { font-family: var(--pe-font-ui); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pe-orange); margin: 1px 0 8px; }
.pe-author-box__bio { font-size: 14px; line-height: 1.6; color: var(--pe-muted); margin: 0; }

/* ---------- Share row ---------- */
.pe-share { display: flex; align-items: center; gap: 10px; margin: 32px 0; }
.pe-share__label { font-family: var(--pe-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pe-muted); margin-right: 4px; }
.pe-share a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--pe-border); border-radius: 50%; color: var(--pe-off-white); transition: all 0.15s ease; }
.pe-share a:hover { border-color: var(--pe-orange); color: var(--pe-orange); }
.pe-share svg { width: 18px; height: 18px; }

/* ---------- Guide cards (homepage + archive): icon-led ---------- */
.pe-guide-card__icon { display: flex; align-items: center; justify-content: center; }
.pe-guide-card__icon svg { width: 26px; height: 26px; display: block; }
.pe-guide-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pe-guide-card__badge { font-family: var(--pe-font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-muted); border: 1px solid var(--pe-border); border-radius: 3px; padding: 2px 7px; }

/* ---------- Cross-links: relevant guides on a post (icon list) ---------- */
.pe-xlinks { margin-top: 14px; }
.pe-xlink { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pe-border); text-decoration: none; }
.pe-xlink:last-child { border-bottom: none; }
.pe-xlink__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 8px; background: #1a2436; display: flex; align-items: center; justify-content: center; }
.pe-xlink__icon svg { width: 20px; height: 20px; }
.pe-xlink__title { font-family: var(--pe-font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; color: var(--pe-white); line-height: 1.1; margin: 0; }
.pe-xlink:hover .pe-xlink__title { color: var(--pe-orange); }
.pe-xlink__topic { font-family: var(--pe-font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pe-muted); }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .pe-stats-grid { grid-template-columns: 1fr; }
  .pe-factbox dl { grid-template-columns: 1fr; gap: 2px 0; }
  .pe-factbox dd { margin-bottom: 10px; }
  .pe-pullquote p { font-size: 23px; }
}