/**
 * Shared site styles (used with Tailwind CDN in layouts.app).
 * Matches patterns from web/html prototypes.
 */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.active-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@keyframes site-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e5e5e5 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: site-shimmer 2s infinite linear;
}

.glass-glow {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.text-shadow-sm {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.card-shadow {
    box-shadow: 0 10px 30px rgba(177, 29, 67, 0.12);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px -5px rgba(177, 29, 67, 0.12);
}

.reader-shadow {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.08), 0 18px 36px -18px rgba(0, 0, 0, 0.05);
}

.glass-inner-stroke {
    box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.4);
}

.hero-gradient {
    background: linear-gradient(135deg, #fff8f7 0%, #ffd9dc 100%);
}

.site-header-lang > summary {
    list-style: none;
}

.site-header-lang[open] > summary {
    color: rgb(177 29 67);
}

/* Custom range on story listen page (matches audio_play.html feel) */
.site-audio-volume {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 9999px;
    background: #f6dcde;
}

.site-audio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #b11d43;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.site-audio-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #b11d43;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}