@font-face {
    font-family: 'Jura';
    src: url('/fonts/Jura/Jura-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exo2';
    src: url('/fonts/Exo2/Exo2-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color palette */
    --dark-bg: #121212;
    --dark-nav: #1a1a2e;
    --dark-card: #1e1e30;
    --dark-text: #e0e0e0;
    --dark-heading: #03729e;
    --dark-heading2: #0076dd;
    --dark-text-secondary: #b0b0b0;
    --dark-primary: #073873;
    --dark-primary-hover: #4a617b;
    --dark-light-button: #2c2c44;
    --dark-light-button-hover: #3c3c54;
    --dark-link: #a0a0a0;
    --dark-link-hover: #ffffff;
    --dark-nav: #0f1014;    
    --dark-nav-hover: #1c2d5d;
    --dark-text-primary: lawngreen;

    --heading-font: 'Exo2', sans-serif;
    --body-font: 'Jura', sans-serif;
}
html {     
    background-color: var(--dark-bg);
    height: 100%;
    min-height: 100%;
}
body {
    font-family: var(--body-font);
    background-color: var(--dark-bg);
    color: var(--dark-text);
    padding-top: 3.25rem; /* This adds padding equal to the navbar height */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.is-dark {
    background-color: var(--dark-bg);
    color: var(--dark-text);
    font-weight: bold;

}

.is-highlight {
    background-color:#073873;
    color: white;


}
.navbar {
    background-color: var(--dark-nav);
}

.navbar-item, .navbar-link {
    color: var(--dark-text);
        background-color: var(--dark-nav);
}

.navbar-item:hover, .navbar-link:hover {
    background-color: var(--dark-nav-hover);
    color: white;
}
a.navbar-item:hover {
    background-color: var(--dark-nav-hover);
    border-radius:10px;
}
.navbar-burger {
    color: var(--dark-text);
    background-color: var(--dark-nav);
}

.hero {
    background-color: var(--dark-card);
}

.hero-body h1, .hero-body h2 {
    color: var(--dark-text);
}

.section {
    background-color: var(--dark-bg);
}

.footer {
    background-color: var(--dark-nav);
    color: var(--dark-text);
}

.title {
    color: var(--dark-heading2);

}
 
.subtitle {
    color: var(--dark-text-secondary);
}

.button.is-primary {
    background-color: var(--dark-primary);
}

.button.is-primary:hover {
    background-color: var(--dark-primary-hover);
}

.button.is-light {
    background-color: var(--dark-light-button);
    color: var(--dark-text);
}

.button.is-light:hover {
    background-color: var(--dark-light-button-hover);
    color: white;
}

.content p {
    color: var(--dark-text-secondary);
}

.is-size-5 {
    color: var(--dark-text-secondary);
}

a.has-text-grey-lighter {
    color: var(--dark-link) !important;
}

a.has-text-grey-lighter:hover {
    color: var(--dark-link-hover) !important;
}

.box {
    background-color: var(--dark-card);
    color: var(--dark-text);
}
.card {
    background-color: var(--dark-card);
    color: var(--dark-text);
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: var(--dark-heading);
    font-family: var(--heading-font);
}

strong { color:white; }

.content p {
    color: #b0b0b0;
}
.is-size-5 {
    color: #b0b0b0;
}
a.has-text-grey-lighter {
    color: #a0a0a0 !important;
}
a.has-text-grey-lighter:hover {
    color: #ffffff !important;
}

.equal { 
    display: inline-flex;
    flex: 1;
    }


        body {
            margin: 0; 
            padding: 0;
            margin-top: 10px;
        }
        strong {
            color:white;
        }
        .survey-header {
            border-bottom: 1px solid #3a506b;
            margin-bottom: 2rem;
        }
        
        .survey-header .logo img {
            max-height: 20px;
        }

        .title, .subtitle, .label {
            color: #e0e0e0;
        }
        
        .input, .textarea, .select select {
            background-color: #2c2c44;
            color: #e0e0e0;
            border-color: #3a506b;
        }
        
        .input:focus, .textarea:focus, .select select:focus {
            border-color: #4a617b;
            box-shadow: 0 0 0 0.125em rgba(74, 97, 123, 0.25);
        }
        
        /* Custom slider styling */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 16px;
            border-radius: 8px;
            outline: none;
            background: linear-gradient(to right, #e74c3c, #f39c12, #2ecc71);
            cursor: pointer;
            margin: 1rem 0;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #3a506b;
            cursor: pointer;
            border: 2px solid #e0e0e0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #3a506b;
            cursor: pointer;
            border: 2px solid #e0e0e0;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        
        .slider-container {
            position: relative;
            padding: 0 15px;
        }
        
        .slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
            color: #e0e0e0;
        }
        
        .slider-value {
            position: relative;
            text-align: center;
            font-weight: bold;
            font-size: 1.1rem;
            color: #e0e0e0;
            margin-top: 0.5rem;
        }
        
        /* Radio button styling */
        .radio-options {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        
        .radio-options label {
            margin-right: 1rem;
        }
        
        /* Checkbox styling */
        .checkbox {
            margin-top: 0.5rem;
        }
        
        /* Response summary styling */
        .response-summary {
            margin-top: 2rem;
            padding: 1.5rem;
            background-color: #2c2c44;
            border-radius: 4px;
        }

        .privacy-policy {
            margin-top: 2rem;
            padding: 1rem;
            background-color: rgba(74, 97, 123, 0.1);
            border-radius: 4px;
        }
        
        .privacy-policy a {
            color: #4a617b;
            text-decoration: underline;
        }
        
        .privacy-policy a:hover {
            color: #5a718b;
        }    
        
        .boxfield {
            background-color:rgb(18, 18, 20);
            border: 5px solid black;
            color: #e0e0e0;
            margin-bottom: 1.5rem;
        }

        .help.is-danger {
            font-size:large;
            animation: errorFlash 2s infinite ease-in-out;
            color:red;

        }
        
        @keyframes errorFlash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.2; }
        }
        .is-nowrap {
            white-space: nowrap !important;
        }
        .input::placeholder, .textarea::placeholder { color:rgb(99, 99, 99); }