/* components/splash-quote.css
 * ============================================
 * Splash quote component for page headers.
 * Displays an inspirational quote near the top of a page
 * in a subtle, non-dominating style.
 *
 * Usage:
 *   <figure class="splash-quote">
 *     <blockquote>"Quote text here."</blockquote>
 *     <figcaption>— Author Name</figcaption>
 *   </figure>
 *
 * Last updated: 2026-01-11
 */

/* === SPLASH QUOTE BASE === */
.splash-quote {
    text-align: center;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;

    /* Link wrapper - entire quote is clickable */
    & a {
        display: inline;
        text-decoration: none;
        color: inherit;

        &:hover {
            text-decoration: underline;
            text-decoration-color: var(--bs-gray-400);
            text-underline-offset: 2px;
        }

        &:focus-visible {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }
    }

    /* Quote text - inline with attribution */
    & blockquote {
        display: inline;
        font-style: italic;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--bs-secondary);
        margin: 0;
        quotes: "\201C" "\201D";

        &::before {
            content: open-quote;
        }

        &::after {
            content: close-quote;
        }
    }

    /* Attribution - inline after quote */
    & figcaption {
        display: inline;
        font-size: 0.9375rem;
        font-style: italic;
        color: var(--bs-gray-600);
    }
}

/* === RESPONSIVE === */
@media (max-width: 576px) {
    .splash-quote {
        margin-bottom: 1rem;

        & blockquote,
        & figcaption {
            font-size: 0.875rem;
        }
    }
}