/* shared.css — the layout and buttons every widget builds on. Keep this one.
 *
 * These files are yours. Superblog wrote them once as a working reference for
 * the markup its editor produces; nothing regenerates or overwrites them.
 *
 * When an author inserts a callout, a gallery or a YouTube video, that arrives
 * inside your post content as HTML you did not write, carrying class names you
 * have no way to guess. These stylesheets make that markup look like something.
 *
 * Colours, radii and fonts come from assets/css/site.css — these files use the
 * variable names it defines, so setting a colour there sets it here too. If you
 * replace site.css, either keep those names or change them in both places.
 *
 * Edit any of this. Delete the files for widgets your authors never use.
 */

/* Every widget is a block in the flow of a post, and this is the space around
   it. One rule rather than a margin in each file, so the rhythm stays even. */
.velocity-widget {
    margin: 2.5em 0;
}

/* The editor's alignment buttons. */
.velocity-align-left {
    text-align: left;
}

.velocity-align-center {
    text-align: center;
}

.velocity-align-right {
    text-align: right;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
 *
 * Shared by the callout and the standalone CTA. Written once here because both
 * widgets use the same button, and a button that changes shape depending on
 * which block it sits in looks like a bug.
 */
.velocity-callout-btn,
.velocity-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0.6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.velocity-callout-btn:hover,
.velocity-btn-cta:hover {
    opacity: 0.9;
    text-decoration: none;
}

/* ── Tables ──────────────────────────────────────────────────────────────────
 *
 * A table wider than the page scrolls sideways instead of stretching it. The
 * gradients are a shadow at each edge that fades as you reach it, so it is
 * visible that there is more to see.
 */
.velocity-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--paper) 30%, transparent) left center,
        linear-gradient(to left, var(--paper) 30%, transparent) right center,
        linear-gradient(to right, rgb(0 0 0 / 12%), transparent) left center,
        linear-gradient(to left, rgb(0 0 0 / 12%), transparent) right center;
    background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.velocity-table-wrapper table {
    min-width: 100%;
    width: auto;
    margin: 0;
}

/* A table the editor built, as opposed to one written in markdown. Named so
   your own table styles can tell the two apart. */
.velocity-table {
    width: 100%;
    border-collapse: collapse;
}

.velocity-table th,
.velocity-table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.velocity-table th {
    background: var(--paper-soft);
    font-weight: 600;
}