/* ==========================================================================
   Art2link ESB Certification pages - shared stylesheet
   Deployed to: /wp-content/themes/art2link/assets/cert/cert.css
   Branding follows Documentation/Static: teal #1dc598, deep teal #0f9a78,
   ribbon #0b1320, fonts Sora + DM Mono, "A" tile logo.
   Scoped under .a2l-cert. Light theme only.
   ========================================================================== */

.a2l-cert{
  --c-teal:#1dc598;
  --c-teal-deep:#0f9a78;
  --c-teal-soft:rgba(29,197,152,.10);
  --c-ribbon:#0b1320;
  --c-bg:#ffffff;
  --c-bg-alt:#f7f9fb;
  --c-text:#111827;
  --c-text-soft:#374151;
  --c-muted:#6b7280;
  --c-border:#e5e7eb;
  --c-border-strong:#d1d5db;
  --c-red:#dc2626;
  --c-red-soft:rgba(220,38,38,.08);
  --c-radius:8px;
  font-family:'Sora',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--c-bg);color:var(--c-text);
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  line-height:1.6;font-size:15px;
}
html{margin:0;padding:0}
.a2l-cert *{box-sizing:border-box}
.a2l-cert a{color:var(--c-teal-deep);text-decoration:none}
.a2l-cert a:hover{text-decoration:underline}
.a2l-cert code,.a2l-cert .mono{font-family:'DM Mono','SF Mono',Menlo,Consolas,monospace}

/* === Ribbon + top bar === */
.a2l-cert .cert-ribbon{
  display:flex;align-items:center;gap:16px;height:36px;padding:0 22px;
  background:var(--c-ribbon);color:#e8ecf3;font-size:11px;
}
.a2l-cert .cert-ribbon-brand{font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.a2l-cert .cert-ribbon-crumbs{opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2l-cert .cert-ribbon-crumbs .bc{margin:0 6px;opacity:.55}
.a2l-cert .cert-ribbon-right{margin-left:auto;display:flex;gap:16px;white-space:nowrap;opacity:.92}
.a2l-cert .cert-ribbon a{color:#e8ecf3}
.a2l-cert .cert-topbar{
  display:flex;align-items:center;gap:14px;padding:0 22px;min-height:54px;
  background:var(--c-bg);border-bottom:1px solid var(--c-border);
}
.a2l-cert .cert-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--c-text);white-space:nowrap}
.a2l-cert .cert-brand:hover{text-decoration:none}
.a2l-cert .cert-brand-logo{
  width:38px;height:38px;flex:0 0 38px;padding:4px;
  background:#fff;border:1px solid var(--c-border);border-radius:9px;
  object-fit:contain;display:block;
}
.a2l-cert .cert-chip{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--c-teal);color:var(--c-teal-deep);border-radius:999px;padding:2px 9px;
}
.a2l-cert .cert-topnav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px}
.a2l-cert .cert-topnav a{color:var(--c-text-soft)}
.a2l-cert .cert-topnav a:hover{color:var(--c-teal-deep);text-decoration:none}
.a2l-cert .cert-topnav a.current{color:var(--c-teal-deep);font-weight:600}
.a2l-cert .cert-nav-div{width:1px;height:15px;background:var(--c-border-strong)}
@media(max-width:640px){.a2l-cert .cert-ribbon-crumbs{display:none}.a2l-cert .cert-topnav{gap:6px 12px}.a2l-cert .cert-nav-div{display:none}}
/* Below ~470px the three topnav links no longer fit beside the brand, and
   `flex-wrap` was stacking them into a column that overflowed the 54px bar and
   collided with the ribbon above it. Let the bar itself wrap instead, so the
   nav drops onto its own row as a tidy horizontal strip. */
@media(max-width:470px){
  .a2l-cert .cert-topbar{flex-wrap:wrap;padding:8px 16px 10px;gap:8px 12px}
  .a2l-cert .cert-topnav{
    margin-left:0;flex:1 0 100%;flex-wrap:nowrap;gap:0 16px;
    padding-top:8px;border-top:1px solid var(--c-border);
  }
  .a2l-cert .cert-brand-logo{width:32px;height:32px;flex:0 0 32px}
}

/* === Page shell === */
.a2l-cert .cert-main{flex:1 1 auto;width:100%;max-width:880px;margin:0 auto;padding:36px 24px 72px}
.a2l-cert .cert-main-wide{max-width:1060px}
.a2l-cert h1{font-size:30px;font-weight:600;line-height:1.25;margin:0 0 10px}
.a2l-cert h2{font-size:21px;font-weight:600;line-height:1.3;margin:40px 0 12px}
.a2l-cert h3{font-size:16px;font-weight:600;margin:24px 0 8px}
.a2l-cert p{margin:0 0 14px;color:var(--c-text-soft)}
.a2l-cert .cert-lead{font-size:16.5px;color:var(--c-muted);margin-bottom:22px}
.a2l-cert .cert-kicker{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-teal-deep);margin-bottom:10px;
}
.a2l-cert ul,.a2l-cert ol{color:var(--c-text-soft);margin:0 0 14px;padding-left:22px}
.a2l-cert li{margin-bottom:6px}
.a2l-cert strong{color:var(--c-text)}

/* === Buttons === */
.a2l-cert .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--c-radius);padding:10px 20px;font-family:inherit;
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;text-decoration:none!important;
}
.a2l-cert .btn-primary{background:var(--c-teal);color:#062019}
.a2l-cert .btn-primary:hover{background:var(--c-teal-deep);color:#fff}
.a2l-cert .btn-ghost{background:transparent;border-color:var(--c-border-strong);color:var(--c-text)}
.a2l-cert .btn-ghost:hover{border-color:var(--c-teal);color:var(--c-teal-deep)}
.a2l-cert .btn-linkedin{background:#0a66c2;color:#fff}
.a2l-cert .btn-linkedin:hover{background:#004182;color:#fff}
.a2l-cert .btn[disabled]{opacity:.5;cursor:not-allowed}
.a2l-cert .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}

/* === Cards / grids === */
.a2l-cert .cert-grid{display:grid;gap:16px;margin:18px 0}
.a2l-cert .cert-grid-3{grid-template-columns:repeat(3,1fr)}
.a2l-cert .cert-grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.a2l-cert .cert-grid-3,.a2l-cert .cert-grid-2{grid-template-columns:1fr}}
.a2l-cert .cert-card{
  border:1px solid var(--c-border);border-radius:10px;background:var(--c-bg);
  padding:20px;position:relative;
}
.a2l-cert .cert-card h3{margin-top:0}
.a2l-cert .cert-card p{margin-bottom:0;font-size:14px}
.a2l-cert .cert-card-num{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--c-teal-deep);
  letter-spacing:.1em;margin-bottom:8px;display:block;
}
.a2l-cert a.cert-card{display:block;color:inherit}
.a2l-cert a.cert-card:hover{text-decoration:none;border-color:var(--c-teal)}
.a2l-cert .cert-note{
  border:1px solid var(--c-border);border-left:3px solid var(--c-teal);
  background:var(--c-bg-alt);border-radius:0 var(--c-radius) var(--c-radius) 0;
  padding:14px 16px;margin:18px 0;font-size:14px;color:var(--c-text-soft);
}
.a2l-cert .cert-meta-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.a2l-cert .cert-meta-chips span{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--c-text-soft);
  border:1px solid var(--c-border);border-radius:999px;padding:4px 12px;background:var(--c-bg-alt);
}

/* === Hero (landing) === */
.a2l-cert .cert-hero{padding:28px 0 8px;text-align:left}
.a2l-cert .cert-hero-badge{
  width:60px;height:60px;margin-bottom:18px;display:block;object-fit:contain;
}

/* === Tables === */
.a2l-cert table{border-collapse:collapse;width:100%;margin:16px 0;font-size:13.5px}
.a2l-cert th{
  text-align:left;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-muted);font-weight:500;
  border-bottom:2px solid var(--c-border-strong);padding:8px 12px 6px;
}
.a2l-cert td{border-bottom:1px solid var(--c-border);padding:8px 12px;color:var(--c-text-soft)}
.a2l-cert tr:last-child td{border-bottom:none}

/* === Module pages === */
.a2l-cert .cert-mod-progress{display:flex;gap:6px;margin:0 0 20px}
.a2l-cert .cert-mod-progress span{height:4px;flex:1;border-radius:2px;background:var(--c-border)}
.a2l-cert .cert-mod-progress span.done{background:var(--c-teal)}
.a2l-cert .cert-pager{
  display:flex;justify-content:space-between;gap:12px;margin-top:48px;
  border-top:1px solid var(--c-border);padding-top:20px;
}
.a2l-cert .cert-pager a{font-size:14px;font-weight:600}

/* === Module illustrations (figures) === */
.a2l-cert .cert-figure{border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg-alt);padding:22px 22px 15px;margin:22px 0}
.a2l-cert .cert-figure svg{display:block;width:100%;height:auto}
.a2l-cert .cert-figure figcaption{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.02em;color:var(--c-muted);text-align:center;margin-top:12px;line-height:1.5}
.a2l-cert .cf-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;fill:#111827}
.a2l-cert .cf-sub{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.06em;fill:#6b7280}
.a2l-cert .cf-vs{font-family:'DM Mono',monospace;font-size:11px;fill:#9aa3b2}
.a2l-cert .cf-bus{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;fill:#e8ecf3;letter-spacing:.1em}
.a2l-cert .cf-lbl{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;fill:#374151}
.a2l-cert .cf-lbl-d{font-family:'Sora',sans-serif;font-size:13.5px;font-weight:600;fill:#e8ecf3}
.a2l-cert .cf-note{font-family:'Sora',sans-serif;font-size:12px;fill:#6b7280}
.a2l-cert .cf-note-d{font-family:'Sora',sans-serif;font-size:12px;fill:#9aa3b2}
.a2l-cert .cf-badge{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;fill:#062019}
.a2l-cert .cf-tag{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.04em;fill:#0f9a78}
.a2l-cert .cf-x{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;fill:#dc2626}
.a2l-cert .cf-ok{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;fill:#0f9a78}

/* === Forms (gate) === */
.a2l-cert .cert-form{max-width:440px}
.a2l-cert .cert-field{margin-bottom:16px}
.a2l-cert .cert-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--c-text)}
.a2l-cert .cert-field input{
  width:100%;padding:10px 12px;font-family:inherit;font-size:14px;
  border:1px solid var(--c-border-strong);border-radius:var(--c-radius);outline:none;
  transition:border-color .15s;background:var(--c-bg);color:var(--c-text);
}
.a2l-cert .cert-field input:focus{border-color:var(--c-teal)}
.a2l-cert .cert-form-err{color:var(--c-red);font-size:13px;margin:10px 0;min-height:18px}
.a2l-cert .cert-privacy{font-size:12.5px;color:var(--c-muted);margin-top:14px}
.a2l-cert .hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* === Quiz === */
.a2l-cert .quiz-progress-wrap{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.a2l-cert .quiz-progress{flex:1;height:6px;border-radius:3px;background:var(--c-border);overflow:hidden}
.a2l-cert .quiz-progress i{display:block;height:100%;background:var(--c-teal);border-radius:3px;transition:width .25s}
.a2l-cert .quiz-count{font-family:'DM Mono',monospace;font-size:12px;color:var(--c-muted);white-space:nowrap}
.a2l-cert .quiz-q{font-size:18px;font-weight:600;line-height:1.45;margin-bottom:18px;color:var(--c-text)}
.a2l-cert .quiz-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.a2l-cert .quiz-opt{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--c-border-strong);border-radius:10px;background:var(--c-bg);
  padding:13px 15px;font-family:inherit;font-size:14.5px;color:var(--c-text-soft);
  cursor:pointer;transition:border-color .12s,background .12s;line-height:1.5;
}
.a2l-cert .quiz-opt:hover:not([disabled]){border-color:var(--c-teal)}
.a2l-cert .quiz-opt .k{
  font-family:'DM Mono',monospace;font-size:12px;font-weight:500;flex:0 0 22px;height:22px;
  border:1px solid var(--c-border-strong);border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;margin-top:1px;color:var(--c-muted);
}
.a2l-cert .quiz-opt.sel{border-color:var(--c-teal);background:var(--c-teal-soft)}
.a2l-cert .quiz-opt.correct{border-color:var(--c-teal);background:var(--c-teal-soft)}
.a2l-cert .quiz-opt.correct .k{background:var(--c-teal);border-color:var(--c-teal);color:#062019}
.a2l-cert .quiz-opt.wrong{border-color:var(--c-red);background:var(--c-red-soft)}
.a2l-cert .quiz-opt.wrong .k{border-color:var(--c-red);color:var(--c-red)}
.a2l-cert .quiz-opt[disabled]{cursor:default}
.a2l-cert .quiz-why{
  border:1px solid var(--c-border);border-left:3px solid var(--c-teal);
  background:var(--c-bg-alt);border-radius:0 var(--c-radius) var(--c-radius) 0;
  padding:14px 16px;margin:0 0 18px;font-size:14px;color:var(--c-text-soft);
}
.a2l-cert .quiz-why b{color:var(--c-text)}
.a2l-cert .quiz-result-score{
  font-family:'DM Mono',monospace;font-size:44px;font-weight:500;color:var(--c-teal-deep);margin:6px 0 2px;
}
.a2l-cert .quiz-result-score.fail{color:var(--c-red)}

/* === Certificate (rendered for PNG/PDF capture) === */
/* This used to carry overflow-x:auto, which is why the diploma had a horizontal
   scrollbar and its "Verify at" URL was cut off: a 1123px document inside a
   964px column. cert.js now scales the document to fit instead. */
.a2l-cert .cert-doc-wrap{margin:24px 0;border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg-alt);padding:24px}
.a2l-cert .cert-doc{
  /* 1123x794 is A4 landscape at 96dpi, and it is not a layout choice — it IS
     the PDF's page geometry. cert.js rasterises this element at scale 1.71
     (~164dpi) and jsPDF drops the result onto a 297x210mm page, so the pixel
     size cannot follow the viewport. Only the presentation can, via --cert-zoom
     (set by cert.js, reset to 1 for the capture).

     zoom rather than transform: zoom reflows, so the wrapper's height follows
     the scaled document automatically and text is re-rendered at its final
     size rather than resampled. */
  width:1123px;height:794px;zoom:var(--cert-zoom,1);
  margin:0 auto;background:#fff;position:relative;
  font-family:'Sora',sans-serif;color:#111827;overflow:hidden;
  border:1px solid #e5e7eb;
}
.a2l-cert .cert-doc-ribbon{
  height:74px;background:#0b1320;display:flex;align-items:center;gap:14px;padding:0 48px;
}
.a2l-cert .cert-doc-ribbon .logo{
  width:34px;height:34px;flex:0 0 34px;display:block;object-fit:contain;
}
.a2l-cert .cert-doc-ribbon .who{color:#e8ecf3;font-weight:600;font-size:15px;letter-spacing:.02em}
.a2l-cert .cert-doc-ribbon .who small{display:block;font-weight:400;font-size:10.5px;color:#9aa3b2;letter-spacing:.14em;text-transform:uppercase;margin-top:1px}
/* Bounded to exactly the region between the ribbon (74px) and the footer (118px,
   absolutely anchored) rather than left in normal flow. The citation can then
   never run past the footer no matter how long a holder's name is — .cert-doc
   has overflow:hidden, so the worst case is a clean clip instead of text
   colliding with the credential ID. */
.a2l-cert .cert-doc-body{
  position:absolute;left:0;right:0;top:74px;bottom:118px;
  padding:92px 88px 0;text-align:center;
  /* Flex column so the competency block can be pushed to the bottom with
     margin-top:auto. That is what closes the blank lower third: the slack
     collects BETWEEN the citation and the competencies, where it reads as
     hierarchy, instead of pooling under everything as dead space. It also
     adapts — a name that wraps to two lines eats into that middle gap rather
     than pushing the competencies through the footer. */
  display:flex;flex-direction:column;
}
.a2l-cert .cert-doc-kicker{
  font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:#0f9a78;margin-bottom:34px;
}
.a2l-cert .cert-doc-name{font-size:46px;font-weight:600;line-height:1.15;margin:0 0 28px;color:#111827}
/* Size ladder, chosen server-side from the name's length (see cert-complete.php).
   The certificate is a FIXED 794px canvas with an absolutely anchored footer, so
   a second line of 46px name is 53px the layout does not have — it pushed the
   seal 28px through the footer. Measured: the name column is 947px, so ~30 chars
   fit at 46px, ~47 at 36px, ~57 at 30px. Each step keeps long names on one line
   rather than letting them wrap into the seal. */
.a2l-cert .cert-doc-name.is-sm{font-size:36px}
.a2l-cert .cert-doc-name.is-xs{font-size:30px;line-height:1.2}
.a2l-cert .cert-doc-line{font-size:16px;color:#374151;margin:0 0 14px}
.a2l-cert .cert-doc-title{font-size:23px;font-weight:600;color:#0f9a78;margin:10px 0 34px}
.a2l-cert .cert-doc-rule{width:88px;height:3px;background:linear-gradient(90deg,#1dc598,#0f9a78);margin:0 auto 40px;border-radius:2px}
.a2l-cert .cert-doc-skills-lead{
  font-size:11.5px;letter-spacing:.02em;color:#9aa3b2;
  /* auto, not a fixed value: this and the list below it are pushed down as a
     pair until the list's bottom margin meets the footer. */
  margin:auto 0 9px;
}
.a2l-cert .cert-doc-skills{
  list-style:none;padding:0;margin:0 auto 56px;max-width:720px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px 22px;
}
.a2l-cert .cert-doc-skills li{
  position:relative;padding-left:15px;margin:0;font-size:12.5px;color:#6b7280;line-height:1.35;
}
.a2l-cert .cert-doc-skills li::before{
  content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;background:#1dc598;opacity:.8;
}
/* Seal, top-left — where a stamp sits on an official document, and out of the
   centre column so the citation reads as one uninterrupted block.

   Positioned against .cert-doc, NOT inside .cert-doc-body: it is a stamp on the
   page, not a step in the citation, so it must not join the body's flow or
   inherit its 88px padding. Consequence worth knowing — a long holder name can
   no longer push it anywhere, which is what it used to do from the bottom.

   Flat rings on purpose: this goes into a PDF and onto paper, where the share
   card's frosted glass would render as grey mud. Wording comes from
   a2l_cert_level_parts(), shared with the card, so the diploma and the badge
   cannot claim different levels. */
.a2l-cert .cert-doc-seal{
  position:absolute;top:112px;left:72px;z-index:2;
  width:116px;height:116px;border-radius:50%;
  border:2px solid #1dc598;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.a2l-cert .cert-doc-seal::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px solid rgba(29,197,152,.45);
}
.a2l-cert .cert-doc-seal .lvl{
  font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#0f9a78;line-height:1;
}
.a2l-cert .cert-doc-seal .rank{
  font-size:14px;font-weight:700;letter-spacing:.03em;color:#111827;
  margin:5px 0 4px;line-height:1;
}
.a2l-cert .cert-doc-seal .yr{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;
  color:#6b7280;line-height:1;
}

.a2l-cert .cert-doc-foot{
  position:absolute;left:0;right:0;bottom:0;height:118px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 88px;border-top:1px solid #e5e7eb;text-align:left;
}
.a2l-cert .cert-doc-foot .cell{font-size:13px;color:#374151}
.a2l-cert .cert-doc-foot .cell b{display:block;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;margin-bottom:5px}
.a2l-cert .cert-doc-foot .cell .mono{font-size:13px}
.a2l-cert .cert-doc-corner{
  position:absolute;width:130px;height:130px;pointer-events:none;
}
.a2l-cert .cert-doc-corner.tl{top:74px;left:0;border-top:4px solid #1dc598;border-left:4px solid #1dc598;opacity:.25}
.a2l-cert .cert-doc-corner.br{bottom:118px;right:0;border-bottom:4px solid #1dc598;border-right:4px solid #1dc598;opacity:.25}

/* === Verify page === */
/* =========================================================================
   FAQ ACCORDION  (certification landing page)
   Twelve answers as a flat h3+p stack is ~800 words of unbroken text — it
   wrecks the page's vertical rhythm and is unreadable on a phone. <details>
   keeps every answer in the HTML (indexed and extractable as normal) while
   letting the section breathe. First item ships open so it never reads empty.
   ========================================================================= */
.a2l-cert .cert-faq{
  border:1px solid var(--c-border);border-radius:12px;overflow:hidden;
  background:var(--c-bg);margin:18px 0 8px;
}
.a2l-cert .cert-faq-item + .cert-faq-item{border-top:1px solid var(--c-border)}
.a2l-cert .cert-faq-item > summary{
  cursor:pointer;list-style:none;padding:15px 46px 15px 18px;position:relative;
  font-size:15.5px;font-weight:600;color:var(--c-text);
  transition:background .15s ease,color .15s ease;
}
.a2l-cert .cert-faq-item > summary::-webkit-details-marker{display:none}
.a2l-cert .cert-faq-item > summary:hover{background:var(--c-bg-alt);color:var(--c-teal-deep)}
.a2l-cert .cert-faq-item > summary:focus-visible{
  outline:2px solid var(--c-teal);outline-offset:-2px;border-radius:2px;
}
/* Chevron, drawn in CSS so there is no icon dependency */
.a2l-cert .cert-faq-item > summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:8px;height:8px;margin-top:-5px;
  border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .2s ease,border-color .15s ease;
}
.a2l-cert .cert-faq-item[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}
.a2l-cert .cert-faq-item[open] > summary{color:var(--c-teal-deep)}
.a2l-cert .cert-faq-item > summary:hover::after{border-color:var(--c-teal-deep)}
.a2l-cert .cert-faq-a{padding:0 46px 17px 18px}
.a2l-cert .cert-faq-a p{margin:0;font-size:14.5px;line-height:1.65;color:var(--c-text-soft)}
.a2l-cert .cert-faq-a .mono{font-size:13.5px;color:var(--c-text)}
@media (max-width:560px){
  .a2l-cert .cert-faq-item > summary{padding:14px 40px 14px 14px;font-size:14.5px}
  .a2l-cert .cert-faq-a{padding:0 16px 15px 14px}
  /* Long monospace URLs must not force a horizontal scrollbar on a phone */
  .a2l-cert .cert-faq-a .mono{word-break:break-all}
}
@media (prefers-reduced-motion:reduce){
  .a2l-cert .cert-faq-item > summary,
  .a2l-cert .cert-faq-item > summary::after{transition:none}
}

/* =========================================================================
   VERIFICATION PAGE
   Five states: empty (lookup form) / malformed / notfound / valid / revoked.
   The empty state is a FORM, not an error — see CertificationTemplates/
   cert-verify.php for why that distinction matters.
   ========================================================================= */
.a2l-cert .verify-wrap{max-width:620px;margin:0 auto}
.a2l-cert .verify-head-block{text-align:center;margin-bottom:6px}
.a2l-cert .verify-head-block h1{font-size:30px;margin:6px 0 10px}
.a2l-cert .verify-head-block .cert-kicker{margin-bottom:2px}
.a2l-cert .verify-head-block .cert-lead{font-size:15.5px;max-width:520px;margin:0 auto 4px}

/* --- The credential card ------------------------------------------------- */
.a2l-cert .verify-card{
  border:1px solid var(--c-border);border-radius:14px;margin:24px auto 18px;
  overflow:hidden;background:var(--c-bg);
}
.a2l-cert .verify-card.is-valid{border-color:rgba(29,197,152,.45);box-shadow:0 1px 3px rgba(16,24,40,.04),0 0 0 4px var(--c-teal-soft)}
.a2l-cert .verify-card.is-revoked{border-color:rgba(220,38,38,.35);box-shadow:0 1px 3px rgba(16,24,40,.04),0 0 0 4px var(--c-red-soft)}
.a2l-cert .verify-head{
  background:var(--c-ribbon);color:#e8ecf3;padding:16px 22px;display:flex;align-items:center;gap:12px;
}
.a2l-cert .verify-head .logo{width:30px;height:30px;flex:0 0 30px;display:block;object-fit:contain}
.a2l-cert .verify-head-name{font-weight:600;font-size:14px}
/* Verified check, far right of the card header — the one glanceable trust mark */
.a2l-cert .verify-seal{
  margin-left:auto;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-teal);color:#062019;flex:0 0 26px;
}
.a2l-cert .verify-seal svg{width:15px;height:15px}
.a2l-cert .verify-body{padding:22px 22px 6px}
.a2l-cert .verify-status{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  color:var(--c-teal-deep);margin-bottom:14px;
}
.a2l-cert .verify-status.bad{color:var(--c-red)}
.a2l-cert .verify-status .dot{width:9px;height:9px;border-radius:50%;background:var(--c-teal)}
.a2l-cert .verify-status.bad .dot{background:var(--c-red)}

/* Holder name is the answer to the question being asked — give it real size */
.a2l-cert .verify-holder{
  border:1px solid var(--c-border);border-radius:10px;background:var(--c-bg-alt);
  padding:14px 16px;margin-bottom:18px;
}
.a2l-cert .verify-holder-label{
  display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-muted);font-weight:500;margin-bottom:4px;
}
.a2l-cert .verify-holder-name{font-size:21px;font-weight:600;color:var(--c-text);line-height:1.25}

.a2l-cert .verify-row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--c-border);padding:10px 0;font-size:14px}
.a2l-cert .verify-row:last-child{border-bottom:none}
.a2l-cert .verify-row b{font-weight:500;color:var(--c-muted);font-size:12.5px;flex:0 0 auto}
.a2l-cert .verify-row span{text-align:right;color:var(--c-text)}
.a2l-cert .verify-id{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.a2l-cert .verify-copy{
  font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;
  background:var(--c-bg-alt);border:1px solid var(--c-border-strong);color:var(--c-text-soft);
  border-radius:999px;padding:2px 10px;transition:border-color .15s,color .15s;
}
.a2l-cert .verify-copy:hover{border-color:var(--c-teal);color:var(--c-teal-deep)}
.a2l-cert .verify-copy.is-copied{border-color:var(--c-teal);color:var(--c-teal-deep);background:var(--c-teal-soft)}
.a2l-cert .btn.verify-copy{font-size:14px;border-radius:var(--c-radius);padding:10px 20px;background:transparent}

/* Competencies — what the credential actually attests to */
.a2l-cert .verify-skills{border-top:1px solid var(--c-border);background:var(--c-bg-alt);padding:16px 22px 18px}
.a2l-cert .verify-skills-lead{
  display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-muted);font-weight:500;margin-bottom:10px;
}
.a2l-cert .verify-skills ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.a2l-cert .verify-skills li{position:relative;padding-left:18px;font-size:13.5px;color:var(--c-text-soft)}
.a2l-cert .verify-skills li::before{
  content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:2px;
  background:var(--c-teal);opacity:.55;
}

/* --- Lookup form -------------------------------------------------------- */
.a2l-cert .verify-form{
  border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg);
  padding:18px 20px;margin:22px 0;
}
.a2l-cert .verify-form-label{display:block;font-size:13px;font-weight:600;color:var(--c-text);margin-bottom:7px}
.a2l-cert .verify-form-row{display:flex;gap:10px;align-items:stretch}
.a2l-cert .verify-form input{
  flex:1 1 auto;min-width:0;padding:11px 13px;font-size:15px;letter-spacing:.04em;
  border:1px solid var(--c-border-strong);border-radius:var(--c-radius);
  background:var(--c-bg);color:var(--c-text);font-family:'DM Mono','SF Mono',Menlo,Consolas,monospace;
}
.a2l-cert .verify-form input:focus{border-color:var(--c-teal);outline:2px solid var(--c-teal-soft);outline-offset:0}
.a2l-cert .verify-form input::placeholder{color:#9ca3af;letter-spacing:.04em}
.a2l-cert .verify-form .btn{flex:0 0 auto;white-space:nowrap}
.a2l-cert .verify-form-hint{font-size:12.5px;color:var(--c-muted);margin:9px 0 0}

/* --- Messages ----------------------------------------------------------- */
.a2l-cert .verify-msg{
  border:1px solid var(--c-border);border-left-width:3px;border-radius:0 var(--c-radius) var(--c-radius) 0;
  padding:15px 17px;margin:20px 0;font-size:14px;color:var(--c-text-soft);line-height:1.6;
}
.a2l-cert .verify-msg strong{display:block;margin-bottom:5px;color:var(--c-text)}
.a2l-cert .verify-msg ul{margin:9px 0 0;padding-left:20px;font-size:13.5px}
.a2l-cert .verify-msg li{margin-bottom:4px}
/* Amber for "you probably mistyped it" — a malformed ID is a user slip, not a
   failed credential, and colouring it red implies the certificate is fake. */
.a2l-cert .verify-msg.warn{border-left-color:#d97706;background:rgba(217,119,6,.05)}
.a2l-cert .verify-msg.bad{border-left-color:var(--c-red);background:var(--c-red-soft)}

.a2l-cert .verify-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 22px}
.a2l-cert .verify-trust{
  border:1px solid var(--c-border);border-radius:10px;background:var(--c-bg-alt);
  padding:15px 17px;font-size:13.5px;color:var(--c-text-soft);line-height:1.6;margin:20px 0;
}
.a2l-cert .verify-trust strong{color:var(--c-text)}
.a2l-cert .verify-cta{text-align:center;border-top:1px solid var(--c-border);margin-top:30px;padding-top:26px}
.a2l-cert .verify-cta p{font-size:14px;color:var(--c-muted);margin-bottom:12px}

@media (max-width:560px){
  .a2l-cert .verify-head-block h1{font-size:25px}
  .a2l-cert .verify-form-row{flex-direction:column}
  .a2l-cert .verify-form .btn{width:100%}
  .a2l-cert .verify-skills ul{grid-template-columns:1fr}
  .a2l-cert .verify-row{flex-direction:column;gap:3px}
  .a2l-cert .verify-row span{text-align:left}
  .a2l-cert .verify-id{justify-content:flex-start}
  .a2l-cert .verify-actions .btn{width:100%}
}

/* === Share post box === */
.a2l-cert .share-box{
  border:1px solid var(--c-border);border-radius:10px;background:var(--c-bg-alt);
  padding:16px;margin:14px 0;font-size:13.5px;color:var(--c-text-soft);white-space:pre-wrap;
  font-family:inherit;line-height:1.55;
  /* pre-wrap only breaks at spaces, and the post now leads with a verify URL
     that has none — on a narrow phone it ran straight off the right edge. */
  overflow-wrap:anywhere;
}

/* === Share preview =========================================================
   The post as it will appear, image included, before anyone commits to
   publishing it under their own name. Shaped like a feed item on purpose: the
   borrowed structure is what makes it read as a preview rather than as more
   page. Deliberately NOT a pixel copy of LinkedIn's chrome — no logo, no fake
   reaction row. It should be recognisable, not a forgery.
   ========================================================================== */
.a2l-cert .share-preview{
  border:1px solid var(--c-border);border-radius:14px;background:var(--c-bg);
  box-shadow:0 1px 2px rgba(17,24,39,.04),0 12px 32px rgba(17,24,39,.07);
  overflow:hidden;margin:18px 0 20px;max-width:620px;
}
.a2l-cert .share-preview-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px 10px;
}
.a2l-cert .share-preview-head .sp-avatar{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-teal-soft);border:1px solid var(--c-teal);
  color:var(--c-teal-deep);font-weight:600;font-size:17px;text-transform:uppercase;
}
.a2l-cert .share-preview-head .sp-who{
  display:flex;flex-direction:column;font-weight:600;font-size:14px;color:var(--c-text);
  line-height:1.3;min-width:0;
}
.a2l-cert .share-preview-head .sp-who small{
  font-weight:400;font-size:12px;color:var(--c-muted);margin-top:2px;
}
.a2l-cert .share-preview-head .sp-tag{
  margin-left:auto;flex:0 0 auto;font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);
  border:1px solid var(--c-border-strong);border-radius:999px;padding:3px 9px;
}
/* Inside the preview the post text is the post, not a callout: drop the box. */
.a2l-cert .share-preview .share-box{
  border:none;background:transparent;border-radius:0;margin:0;
  padding:0 16px 14px;font-size:14px;color:var(--c-text);
}
.a2l-cert .share-preview-card{margin:0;border-top:1px solid var(--c-border)}
.a2l-cert .share-preview-card img{
  display:block;width:100%;height:auto;background:var(--c-ribbon);
}
.a2l-cert .share-preview-card figcaption{
  display:flex;flex-direction:column;gap:3px;padding:11px 16px 13px;
  background:var(--c-bg-alt);border-top:1px solid var(--c-border);
}
.a2l-cert .share-preview-card .sp-host{
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--c-muted);
}
.a2l-cert .share-preview-card .sp-title{font-size:13.5px;font-weight:600;color:var(--c-text)}

/* === Footer === */
.a2l-cert .cert-footer{
  border-top:1px solid var(--c-border);padding:20px 22px;display:flex;flex-wrap:wrap;
  gap:14px;align-items:center;font-size:12.5px;color:var(--c-muted);
}
.a2l-cert .cert-footer .sp{margin-left:auto}
.a2l-cert .cert-footer a{color:var(--c-muted)}

/* === Print: certificate only === */
@media print{
  .a2l-cert .cert-ribbon,.a2l-cert .cert-topbar,.a2l-cert .cert-footer,.a2l-cert .no-print{display:none!important}
}