/* Fix for directly targeting the navbar link without any bootstrap classes */
a.nav-link,
.nav-link,
a.nav-link[data-limesurvey-submit],
a[data-limesurvey-submit],
ul.nav.navbar-nav.navbar-action-link li a,
.navbar li a,
li.nav-item a {
    color: #ffffff !important;
}

/* Bootstrap 5 specific overrides */
.navbar-light .navbar-nav .nav-link,
.navbar.navbar-light .navbar-nav .nav-link,
.bg-light .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* Add !important to everything to force override */
#survey-nav a,
.navbar a,
.navbar-nav a {
    color: #ffffff !important;
}

/* Add very specific override for "Resume later" link */
.survey-form-container + #navigator-container + div.row.ls-js-hidden .col-6 a,
.survey-form-container + #navigator-container + div.row.ls-js-hidden .col-6 button,
.ls-no-js-hidden a,
.nav-item.ls-no-js-hidden a,
.navbar-action-link .nav-item a {
    color: #ffffff !important;
}

/* Target specifically the ls-no-js-hidden element which contains the Resume later link */
.ls-no-js-hidden a.nav-link,
.ls-no-js-hidden .nav-link,
li.ls-no-js-hidden a,
li.nav-item.ls-no-js-hidden a,
.navbar-nav .nav-item.ls-no-js-hidden a {
    color: #ffffff !important;
}

/* Super aggressive selector that targets the exact element */
body .navbar .navbar-nav li.nav-item a.nav-link,
body #survey-nav .navbar-nav li.nav-item a.nav-link,
body #survey-nav .container-fluid #navbar ul.nav.navbar-nav li.nav-item a.nav-link {
    color: #ffffff !important;
}

/* Inline style override - important for overriding inline styles */
[data-limesurvey-submit] {
    color: #ffffff !important;
}/* Survey list heading text color */
.fruity .survey-list-heading .h3,
.fruity .survey-list-heading h3 {
    color: #00CAC0 !important;
    font-family: "Playfair Display", serif;
    font-weight: 600;
}

/* Specific targeting for the exact heading text */
.fruity .survey-list-heading div:contains("The following surveys are available:"),
.fruity .survey-list-heading .h3:contains("The following surveys are available:") {
    color: #00CAC0 !important;
}/**
 * LimeSurvey Custom CSS
 *
 * This file overrides the default Fruity theme styles to match
 * the organization's brand colors and fonts.
 *
 * Primary colors:
 * - Dark blue: #003854
 * - Teal: #00CAC0
 * - White: #FFFFFF
 *
 * Fonts:
 * - Source Code Pro (main font)
 * - Playfair Display (headings)
 * - Poppins (additional font)
 */

/* Base Styles & Typography
---------------------------------------------- */
body {
    font-family: "Source Code Pro", sans-serif;
    color: #333333;
    background-color: #ffffff;
    background-image: url('../files/background.png');
    background-attachment: fixed;
}

.fruity {
    font-family: "Source Code Pro", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Playfair Display", serif;
    color: #003854;
    font-weight: 600;
}

.question-title {
    font-family: "Playfair Display", serif;
    color: #003854;
    font-weight: 600;
}

/* Force strong specificity on brand colors */
.fruity a,
.fruity a:link {
    color: #003854;
}

.fruity a:hover,
.fruity a:focus,
.fruity a:active {
    color: #00CAC0;
    text-decoration: underline;
}

.fruity .text-primary,
.fruity .text-info,
.fruity .text-success {
    color: #003854 !important;
}

.fruity .text-warning {
    color: #00CAC0 !important;
}

.fruity .bg-primary {
    background-color: #003854 !important;
    color: #fff !important;
}

.fruity .bg-success {
    background-color: rgba(0, 202, 192, 0.2) !important;
}

.fruity .bg-info {
    background-color: rgba(0, 56, 84, 0.2) !important;
}

/* Navigation Bar
---------------------------------------------- */
.fruity .navbar-default,
.fruity .navbar {
    background-color: #003854 !important;
    border-color: #003854;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fruity .navbar-default .navbar-brand {
    color: #ffffff;
    font-family: "Playfair Display", serif;
}

.fruity .navbar-default .navbar-brand:hover,
.fruity .navbar-default .navbar-brand:focus {
    color: #00CAC0;
}

.fruity .navbar-default .navbar-nav > li > a,
.fruity .navbar a {
    color: #ffffff;
    font-size: 1.1rem;
    text-decoration: none;
}

.fruity .navbar-default .navbar-nav > li > a:hover,
.fruity .navbar-default .navbar-nav > li > a:focus,
.fruity .navbar a:hover {
    color: #00CAC0;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .fruity .navbar .navbar-nav .nav-item:after {
        background-color: #00CAC0; /* Change underline color on hover */
    }
}

.logo-container > img {
    max-height: 80px;
    padding: 10px;
}

/* Progress Bar
---------------------------------------------- */
.fruity .progress {
    background-color: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

.fruity .progress-bar {
    background-color: #00CAC0;
}

.fruity .progress-bar-success {
    background-color: #00CAC0;
}

.fruity .progress-bar-info {
    background-color: #003854;
}

/* Question Containers
---------------------------------------------- */
.fruity .top-container {
    border-color: transparent;
}

.fruity .top-container .top-content {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.fruity .question-container {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 2em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.fruity .question-title-container {
    background-color: #003854;
    color: #ffffff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 1em;
}

.fruity .question-text {
    color: #ffffff;
}

.fruity .answer-container {
    padding: 1.5em;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Help Text & Question Help
---------------------------------------------- */
.fruity .ls-questionhelp {
    color: #666666;
    font-style: italic;
}

.fruity .ls-questionhelp:before {
    color: #00CAC0;
}

.fruity .question-help-container {
    background-color: #f9f9f9;
    border-color: #e5e5e5;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
}

.fruity .help-block {
    color: #666666;
}

/* Form Elements
---------------------------------------------- */
.fruity .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fruity .form-control:focus {
    border-color: #00CAC0;
    box-shadow: 0 0 0 0.2rem rgba(0, 202, 192, 0.25);
}

/* Radio & Checkbox Items
---------------------------------------------- */
.fruity .radio-item label::before,
.fruity .checkbox-item label::before {
    border: 2px solid #ced4da;
}

.fruity .radio-item input[type="radio"]:checked + label::before {
    border-color: #00CAC0;
}

.fruity .radio-item input[type="radio"]:checked + label::after {
    background-color: #00CAC0;
}

.fruity .checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: #00CAC0;
    border-color: #00CAC0;
}

.fruity .checkbox-item input[type="checkbox"]:checked + label::after {
    color: #ffffff;
}

body .answer-item label:after,
.checkbox-item input[type=checkbox]:checked + label:after,
.checkbox-item input[type=radio]:checked + label:after,
.radio-item input[type="radio"]:checked + label::after {
    background-color: #00CAC0;
}

/* Buttons
---------------------------------------------- */
.fruity .btn-primary,
.fruity .btn-success {
    background-color: #003854;
    border-color: #003854;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active,
.fruity .btn-success:hover,
.fruity .btn-success:focus,
.fruity .btn-success:active,
.fruity .open .dropdown-toggle.btn-primary {
    background-color: #00CAC0;
    border-color: #00CAC0;
    color: #ffffff;
}

.fruity .btn-default,
.fruity .btn-outline-secondary {
    background-color: #ffffff;
    border-color: #ced4da;
    color: #003854;
}

.fruity .btn-default:hover,
.fruity .btn-default:focus,
.fruity .btn-default:active,
.fruity .btn-outline-secondary:hover,
.fruity .btn-outline-secondary:focus,
.fruity .btn-outline-secondary:active,
.fruity .btn-check:active + .btn-outline-secondary,
.fruity .btn-check:checked + .btn-outline-secondary,
.fruity .btn-outline-secondary.active {
    background-color: rgba(0, 202, 192, 0.1);
    border-color: #00CAC0;
    color: #003854;
}

.fruity .btn-check:active + .btn-outline-secondary:focus,
.fruity .btn-check:active + .btn-primary:focus,
.fruity .btn-check:active + .btn-success:focus,
.fruity .btn-check:checked + .btn-outline-secondary:focus,
.fruity .btn-check:checked + .btn-primary:focus,
.fruity .btn-check:checked + .btn-success:focus,
.fruity .btn-check:focus + .btn-outline-secondary,
.fruity .btn-check:focus + .btn-primary,
.fruity .btn-check:focus + .btn-success,
.fruity .btn-outline-secondary.active:focus,
.fruity .btn-outline-secondary:active:focus,
.fruity .btn-success.active:focus,
.fruity .btn-success:active:focus,
.fruity .show > .btn-outline-secondary.dropdown-toggle:focus,
.fruity .show > .btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 202, 192, 0.5);
}

/* Navigator (Prev/Next) Buttons
---------------------------------------------- */
#navigator-container {
    background-color: transparent;
}

#navigator-container .btn {
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 4px;
}

/* Submit Button & Next Button */
#movenextbtn, .submit {
    background-color: #003854;
    color: #ffffff;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    border: none;
    transition: all 0.3s ease;
}

#movenextbtn:hover, .submit:hover {
    background-color: #00CAC0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Previous Button */
#moveprevbtn {
    background-color: #ffffff;
    color: #003854;
    border: 1px solid #003854;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#moveprevbtn:hover {
    background-color: #f0f8ff;
    color: #00CAC0;
    border-color: #00CAC0;
}

/* Error & Warning Messages
---------------------------------------------- */
.fruity .text-danger {
    color: #dc3545;
}

.fruity .has-error .form-control {
    border-color: #dc3545;
}

.fruity .has-error .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.fruity .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.fruity .input-error .asterisk {
    color: #dc3545;
}

/* Survey List
---------------------------------------------- */
.fruity .surveys-list li {
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.fruity .surveys-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fruity .surveys-list li a {
    color: #003854;
    font-weight: 600;
}

.fruity .surveys-list li a:hover {
    color: #00CAC0;
    text-decoration: none;
}

/* Table Styling
---------------------------------------------- */
.fruity .table > thead > tr > th {
    background-color: #003854;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 2px solid #00CAC0;
}

.fruity .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.fruity .table-hover > tbody > tr:hover {
    background-color: rgba(0, 202, 192, 0.1);
}

.fruity .ls-answers thead th {
    background-color: #003854;
    color: #ffffff;
}

.fruity .ls-answers .ls-heading {
    background-color: #f2f2f2;
}

.fruity .ls-even {
    background-color: #f9f9f9;
}

/* Specific Question Types
---------------------------------------------- */
/* Slider */
.fruity .slider-container .slider {
    background-color: #ced4da;
}

.fruity .slider-container .slider .slider-handle {
    background-color: #00CAC0;
    border: 2px solid #ffffff;
}

.fruity .slider-handle {
    background-color: #00CAC0;
}

.fruity .slider-selection {
    background-image: linear-gradient(to bottom, #00CAC0 0%, #003854 100%);
}

/* Dual Scale */
.fruity .table-dual-scale .separator {
    background-color: #e9ecef;
}

/* Yes/No Buttons */
.fruity .yes-no .btn-group label.btn-default.active {
    background-color: #00CAC0;
    border-color: #00CAC0;
    color: #ffffff;
}

/* Gender Buttons */
.fruity .gender-button .btn-group label.btn-default.active {
    background-color: #00CAC0;
    border-color: #00CAC0;
    color: #ffffff;
}

/* Multiple Numeric */
.fruity .ls-group-dynamic .form-control-static {
    border-color: transparent;
}

/* Footer Styling - Fixed Layout */
.fruity .footer,
#surveyListFooter,
.survey-list-footer,
footer,
#footer {
    background-color: #003854;
    color: #ffffff !important;
    padding: 20px 0;  /* More padding for airier feel */
    text-align: center;
    position: relative;
    margin-top: 30px;
    width: 100%;
    height: auto !important; /* Don't restrict height */
    overflow: visible; /* Ensure content doesn't get cut off */
    min-height: 100px; /* Ensure minimum height for footer */
}

/* Force white text for all elements in footer */
.fruity .footer *,
#surveyListFooter *,
.survey-list-footer *,
footer *,
#footer * {
    color: #ffffff !important;
}

/* Container within footer needs proper padding */
.fruity .footer .container,
#surveyListFooter .container,
footer .container,
#footer .container {
    padding: 0 20px; /* Add horizontal padding */
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Special treatment for text in footer */
.fruity .footer .text-center,
#surveyListFooter .text-center,
.fruity .footer .container .row div,
#surveyListFooter .container .row div,
.fruity .footer a,
#surveyListFooter a {
    color: #ffffff !important;
    margin-bottom: 5px; /* Add some spacing between elements */
}

/* Footer links in teal */
.fruity .footer a:hover,
#surveyListFooter a:hover,
footer a:hover,
#footer a:hover {
    color: #00CAC0 !important;
    text-decoration: underline;
}

/* Ensure LimeSurvey logo in footer has appropriate sizing */
.fruity .footer img,
#surveyListFooter img,
footer img,
#footer img {
    max-height: 40px;
    margin: 0 auto 10px; /* Added bottom margin */
    display: inline-block;
    vertical-align: middle;
}

/* Fix for the "The Online Survey Tool" text */
.fruity .footer .col-12,
#surveyListFooter .col-12,
footer .col-12,
#footer .col-12 {
    color: #ffffff !important;
    padding: 5px 0; /* Add vertical padding */
}

/* Fix for footer rows to ensure proper wrapping */
.fruity .footer .row,
#surveyListFooter .row,
footer .row,
#footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
}

/* Add proper spacing for columns */
.fruity .footer .row > div,
#surveyListFooter .row > div,
footer .row > div,
#footer .row > div {
    padding: 5px 10px;
    box-sizing: border-box;
}

/* Ensure "proudly" text is properly positioned */
.fruity .footer .proudly,
#surveyListFooter .proudly {
    display: inline-block;
    margin-right: 5px;
}

/* Fix for "The Online Survey Tool" text spacing */
#surveyListFooter .container .row .col-12.d-block.d-sm-none.d-md-block.text-center {
    margin-top: 10px;
    width: 100%;
}

/* Index Menu (Question Index) */
.fruity #index-menu .dropdown-menu {
    border-color: #00CAC0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fruity #index-menu .dropdown-menu > li > a {
    color: #003854;
}

.fruity #index-menu .dropdown-menu > li > a:hover {
    background-color: rgba(0, 202, 192, 0.1);
    color: #00CAC0;
}

/* Change Language Form */
/* Language selector styling - Top menu dropdown version */
/* Label and main selector */
.fruity .form-change-lang,
.fruity .language-changer-label,
.fruity .navbar-action-link li.form-change-lang a,
.fruity #language-dropdown-button,
.fruity .nav-link.dropdown-toggle {
    color: #ffffff !important;
    font-weight: normal;
}

/* Dropdown Toggle Arrow */
.fruity .dropdown-toggle::after {
    color: #ffffff;
    border-top-color: #ffffff;
}

/* The Dropdown Button Text */
.fruity .nav-item.px-2 .nav-link,
.fruity .navbar-action-link .dropdown-toggle {
    color: #ffffff !important;
}

/* The Dropdown Items */
.fruity #language-dropdown.dropdown-menu,
.fruity #language-dropdown.dropdown-menu.show {
    background-color: #003854;
    border-color: #00CAC0;
}

/* Individual Language Options */
.fruity #language-dropdown .dropdown-item,
.fruity #language-dropdown .index-item a,
.fruity #language-dropdown .dropdown-menu a,
.fruity #language-dropdown.dropdown-menu .dropdown-item.ls-language-link,
.fruity #language-dropdown.dropdown-menu .index-item a.dropdown-item.ls-language-link {
    color: #ffffff !important;
    background-color: #003854;
}

/* Hover State for Language Options */
.fruity #language-dropdown .dropdown-item:hover,
.fruity #language-dropdown .index-item a:hover,
.fruity #language-dropdown .dropdown-menu a:hover,
.fruity #language-dropdown.dropdown-menu .dropdown-item.ls-language-link:hover,
.fruity #language-dropdown.dropdown-menu .index-item a.dropdown-item.ls-language-link:hover {
    color: #ffffff !important;
    background-color: #00CAC0 !important;
}

/* Ensure text in dropdown is white */
.fruity #language-dropdown.dropdown-menu .index-item,
.fruity #language-dropdown.dropdown-menu .index-item a {
    color: #ffffff !important;
}

/* Fix for the direct Language form in the survey list */
.fruity #surveylist-language-changer .form-change-lang label,
.fruity #surveylist-language-changer .control-label,
.fruity #surveylist-language-changer .form-control,
.fruity #surveylist-language-changer select,
.fruity #surveylist-language-changer option,
.fruity #surveylist-language-changer .language-changer-label {
    color: #003854 !important; /* Use dark blue for the form as it's on white background */
}

/* Override Bootstrap dropdown styles */
.fruity .dropdown-menu {
    --bs-dropdown-link-color: #ffffff;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: #00CAC0;
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: #00CAC0;
}

/* Privacy Statement */
.fruity .privacy-header {
    color: #003854;
    font-family: "Playfair Display", serif;
}

/* Required/Mandatory Question Mark */
.fruity .asterisk {
    color: #dc3545;
    font-size: 1.2em;
}

/* Survey Completion Message */
.fruity .completed-text {
    font-family: "Playfair Display", serif;
    color: #003854;
    font-size: 1.4em;
    margin: 2em 0;
    text-align: center;
}

/* Dropdown Menus */
.fruity .dropdown-menu > .active > a,
.fruity .dropdown-menu > .active > a:focus,
.fruity .dropdown-menu > .active > a:hover,
.fruity .dropdown-menu > li > a:focus,
.fruity .dropdown-menu > li > a:hover {
    background-color: #003854 !important;
    color: #fff;
}

/* Alert Messages */
.fruity .alert-success,
.fruity .alert-info {
    background-color: rgba(0, 202, 192, 0.1);
    border-color: #00CAC0;
    color: #003854;
}

.fruity .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    color: #856404;
}

/* Focus States for Accessibility */
.fruity a:focus,
.fruity .btn:focus,
.fruity input:focus,
.fruity textarea:focus,
.fruity select:focus {
    outline: 2px solid #00CAC0;
    outline-offset: 2px;
}

/* Input Group Add-ons */
.fruity .input-group-addon,
.fruity .input-group-text {
    background-color: #003854;
    color: #fff;
}

/* Print Styles */
@media print {
    .fruity {
        background-image: none;
        background-color: #ffffff;
    }

    .fruity .question-container {
        box-shadow: none;
        border: 1px solid #e5e5e5;
        margin-bottom: 15px;
    }

    .fruity .navbar,
    .fruity #navigator-container {
        display: none;
    }

    .fruity .question-title-container {
        background-color: #f2f2f2;
        color: #003854;
    }

    .fruity .question-text {
        color: #003854;
    }
}

/* Animation Classes */
.fruity .fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.fruity .bounce-in {
    animation: bounceIn 0.7s ease;
}

/* Media Queries for Responsive Design */
@media only screen and (max-width: 760px) {
    .fruity .question-title-container {
        padding: 10px;
    }

    .fruity .answer-container {
        padding: 15px;
    }

    .fruity .navbar-brand {
        font-size: 18px;
    }

    .fruity .logo-container > img {
        max-height: 50px;
    }

    .fruity .question-container {
        margin-bottom: 1.5em;
    }

    .fruity .ls-questionhelp {
        font-size: 14px;
    }

    .fruity .btn {
        white-space: normal;
    }
}