@charset "UTF-8";
/*!
 * StaticPress theme "Blocksy" - interact.css
 *
 * The look of the three visitor facing parts of the interaction feature: the
 * comment block of an article, the guestbook page and the floating widget
 * (message form + support chat). One stylesheet for the three of them, because
 * they share their building blocks: `.sp-field` / `.sp-input` / `.sp-button` /
 * `.sp-nick` are used by every form of the feature.
 *
 * The markup is identical in both themes (see
 * `templates/partials/comments.html` and
 * `templates/partials/interact_widget.html`), so only this file and the default
 * theme one differ: this theme keeps the Blocksy tokens of `tokens.css` (one
 * blue accent on a white surface, the ported border radius and shadow), the
 * default theme uses its own flat palette.
 *
 * The one rule that is not cosmetic is `.sp-hp`: the honeypot has to be
 * invisible to a visitor but still present in the layout, because a bot fills
 * every field it finds - including the ones a stylesheet hides with
 * `display: none`, which is exactly the hint it looks for. It is therefore
 * moved outside the viewport instead.
 */

/* ---------------------------------------------------------- visibility */
/* The script shows and hides nodes with the `hidden` attribute. An author rule
   that sets `display` on such a node outranks the user agent rule
   `[hidden] { display: none }` - the trap this theme documents for
   `.ct-post-views[hidden]` and `[data-dl-item][hidden]` - and a nickname dialog
   or a widget panel that stays on screen after it was closed is exactly what
   that looks like. The attribute is therefore restated here: it means "not
   rendered", whatever the rules below say about the display of the node. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------- honeypot */
.sp-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------ form building blocks */
.sp-field {
    display: block;
    margin-bottom: 1em;
}

.sp-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-headings-color);
    margin-bottom: 0.35em;
}

.sp-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.7em;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    transition: var(--theme-transition);
}

.sp-input:focus {
    outline: 0;
    border-color: var(--theme-link-initial-color);
    box-shadow: 0 0 0 0.15rem rgba(40, 114, 250, 0.18);
}

textarea.sp-input {
    resize: vertical;
    min-height: 4.5em;
}

.sp-button {
    display: inline-block;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
    border: 1px solid var(--theme-button-background-initial-color);
    border-radius: var(--theme-button-border-radius);
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-button:hover,
.sp-button:focus {
    color: var(--theme-button-text-hover-color);
    background-color: var(--theme-button-background-hover-color);
    border-color: var(--theme-button-background-hover-color);
}

.sp-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.sp-button-ghost {
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border-color: var(--theme-border-color);
}

.sp-button-ghost:hover,
.sp-button-ghost:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
    border-color: var(--theme-palette-color-5);
}

.sp-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--theme-link-initial-color);
    font-family: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

.sp-linkbutton:hover,
.sp-linkbutton:focus {
    color: var(--theme-link-hover-color);
}

.sp-form-thanks,
.sp-form-error,
.sp-comments-error,
.sp-comments-loading,
.sp-comments-empty {
    font-size: 0.875rem;
    margin: 0.5em 0;
}

.sp-form-thanks {
    color: #1c7c3f;
}

.sp-form-error,
.sp-comments-error {
    color: #b02a37;
}

.sp-comments-loading,
.sp-comments-empty {
    color: var(--theme-text-color);
    opacity: 0.75;
}

/* ---------------------------------------------------------- comment block */
.sp-comments {
    margin-top: var(--theme-content-spacing);
    padding-top: 1.25em;
    border-top: 1px solid var(--theme-border-color);
}

.sp-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75em;
}

.sp-comments-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-headings-color);
}

.sp-comments-total {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--theme-text-color);
    opacity: 0.7;
    margin-left: 0.5em;
}

.sp-comments-notice {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    padding: 0.65em 0.85em;
    margin-bottom: 1em;
}

.sp-comment-list {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
}

.sp-comment {
    padding: 1em 0;
    border-bottom: 1px dashed var(--theme-border-color);
}

.sp-comment:last-child {
    border-bottom: 0;
}

.sp-comment-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* The stamp and the state of a row are pushed to the right by the auto
       margin of the stamp below, so the author stays on the left whether the
       row carries a state or not. */
    gap: 0 0.5em;
    margin-bottom: 0.35em;
}

.sp-comment-author {
    color: var(--theme-headings-color);
    font-size: 0.9375rem;
}

.sp-comment-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--theme-text-color);
    opacity: 0.6;
}

/* The state of one of the visitor's own guestbook rows ("waiting for review",
   "not accepted"): a quiet pill beside the stamp, so a row that is not
   published yet is recognizable without shouting. Only the board ever prints
   one (see static/js/interact-comments.js). */
.sp-comment-state {
    padding: 0 0.55em;
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1.7;
    color: var(--theme-text-color);
    opacity: 0.75;
    white-space: nowrap;
}

.sp-comment-body {
    color: var(--theme-text-color);
    font-size: 0.9375rem;
    line-height: var(--theme-line-height);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-comment-reply {
    margin: 0.65em 0 0 0;
    padding: 0.55em 0.8em;
    border-left: 3px solid var(--theme-link-initial-color);
    background-color: var(--theme-palette-color-7);
    border-radius: 0 var(--theme-border-radius) var(--theme-border-radius) 0;
}

.sp-comment-replylabel {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-link-initial-color);
    margin-bottom: 0.2em;
}

.sp-comment-replybody {
    font-size: 0.875rem;
    color: var(--theme-text-color);
    line-height: var(--theme-line-height);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-comments-more {
    text-align: center;
    margin: 0.75em 0 1.25em 0;
}

.sp-comment-form {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--theme-border-color);
}

.sp-comment-nickrow {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: 0.875rem;
    color: var(--theme-text-color);
    margin-bottom: 0.6em;
}

.sp-comment-nickname {
    color: var(--theme-headings-color);
}

/* ---------------------------------------------------------- nickname box */
.sp-nick {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    background-color: rgba(18, 28, 46, 0.62);
}

.sp-nick-box {
    width: 100%;
    max-width: 22rem;
    background-color: var(--theme-palette-color-8);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    padding: 1.25em;
}

.sp-nick-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.4em 0;
    color: var(--theme-headings-color);
}

.sp-nick-help {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    line-height: 1.6;
    margin-bottom: 0.75em;
}

.sp-nick-error {
    font-size: 0.8125rem;
    color: #b02a37;
    margin: 0 0 0.5em 0;
}

.sp-nick-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.25em;
}

/* ------------------------------------------------------- floating widget */
/* The widget is pinned the same way as the theme's "back to top" button
   (`.ct-back-to-top` in components.css: fixed 22px from the right and the
   bottom, 42px tall, one shared radius/colour/transition). It repeats those
   values and is lifted by exactly one button height plus the same 10px gap, so
   the two controls stack in one right aligned column instead of covering each
   other - the widget never sits on top of the arrow again. */
.sp-interact {
    position: fixed;
    bottom: calc(22px + 42px + 10px);
    z-index: 1070;
    font-family: var(--theme-font-family);
    font-size: 0.9375rem;
    color: var(--theme-text-color);
}

.sp-interact-right {
    right: 22px;
    align-items: flex-end;
}

.sp-interact-left {
    left: 22px;
    align-items: flex-start;
}

/* The two entries ("leave a message" / "support") stack in one column: the bar
   stays narrow instead of growing sideways, and every button keeps its own
   width and lines up with the edge the widget is pinned to. */
.sp-interact-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.sp-interact-left .sp-interact-actions {
    align-items: flex-start;
}

/* Icon plus label, one button high, in the colours of the "back to top"
   button - the two controls read as one group instead of two different
   widgets. */
.sp-interact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    height: 42px;
    padding: 0 0.85em;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #ffffff;
    background-color: var(--theme-dark-surface);
    border: 0;
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-interact-icon {
    display: block;
    flex: 0 0 auto;
}

.sp-interact-btn:hover,
.sp-interact-btn:focus {
    color: #ffffff;
    background-color: var(--theme-palette-color-1);
}

.sp-interact-badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.3em;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background-color: #d63384;
    border-radius: 1rem;
    vertical-align: middle;
}

.sp-interact-panel {
    display: flex;
    flex-direction: column;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    max-height: 70vh;
    margin-bottom: 0.75em;
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
    overflow: hidden;
}

.sp-interact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5em;
    background-color: var(--theme-palette-color-6);
    border-bottom: 1px solid var(--theme-border-color);
}

.sp-interact-tabs {
    display: flex;
    gap: 0.25em;
}

.sp-interact-tab {
    padding: 0.65em 0.6em;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-text-color);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.sp-interact-tab.is-active {
    color: var(--theme-link-initial-color);
    border-bottom-color: var(--theme-link-initial-color);
}

.sp-interact-state {
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: 0.25em;
}

.sp-interact-state.is-online {
    color: #1c7c3f;
}

.sp-interact-state.is-offline {
    opacity: 0.6;
}

.sp-interact-close {
    padding: 0 0.4em;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--theme-text-color);
    background: none;
    border: 0;
    cursor: pointer;
}

.sp-interact-close:hover,
.sp-interact-close:focus {
    color: var(--theme-headings-color);
}

.sp-interact-view {
    flex: 1 1 auto;
    padding: 0.9em;
    overflow-y: auto;
}

.sp-interact-notice {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-6);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    padding: 0.55em 0.7em;
    margin-bottom: 0.75em;
}

.sp-interact-formfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

/* ------------------------------------------------------------------ chat */
.sp-chat-greeting,
.sp-chat-hours {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    line-height: 1.6;
    margin-bottom: 0.5em;
}

.sp-chat-log {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
}

.sp-chat-line {
    margin-bottom: 0.5em;
}

.sp-chat-line .sp-chat-who {
    display: block;
    font-size: 0.6875rem;
    opacity: 0.6;
    margin-bottom: 0.15em;
}

.sp-chat-line .sp-chat-text {
    display: inline-block;
    max-width: 85%;
    padding: 0.45em 0.65em;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: var(--theme-border-radius);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-chat-visitor {
    text-align: right;
}

.sp-chat-visitor .sp-chat-text {
    color: #fff;
    background-color: var(--theme-palette-color-1);
}

.sp-chat-admin .sp-chat-text {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
}

.sp-chat-system .sp-chat-text {
    font-size: 0.8125rem;
    color: #8a5300;
    background-color: #fff4e5;
}

.sp-chat-offline,
.sp-chat-typing,
.sp-chat-closed,
.sp-chat-blocked {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    margin: 0.35em 0;
}

.sp-chat-blocked {
    color: #b02a37;
}

.sp-chat-form .sp-field {
    margin-bottom: 0.5em;
}

/* --------------------------------------------------------- small screens */
/* Same 689.98px breakpoint and the same smaller button as `.ct-back-to-top`,
   so the two stay aligned in one column on a phone as well. */
@media (max-width: 689.98px) {
    .sp-interact {
        bottom: calc(14px + 38px + 8px);
    }

    .sp-interact-right {
        right: 14px;
    }

    .sp-interact-left {
        left: 14px;
    }

    .sp-interact-btn {
        height: 38px;
    }

    .sp-interact-panel {
        width: calc(100vw - 1.5rem);
        max-height: 72vh;
    }

    .sp-chat-log {
        max-height: 40vh;
    }
}