/**
 * Faith Radar – Verse of the Day
 * Frontend styles for the [fr_votd] shortcode output.
 *
 * HOW TO USE IN ELEMENTOR
 * ───────────────────────
 * Drop a Shortcode widget where you want the verse and enter [fr_votd].
 * The plugin enqueues this stylesheet automatically on every page load.
 *
 * CLASS REFERENCE
 * ───────────────
 * .fr-votd                — outer blockquote container
 * .fr-votd__text          — the verse text paragraph
 * .fr-votd__reference     — the cite (reference — translation)
 * .fr-votd-empty          — shown when no verse exists for today
 *
 * Override any of these in your Elementor Custom CSS section or theme stylesheet.
 */

/* ── Container ───────────────────────────────────────────────────────────── */
.fr-votd {
    position: relative;
    margin: 0;
    padding: 2rem 2rem 2rem 3rem;
    border: none;
    border-left: 4px solid currentColor;
    border-radius: 0 6px 6px 0;
    background: transparent;
    font-style: normal;

    /* Default accent colour — override via Elementor or your theme */
    color: #2c5282;
}

/* Decorative opening quotation mark */
.fr-votd::before {
    content: '\201C';
    position: absolute;
    top: 0.5rem;
    left: 0.6rem;
    font-size: 3.5rem;
    line-height: 1;
    opacity: 0.18;
    font-family: Georgia, 'Times New Roman', serif;
    color: currentColor;
    pointer-events: none;
}

/* ── Verse text ──────────────────────────────────────────────────────────── */
.fr-votd__text {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: inherit;
    font-style: italic;
}

/* ── Reference / citation ────────────────────────────────────────────────── */
.fr-votd__reference {
    display: block;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: currentColor;
    opacity: 0.75;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.fr-votd-empty {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
}

/* ── Utility modifier classes ────────────────────────────────────────────── */

/*
 * .fr-votd--centered
 * Centers text and switches the border to a top bar instead of left bar.
 * Usage: add fr-votd--centered via Elementor CSS Classes field on the widget.
 */
.fr-votd--centered {
    text-align: center;
    padding: 2rem;
    border-left: none;
    border-top: 4px solid currentColor;
    border-radius: 0 0 6px 6px;
}

.fr-votd--centered::before {
    left: 50%;
    transform: translateX(-50%);
}

/*
 * .fr-votd--card
 * Wraps the verse in a soft card with a background fill.
 */
.fr-votd--card {
    background: rgba(44, 82, 130, 0.06);
    border-radius: 8px;
    border-left: 4px solid currentColor;
}

/*
 * .fr-votd--large
 * Bumps up the font size for hero / banner placements.
 */
.fr-votd--large .fr-votd__text {
    font-size: 1.375rem;
    line-height: 1.8;
}

.fr-votd--large .fr-votd__reference {
    font-size: 1rem;
}

/*
 * .fr-votd--minimal
 * Removes the quotation mark and border for a clean inline look.
 */
.fr-votd--minimal {
    padding: 0;
    border: none;
}

.fr-votd--minimal::before {
    display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .fr-votd {
        padding: 1.5rem 1.25rem 1.25rem 2.25rem;
    }

    .fr-votd__text {
        font-size: 1rem;
    }

    .fr-votd--centered {
        padding: 1.5rem 1rem;
    }
}