/* =============================================================================
   VerseFlow — Saved Verses: Save Button Styles (TICKET-920)
   Covering: .vf-save-verse, .vf-save-verse-btn, .vf-verse-actions
   ============================================================================= */

/* ── Shared container for Save + Read-in-context row ───────────────────────── */
.vf-verse-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ── Save / Saved toggle button ──────────────────────────────────────────────── */
.vf-save-verse,
.vf-save-verse-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    /* Geometry */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1.5px solid currentColor;

    /* Typography */
    font-family: var(--font-primary, 'Lora', serif);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;

    /* Colour — unsaved state */
    color: var(--vf-ui-save-fg, rgba(17, 17, 17, 0.72));
    background: var(--vf-ui-save-bg, transparent);
    border-color: var(--vf-ui-save-border, rgba(17, 17, 17, 0.28));

    /* Interaction */
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;

    /* Reset browser button defaults */
    -webkit-appearance: none;
    appearance: none;
}

/* Hover / focus — unsaved */
.vf-save-verse:hover,
.vf-save-verse-btn:hover {
    background: var(--vf-ui-save-bg-hover, rgba(17, 17, 17, 0.06));
    border-color: var(--vf-ui-save-border-hover, rgba(17, 17, 17, 0.5));
}

/* Focus — keyboard-visible ring (WCAG 2.1 AA) */
.vf-save-verse:focus-visible,
.vf-save-verse-btn:focus-visible {
    outline: 2px solid var(--vf-ui-accent, var(--covenant-accent, #7a1e2c));
    outline-offset: 3px;
    /* Ensure ring is visible even without hover tint */
    background: transparent;
}

/* Saved state — aria-pressed="true" */
.vf-save-verse.is-saved,
.vf-save-verse[aria-pressed="true"],
.vf-save-verse-btn.is-saved,
.vf-save-verse-btn[aria-pressed="true"] {
    color: var(--vf-ui-save-saved-fg, rgba(246, 239, 226, 0.95));
    background: var(--vf-ui-save-saved-bg, var(--covenant-accent, #7a1e2c));
    border-color: var(--vf-ui-save-saved-border, var(--covenant-accent, #7a1e2c));
}

.vf-save-verse.is-saved:hover,
.vf-save-verse[aria-pressed="true"]:hover,
.vf-save-verse-btn.is-saved:hover,
.vf-save-verse-btn[aria-pressed="true"]:hover {
    opacity: 0.85;
}

/* Disability state (e.g. no verse loaded yet) */
.vf-save-verse:disabled,
.vf-save-verse-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ── VOTD save row wrapper ───────────────────────────────────────────────────── */
/* .votd-save-row is rendered by page-verse-of-the-day.php */
.votd-save-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

/* ── Spoke cycle-controls row: align Save next to Seek button ───────────────── */
/*
 * .vf-cycle-controls already uses text-align:center from the spoke inline CSS.
 * This override just tightens the row layout when Save is displayed alongside
 * the cycle button.
 */
.vf-cycle-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── Spoke-specific palette override (night/dark atmosphere) ─────────────────── */
/*
 * Spokes run under verseflow-sanctuary.css which sets background to near-black.
 * Use higher-contrast defaults in that context without relying on atmosphere class alone.
 */
.guidance-spoke-layout .vf-save-verse,
.guidance-spoke-layout .vf-save-verse-btn {
    --vf-ui-save-fg: rgba(246, 239, 226, 0.82);
    --vf-ui-save-bg: transparent;
    --vf-ui-save-border: rgba(246, 239, 226, 0.3);
    --vf-ui-save-bg-hover: rgba(246, 239, 226, 0.08);
    --vf-ui-save-border-hover: rgba(246, 239, 226, 0.55);
    --vf-ui-save-saved-fg: rgba(17, 17, 17, 0.92);
    --vf-ui-save-saved-bg: rgba(201, 167, 93, 0.92);
    /* golden accent for sanctuary */
    --vf-ui-save-saved-border: rgba(201, 167, 93, 0.92);
}

/* ── Night / dark-mode global overrides ─────────────────────────────────────── */
body.atmosphere-night .vf-save-verse,
body.atmosphere-night .vf-save-verse-btn {
    --vf-ui-save-fg: rgba(246, 239, 226, 0.75);
    --vf-ui-save-border: rgba(246, 239, 226, 0.25);
    --vf-ui-save-bg-hover: rgba(246, 239, 226, 0.07);
    --vf-ui-save-border-hover: rgba(246, 239, 226, 0.45);
}

body.atmosphere-night .vf-save-verse.is-saved,
body.atmosphere-night .vf-save-verse[aria-pressed="true"],
body.atmosphere-night .vf-save-verse-btn.is-saved,
body.atmosphere-night .vf-save-verse-btn[aria-pressed="true"] {
    --vf-ui-save-saved-fg: rgba(17, 17, 17, 0.9);
    --vf-ui-save-saved-bg: rgba(201, 167, 93, 0.88);
    --vf-ui-save-saved-border: rgba(201, 167, 93, 0.88);
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .vf-save-verse,
    .vf-save-verse-btn {
        transition: none;
    }
}

/* ── Screen-reader-only status announcer (injected by saved-verses-ui.js) ────── */
/*
 * Duplicates the WP core .screen-reader-text pattern so we don't depend on
 * Twenty-X styles being present.
 */
#vf-saved-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}