/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Player wrapper - relative positioning for logo */
.voceva-player-wrap {
    position: relative;
}

/* A post delivered as two voice bites: each player sits under its label. */
.voceva-player-wrap + .voceva-player-wrap {
    margin-top: 1em;
}

.voceva-player-label {
    margin: 0 0 0.35em;
    font-weight: 600;
}

/*
 * Voceva logo, at the bottom right inside the player's bar.
 *
 * It fits whatever a site owner sets on the Player Style tab, because everything about it follows the
 * player's own settings: its height follows the time text size, the bar always keeps room underneath for
 * it however little padding is set, and it keeps clear of a border and of rounded corners. The
 * Player Style settings feed --voceva-radius and --voceva-border; the light or dark logo is chosen there too.
 */
.voceva-player-wrap--audio {
    --voceva-radius: 0px;
    --voceva-border: 0px;
    --voceva-logo-height: calc(var(--plyr-font-size-time, 13px) * 0.77);
}

.voceva-player-wrap--audio .plyr--audio .plyr__controls {
    padding-bottom: max(var(--plyr-control-spacing, 10px), calc(var(--voceva-logo-height) + 2px));
}

.voceva-logo {
    position: absolute;
    bottom: calc(var(--voceva-border, 0px) + 1px);
    right: calc(var(--voceva-border, 0px) + max(var(--plyr-control-spacing, 10px), 8px) + var(--voceva-radius, 0px) * 0.65);
    line-height: 0;
    pointer-events: none;
    user-select: none;
}

.voceva-logo img {
    display: block;
    height: var(--voceva-logo-height, 10px);
    width: auto;
    max-width: none;
}

/* The light logo is for dark players; the Player Style settings switch them over. */
.voceva-logo .voceva-logo__img--light {
    display: none;
}

/* Logo as a link to voceva.ai: clickable, with a larger target and a visible keyboard focus. */
a.voceva-logo--link {
    pointer-events: auto;
    user-select: auto;
    text-decoration: none;
}

a.voceva-logo--link::after {
    content: "";
    position: absolute;
    inset: -6px;
}

a.voceva-logo--link:hover img {
    opacity: 0.75;
}

a.voceva-logo--link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}