/* ==========================================================================
   Safe Zone TCS Custom Stylesheet
   ========================================================================== */

/* Variables and Tokens */
:root {
    --color-primary-red: #E31E24;
    --color-dark-red: #8B0000;
    --color-maroon: #6D0F1A;
    --color-black: #111111;
    --color-white: #FFFFFF;
    --color-light-grey: #F5F5F5;
    --color-charcoal: #1E1E1E;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-black);
}
::-webkit-scrollbar-thumb {
    background: var(--color-maroon);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-red);
}

/* Smooth Transitions & Selection Styles */
::selection {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

/* Base Body Styles */
body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: 'Inter', sans-serif;
}

/* Font Headings */
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Outfit', sans-serif;
}

/* Custom Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sticky Header Scroll Tweaks */
.header-scrolled {
    background-color: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(12px);
    border-color: rgba(227, 30, 36, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.header-scrolled #navbar-container {
    height: 72px !important;
}

/* Responsive Mobile Menu Drawer classes */
.drawer-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.drawer-open #mobile-drawer-panel {
    transform: translateX(0) !important;
}

/* Image Diamond Clip Styles */
.clip-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Page Section Diagonal dividers */
.diagonal-divider-left {
    position: relative;
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
}

.diagonal-divider-right {
    position: relative;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

/* WhatsApp Floating Tooltip micro-effects */
#whatsapp-float {
    animation: floatSlow 3s ease-in-out infinite;
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Filter card behaviors */
.course-card.hidden,
.gallery-card.hidden {
    display: none !important;
}

/* Form success transition */
#form-success-msg {
    animation: fadeInUp 0.4s ease-out forwards;
}