@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

/* --- 1. Typography (Brand Fonts & Bootstrap Overrides) --- */

/* Force Bootstrap 5 to use your brand fonts globally */
:root {
    --bs-font-sans-serif: 'Open Sans', 'Noto Sans', sans-serif !important;
    --bs-body-font-family: 'Open Sans', 'Noto Sans', sans-serif !important;
}

/* Aggressively apply Open Sans to all standard text elements and inputs */
body, p, span, li, div, label, 
.answer-text, .question-text, 
.form-control, .form-select, button {
    font-family: 'Open Sans', 'Noto Sans', sans-serif !important;
}

/* Ensure Headers stay bold and crisp */
h1, h2, h3, h4, 
.group-title, 
.question-title-container, 
.ls-privacy-head,
.sortable-rank-subtitle {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* --- 2. Primary Buttons (Humanity Coral) --- */
/* Targets the "Next", "Previous", and "Submit" buttons */
.btn-primary, 
button.btn-primary, 
input[type="submit"].btn-primary,
.btn-primary:active:focus {
    background-color: #D65A45 !important;
    border-color: #D65A45 !important;
    color: #ffffff !important;
    border-radius: 4px; /* Clean, modern corners */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Hover effect for buttons */
.btn-primary:hover, 
.btn-primary:focus {
    background-color: #BF4C39 !important; /* Slightly darker coral for hover state */
    border-color: #BF4C39 !important;
    color: #ffffff !important;
}

/* --- 3. Progress Bar (Growth Sage) --- */
/* Replaces the default blue with a calming green to reduce survey fatigue */
.progress-bar {
    background-color: #7B9B7B !important; /* Replace with your exact Growth Sage hex */
}

/* --- 4. Survey Question Clean Up --- */
/* Gives the questions some breathing room (William Zinsser's white space rule) */
.question-container {
    margin-bottom: 2.5rem;
    background-color: #ffffff;
    border: 1px solid #F4F1DE; /* Foundation Cream border */
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Active/Selected Answer Highlights */
/* Ensures checkboxes and radio buttons match your brand when clicked */
.radio input[type="radio"]:checked + label::before,
.checkbox input[type="checkbox"]:checked + label::before {
    background-color: #D65A45 !important;
    border-color: #D65A45 !important;
}

/* Flatten Progress Bar */
.top-container .progress {
    box-shadow: none !important;
    border-radius: 4px; 
    background-color: #F4F1DE !important; /* Foundation Cream background */
}

/* Soft Alternating Rows for Matrix Questions */
.ls-answers > tbody > tr.ls-even td, 
.table-col-hover col.hover,
.table-col-hover col:hover {
    background-color: rgba(123, 155, 123, 0.08) !important; /* 8% Growth Sage */
}

/* Soften Question Help Text */
.ls-questionhelp {
    color: #7B9B7B !important; /* Growth Sage */
    font-style: italic;
    font-size: 0.9rem;
}
.ls-questionhelp:before {
    color: #7B9B7B !important; 
}

/* Branded Validation Alerts */
.question-valid-container .text-danger,
.input-error .asterisk {
    color: #D65A45 !important; /* Humanity Coral */
    font-weight: 700;
}

/* --- Overriding the Sea Green Theme Default --- */

/* 1. Force ALL standard text to pure Dark Grey */
body, 
.survey-container, 
.question-text, 
.answer-text,
.ls-heading th,
.ls-answers td,
.radio-item label, 
.checkbox-item label {
    color: #444444 !important; 
}

/* 2. Fix the Headers to a neutral Dark Slate (Removing the green tint) */
h1, h2, h3, h4, 
.group-title, 
.question-title-container,
.question-number,
.question-code {
    color: #323232 !important; /* A clean, almost-black Slate */
}

/* --- 1. The Final Hit on the Green Text --- */
/* LimeSurvey buries its colors in nested paragraphs and lists. 
   This forces your Dark Grey onto almost all standard reading elements. */
body, p, span, li, div, .answer-text, .question-text {
    color: #444444 !important; /* Pure Dark Grey */
}

/* Make sure any stray links use your brand Coral instead of green */
a {
    color: #D65A45 !important;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- 2. The Survey Description Box --- */
/* Pulls the text to the left (great for lists) and wraps it in a calming Foundation Cream box */
.survey-description, .group-description, .welcome-container {
    text-align: left !important;
    background-color: #F4F1DE !important; /* Foundation Cream */
    color: #444444 !important;
    padding: 2rem !important;
    border-radius: 8px !important;
    border: 1px solid rgba(123, 155, 123, 0.3) !important; /* Subtle Growth Sage border */
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Ensures numbered/bulleted lists inside the description align cleanly */
.survey-description ul, .survey-description ol, 
.group-description ul, .group-description ol {
    text-align: left !important;
    margin-left: 1.5rem !important;
    padding-left: 1rem !important;
}

/* --- 3. The "Previous" Button --- */
/* LimeSurvey usually assigns .btn-default or .btn-link to the 'Previous' button.
   We will give it an outlined 'Growth Sage' look so it doesn't compete with 'Next'. */
.btn-default, button[value="moveprev"], .btn-outline-secondary {
    background-color: transparent !important;
    border: 2px solid #7B9B7B !important; /* Growth Sage */
    color: #7B9B7B !important;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-default:hover, button[value="moveprev"]:hover, .btn-outline-secondary:hover {
    background-color: #7B9B7B !important;
    color: #ffffff !important;
}

/* --- 4. Calming Typography & Sizing --- */
/* Normalizes the chaotic font sizes into a predictable, smooth hierarchy */
body {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

h1, .survey-name {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #323232 !important;
    margin-bottom: 1rem !important;
}

h2, .group-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #323232 !important;
    margin-bottom: 0.75rem !important;
}

h3, h4, .question-title-container {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #323232 !important;
}

/* --- 5. Privacy Statement Color Fix --- */
/* Overrides the default 'text-primary' sea green injected by Bootstrap */
.privacy .text-primary,
.ls-privacy-head,
.ls-privacy-body {
    color: #444444 !important; /* Pure Dark Grey */
}

.ls-privacy-head {
    font-weight: 700 !important;
    color: #323232 !important; /* Slate for the header to match other titles */
    margin-bottom: 0.5rem;
}

/* --- 6. Progress Bar Width Restraint --- */
/* Stops the progress bar from stretching across the entire monitor */
.top-container .progress {
    max-width: 800px !important; /* Constrains it to match a readable content width */
    margin-left: auto !important; /* Centers it perfectly */
    margin-right: auto !important; 
}

/* --- 7. The Chunky Progress Bar --- */
.top-container .progress {
    height: 32px !important; /* Increases the height */
    border-radius: 16px !important; /* Soft pill shape */
    background-color: #F4F1DE !important; /* Foundation Cream track */
}

.progress-bar {
    font-size: 15px !important;
    font-weight: 800 !important; /* Bold percentage */
    line-height: 32px !important; /* Perfectly centers the text vertically */
}


/* --- 8. Modern "Card" Interface for Questions --- */
/* A subtle off-white background for the page so the white cards pop */
body, .outerframe {
    background-color: #FAFAFA !important; 
}

/* The actual question boxes */
.question-container {
    background-color: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important; /* Modern rounded corners */
    padding: 1.5rem 2rem !important; /* Cleans up internal spacing */
    margin-bottom: 1.5rem !important; /* Pulls the questions closer together */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important; /* Soft, premium drop shadow */
    transition: box-shadow 0.3s ease;
}

/* Optional: Gives the card a slight 'lift' when the user hovers over it */
.question-container:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Remove LimeSurvey's excessive internal padding */
.question-title-container {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
}

.answer-container {
    padding-top: 0.5rem !important;
}


/* --- 9. Fancy Input Fields & Dropdowns --- */
/* Modernizes the text boxes and select menus to match the cards */
textarea.form-control, 
select.form-select {
    border-radius: 8px !important;
    border: 1px solid #cccccc !important;
    padding: 0.75rem !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

/* Adds a nice Growth Sage glow when typing or clicking */
textarea.form-control:focus, 
select.form-select:focus {
    border-color: #7B9B7B !important; 
    box-shadow: 0 0 0 3px rgba(123, 155, 123, 0.2) !important;
    outline: none !important;
}

/* --- 10. Styled Dropdown Menus --- */
select.form-select {
    appearance: none !important; /* Removes native Windows/Mac styling */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #fcfcfc !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important; /* Room for the custom arrow */
    font-family: 'Open Sans', 'Noto Sans', sans-serif !important;
    color: #444444 !important;
    /* Injects a clean, modern Dark Grey arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.2em !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    cursor: pointer;
}

select.form-select:hover {
    border-color: #7B9B7B !important; /* Growth Sage outline on hover */
}

/* --- 11. Checkbox Spacing and Branding --- */
/* Reduce the massive vertical gaps between options */
.checkbox-list .checkbox-item,
.radio-list .radio-item {
    margin-bottom: 0.25rem !important; /* Drastically cuts the vertical space */
    padding: 0.4rem 0 !important;
}

/* Style the empty checkbox square */
.checkbox-item input[type="checkbox"] + label::before {
    border-radius: 4px !important;
    border: 2px solid #cccccc !important;
    background-color: #ffffff !important;
    width: 22px !important;
    height: 22px !important;
    transition: all 0.2s ease;
}

/* Style the checkbox when clicked (Humanity Coral) */
.checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: #D65A45 !important; 
    border-color: #D65A45 !important;
}

/* Ensure the checkmark icon itself is white and centered */
.checkbox-item input[type="checkbox"]:checked + label::after {
    color: #ffffff !important;
    font-size: 14px !important;
    left: 4px !important; /* Adjust if the checkmark looks off-center */
    top: 2px !important;
}

/* Make the label text a bit softer */
.checkbox-item label.control-label {
    font-weight: 400 !important; /* Removes the bolding so it's easier to skim */
    padding-left: 35px !important; /* Gives the box room to breathe */
    cursor: pointer;
}

/* --- 12. Ranking & Drag-and-Drop Styling --- */
/* Style the draggable items as independent cards */
.sortable-list .list-group-item {
    background-color: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important; /* Adds gaps between the tiles */
    padding: 1rem 1.25rem !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    color: #444444 !important;
    cursor: grab !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Make it obvious which tile the user is hovering over */
.sortable-list .list-group-item:hover {
    border-color: #7B9B7B !important; /* Growth Sage border */
    box-shadow: 0 4px 8px rgba(123, 155, 123, 0.15) !important;
    z-index: 2; /* Lifts it slightly above the others */
}

/* Change cursor and color while actively dragging */
.sortable-list .list-group-item:active {
    cursor: grabbing !important;
    background-color: #F4F1DE !important; /* Foundation Cream while held */
}

/* Style the "Available items" and "Your ranking" headers */
.sortable-rank-subtitle {
    display: block;
    margin-bottom: 1rem !important;
    color: #323232 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* --- 13. Draggable Card Background Fix --- */
.sortable-list .list-group-item {
    background-color: #F4F1DE !important; /* Foundation Cream */
    border: 1px solid rgba(123, 155, 123, 0.2) !important; /* Very subtle Growth Sage border */
}

/* Ensure the background changes slightly when dragged so it feels interactive */
.sortable-list .list-group-item:active {
    background-color: #EBE7CC !important; /* Slightly darker cream when held */
}

/* --- 14. CAPTCHA Page Redesign --- */

/* Center the entire Captcha block and limit its width */
.captcha-page {
    max-width: 600px !important;
    margin: 4rem auto !important; /* Pushes it down from the top and centers it */
    text-align: center !important;
}

/* Style the CAPTCHA box to match your modern question cards */
.captcha-page .card {
    background-color: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    padding: 3rem 2rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Fix the clunky header */
.captcha-page .h3 {
    color: #323232 !important; /* Safeguard Slate */
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    font-size: 1.5rem !important;
}

/* Force the awkward columns to stack vertically and center */
#form-captcha .captcha-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

/* Center the text label */
#form-captcha .control-label {
    text-align: center !important;
    width: 100% !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Style the input box to be centered and chunky */
#form-captcha input[type="text"] {
    width: 100% !important;
    max-width: 200px !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    letter-spacing: 2px !important; /* Makes typing the code feel premium */
}

/* Override the default 'outline-secondary' to your Humanity Coral */
#form-captcha button[type="submit"] {
    background-color: #D65A45 !important;
    border-color: #D65A45 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    width: 100% !important;
    max-width: 200px !important;
    padding: 0.75rem !important;
    margin-top: 1.5rem !important;
    transition: background-color 0.3s ease !important;
}

#form-captcha button[type="submit"]:hover {
    background-color: #BF4C39 !important;
    border-color: #BF4C39 !important;
}

/* --- 15. Fixing CAPTCHA Alignment --- */
/* Kill the stubborn Bootstrap columns and offsets that cause wonky alignment */
#form-captcha .col-md-2, 
#form-captcha .col-md-4, 
#form-captcha .col-md-6,
#form-captcha .load-survey-input {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    flex: none !important; /* Stops the grid from forcing awkward widths */
    display: flex !important;
    justify-content: center !important;
}

/* Group the Captcha image and the reload button together perfectly in the center */
#form-captcha .col-md-2 > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important; /* Adds a clean gap between the image and the refresh icon */
}

/* Ensure the submit button container wrapper is centered */
.load-survey-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* --- 17. Front Page / Survey List Styling --- */

/* Clean up the massive default header block */
#surveys-list-jumbotron {
    background-color: transparent !important;
    padding: 2rem 0 !important;
    margin-bottom: 2rem !important;
    border-bottom: none !important;
}

/* Force the site name to your Safeguard Slate */
#surveys-list-jumbotron h1 {
    color: #323232 !important;
    font-weight: 700 !important;
    font-size: 2.5rem !important;
}

/* Style the list of surveys into modern PaperMod-style cards */
.surveys-list {
    padding: 0 !important;
    max-width: 800px;
    margin: 0 auto; /* Centers the list on large screens */
}

.surveys-list .list-group-item {
    background-color: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.surveys-list .list-group-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #7B9B7B !important; /* Growth Sage hover hint */
}

/* Style the Survey Titles */
.surveys-list .list-group-item .h4 {
    color: #323232 !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin-top: 0 !important;
}

/* Restyle the "Take this survey" buttons */
.surveys-list .list-group-item .btn-primary {
    background-color: #D65A45 !important; /* Humanity Coral */
    border-color: #D65A45 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    padding: 0.5rem 1.5rem !important;
    margin-top: 1rem !important;
}

.surveys-list .list-group-item .btn-primary:hover {
    background-color: #BF4C39 !important;
}

/* --- 18. Refined Front Page Cleanup --- */

/* 1. Alignment & Centering */
#surveys-list-jumbotron, 
.survey-list-heading, 
.survey-contact, 
#surveyListFooter {
    text-align: center !important;
    padding-left: 0 !important;
}

#surveys-list-jumbotron span {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #323232 !important;
    display: block;
    margin: 0 auto 1.5rem auto;
}

/* 2. Remove Clutter & Redundancy */
/* Hide the bulky default LimeSurvey logo images */
#surveys-list-jumbotron img, 
#surveyListFooter img,
.powered-by {
    display: none !important;
}

/* Hide the second (bottom) language selection box to reduce confusion */
#surveylist-language-changer {
    display: none !important;
}

/* Hide the unbranded/confusing "Online Survey Tool" footer text */
#surveyListFooter .col-12.text-center,
#surveyListFooter a[target="_blank"] {
    display: none !important;
}

/* 3. Style the List Cards */
.surveys-list {
    padding: 0 !important;
    max-width: 700px; /* Narrower for better focus */
    margin: 0 auto !important;
}

.surveys-list .list-group-item {
    background-color: #ffffff !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important;
}

/* 4. Button & Contact Refinement */
.surveys-list .surveytitle {
    text-align: center !important; /* Centered for the landing hub feel */
    padding: 1rem 1.5rem !important;
    font-size: 1.2rem !important;
    display: block !important;
    width: 100% !important;
}

.survey-contact {
    font-size: 0.9rem !important;
    color: #999999 !important;
    margin-top: 4rem !important;
    border-top: 1px solid #EAEAEA;
    padding-top: 2rem;
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Navigator alignment fix for the front page only */
.surveys-list .btn-group {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}