/* * style.css - Shared styling for Shri Siddharaj Sarkar Dham
 * Includes theme variables, layout fixes, and component animations.
 */

:root {
    --primary-color: #DAA520; /* GoldenRod / Gold */
    --secondary-color: #4A3728; /* Dark Brown (Coffee) */
    --accent-color: #FFD700; /* Bright Gold */
    --bg-light: #FFF8E7; /* Light Creamy Background */
    --sidebar-width: 280px;
}

/* Base resets and fonts */
body {
    background-color: var(--bg-light);
    color: var(--secondary-color);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Sidebar Transition */
#sidebar {
    transition: transform 0.3s ease-in-out;
    z-index: 100;
    width: var(--sidebar-width);
}

/* Navigation Links Hover Effects */
.nav-link {
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.nav-link:hover, .nav-link.active {
    background-color: rgba(218, 165, 32, 0.1);
    border-left-color: var(--primary-color);
    color: var(--primary-color);
}

/* Floating Social Bubble Styles */
#social-toggle {
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#social-links {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-item {
    transition: transform 0.2s ease;
}

.social-item:hover {
    transform: scale(1.1);
}

/* Button & UI Accent Styles */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #c0941a;
}

.lang-btn {
    transition: all 0.3s ease;
}

/* Custom Scrollbar for Devotional Feel */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Modal Styling */
#policy-modal .modal-content {
    max-height: 80vh;
    overflow-y: auto;
}

/* Typography Enhancements */
h1, h2, h3 {
    color: var(--secondary-color);
    font-weight: 700;
}

/* Utility for text mirroring or orientation if needed for Hindi text */
[lang="hi"] {
    line-height: 1.6;
}