/* ===============================
   Chimney Trail Survey Theme (Fruity -> Bootswatch-like Light)
   White background + high contrast + CT palette accents
   =============================== */

/* Brand palette + light UI tokens (hex-only, incl. alpha via #RRGGBBAA) */
:root {
  /* CT palette */
  --ct-off-white: #DDDAD4;
  --ct-silver: #B7B8B9;
  --ct-black: #151515;
  --ct-hunter: #212819;
  --ct-neon: #CBFC5A;

  /* Light UI */
  --ct-page: #FFFFFF;
  --ct-surface: #FFFFFF;
  --ct-surface-2: #F7F7F7;
  --ct-text: #151515;
  --ct-muted: #3F3F3F;
  --ct-border: #E6E6E6;
  --ct-border-strong: #D2D2D2;

  /* Links on white (keep text dark; neon used as highlight) */
  --ct-link: #212819;
  --ct-link-hover: #151515;

  /* Focus ring */
  --ct-focus-ring: #CBFC5A33; /* neon @ ~20% */
}

/* ------------------------
   Base page / typography
   ------------------------ */
html,
body {
  background: var(--ct-page) !important;
  color: var(--ct-text) !important;
}

body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 padding-bottom: 0 !important; /* no bottom padding, footer should be bottom aligned */
}

body > article {
    flex: 1;
}

body,
.limesurvey,
.survey-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.48;
}

/* Fruity containers: keep on white */
.limesurvey .container,
.limesurvey .survey-container,
.limesurvey .welcome,
.firstpage,
.survey-container {
  background: transparent !important;
}

/* Layout width similar to screenshot */
.survey-container,
.limesurvey .container,
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ------------------------
   Top navigation (CT dark bar)
   ------------------------ */
.navbar,
.navbar.navbar-default,
.ls-topbar,
#navbar,
.top-container {
  background: var(--ct-black) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ct-hunter) !important;
  color: #FFFFFF !important;
}

.navbar .navbar-brand,
.navbar a,
.ls-topbar a,
#navbar a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.navbar a:hover,
.navbar a:focus,
.ls-topbar a:hover,
.ls-topbar a:focus,
#navbar a:hover,
#navbar a:focus {
  color: var(--ct-neon) !important; /* neon is great on dark */
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ------------------------
   Headings & survey title
   ------------------------ */
.limesurvey h1,
.limesurvey h2,
.limesurvey h3,
.survey-title,
.survey-description,
.firstpage h1,
.firstpage .surveytitle,
.welcome h1,
.group-title,
.groupname {
  color: var(--ct-text) !important;
  font-weight: 700;
  margin: 0 0 0.6rem 0;
}

.firstpage .surveytitle,
.survey-container h1 {
  font-size: clamp(24px, 3.6vw, 44px);
  letter-spacing: -0.02em;
}

/* Body copy */
.limesurvey p,
.limesurvey label,
.limesurvey .questiontext,
.limesurvey .question-help,
.limesurvey .ls-question-text {
  color: var(--ct-text) !important;
  font-size: 1rem;
}

/* Muted but readable on white */
.text-muted,
.help,
.hint,
.ls-questionhelp {
  color: var(--ct-muted) !important;
}

/* ------------------------
   Links (dark text + neon highlight on hover)
   ------------------------ */
.limesurvey a,
.survey-container a {
  color: var(--ct-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.limesurvey a:hover,
.limesurvey a:focus,
.survey-container a:hover,
.survey-container a:focus {
  color: var(--ct-link-hover);
  box-shadow: inset 0 -0.22em 0 0 var(--ct-neon); /* neon highlight (not neon text) */
}

/* Focus-visible (keyboard) */
.limesurvey a:focus-visible,
.limesurvey button:focus-visible,
.limesurvey .btn:focus-visible,
.limesurvey input:focus-visible,
.limesurvey select:focus-visible,
.limesurvey textarea:focus-visible,
.limesurvey .form-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ct-focus-ring);
}

/* ------------------------
   Question cards (Bootswatch-like)
   ------------------------ */
.group-container,
.question-container,
.question-wrapper,
.ls-question {
  background: var(--ct-surface) !important;
  color: var(--ct-text) !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: 6px;
  box-shadow: 0 2px 10px #0000000A;
  margin: 18px 0;
  overflow: hidden;
}

/* CT-only question header strip */
.group-container .question-title-container,
.group-container .ls-question-header,
.question-container .question-title-container,
.ls-question .ls-question-header,
.ls-question .question-title-container {
  background: var(--ct-black) !important;
  color: #FFFFFF !important;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ct-hunter) !important;
  box-shadow: inset 0 -3px 0 0 var(--ct-neon); /* subtle neon brand rule */
}

.group-container .question-title-container *,
.group-container .ls-question-header *,
.question-container .question-title-container *,
.ls-question .ls-question-header *,
.ls-question .question-title-container * {
  color: #FFFFFF !important;
}

/* Content padding inside cards */
.group-container .group-desc,
.group-container .group-description,
.question-container .question-content,
.question-wrapper .question-content,
.ls-question .ls-question-body,
.ls-question .ls-question-content {
  padding: 14px;
}

/* Mandatory marker (avoid neon text on white; keep high-contrast) */
.mandatory,
.asterisk,
.ls-mandatory {
  color: var(--ct-hunter) !important;
  font-weight: 800;
}

/* ------------------------
   Buttons (Bootswatch-like)
   ------------------------ */
.limesurvey .btn,
.limesurvey button,
button,
.btn {
  font-family: inherit;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  box-shadow: none;
  transition: transform 0.06s ease, filter 0.12s ease, background-color 0.12s ease;
}

/* Primary (Next/Submit): neon-filled */
.limesurvey .btn-primary,
.limesurvey .ls-button-submit,
.limesurvey .ls-button-next {
  background: var(--ct-neon) !important;
  color: var(--ct-black) !important;
  border: 1px solid #00000014 !important;
}

.limesurvey .btn-primary:hover,
.limesurvey .ls-button-submit:hover,
.limesurvey .ls-button-next:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* Secondary (Previous): outlined */
.limesurvey .btn-default,
.limesurvey .ls-button-previous {
  background: #FFFFFF !important;
  color: var(--ct-text) !important;
  border: 1px solid var(--ct-border-strong) !important;
}

.limesurvey .btn-default:hover,
.limesurvey .ls-button-previous:hover {
  background: var(--ct-surface-2) !important;
  transform: translateY(-1px);
}

/* ------------------------
   Progress bar
   ------------------------ */
.progress {
  background: var(--ct-border) !important;
  box-shadow: none !important;
}

.progress .progress-bar {
  background: var(--ct-neon) !important;
}

/* ------------------------
   Inputs (Bootstrap/Fruity)
   ------------------------ */
.limesurvey .form-control,
.limesurvey input[type="text"],
.limesurvey input[type="email"],
.limesurvey input[type="number"],
.limesurvey textarea,
.limesurvey select {
  background: #FFFFFF !important;
  color: var(--ct-text) !important;
  border: 1px solid var(--ct-border-strong) !important;
  border-radius: 6px !important;
  padding: 0.55rem 0.7rem;
  width: 100%;
  box-sizing: border-box;
}

.limesurvey input::placeholder,
.limesurvey textarea::placeholder {
  color: #6B6B6B;
}

.limesurvey .form-control:focus,
.limesurvey input:focus,
.limesurvey textarea:focus,
.limesurvey select:focus {
  outline: none;
  border-color: var(--ct-hunter) !important;
  box-shadow: 0 0 0 4px var(--ct-focus-ring) !important;
}

/* Checkbox / radio (Fruity markup varies; let browser render cleanly) */
.limesurvey input[type="checkbox"],
.limesurvey input[type="radio"] {
  accent-color: var(--ct-hunter);
}

/* Privacy policy checkbox label */
.datasec .checkbox,
.datasec label {
  color: var(--ct-hunter);
  font-weight: 600;
}

/* ------------------------
   Matrix / tables (crisper Bootswatch feel)
   ------------------------ */
.limesurvey table,
.limesurvey .table {
  background: #FFFFFF !important;
}

.limesurvey .table > thead > tr > th,
.limesurvey table > thead > tr > th {
  background: var(--ct-surface-2) !important;
  color: var(--ct-text) !important;
  border-bottom: 1px solid var(--ct-border-strong) !important;
}

.limesurvey .table > tbody > tr > td,
.limesurvey .table > tbody > tr > th,
.limesurvey table > tbody > tr > td,
.limesurvey table > tbody > tr > th {
  border-top: 1px solid var(--ct-border) !important;
}

.limesurvey .table > tbody > tr:nth-child(even),
.limesurvey table > tbody > tr:nth-child(even) {
  background: #00000003;
}

/* ------------------------
   Alerts (keep semantics; just unify radius)
   ------------------------ */
.limesurvey .alert {
  border-radius: 6px;
}

/* ------------------------
   Fruity “cards/panels” overrides
   ------------------------ */
.limesurvey .panel,
.limesurvey .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Force welcome/title heading color (beats theme defaults) */
.welcome h1,
.welcome .ls-title,
.welcome .ls-survey-title,
.welcome .survey-name,
.ls-title,
.ls-survey-title,
.survey-name {
  color: var(--ct-text) !important;
}
/* ===============================
   CT: Remove Fruity purple/greens + boost question contrast
   Put this at the END of custom.css
   =============================== */

/* If Fruity is Bootstrap 5 in your install, these help; harmless otherwise */
:root{
  --bs-primary: #212819;
  --bs-success: #212819;
  --bs-info: #212819;
  --bs-link-color: #212819;
  --bs-link-hover-color: #151515;
}

/* Kill Bootswatch-style purple + default “success green” */
.limesurvey .text-primary,
.limesurvey .text-info,
.limesurvey .text-success,
.limesurvey .text-warning,
.limesurvey .text-danger{
  color: #212819 !important; /* CT hunter */
}

.limesurvey .bg-primary,
.limesurvey .bg-info,
.limesurvey .bg-success{
  background-color: #212819 !important;
}

/* Info/Help line like “Choose one of the following answers” */
.limesurvey .ls-questionhelp,
.limesurvey .question-help,
.limesurvey .help-block,
.limesurvey .ls-question-message{
  color: #151515 !important; /* higher contrast */
}

/* Make answer text darker (Fruity often renders answers gray) */
.limesurvey .ls-answers label,
.limesurvey .radio label,
.limesurvey .checkbox label,
.limesurvey .answer-item label{
  color: #151515 !important;
  font-weight: 600;
}

/* Radios/checkboxes: force CT hunter (removes the non-CT green) */
.limesurvey input[type="radio"],
.limesurvey input[type="checkbox"]{
  accent-color: #212819 !important;
}

/* Bootstrap custom controls (covers installs that don’t use native accent-color) */
.limesurvey .custom-control-input:checked ~ .custom-control-label::before,
.limesurvey .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.limesurvey .custom-radio .custom-control-input:checked ~ .custom-control-label::before{
  background-color: #212819 !important;
  border-color: #212819 !important;
}

/* Keep neon as an accent line, not as text on white */
.limesurvey a:hover,
.limesurvey a:focus{
  color: #151515 !important;
  box-shadow: inset 0 -0.22em 0 0 #CBFC5A !important; /* neon highlight */
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus {
  background-color: var(--ct-hunter);
  border-color: var(--ct-hunter);
}

.ls-privacy-block a, .ls-privacy-block .text-primary {
  color: var(--ct-hunter) !important;
  transition: color .3s;
}

.ls-privacy-block a:hover {
  color: #8DAB46 !important;
}

.privacy .checkbox-item label::before, .privacy .checkbox-item input[type=checkbox]:checked + label::before {
  border-color: var(--ct-hunter);
}

.privacy .checkbox-item input[type=checkbox]:checked + label::after {
  color: var(--ct-hunter);
}

.answer-item input[type=radio]:checked + label  {
  color: var(--ct-hunter);
}

.radio-item input[type=radio]:checked + label::before {
  border-color: var(--ct-hunter);
}

.radio-item input[type=radio]:checked + label::after {
  background-color: var(--ct-hunter);
}

.question-valid-container.text-info{
  color: var(--bs-danger) !important;
}

footer {
  background-color: var(--ct-black) !important;
  color: var(--ct-off-white);
}

footer small {
  font-weight: 700;
}

.error-link {
  color: var(--ct-hunter);
}

#survey-nav .dropdown-menu > li > a {
 color: var(--ct-hunter)!important;
}

#survey-nav .dropdown-menu > li > a:hover {
 background-color: var(--ct-hunter) !important;
 color: var(--ct-off-white) !important;
}

.answer-text, .ls-answers th, .ls-answers label {
  font-weight: 400 !important;
}

.group-title {
  font-size: 32px !important;
}

.ls-answers th, .ls-answers .answers-list:hover th {
  color: var(--ct-black);
}