/* =============================================================================
   Aamal Aljoud — Redesign Global Shell (header + footer)
   -----------------------------------------------------------------------------
   The header keeps the hooks shell.js drives its search dialog by (#search,
   #search-input, #search-results).
   ========================================================================== */

/* ================================================================== PAGE == */

/* the page itself is white; the body's off-white shows only past its end */
.page-wraper {
    background-color: var(--aj-surface);
}

/* ================================================================ HEADER == */

.aj-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--aj-z-header);
    width: 100%;

    /* Translucent by default so the homepage hero reads through it. On pages
       with no media behind the header the backdrop is the page ground, so the
       glass simply resolves to white. */
    background-color: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-block-end: 1px solid rgba(228, 233, 236, 0.55);
    transition: background-color var(--aj-duration) var(--aj-ease),
        border-color var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease);
}

/* Without backdrop-filter the translucency would leave the nav unreadable
   over the hero video, so fall back to a near solid bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .aj-header {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

/* Past the first few pixels the bar firms up — no jump, just a fade. */
.aj-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    border-block-end-color: var(--aj-border);
    box-shadow: var(--aj-shadow-sm);
}

/* the header's lists are rows of links, not text lists */
.aj-header ul,
.aj-header ol {
    margin-block-end: 0;
}

.aj-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--aj-space-5);
    min-block-size: var(--aj-header-h);
}

/* ---- logo ---- */

.aj-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-block: var(--aj-space-2);
}

.aj-header__logo img {
    display: block;
    block-size: clamp(44px, 3.4vw, 56px);
    inline-size: auto;
}

/* ---- desktop navigation ---- */

.aj-header__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
}

.aj-header .aj-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(var(--aj-space-3), 1.6vw, var(--aj-space-8));
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}

.aj-header .aj-nav__item {
    position: relative;
    margin: 0;
    padding: 0;
    float: none;
}

.aj-header .aj-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--aj-space-2) 0;
    font-size: var(--aj-fs-sm);
    font-weight: var(--aj-fw-medium);
    line-height: 1.4;
    color: var(--aj-text-secondary);
    text-decoration: none;
    background: none;
    border: 0;
    transition: color var(--aj-duration-fast) var(--aj-ease);
}

.aj-header .aj-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 2px;
    background-color: var(--aj-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--aj-duration) var(--aj-ease);
}

.aj-header .aj-nav__link:hover,
.aj-header .aj-nav__link:focus-visible {
    color: var(--aj-text);
}

/* The deeper accent: the bar is translucent over the hero, so the lighter
   accent would fall under 4.5:1 against the video showing through. */
.aj-header .aj-nav__item.is-active .aj-nav__link {
    color: var(--aj-accent-active);
    font-weight: var(--aj-fw-medium);
}

.aj-header .aj-nav__item.is-active .aj-nav__link::after {
    transform: scaleX(1);
}

/* ---- header actions (search + CTA) ---- */

.aj-header__actions {
    display: flex;
    align-items: center;
    gap: var(--aj-space-2);
    flex: 0 0 auto;
}

.aj-header__cta {
    white-space: nowrap;
}

/* ================================================= SEARCH OVERLAY (#search) */

.aj-header #search {
    position: fixed;
    inset: 0;
    z-index: var(--aj-z-overlay);

    display: flex;
    align-items: flex-start;
    justify-content: center;

    /* shown by .open, which shell.js and app.js set */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    background-color: rgba(32, 36, 43, 0.55);
    backdrop-filter: blur(3px);
    transition: opacity var(--aj-duration) var(--aj-ease),
        visibility var(--aj-duration) var(--aj-ease);
}

.aj-header #search.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.aj-search__panel {
    inline-size: min(680px, calc(100% - 2rem));
    margin-block-start: clamp(72px, 12vh, 140px);
    padding: var(--aj-space-6);
    background-color: var(--aj-surface);
    border-radius: var(--aj-radius-lg);
    box-shadow: var(--aj-shadow-md);
}

/* the controls centre on the field (fixed at 56px) rather than on the form,
   which grows as the results arrive */
.aj-header #search .aj-search__form {
    position: relative;
}

/* the field has its own × — the browser's clear control would be a second */
.aj-header #search #search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.aj-header #search #search-input {
    inline-size: 100%;
    padding: 0 3rem;
    block-size: 56px;
    font-family: var(--aj-font);
    font-size: var(--aj-fs-body);
    color: var(--aj-text);
    background-color: var(--aj-surface-muted);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-sm);
    box-shadow: none;
}

.aj-header #search #search-input:focus {
    outline: none;
    background-color: var(--aj-surface);
    border-color: var(--aj-accent);
    box-shadow: 0 0 0 3px var(--aj-focus-ring);
}

.aj-search__submit {
    position: absolute;
    inset-inline-start: var(--aj-space-3);
    inset-block-start: 28px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    color: var(--aj-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--aj-radius-sm);
    cursor: pointer;
}

.aj-search__submit:hover,
.aj-search__submit:focus-visible {
    color: var(--aj-accent);
}

.aj-header #search .aj-search__close {
    position: absolute;
    inset-inline-end: var(--aj-space-3);
    inset-block-start: 28px;
    transform: translateY(-50%);
    inline-size: 34px;
    block-size: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--aj-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--aj-radius-sm);
    cursor: pointer;
}

.aj-header #search .aj-search__close:hover,
.aj-header #search .aj-search__close:focus-visible {
    color: var(--aj-text);
    background-color: var(--aj-surface-muted);
}

/* results dropdown */
.aj-header #search-results {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--aj-space-3);
    padding: 0;
    max-block-size: min(50vh, 380px);
    overflow-y: auto;
    list-style: none;
    border-radius: var(--aj-radius-sm);
}

.aj-header #search-results:not(:empty) {
    border: 1px solid var(--aj-border);
}

.aj-header #search-results .list-group-item {
    padding: var(--aj-space-3) var(--aj-space-4);
    font-size: var(--aj-fs-sm);
    color: var(--aj-text);
    background-color: var(--aj-surface);
    border: 0;
    border-block-end: 1px solid var(--aj-divider);
}

.aj-header #search-results .list-group-item:last-child {
    border-block-end: 0;
}

.aj-header #search-results a {
    color: var(--aj-text);
    text-decoration: none;
}

.aj-header #search-results .list-group-item:hover {
    background-color: var(--aj-surface-muted);
}

/* ================================================================ FOOTER == */

/* Note: the class is deliberately NOT .site-footer — the legacy
   footer_fixed() helper pins a pixel height on that selector, which fights a
   responsive footer. Dropping the hook makes that helper a harmless no-op. */

/*
 * Three regions rather than a row of equal columns: identity, links, contact.
 * Light throughout — one hairline at the top, one along the copyright rule,
 * and a line drawn skyline sitting quietly along the base.
 */
.aj-footer {
    position: relative;
    background-color: var(--aj-page);
    border-block-start: 1px solid var(--aj-border);
    color: var(--aj-text-secondary);
    overflow: hidden;
}

.aj-footer__main {
    position: relative;
    padding-block: clamp(var(--aj-space-12), 6vw, var(--aj-space-20))
        clamp(var(--aj-space-10), 5vw, var(--aj-space-16));
}

/* the content rides above the motif drawn behind it */
.aj-footer__main > .aj-container {
    position: relative;
    z-index: 1;
}

.aj-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(var(--aj-space-8), 4vw, var(--aj-space-16));
    align-items: start;
}

/* ---- 1. identity ---- */

.aj-footer__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--aj-space-5);
}

/* the anchor for this whole region: larger, and centred in its own column */
.aj-footer__logo {
    align-self: center;
}

.aj-footer__logo img {
    display: block;
    block-size: 104px;
    inline-size: auto;
}

/*
 * One line wherever the column can hold it: the wrap was coming from a
 * character cap, not from a lack of room. Narrow frames wrap normally.
 */
.aj-footer__tagline {
    margin: 0;
    font-size: var(--aj-fs-sm);
    line-height: var(--aj-lh-normal);
    color: var(--aj-text-secondary);
    white-space: nowrap;
}

/* ---- 2. links ---- */

.aj-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: clamp(var(--aj-space-6), 2vw, var(--aj-space-8));
}

.aj-footer__col-title {
    margin: 0 0 var(--aj-space-5);
    font-size: var(--aj-fs-body);
    font-weight: var(--aj-fw-bold);
    letter-spacing: var(--aj-ls-tight);
    color: var(--aj-text);
}

.aj-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--aj-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aj-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    font-size: var(--aj-fs-sm);
    color: var(--aj-text-secondary);
    text-decoration: none;
    transition: color var(--aj-duration-fast) var(--aj-ease);
}

.aj-footer__link:hover,
.aj-footer__link:focus-visible {
    color: var(--aj-accent);
}

/* ---- 3. contact ---- */

.aj-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--aj-space-3);
    font-size: var(--aj-fs-sm);
    color: var(--aj-text-secondary);
    line-height: var(--aj-lh-normal);
}

.aj-footer__contact-item .aj-icon {
    color: var(--aj-accent);
    flex: 0 0 auto;
    margin-block-start: 3px;
}

.aj-footer__contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color var(--aj-duration-fast) var(--aj-ease);
}

.aj-footer__contact-item a:hover,
.aj-footer__contact-item a:focus-visible {
    color: var(--aj-accent);
}

/* ---- social ---- */

.aj-footer .aj-social {
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}

.aj-footer .aj-social li {
    margin: 0;
    padding: 0;
    float: none;
}

/* Flat marks: no ring, no pill, no plate — just the glyph. */
.aj-footer .aj-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* the box stays a comfortable touch target even though nothing is drawn */
    inline-size: 40px;
    block-size: 40px;
    margin-inline: -8px;
    color: var(--aj-charcoal-soft);
    background: none;
    border: 0;
    border-radius: var(--aj-radius-sm);
    text-decoration: none;
    transition: color var(--aj-duration) var(--aj-ease);
}

.aj-footer .aj-social__link:hover,
.aj-footer .aj-social__link:focus-visible {
    color: var(--aj-accent);
}

/* ---- certifications ---- */

.aj-footer__certs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aj-space-2);
    margin-block-start: var(--aj-space-2);
}

/* small and quiet: a hairline and a mark, never a card */
.aj-cert {
    display: inline-flex;
    align-items: center;
    gap: var(--aj-space-2);
    padding: 6px var(--aj-space-3);
    background: none;
    border: 1px solid var(--aj-divider);
    border-radius: var(--aj-radius-pill);
    cursor: pointer;
    transition: border-color var(--aj-duration) var(--aj-ease),
        color var(--aj-duration) var(--aj-ease);
}

.aj-cert:hover,
.aj-cert:focus-visible {
    border-color: var(--aj-accent-border);
}

.aj-cert img {
    inline-size: 18px;
    block-size: auto;
    /* the shipped iso.png is a pure white mark on transparency (it was drawn
       for the old dark footer), so it is inverted to read on the light one */
    filter: invert(1);
    opacity: 0.6;
    transition: opacity var(--aj-duration-fast) var(--aj-ease);
}

.aj-cert:hover img,
.aj-cert:focus-visible img {
    opacity: 0.9;
}

.aj-cert__label {
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    color: var(--aj-text-secondary);
    letter-spacing: 0.02em;
}

.aj-cert:hover .aj-cert__label,
.aj-cert:focus-visible .aj-cert__label {
    color: var(--aj-accent);
}

/* ---- architectural line motif ---- */

/*
 * Drawn along the whole base rather than tucked into a corner, and behind the
 * copyright rule, so it reads as the ground the footer stands on.
 */
.aj-footer__motif {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: block;
    inline-size: 100%;
    block-size: clamp(84px, 9vw, 132px);
    /* the same ink the skyline used: --aj-border-strong at half strength */
    background-color: var(--aj-border-strong);
    opacity: 0.5;
    /* the motif is crossed with a vertical fade, so it dissolves upward and
       never runs into the content above it */
    -webkit-mask-image: var(--aj-motif),
        linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    mask-image: var(--aj-motif),
        linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-size: auto 100%, 100% 100%;
    mask-size: auto 100%, 100% 100%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}

/* without mask support nothing is drawn, rather than a solid band */
@supports not ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
    .aj-footer__motif {
        display: none;
    }
}

/* ---- bottom bar ---- */

.aj-footer__bottom {
    border-block-start: 1px solid var(--aj-border);
}

.aj-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--aj-space-3);
    padding-block: var(--aj-space-5);
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

/* ---- narrow frames ---- */

@media (max-width: 1024px) {
    .aj-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--aj-space-10);
    }
    /*
     * The identity becomes a band across the top rather than a tall column with
     * an empty half beside it, and the links and contact share the row below.
     */
    .aj-footer__identity {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: var(--aj-space-8);
        row-gap: var(--aj-space-5);
        padding-block-end: var(--aj-space-8);
        border-block-end: 1px solid var(--aj-divider);
    }
    .aj-footer__identity .aj-footer__tagline {
        max-inline-size: 30ch;
        white-space: normal;
    }
    .aj-footer__certs {
        margin-block-start: 0;
    }
}

@media (max-width: 640px) {
    .aj-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--aj-space-10);
    }
    .aj-footer__identity {
        grid-column: auto;
        /* the marks and the certificates close the region on a narrow frame */
        gap: var(--aj-space-4);
    }
    /* identity, then contact, then the link lists */
    .aj-footer__identity {
        order: 1;
        flex-direction: column;
        justify-content: flex-start;
        padding-block-end: 0;
        border-block-end: 0;
    }
    .aj-footer__contact {
        order: 2;
    }
    .aj-footer__nav {
        order: 3;
    }
    .aj-footer__tagline {
        max-inline-size: 34ch;
        white-space: normal;
    }
    .aj-footer__logo img {
        block-size: 84px;
    }
    .aj-footer__motif {
        block-size: 64px;
        opacity: 0.4;
    }
}

/* ================================================== SCROLL TO TOP BUTTON == */

/* shell.js adds .is-visible once the page is scrolled past the first screen */
.aj-shell button.scroltop {
    position: fixed;
    inset-inline-end: var(--aj-space-5);
    inset-block-end: var(--aj-space-5);
    z-index: var(--aj-z-sticky);

    display: block;
    padding: 0;
    text-align: center;
    line-height: 44px;
    inline-size: 44px;
    block-size: 44px;

    color: var(--aj-text-inverse);
    background-color: var(--aj-accent);
    border: 0;
    border-radius: var(--aj-radius-pill);
    box-shadow: var(--aj-shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition:
        background-color var(--aj-duration-fast) var(--aj-ease),
        opacity var(--aj-duration-slow) var(--aj-ease),
        visibility var(--aj-duration-slow) var(--aj-ease);
}

.aj-shell button.scroltop.is-visible {
    opacity: 1;
    visibility: visible;
}

.aj-shell button.scroltop .aj-icon {
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    vertical-align: middle;
}

.aj-shell button.scroltop:hover,
.aj-shell button.scroltop:focus-visible {
    background-color: var(--aj-accent-hover);
}

/* ============================================== ISO CERTIFICATE VIEWER ==== */

/*
 * The certificates are the company's credentials, and they were being shown as
 * a bare JPEG on a dim screen. They are presented here the way a framed
 * certificate hangs: named above, credited below, and set on a matte so the
 * document reads as the object it is. The file itself is never altered — the
 * frame is everything around it.
 */

.aj-shell #imgPopup {
    position: fixed;
    inset: 0;
    z-index: var(--aj-z-modal);
    /* display is flipped to flex by the viewer script */
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--aj-space-5);
    background-color: rgba(23, 26, 32, 0.9);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
}

.aj-shell #imgPopup .aj-certview__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* the panel hugs the document: these are 4:5 portraits, so a wide panel
       would leave the certificate floating in an empty matte */
    inline-size: min(640px, 100%);
    max-block-size: min(92vh, 900px);
    overflow: hidden;
    text-align: start;
    background-color: var(--aj-surface);
    border-radius: var(--aj-radius-xl);
    box-shadow: 0 32px 80px rgba(12, 14, 18, 0.5);
    animation: aj-certview-in var(--aj-duration) var(--aj-ease) both;
}

/* ---- the name above ---- */

.aj-shell #imgPopup .aj-certview__head {
    display: flex;
    align-items: center;
    gap: var(--aj-space-4);
    padding: var(--aj-space-4) var(--aj-space-5);
    border-block-end: 1px solid var(--aj-divider);
}

.aj-shell #imgPopup .aj-certview__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 44px;
    block-size: 44px;
    background-color: var(--aj-accent-soft);
    border-radius: var(--aj-radius-pill);
}

.aj-shell #imgPopup .aj-certview__seal img {
    inline-size: 22px;
    block-size: auto;
    /* the shipped mark is white on transparency: inverted to read on light */
    filter: invert(1);
    opacity: 0.65;
}

.aj-shell #imgPopup .aj-certview__heading {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.aj-shell #imgPopup .aj-certview__eyebrow {
    margin: 0;
    font-size: var(--aj-fs-caption);
    font-weight: var(--aj-fw-medium);
    letter-spacing: 0.08em;
    color: var(--aj-accent);
}

.aj-shell #imgPopup .aj-certview__title {
    margin: 2px 0 0;
    font-size: var(--aj-fs-h4);
    font-weight: var(--aj-fw-bold);
    line-height: 1.25;
    color: var(--aj-text);
}

.aj-shell #imgPopup .aj-certview__system {
    margin: 2px 0 0;
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-secondary);
}

.aj-shell #imgPopup .aj-certview__close {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    color: var(--aj-text);
    background-color: var(--aj-surface-muted);
    border: 0;
    border-radius: var(--aj-radius-pill);
    cursor: pointer;
    opacity: 1;
    transition: background-color var(--aj-duration-fast) var(--aj-ease),
        color var(--aj-duration-fast) var(--aj-ease);
}

.aj-shell #imgPopup .aj-certview__close:hover,
.aj-shell #imgPopup .aj-certview__close:focus-visible {
    background-color: var(--aj-accent-soft);
    color: var(--aj-accent);
}

/* ---- the document, on its matte ---- */

.aj-shell #imgPopup .aj-certview__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    padding: var(--aj-space-6);
    overflow: auto;
    background-color: var(--aj-surface-muted);
}

.aj-shell #imgPopup .aj-certview__frame {
    margin: 0;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-md);
    box-shadow: var(--aj-shadow-md);
}

.aj-shell #imgPopup img {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    /* the certificates are 4:5 portraits: height is the binding dimension */
    max-block-size: min(62vh, 680px);
    border-radius: 4px;
}

/* ---- moving between the three ---- */

.aj-shell #imgPopup .aj-certview__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    color: var(--aj-text);
    background-color: var(--aj-surface);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius-pill);
    box-shadow: var(--aj-shadow-sm);
    cursor: pointer;
    transition: background-color var(--aj-duration-fast) var(--aj-ease),
        border-color var(--aj-duration-fast) var(--aj-ease),
        color var(--aj-duration-fast) var(--aj-ease);
}

.aj-shell #imgPopup .aj-certview__nav:hover,
.aj-shell #imgPopup .aj-certview__nav:focus-visible {
    color: var(--aj-accent);
    border-color: var(--aj-accent-border);
    background-color: var(--aj-accent-soft);
}

.aj-shell #imgPopup .aj-certview__nav--prev {
    inset-inline-end: var(--aj-space-3);
}

.aj-shell #imgPopup .aj-certview__nav--next {
    inset-inline-start: var(--aj-space-3);
}

/* ---- the credit below ---- */

.aj-shell #imgPopup .aj-certview__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--aj-space-3);
    padding: var(--aj-space-4) var(--aj-space-5);
    border-block-start: 1px solid var(--aj-divider);
}

.aj-shell #imgPopup .aj-certview__issuer {
    margin: 0;
    font-size: var(--aj-fs-caption);
    color: var(--aj-text-muted);
}

.aj-shell #imgPopup .aj-certview__download {
    flex: 0 0 auto;
}

@keyframes aj-certview-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- narrow screens: the document keeps the room, the chrome gives way ---- */

@media (max-width: 575.98px) {

    .aj-shell #imgPopup {
        padding: var(--aj-space-2);
    }

    .aj-shell #imgPopup .aj-certview__panel {
        max-block-size: 94vh;
        border-radius: var(--aj-radius-lg);
    }

    .aj-shell #imgPopup .aj-certview__head,
    .aj-shell #imgPopup .aj-certview__foot {
        padding: var(--aj-space-3) var(--aj-space-4);
    }

    .aj-shell #imgPopup .aj-certview__seal {
        display: none;
    }

    .aj-shell #imgPopup .aj-certview__stage {
        padding: var(--aj-space-3);
    }

    /* the arrows would sit on the document itself at this width */
    .aj-shell #imgPopup .aj-certview__nav {
        inline-size: 34px;
        block-size: 34px;
    }

    .aj-shell #imgPopup .aj-certview__nav--prev {
        inset-inline-end: 2px;
    }

    .aj-shell #imgPopup .aj-certview__nav--next {
        inset-inline-start: 2px;
    }

    .aj-shell #imgPopup img {
        max-block-size: 58vh;
    }

    .aj-shell #imgPopup .aj-certview__foot {
        justify-content: center;
        text-align: center;
    }

    .aj-shell #imgPopup .aj-certview__download {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .aj-shell #imgPopup .aj-certview__panel {
        animation: none;
    }
}

body.popup-open {
    overflow: hidden;
}