/*
    Crowdy theme - custom styles
    Copyright (C) 2025 crowd-creation GmbH
    
    This file allows easy customization for client projects
    Add your custom CSS rules here to override default styles
    
    IMPORTANT: This file should only contain additional customizations
    The main styling is in theme.css and variations/crowd_creation.css
*/

/* Ensure Roboto font is loaded globally */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* crowd-creation CSS variables for easy client customization */
:root {
    --cc-primary-blue: #1a2c75;
    --cc-primary-red: #c02020;
    --cc-dark-gray: #2c2c2c;
    --cc-medium-gray: #707070;
    --cc-light-gray: #f8f9fa;
    --cc-white: #ffffff;
}

/* Additional brand-specific button classes */
.btn-cc-primary {
    background-color: var(--cc-primary-blue) !important;
    border-color: var(--cc-primary-blue) !important;
    color: var(--cc-white) !important;
}

.btn-cc-primary:hover,
.btn-cc-primary:focus {
    background-color: #14245c !important;
    border-color: #14245c !important;
}

.btn-cc-accent {
    background-color: var(--cc-primary-red) !important;
    border-color: var(--cc-primary-red) !important;
    color: var(--cc-white) !important;
}

.btn-cc-accent:hover,
.btn-cc-accent:focus {
    background-color: #a01818 !important;
    border-color: #a01818 !important;
}

/* Optional: Enhanced question container hover effect */
.question-container {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.question-container:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 44, 117, 0.08);
}

/* Optional: Survey footer with branding */
.survey-footer-cc {
    padding: 20px 0;
    margin-top: 40px;
    border-top: 2px solid var(--cc-primary-blue);
    text-align: center;
}

.survey-footer-cc .powered-by {
    color: var(--cc-medium-gray);
    font-size: 12px;
}

/* Smooth animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.4s ease-out;
}

/* =========================================== */
/* CLIENT CUSTOMIZATION AREA                  */
/* Add client-specific styles below this line */
/* =========================================== */

/* Example client customization (comment out for production):
:root {
    --cc-primary-blue: #YourClientColor;
    --cc-primary-red: #YourClientAccent;
}
*/