@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Great+Vibes&display=swap');

/* assets/certificate_v2.css - the certificate of completion (pages/certificate.py, /c/<code>)
   Landscape, A4 proportions. Sizes use container units, so the certificate scales as one
   piece: the same design on a phone, a laptop, a printout or a downloaded image. */

.cx-wrap {
    width: 100%;
    max-width: 1000px;
    container-type: inline-size;
}

.cx-card {
    aspect-ratio: 1.414 / 1;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(195, 154, 85, 0.035) 0 0.25cqw, transparent 0.25cqw 0.9cqw),
        radial-gradient(ellipse at 50% 45%, #fffdf7 0%, #faf5e9 70%, #f3ead4 100%);
    color: #16202e;
    padding: 2.2cqw;
    border-radius: 0.4cqw;
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.45);
    font-family: Georgia, 'Times New Roman', serif;
}

/* Double teal frame with a fine gold rule between */
.cx-frame {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    border: 0.45cqw solid #1d4f49;
    box-shadow: inset 0 0 0 0.5cqw #fbf6ea, inset 0 0 0 0.62cqw #c39a55, inset 0 0 0 1.1cqw #fbf6ea, inset 0 0 0 1.2cqw #1d4f49;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.4cqw 8cqw 2.6cqw;
}
/* Gold corner ornaments */
.cx-corner { position: absolute; width: 5.2cqw; height: 5.2cqw; border: 0.22cqw solid #c39a55; }
.cx-corner::after { content: ""; position: absolute; width: 1cqw; height: 1cqw; background: #c39a55; transform: rotate(45deg); }
.cx-corner.tl { top: 1.9cqw; left: 1.9cqw; border-right: 0; border-bottom: 0; }
.cx-corner.tr { top: 1.9cqw; right: 1.9cqw; border-left: 0; border-bottom: 0; }
.cx-corner.bl { bottom: 1.9cqw; left: 1.9cqw; border-right: 0; border-top: 0; }
.cx-corner.br { bottom: 1.9cqw; right: 1.9cqw; border-left: 0; border-top: 0; }
.cx-corner.tl::after { top: -0.6cqw; left: -0.6cqw; }
.cx-corner.tr::after { top: -0.6cqw; right: -0.6cqw; }
.cx-corner.bl::after { bottom: -0.6cqw; left: -0.6cqw; }
.cx-corner.br::after { bottom: -0.6cqw; right: -0.6cqw; }

.cx-top {
    position: absolute;
    top: 3.6cqw;
    left: 4.4cqw;
    display: flex;
    align-items: center;
    gap: 0.8cqw;
}
.cx-mark {
    width: 2.8cqw;
    height: 2.8cqw;
    border-radius: 0.6cqw;
    background: #1d4f49;
    color: #f1dfa8;
    display: inline-grid;
    place-items: center;
    font: 700 1.6cqw/1 'Playfair Display', Georgia, serif;
}
.cx-brand {
    font: 700 1.6cqw/1 'Playfair Display', Georgia, serif;
    color: #1d4f49;
    letter-spacing: 0.04em;
}

.cx-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 5.4cqw;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #1d4f49;
    margin: auto 0 0.6cqw;   /* auto: the block sits centred between the top and the signatures */
    padding-left: 0.2em;     /* balances the trailing letter-spacing */
}
.cx-label2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 2.6cqw;
    color: #a97f3e;
    margin: 0 0 2.2cqw;
    display: flex;
    align-items: center;
    gap: 1.4cqw;
}
.cx-label2::before, .cx-label2::after { content: ""; width: 7cqw; height: 0.12cqw; background: linear-gradient(90deg, transparent, #c39a55); }
.cx-label2::after { background: linear-gradient(90deg, #c39a55, transparent); }

.cx-intro {
    font-style: italic;
    font-size: 1.75cqw;
    color: #5b6675;
    letter-spacing: 0.02em;
}

.cx-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 6cqw;
    line-height: 1.15;
    color: #16202e;
    margin: 0.6cqw 0 1.2cqw;
    padding: 0 4cqw 0.7cqw;
    border-bottom: 0.14cqw solid #c39a55;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cx-title {
    font: 700 3cqw/1.2 'Playfair Display', Georgia, serif;
    color: #1d4f49;
    margin: 0.9cqw 0 0.8cqw;
}

.cx-skills {
    font: 600 1.25cqw/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #6b7684;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    max-width: 86%;
}

.cx-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 4cqw;
    width: 100%;
    margin-top: auto;
    padding-top: 1.6cqw;
}
.cx-col { text-align: center; }
.cx-sig {
    font: 600 1.7cqw/1.3 Georgia, serif;
    color: #16202e;
    padding-bottom: 0.6cqw;
    border-bottom: 0.12cqw solid #c39a55;
}
.cx-sign {
    font-family: 'Great Vibes', 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 3.4cqw;
    line-height: 1;
    color: #1d4f49;
}
.cx-cap {
    font: 600 1cqw/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #7b8693;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.7cqw;
}

/* The seal: a gold rosette with ribbons */
.cx-seal {
    width: 12.5cqw;
    height: auto;
    margin-bottom: -3.2cqw;
    filter: drop-shadow(0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.25));
}

.cx-verify {
    position: absolute;
    bottom: 1.9cqw;
    left: 0;
    right: 0;
    font: 500 1.05cqw/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #8a94a0;
    letter-spacing: 0.02em;
}

/* ── Dark version (on-site): the site's navy and teal, gold kept as the one warm accent.
   Screen only (.cx-wrap.cx-dark, the default in cert_card): printing and Save as PDF use the cream paper above. ── */
@media screen {
    .cx-dark .cx-card {
        background:
            repeating-radial-gradient(circle at 50% 50%, rgba(195, 154, 85, 0.045) 0 0.25cqw, transparent 0.25cqw 0.9cqw),
            radial-gradient(ellipse at 50% 42%, #172a45 0%, #101e33 62%, #0b1526 100%);
        color: #e6edf6;
        box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.55), 0 0 0 1px #203047;
    }
    .cx-dark .cx-frame { border-color: #6AA59C; box-shadow: inset 0 0 0 0.5cqw #122239, inset 0 0 0 0.62cqw #c39a55, inset 0 0 0 1.1cqw #122239, inset 0 0 0 1.2cqw #6AA59C; }
    .cx-dark .cx-mark { background: #6AA59C; color: #0b1220; }
    .cx-dark .cx-brand { color: #8fc4bb; }
    .cx-dark .cx-label { color: #8fc4bb; }
    .cx-dark .cx-label2 { color: #d9b56f; }
    .cx-dark .cx-intro { color: #9fb2c8; }
    .cx-dark .cx-name { color: #f6efe0; }
    .cx-dark .cx-title { color: #8fc4bb; }
    .cx-dark .cx-skills { color: #8597ad; }
    .cx-dark .cx-sig { color: #e6edf6; }
    .cx-dark .cx-sign { color: #d9b56f; }
    .cx-dark .cx-cap { color: #6f8098; }
    .cx-dark .cx-verify { color: #6f8098; }
    .cx-dark .cx-seal { filter: drop-shadow(0 0.4cqw 0.9cqw rgba(0, 0, 0, 0.55)); }
}

/* ── Around the certificate ── */
.cert-shell .cx-wrap { max-width: min(1080px, calc((100vh - 215px) * 1.414)); margin: 0 auto; }
.cert-shell { padding-top: 18px !important; }
.cx-head { max-width: 1080px; width: 100%; margin: 0 0 12px; }
.cx-back { color: #6AA59C; font: 700 14px system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none; }
.cx-back:hover { text-decoration: underline; }
.cx-eyebrow { margin: 8px 0 2px; color: #6AA59C; font: 800 12px system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.cx-h1 { margin: 0; color: #e6edf6; font: 800 26px/1.15 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.cx-sub { margin: 4px 0 0; color: #9fb2c8; font-size: 14px; }
.cx-head + .cx-note { max-width: 1080px; }
.cert-shell .cx-actions { max-width: 1080px; }
.cx-note {
    max-width: 1000px;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px dashed rgba(106, 165, 156, 0.5);
    border-radius: 12px;
    color: #9fb2c8;
    font-size: 14px;
}
.cx-actions {
    max-width: 1000px;
    width: 100%;
    margin: 22px 0 0;
    text-align: center;
}
.cx-actions-h {
    color: #e6edf6;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
}
.cx-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.cx-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(106, 165, 156, 0.6);
    background: transparent;
    color: #e6edf6;
    font: 600 14px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.cx-btn:hover { border-color: #6AA59C; color: #fff; }
.cx-btn-main { background: #6AA59C; border-color: #6AA59C; color: #0b1220; }
.cx-btn-main:hover { color: #0b1220; opacity: 0.9; }
.cx-link { margin-top: 12px; font-size: 14px; color: #9fb2c8; overflow-wrap: anywhere; }
.cx-link a { color: #6AA59C; }

/* Public page: the verified banner and the invitation */
.cx-verified {
    max-width: 1000px;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(106, 165, 156, 0.12);
    border: 1px solid rgba(106, 165, 156, 0.45);
    color: #e6edf6;
    font-size: 14px;
}
.cx-verified strong { color: #6AA59C; }

@media (max-width: 600px) {
    .cert-shell { padding: 24px 12px 48px !important; justify-content: flex-start !important; }
    .cx-btn { flex: 1 1 calc(50% - 10px); text-align: center; padding: 11px 12px; }
    .cx-btn-main { flex-basis: 100%; }
}

@media print {
    /* One page with just the certificate: everything else is removed (so it takes no space and can't spill onto a
       second page), and the card keeps its shape, as big as fits, centred on the page in either orientation */
    @page { size: landscape; margin: 8mm; }
    html:root, html:root body { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; overflow: visible !important; }
    html:root body *:not(:has(.cx-wrap)):not(.cx-wrap):not(.cx-wrap *) { display: none !important; }
    html:root body *:has(.cx-wrap) { display: block !important; position: static !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; transform: none !important; }
    html:root body .cx-wrap { position: static !important; width: min(100%, calc((100vh - 4mm) * 1.414)) !important; max-width: none !important; margin: 0 auto !important; break-inside: avoid; page-break-inside: avoid; }
    .cx-card { box-shadow: none !important; border-radius: 0 !important; aspect-ratio: 1.414 / 1 !important; height: auto !important; width: 100% !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* the site's dark backdrop is fixed to the body itself (theme.css body::before), so the rules above can't reach
       it: iPhones printed it as a dark block */
    html:root body::before, html:root body::after { display: none !important; content: none !important; }
}
/* Portrait paper (iPhones always print portrait, whatever @page says): the certificate fills the width, so centre it
   down the page instead of leaving the bottom half empty. Landscape (desktop) is unchanged. */
@media print and (orientation: portrait) {
    html:root body .cx-wrap { margin-top: max(0px, calc((100vh - 100vw / 1.414) / 2)) !important; }
}

/* ── The certificate page on one screen (2026-10): the certificate sized to the screen height, its buttons
   in a column beside it on wide screens, stacked under it on phones. ── */
.cert-shell { min-height: calc(100vh - 64px) !important; justify-content: flex-start !important; padding: 16px 24px 24px !important; }
.cert-shell .cert-no-print { margin-bottom: 0; }
.cert-shell .cx-head { max-width: 1180px; margin: 0 0 12px; }
.cert-shell .cx-head .cx-sub { margin-top: 2px; }
.cert-shell .cx-note { max-width: 1180px; margin: 0 0 12px; padding: 8px 12px; }
.cx-stage { width: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cx-stage .cx-wrap { max-width: min(1000px, 100%); margin: 0 auto; }
.cx-stage .cx-actions { margin: 0; }
@media (min-width: 1000px) {
    .cx-stage { grid-template-columns: auto 250px; align-items: center; justify-content: center; }
    /* the certificate sizes itself from its own width (container units), so it needs an explicit one here */
    .cx-stage .cx-wrap { width: min(calc(100vw - 48px - 270px), 900px, calc((100vh - 64px - 185px) * 1.414)); max-width: none; }
    .cx-stage .cx-actions { text-align: left; }
    .cx-stage .cx-actions-h { margin-bottom: 10px; }
    .cx-stage .cx-btns { flex-direction: column; align-items: stretch; }
    .cx-stage .cx-btn { text-align: center; }
    .cx-stage .cx-link { font-size: 12px; }
}
/* Certificate ID and verify link: top-right corner, clear of the seal */
.cx-verify { top: 3.9cqw; bottom: auto; left: auto; right: 4.6cqw; text-align: right; }
/* the page draws its content inside a second .cert-shell: only the outer one sets the height and padding */
.cert-shell .cert-shell { min-height: 0 !important; padding: 0 !important; width: 100%; align-items: center; }
@media (min-width: 1000px) {   /* heading and note line up with the certificate and its buttons */
    .cert-shell .cx-head, .cert-shell .cx-note { width: calc(min(calc(100vw - 48px - 270px), 900px, calc((100vh - 64px - 185px) * 1.414)) + 270px); max-width: 100%; }
}
.cx-sharenote{grid-column:1/-1;flex-basis:100%;margin:6px 0 0;font-size:13px;color:var(--b-teal,#6AA59C);text-align:center}

/* Phones and the home-screen app: no Print / Save as PDF for now (iPhone printing doesn't come out right).
   Download image, LinkedIn and the link cover sharing there. Desktop keeps it. */
@media screen and (max-width: 768px) {
    #cert-print-btn { display: none !important; }
}