/**
 * Custom Styles
 * The Blooming Ones Initiative
 * 
 * Most styling handled via TailwindCSS CDN.
 * This file is for additional custom styles only.
 */

/* ─── Smooth Scroll ──────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ─── Custom Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f8f6f6;
}
::-webkit-scrollbar-thumb {
    background: #ee6c2b40;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ee6c2b;
}

/* ─── Loading Spinner ────────────────────────────────────────── */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #ee6c2b20;
    border-top-color: #ee6c2b;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── Fade-in Animation ──────────────────────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Blog Content Typography ────────────────────────────────── */
.prose-blog h2 { font-size: 1.5rem; font-weight: 800; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-blog h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-blog p { margin-bottom: 1rem; line-height: 1.8; color: #475569; }
.prose-blog ul, .prose-blog ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose-blog li { margin-bottom: 0.25rem; line-height: 1.7; color: #475569; }
.prose-blog blockquote {
    border-left: 4px solid #ee6c2b;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: #ee6c2b08;
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: #64748b;
}
.prose-blog img {
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}
.prose-blog a { color: #ee6c2b; text-decoration: underline; }
.prose-blog a:hover { color: #c45a23; }

/* ─── Gallery Lightbox Overlay ───────────────────────────────── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* ─── Admin Sidebar Active Indicator ─────────────────────────── */
.admin-sidebar a.active {
    position: relative;
}
.admin-sidebar a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #ee6c2b;
    border-radius: 0 4px 4px 0;
}

/* ─── Form Focus Glow ────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px #ee6c2b20;
}

/* ─── Print Styles ───────────────────────────────────────────── */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; }
}