/* ============================================================
   CRRSA — Documents section upgrade
   Load AFTER crrsa.css (and crrsa-enhance.css if you use it).
   ============================================================ */

/* ---------- Section frame ---------- */
#documents .head h2::after{width:84px;background:linear-gradient(90deg,var(--navy),var(--teal),var(--teal2))}
.stage{--sh:clamp(360px,94vw,560px);position:relative;border-radius:28px;
  background:
    radial-gradient(circle at 50% 38%,rgba(18,163,160,.22),transparent 62%),
    radial-gradient(rgba(14,124,134,.12) 1px,transparent 1.5px) 0 0/18px 18px,
    var(--card);
  box-shadow:0 24px 60px rgba(10,42,67,.14)}
.dw.l{width:min(100%,calc(var(--sh)*1.24))}
.dw.p{width:min(86%,calc(var(--sh)*.64))}

.dinfo{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:1.8rem 1.6rem 1.5rem;box-shadow:0 16px 40px rgba(10,42,67,.10)}
.dinfo::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--navy),var(--teal),var(--teal2))}
.dinfo h3{font-size:1.6rem!important}
.dft li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:.55rem;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;font-size:.72rem}
.dtabs .chip{transition:all .25s}
.dtabs .chip:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px)}

/* ---------- Ethiopian flag (top-centre of every document) ---------- */
.fw{position:relative;display:block;flex:none;width:4.6em;aspect-ratio:2/1;overflow:hidden;border-radius:.28em;
  box-shadow:0 .25em .8em rgba(0,0,0,.28),0 0 0 .08em rgba(255,255,255,.7);
  transform-origin:left center;animation:flw 4.5s ease-in-out infinite}
.fw img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.fw::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:fsh 3.2s 1.2s infinite}
@keyframes flw{0%,100%{transform:perspective(220px) rotateY(0) skewY(0)}50%{transform:perspective(220px) rotateY(9deg) skewY(-1.2deg)}}
@keyframes fsh{to{transform:translateX(120%)}}
.id .hd .fw{width:3.4em}
.p .fw{width:5.4em}

/* ---------- Certificate paper ---------- */
.cert.t1{--ca:var(--teal);--ci:var(--navy);--ct:color-mix(in srgb,var(--navy) 70%,var(--teal));--paper:#F2F9FA;--paper2:#E0F0F2}
.cert.t2{--ca:var(--navy);--ci:var(--navy);--ct:color-mix(in srgb,var(--navy) 80%,var(--teal));--paper:#F3F6FA;--paper2:#E0E8F1}
.cert.t3{--ca:var(--teal2);--ci:var(--navy);--ct:color-mix(in srgb,var(--navy) 70%,var(--teal2));--paper:#F1FAF9;--paper2:#DCF0EF}

.cert.t1 .dk,.cert.t2 .dk,.cert.t3 .dk{
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.85),transparent 68%),
    repeating-radial-gradient(circle at 50% 135%,color-mix(in srgb,var(--ca) 7%,transparent) 0 1px,transparent 1px 6px),
    repeating-radial-gradient(circle at 50% -35%,color-mix(in srgb,var(--ca) 6%,transparent) 0 1px,transparent 1px 6px),
    linear-gradient(180deg,var(--paper),var(--paper2));
  color:var(--ci)}
.cert.t1 .dk::before,.cert.t2 .dk::before,.cert.t3 .dk::before{border:.14em double var(--ca);inset:.9em;border-radius:.6em}
.cert .dk .wm{color:color-mix(in srgb,var(--ca) 8%,transparent)}

/* tricolour edge bands */
.tri{position:absolute;left:0;right:0;top:0;height:.55em;z-index:5;background:linear-gradient(90deg,var(--navy),var(--teal),var(--teal2))}
.tri.b{top:auto;bottom:0;height:.4em}

/* gold corner ornaments */
.co{position:absolute;width:2.6em;height:2.6em;z-index:4;pointer-events:none;
  border:.16em solid var(--ca);border-radius:.2em;
  -webkit-mask:linear-gradient(#000,#000) top left/100% 100% no-repeat;}
.co::after{content:"";position:absolute;width:.7em;height:.7em;background:var(--ca);transform:rotate(45deg)}
.co.c1{left:1.35em;top:1.4em;border-right:0;border-bottom:0;border-top-left-radius:.8em}
.co.c1::after{left:-.4em;top:-.4em}
.co.c2{right:1.35em;top:1.4em;border-left:0;border-bottom:0;border-top-right-radius:.8em}
.co.c2::after{right:-.4em;top:-.4em}
.co.c3{left:1.35em;bottom:1.25em;border-right:0;border-top:0;border-bottom-left-radius:.8em}
.co.c3::after{left:-.4em;bottom:-.4em}
.co.c4{right:1.35em;bottom:1.25em;border-left:0;border-top:0;border-bottom-right-radius:.8em}
.co.c4::after{right:-.4em;bottom:-.4em}

/* header block */
.cert .bd2{padding:1.25em 2em .3em;gap:.22em}
.cert .eh{display:block;text-align:center;line-height:1.35}
.cert .eh small{display:block;font-size:.58em;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ct)}
.cert .eh small+small{font-weight:600;opacity:.8}
.cert .bd2 h4{font-size:1.75em;letter-spacing:.05em;color:var(--ci);text-shadow:0 .04em 0 rgba(255,255,255,.9);margin:.1em 0 0}
.rule{display:flex;align-items:center;gap:.5em;width:62%;color:var(--ca);font-size:.7em;justify-content:center}
.rule::before,.rule::after{content:"";flex:1;height:.09em;background:linear-gradient(90deg,transparent,var(--ca))}
.rule::after{transform:scaleX(-1)}
.cert .ct{color:var(--ct);font-style:italic;font-family:Georgia,serif;margin:.1em 0 0}
.cert.t1 .bd2 h5,.cert.t2 .bd2 h5,.cert.t3 .bd2 h5{border-bottom-color:var(--ca);color:var(--ci);font-size:1.4em}
.cert .f small{color:var(--ct);opacity:.85;text-transform:uppercase;letter-spacing:.06em;font-size:.56em}
.cert .f b{color:var(--ci)}
.cert .sg2{color:var(--ct);border-top-color:var(--ca)}
.cert .no{color:var(--ct);font-weight:700}
.cert.t1 .seal,.cert.t2 .seal,.cert.t3 .seal{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--ca) 35%,#fff),var(--ca) 75%);color:#fff;border-color:var(--ci);box-shadow:0 .2em .6em rgba(0,0,0,.25)}
.cert.t1 .qw::after,.cert.t2 .qw::after,.cert.t3 .qw::after{background:var(--ca);box-shadow:0 0 8px var(--ca)}

/* middle row: photos + details */
.cert .mid{display:flex;align-items:center;justify-content:center;gap:1.1em;width:100%;margin-top:.15em}
.cert .mid .cc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.25em;text-align:center}
.cert .mid .fl{max-width:100%}

/* photo placeholders */
.ph2{margin:0;display:flex;flex-direction:column;align-items:center;gap:.3em;flex:none;position:relative;z-index:2}
.pf{width:6em;aspect-ratio:3/4;padding:.2em;border-radius:.55em;
  background:linear-gradient(135deg,var(--teal2),var(--ca) 55%,var(--teal2));
  box-shadow:0 .4em 1em rgba(0,0,0,.25)}
.pf svg{display:block;width:100%;height:100%;border-radius:.4em;background:linear-gradient(180deg,#F1F6F9,#CFDDE6)}
.ph2 figcaption{font-size:.52em;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ct)}

/* ---------- Portrait A4 (non-marital) ---------- */
.p.cert .bd2{padding:1.8em 2.1em .5em;gap:.5em}
.p.cert .bd2 h4{font-size:1.45em;line-height:1.2}
.p.cert .rule{width:70%}
.p.cert .bd2 h5{font-size:1.25em;margin:.4em 0}
.p.cert .fl{flex-direction:column;flex-wrap:nowrap;width:100%;gap:0;margin-top:.5em}
.p.cert .f{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.5em .1em;border-bottom:.07em dotted var(--ca);text-align:left}
.p.cert .f small{font-size:.62em}
.p.cert .f b{font-size:.85em;text-align:right}
.decl{font-size:.62em;line-height:1.55;color:var(--ct);text-align:center;margin:.9em 1em 0;font-style:italic;font-family:Georgia,serif}
.p.cert .ft{padding-bottom:.8em}
.p.cert .qw{width:6em}
.p.cert .seal{width:4.4em}

@media(prefers-reduced-motion:reduce){.fw,.fw::after{animation:none!important}}