/* =========================================================================
   FOUNDRY COLLABORATIVE — LimeSurvey theme
   Brand: deep teal #143F47 · foundry green #81B14F · mid teal #2A6B72
   Type:  Plus Jakarta Sans
   This stylesheet is ADDED on top of the inherited Fruity stack and is the
   single source of truth for the Foundry look. It is intentionally written
   defensively (covers Bootstrap 3 "panel" and Bootstrap 5 "card" markup,
   plus LimeSurvey-specific ids/classes) so it survives across LS 6.x builds.
   ========================================================================= */

/* ---------------------------------------------------------------- Fonts -- */
/* Paths are relative to this file (css/), fonts live in ../fonts/ */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Regular.woff2") format("woff2"),
       url("../fonts/PlusJakartaSans-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Medium.woff2") format("woff2"),
       url("../fonts/PlusJakartaSans-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"),
       url("../fonts/PlusJakartaSans-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2"),
       url("../fonts/PlusJakartaSans-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"),
       url("../fonts/PlusJakartaSans-ExtraBold.woff") format("woff");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------- Brand tokens -- */
:root {
  --fdy-teal:        #143F47;  /* primary / deep teal           */
  --fdy-teal-700:    #102f35;  /* darker shade for hovers       */
  --fdy-teal-mid:    #2A6B72;  /* secondary mid teal            */
  --fdy-green:       #81B14F;  /* accent / foundry green        */
  --fdy-green-600:   #6f9c41;  /* green hover                   */
  --fdy-green-100:   #eef4e6;  /* green tint surface            */
  --fdy-ink:         #143F47;  /* body text                     */
  --fdy-muted:       #5b7177;  /* secondary text                */
  --fdy-bg:          #f4f6f5;  /* page background               */
  --fdy-surface:     #ffffff;  /* cards / panels                */
  --fdy-border:      #d8e0e0;  /* hairlines                     */
  --fdy-radius:      14px;
  --fdy-radius-sm:   10px;
  --fdy-shadow:      0 1px 2px rgba(20,63,71,.06), 0 8px 28px rgba(20,63,71,.08);
  --fdy-shadow-sm:   0 1px 2px rgba(20,63,71,.08);
  --fdy-font:        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Feed Bootstrap 5 variables so inherited components pick up the brand */
  --bs-primary:        #143F47;
  --bs-primary-rgb:    20, 63, 71;
  --bs-link-color:     #2A6B72;
  --bs-link-hover-color: #143F47;
  --bs-body-font-family: var(--fdy-font);
  --bs-body-color:     #143F47;
  --bs-border-radius:  var(--fdy-radius-sm);
}

/* --------------------------------------------------------- Typography -- */
html, body,
body.bg-body,
.ls-core-wrapper,
input, button, select, textarea, optgroup,
.form-control, .btn, .panel, .card {
  font-family: var(--fdy-font) !important;
}

body {
  background: var(--fdy-bg) !important;
  color: var(--fdy-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fdy-font) !important;
  color: var(--fdy-teal);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

a { color: var(--fdy-teal-mid); text-underline-offset: 2px; }
a:hover, a:focus { color: var(--fdy-teal); }

/* ----------------------------------------------------------- Surfaces -- */
/* Fruity wraps the survey in a container; give it room to breathe. */
.container-fluid.ls-core-wrapper,
#outerframeContainer .container { padding-top: 8px; }

/* Panels (Bootstrap 3) and Cards (Bootstrap 5) — the question/group blocks */
.panel,
.card,
.group-outer-container .panel,
.question-container {
  background: var(--fdy-surface);
  border: 1px solid var(--fdy-border) !important;
  border-radius: var(--fdy-radius) !important;
  box-shadow: var(--fdy-shadow);
  overflow: hidden;
}

.panel { margin-bottom: 1.5rem; }

.panel-heading,
.card-header {
  background: var(--fdy-surface) !important;
  border-bottom: 1px solid var(--fdy-border) !important;
  padding: 1.1rem 1.4rem;
}

.panel-body,
.card-body { padding: 1.4rem; }

.panel-title,
.card-title,
.question-title-container .ls-question-title {
  color: var(--fdy-teal) !important;
  font-weight: 700;
  font-size: 1.12rem;
}

/* The little green accent rail on each question panel = the brand "roofline" */
.question-container,
.group-outer-container .panel {
  position: relative;
}
.question-container::before,
.group-outer-container .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--fdy-green) 0%, var(--fdy-teal-mid) 100%);
}

/* Mandatory asterisk in the brand green */
.ls-question-mandatory,
.asterisk,
.required { color: var(--fdy-green-600) !important; }

/* ---------------------------------------------- Survey header / title -- */
/* Group + survey title bar -> deep teal banner with the brand feel */
.survey-name,
#survey-name,
.ls-heading h1,
.survey-title {
  color: var(--fdy-teal);
}

/* The top navbar / header. White ground so the colour logo (the brand's
   primary "logo on white" lockup) always reads with full contrast, finished
   with a hairline + soft shadow and a green underline echoing the roofline. */
.navbar,
#navbar,
header.ls-no-js-hidden,
.navbar-header {
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fdy-border) !important;
  box-shadow: 0 2px 0 0 var(--fdy-green), var(--fdy-shadow-sm);
}
.navbar a,
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text { color: var(--fdy-teal) !important; }
.navbar a:hover,
.navbar .nav-link:hover { color: var(--fdy-green-600) !important; }

/* Brand logo slot — keep it tidy and on a white ground */
.logo-container,
.navbar-brand { background: transparent !important; }
.logo-container img,
.navbar-brand img,
img.logo { max-height: 60px; width: auto; }

/* ----------------------------------------------------------- Buttons --- */
.btn {
  font-family: var(--fdy-font) !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.62rem 1.5rem;
  letter-spacing: 0.005em;
  transition: transform .04s ease, background-color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }

/* Primary action = deep teal */
.btn-primary,
#ls-button-submit,
.action-submit-em-button,
input[type="submit"].btn {
  background: var(--fdy-teal) !important;
  border-color: var(--fdy-teal) !important;
  color: #fff !important;
  box-shadow: var(--fdy-shadow-sm);
}
.btn-primary:hover, .btn-primary:focus,
#ls-button-submit:hover,
.action-submit-em-button:hover {
  background: var(--fdy-teal-700) !important;
  border-color: var(--fdy-teal-700) !important;
  color: #fff !important;
}

/* The forward/submit "next" button gets the green call-to-action treatment */
#ls-button-submit[value],
.ls-move-submit-btn,
.ls-move-next-btn {
  background: var(--fdy-green) !important;
  border-color: var(--fdy-green) !important;
  color: var(--fdy-teal) !important;
}
.ls-move-submit-btn:hover,
.ls-move-next-btn:hover {
  background: var(--fdy-green-600) !important;
  border-color: var(--fdy-green-600) !important;
  color: #fff !important;
}

/* Previous / secondary / default buttons = outlined teal */
.btn-default,
.btn-outline-secondary,
.ls-move-previous-btn {
  background: transparent !important;
  border: 1px solid var(--fdy-border) !important;
  color: var(--fdy-teal) !important;
}
.btn-default:hover,
.ls-move-previous-btn:hover {
  background: var(--fdy-teal) !important;
  border-color: var(--fdy-teal) !important;
  color: #fff !important;
}

.btn-success { background: var(--fdy-green) !important; border-color: var(--fdy-green) !important; color: var(--fdy-teal) !important; }
.btn-info,
.btn-link { color: var(--fdy-teal-mid) !important; }

/* Focus ring in brand teal for accessibility */
.btn:focus-visible,
.form-control:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-color: var(--fdy-teal-mid) !important;
  box-shadow: 0 0 0 3px rgba(42,107,114,.25) !important;
}

/* ------------------------------------------------------- Form inputs --- */
.form-control,
.form-select,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="date"], select, textarea {
  border: 1px solid var(--fdy-border);
  border-radius: var(--fdy-radius-sm);
  color: var(--fdy-ink);
  background: #fff;
  padding: 0.6rem 0.85rem;
}
.form-control::placeholder { color: #9bacb0; }

/* Radio / checkbox accent (modern browsers honour accent-color) */
input[type="radio"], input[type="checkbox"] { accent-color: var(--fdy-teal); }

/* Fruity's list-radio / list-checkbox answer rows */
.answer-item,
.ls-answers .form-check,
.answer-container .checkbox,
.answer-container .radio {
  border-radius: var(--fdy-radius-sm);
  transition: background-color .12s ease, border-color .12s ease;
}
.answer-item:hover,
.ls-answers .form-check:hover { background: var(--fdy-green-100); }

/* Selected answer highlight */
.ls-answers .form-check input:checked ~ label,
.answer-item.checked,
.radio input:checked + label {
  color: var(--fdy-teal);
  font-weight: 600;
}

/* ----------------------------------------------------- Progress bar ---- */
.progress {
  background: #e4eae9;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.progress-bar,
.ls-progress-bar {
  background: linear-gradient(90deg, var(--fdy-teal-mid) 0%, var(--fdy-green) 100%) !important;
  color: transparent;
}

/* --------------------------------------------------------- Alerts ------ */
.alert {
  border: 0;
  border-radius: var(--fdy-radius-sm);
  border-left: 4px solid var(--fdy-teal-mid);
}
.alert-danger,
.ls-question-mandatory-info,
.text-danger { color: #9a3b2f; }
.alert-success { background: var(--fdy-green-100); border-left-color: var(--fdy-green); color: #3f5a26; }
.alert-info    { background: #e8f0f1; border-left-color: var(--fdy-teal-mid); color: var(--fdy-teal); }
.has-error .form-control,
.input-error { border-color: #c0563f !important; box-shadow: 0 0 0 3px rgba(192,86,63,.15) !important; }

/* ------------------------------------------------- Welcome / cover ----- */
/* First page / welcome screen: lift the title onto the brand */
.welcome.question-container,
#welcome-screen,
.survey-list .well {
  border-top: 4px solid var(--fdy-green);
}

/* Completed / thank-you screen flourish */
.completed-text,
.success.text-success { color: var(--fdy-green-600); }

/* --------------------------------------------------------- Tables ------ */
/* Array questions */
table.ls-answers thead th,
.subquestion-list thead th,
table.questions-list-table thead th {
  background: var(--fdy-teal) !important;
  color: #fff !important;
  font-weight: 600;
  border-color: var(--fdy-teal) !important;
}
table.ls-answers tbody tr:nth-child(even) td,
.subquestion-list tbody tr.array2 td { background: #f6f9f8; }
table.ls-answers tbody tr:hover td { background: var(--fdy-green-100); }

/* ------------------------------------------- Question index (status) --- */
/* The survey index lists each group/question with a status colour. Bootstrap's
   default warning/danger tints render light text on mid-tone fills (poor
   contrast). Force accessible, on-brand pairings. Scoped where the generic
   utility classes (.bg-warning/.bg-danger) are used so alerts are untouched. */

/* Unanswered → clear amber with dark ink */
.list-group-item-warning,
.list-group-item.bg-warning,
.index-menu-full .bg-warning,
.index-menu-incremental .bg-warning,
.ls-question-index .bg-warning,
.dropdown-item.bg-warning {
  background-color: #f3b53d !important;
  border-color: #dca42b !important;
  color: #3f2d00 !important;
}
.list-group-item-warning a,
.list-group-item.bg-warning a,
.dropdown-item.bg-warning,
.index-menu-full .bg-warning a,
.index-menu-incremental .bg-warning a { color: #3f2d00 !important; font-weight: 600; }
.list-group-item-warning:hover,
.list-group-item.bg-warning:hover,
.dropdown-item.bg-warning:hover { background-color: #e9a924 !important; color: #2e2100 !important; }

/* Error → strong red with white text */
.list-group-item-danger,
.list-group-item.bg-danger,
.index-menu-full .bg-danger,
.index-menu-incremental .bg-danger,
.ls-question-index .bg-danger,
.dropdown-item.bg-danger {
  background-color: #b3382a !important;
  border-color: #9a3023 !important;
  color: #ffffff !important;
}
.list-group-item-danger a,
.list-group-item.bg-danger a,
.dropdown-item.bg-danger,
.index-menu-full .bg-danger a,
.index-menu-incremental .bg-danger a { color: #ffffff !important; font-weight: 600; }
.list-group-item-danger:hover,
.list-group-item.bg-danger:hover,
.dropdown-item.bg-danger:hover { background-color: #9c2e21 !important; color: #ffffff !important; }

/* Index panel header + current item in brand colours */
.question-index .panel-heading,
.ls-question-index .panel-heading,
#index .panel-heading { color: var(--fdy-teal) !important; }
.list-group-item.active,
.list-group-item.disabled.active { background-color: var(--fdy-teal) !important; border-color: var(--fdy-teal) !important; color: #fff !important; }

/* --------------------------------------------------------- Footer ------ */
.footer-container,
footer .footer,
#footer {
  color: var(--fdy-muted);
  border-top: 1px solid var(--fdy-border);
}

/* Selection / accents */
::selection { background: rgba(129,177,79,.35); color: var(--fdy-teal); }

/* Slightly rounder rating / stars use the green accent */
.glyphicon-star,
.fa-star { color: var(--fdy-green) !important; }

/* --------------------------------------------------- Small screens ----- */
@media (max-width: 576px) {
  .panel-body, .card-body { padding: 1.1rem; }
  .btn { padding: 0.6rem 1.2rem; }
}