/* Site-wide element styles on top of tokens.css. Components style themselves through .razor.css isolation. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --consent-banner-height is the consent banner's height while it shows, 0 otherwise (wwwroot/layout.js): the page
   reserves that room at its end, and scrolling to a focused element or an anchor stops above the banner, so the banner
   never covers what the visitor is on (Layout/ConsentBanner.razor.css). */
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-bottom: var(--consent-banner-height, 0px);
}

body {
    margin: 0;
    padding-bottom: var(--consent-banner-height, 0px);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--heading);
    font-family: var(--font-heading);
    line-height: 1.15;
}

h1 {
    margin-bottom: 12px;
    font-size: 40px;
    font-weight: 700;
}

/* The brand's trailing underscore after a page's H1. The empty alternative text after the slash keeps screen readers from
   announcing it; browsers without that syntax keep the first declaration. */
h1::after {
    content: "_";
    content: "_" / "";
    color: var(--accent);
}

/* Compact breakpoint (see tokens.css). */
@media (max-width: 860px) {
    h1 {
        font-size: 30px;
    }
}

p {
    margin: 0;
}

/* The Guide's pages (Layout/GuidePage.razor and those of a Trail) centre their own column in the page's, instead of
   starting at its left as the other pages do: main gives up its width cap for them. */
body main:has(.centered-page) {
    max-width: none;
}

/* Read by screen readers, not shown. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The line under a page's H1. */
.lead {
    max-width: 60ch;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 17px;
}

a {
    color: var(--accent-ink);
}

button {
    font: inherit;
    color: inherit;
}

/* Every PKI Suite drop zone's target (the "Drop … here or browse" line), one shared look. It has to read as a target
   before any hover, so it gets an accent tint and dashed border, an upload icon above the prompt, and the prompt in body
   text, not muted. The file input is stretched, invisible, over the target, so a file dropped anywhere on it, or a
   click, reaches it. */
.drop-target {
    position: relative;
    margin: 0 0 10px;
    padding: 20px 16px;
    border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text);
    font-weight: 500;
    transition: border-color 0.15s, background-color 0.15s;
}

    /* The icon's mask creates a stacking context, which paints it above the file input (earlier in the markup); so the
       prompt lets clicks and drops through to the input. */
    .drop-target .prompt {
        pointer-events: none;
    }

    .drop-target .prompt::before {
        content: "";
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto 8px;
        background: var(--accent);
        -webkit-mask: var(--upload-icon) center / contain no-repeat;
        mask: var(--upload-icon) center / contain no-repeat;
        --upload-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
    }

    .drop-target:not(.disabled):hover,
    .drop-target:not(.disabled):focus-within {
        border-style: solid;
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
        color: var(--heading);
    }

    .drop-target:focus-within {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .drop-target input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    /* .disabled, set by a drop zone while its file can't change (FileDropZone while signing, TimestampAPdf while
       stamping): dimmed, and not clickable. */
    .drop-target.disabled {
        opacity: 0.6;
    }

        .drop-target.disabled input.browse {
            cursor: not-allowed;
        }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


/* The home page and the 404, whose Product cards take the whole width beside the sidebar: five across on a wide
   screen (ProductCards); and a Product page, whose own column centres itself up to 1360px (ProductPage). Every other
   page keeps main's reading width. */
body main:has(> .products),
body main:has(> .product-page) {
    max-width: none;
}

/* A Demo page keeps main's reading width, centred beside the sidebar instead of starting at its left. */
body main:has(> .demo-frame) {
    margin-inline: auto;
}