/* CSS Custom Properties for Theme Color */
:root {
    --theme-color: {{ theme_color|default:"#6366f1" }};
    --theme-color-rgb: {{ theme_color|default:"#6366f1"|slice:"1:" }};
}



/* Professional styling */
.block-container {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Image loading placeholder */
img {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
}

/* Typography enhancements */
h1, h2, h3 { 
    letter-spacing: -0.01em; 
    line-height: 1.2;
}

/* Prose styling for text content */
.prose p {
    margin-bottom: 1rem;
}

.prose {
    max-width: none;
}

/* Smooth transitions for interactive elements */
a, button {
    transition: all 0.2s ease;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Scroll to top button */
#scrollToTop {
    transition: opacity 0.3s, transform 0.3s;
}
#scrollToTop.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

/* Prevent text overflow */
.break-words {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
}

.overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    max-width: 100%;
    overflow: hidden;
}

/* Theme Color Applications */
.theme-bg {
    background-color: var(--theme-color) !important;
}

.theme-text {
    color: var(--theme-color) !important;
}

.theme-border {
    border-color: var(--theme-color) !important;
}

.theme-hover:hover {
    background-color: var(--theme-color) !important;
    opacity: 0.9;
}

/* Navigation active state */
.nav-active {
    color: var(--theme-color) !important;
    border-bottom-color: var(--theme-color) !important;
}

/* Mobile Menu Styles */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
#mobileMenu.open {
    max-height: 500px;
}

/* Hamburger Animation */
.hamburger span {
    transition: all 0.3s ease-in-out;
}
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}