/* ============================================================
   CreativeFED — LimeSurvey Theme  ·  custom.css
   v1.6 (Build 2026-08-25#1)  — Logo-/Header-Bereich Hintergrund #f2f2f3 (Gerin).
   v1.5 (Build 2026-08-23#1)  — ganzer Fragebogen +1pt: 13px -> 14px (Gerin).
   v1.4 (Build 2026-08-21#3)  — ALLES einheitlich 13px + enger Zeilenabstand.
   v1.3 (Build 2026-08-21#2)  — Fragetext + Antworten auf 12px (Gerin).
   v1.2 (Build 2026-08-21#1)  — "ruhiger & seriöser": uniform smaller
   type, serif headings (Source Serif 4), slim single-blue accent bar
   instead of the rainbow strip.  (progress-bar tidy from v1.1 kept.)
   See the v1.2 block at the very end of this file.
   Brand source of truth: CreativeFED_Campaign_Kit/brand/CI_CD_Reference.md
   Extends: fruity_twentythree (Bootstrap 5)
   Notes: Elza Text is an Adobe-Fonts face (not free); the web substitute
          used here is Archivo (Google Fonts) — closest grotesque match,
          per reference_penpot_elza_substitute. Fallback: Arial, Helvetica.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root {
  /* --- CreativeFED primary palette --- */
  --cfed-blue:   #0033FF;   /* Electric blue — the anchor */
  --cfed-blue-d: #0028cc;   /* darker for hover/active     */
  --cfed-pink:   #FF99FF;
  --cfed-teal:   #33CCCC;
  --cfed-rose:   #FF6699;
  --cfed-lime:   #CCFF33;
  --cfed-sky:    #99CCFF;
  --cfed-black:  #000000;
  --cfed-white:  #ffffff;
  --cfed-grey:   #999999;
  --cfed-line:   #e3e3ea;   /* subtle hairline */

  --cfed-font: 'Archivo', Arial, Helvetica, sans-serif;
  --cfed-radius: 10px;
}

/* ---------- Typography ---------- */
body,
.ls-question-bullets,
.question-container,
.form-control,
.btn,
p, li, td, th, label, .answertext {
  font-family: var(--cfed-font);
  color: var(--cfed-black);
}

h1, h2, h3, h4, h5,
.ls-heading,
.group-title,
.question-title-container .question-text {
  font-family: var(--cfed-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cfed-black);
}

body { background: #fafafc; line-height: 1.5; }

/* ---------- Brand header: logo + gradient device ---------- */
.cfed-header,
#logo-container,
.navbar-brand {
  text-align: center;
}
.cfed-logo,
#logo img {
  max-height: 54px;
  width: auto;
  margin: 18px auto 10px;
}
/* The stretched-E gradient sweep — the brand's signature device */
.cfed-gradient-strip {
  height: 6px;
  width: 100%;
  border: 0;
  margin: 0 0 28px;
  background: linear-gradient(90deg,
    var(--cfed-blue) 0%,
    var(--cfed-sky) 22%,
    var(--cfed-teal) 44%,
    var(--cfed-rose) 66%,
    var(--cfed-pink) 82%,
    var(--cfed-lime) 100%);
}

/* ---------- Survey card / container ---------- */
.questionnaire-container,
.group-outer-container,
.question-container,
.ls-form-wrapper {
  background: var(--cfed-white);
  border: 1px solid var(--cfed-line);
  border-radius: var(--cfed-radius);
}

/* ---------- Progress bar ---------- */
.progress {
  height: 10px;
  border-radius: 999px;
  background: #ececf2;
}
.progress-bar {
  background: var(--cfed-blue);
}

/* ---------- Buttons (navigation) ---------- */
.btn-primary,
#ls-button-submit,
.action--ls-button-submit {
  background: var(--cfed-blue);
  border-color: var(--cfed-blue);
  color: var(--cfed-white);
  font-weight: 600;
  border-radius: var(--cfed-radius);
  padding: 0.6rem 1.4rem;
  min-height: 46px;          /* comfortable touch target */
}
.btn-primary:hover,
.btn-primary:focus,
#ls-button-submit:hover {
  background: var(--cfed-blue-d);
  border-color: var(--cfed-blue-d);
  color: var(--cfed-white);
}
.btn-outline-secondary {
  border-radius: var(--cfed-radius);
  min-height: 46px;
}
.btn:focus-visible,
.form-control:focus,
.form-check-input:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 51, 255, 0.30);
  border-color: var(--cfed-blue);
}

/* ---------- Links ---------- */
a, a:visited { color: var(--cfed-blue); }
a:hover { color: var(--cfed-blue-d); }

/* ---------- Radio / checkbox accent ---------- */
.form-check-input:checked {
  background-color: var(--cfed-blue);
  border-color: var(--cfed-blue);
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--cfed-blue); }

/* ---------- Array / grid questions ---------- */
.ls-answers thead th,
table.questions-list th {
  font-weight: 600;
  color: #333;
}
.ls-answers tbody tr:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd) > td {
  background: #f6f7fb;        /* gentle zebra to track rows */
}
.ls-answers tbody tr:hover td { background: #eef1ff; }

/* ---------- Sliders (Block D — Axis 2) ---------- */
input[type="range"] { accent-color: var(--cfed-blue); }
.slider-rendered .ui-slider-handle,
.noUi-connect { background: var(--cfed-blue) !important; }
.noUi-handle { border-color: var(--cfed-blue) !important; }

/* ---------- Form fields ---------- */
.form-control, .form-select {
  border-radius: var(--cfed-radius);
  border-color: #d3d3dd;
}

/* ============================================================
   MOBILE  (LimeSurvey's weakest spot — arrays & sliders)
   ============================================================ */
@media (max-width: 768px) {
  .cfed-logo, #logo img { max-height: 42px; }

  /* Bigger tap targets */
  .btn, .btn-primary { min-height: 50px; font-size: 1.02rem; }
  .form-check-input { width: 1.35rem; height: 1.35rem; }

  /* Array questions: let rows breathe instead of cramped columns */
  .ls-answers th, .ls-answers td { padding: 0.5rem 0.35rem; }
  table.subquestion-list .answertext { font-size: 0.95rem; }

  /* Sliders need room to drag on touch screens */
  .question-container .slider-container { padding: 0.4rem 0.2rem; }
  input[type="range"] { height: 34px; }
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ============================================================
   DEPLOY ADAPTATION (rev 2026-06-27#2)
   Logo now rendered NATIVELY via theme option brandlogo=on
   (nav_bar.twig -> .navbar-brand.logo-container .logo), using
   files/logo.png (the real CFED mark). No base64/::before hack.
   Only the brand gradient strip stays as a body::before device.
   ============================================================ */
body::before {
  content:""; display:block; height:8px; width:100%;
  background:linear-gradient(90deg,#0033FF 0%,#99CCFF 22%,#33CCCC 44%,#FF6699 66%,#FF99FF 82%,#CCFF33 100%);
}
/* Native logo: centre + size (bigger per Gerin 2026-06-27) */
.navbar-brand.logo-container,
body.brand-logo .navbar-brand { text-align:center; width:100%; }
.navbar-brand.logo-container .logo,
.logo-container img.logo,
img.logo.img-fluid {
  max-height:92px; width:auto; margin:20px auto 10px; display:block;
}
@media (max-width:768px){
  .navbar-brand.logo-container .logo,
  .logo-container img.logo { max-height:60px; margin:14px auto; }
}

/* Survey title + headings in Archivo (mother theme defaults to serif) */
h1.survey-name, .survey-name, .large-heading,
.group-title, .ls-heading,
.question-title-container .question-text {
  font-family: var(--cfed-font) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Tidy header: drop default hairline/shadow under logo area */
.navbar, .navbar-brand.logo-container { border:0 !important; box-shadow:none !important; }

/* ============================================================
   PROGRESS BAR TIDY  (v1.1 · Build 2026-06-28#1)
   Root cause of the "thin default hairline / short blue stub
   directly under the gradient": the mother theme (fruity_twentythree
   variation CSS) sets, MORE specifically than our generic rules —
       .top-container .progress     { height: 2px; }    -> hairline track
       .top-container .progress-bar { min-width: 2em; }  -> stub even near 0%
   so our intended .progress styling never applied. We override the
   top-container variant: a slim, rounded, branded bar with air under
   the gradient — reads as intentional, not a render glitch.
   To HIDE the bar entirely instead, replace this block with:
       .top-container { display:none !important; }
   ============================================================ */
.top-container { margin-top: 14px; margin-bottom: 1.5rem; }
.top-container .ls-progress-container { padding: 0; }
.top-container .progress {
  height: 8px !important;        /* beat the 2px mother-theme hairline */
  border-radius: 999px;
  background: #ececf2;
  overflow: hidden;
}
.top-container .progress-bar {
  min-width: 0 !important;       /* kill the forced 2em stub at low % */
  background: var(--cfed-blue);
  border-radius: 999px;
}

/* ============================================================
   v1.2  (Build 2026-08-21#1)  ·  "ruhiger & seriöser"
   Approved by Gerin 2026-08-21 via the preview loop. Three moves:
   1) uniform SMALLER type (base ~13px; headings scaled down)
   2) SERIF headings (Source Serif 4) for academic gravitas —
      question text stays Archivo (grotesque) for readability
   3) slim 3px solid CFED-blue accent INSTEAD of the rainbow strip
   Placed last so it wins the cascade over the blocks above.
   ROLLBACK: restore css/custom.css from
     custom.css.bak_pre_v1.2_20260821  (local)  or the server-side
     custom.css.bak_pre_v1.2_<ts>  backup, then clear the asset cache:
     docker exec limesurvey rm -rf /var/www/html/tmp/assets/*
   ============================================================ */
:root{
  --cfed-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cfed-ink:   #1a1a22;    /* softer than pure black — calmer read */
}

/* 1) — uniform smaller, calmer body ------------------------- */
body{
  font-size: 13px !important;
  line-height: 1.65;
  color: var(--cfed-ink);
  background: #f7f7fa;
}

/* replace the rainbow sweep with a slim single-blue accent */
body::before{
  height: 3px !important;
  background: var(--cfed-blue) !important;
}

/* 2) — serif headings (question text stays Archivo) --------- */
h1.survey-name, .survey-name, .large-heading,
.group-title, .ls-heading{
  font-family: var(--cfed-serif) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cfed-ink);
}

/* 3) — explicit sizes on the real LimeSurvey elements -------
   values mirror the approved preview (rem basis = 16px root):  */
.survey-name, .large-heading            { font-size: 1.55rem !important; line-height: 1.25; }  /* ~24.8px */
.group-title, .ls-heading               { font-size: 1.15rem !important; line-height: 1.3; }   /* ~18.4px */
.question-title-container .question-text,
.question-text                          { font-size: 12px  !important; line-height: 1.5; }   /* Fragen 12px (Gerin 2026-08-21) */
.answertext,
.answer-item label,
.form-check-label                       { font-size: 12px !important; }                       /* Antworten 12px (Gerin 2026-08-21) */
.ls-answers, table.questions-list,
table.subquestion-list                  { font-size: 12px  !important; }                      /* Array-Zeilen/Antworten 12px */
.ls-answers thead th,
table.questions-list th                 { font-size: 0.68rem !important; }                     /* ~10.9px */
.btn, .btn-primary, #ls-button-submit   { font-size: 0.82rem !important; }
.form-control, .form-select, textarea   { font-size: 0.82rem !important; }
/* end v1.2 --------------------------------------------------- */

/* ============================================================
   v1.4  (Build 2026-08-21#3)  ·  Gerin: ALLES einheitlich 13px,
   einfacher (enger) Zeilenabstand. Überschriften behalten nur
   Gewicht/Serife zur Unterscheidung, aber gleiche Grösse.
   Steht ganz zuletzt -> gewinnt über alle Grössen-Regeln oben.
   ============================================================ */
body { font-size: 13px !important; line-height: 1.3 !important; }
.survey-name, .large-heading,
.group-title, .ls-heading,
.question-title-container .question-text, .question-text,
.answertext, .answer-item label, .form-check-label,
.ls-answers, table.questions-list, table.subquestion-list,
.ls-answers thead th, table.questions-list th, .ls-answers td,
p, li, td, th, label, .answer-item,
.btn, .btn-primary, .btn-outline-secondary, #ls-button-submit,
.form-control, .form-select, textarea {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
/* end v1.4 --------------------------------------------------- */

/* ============================================================
   v1.5  (Build 2026-08-23#1)  ·  Gerin: ganzer Fragebogen +1pt —
   einheitlich 13px -> 14px. Steht ganz zuletzt -> gewinnt über v1.4.
   ============================================================ */
body { font-size: 14px !important; line-height: 1.3 !important; }
.survey-name, .large-heading,
.group-title, .ls-heading,
.question-title-container .question-text, .question-text,
.answertext, .answer-item label, .form-check-label,
.ls-answers, table.questions-list, table.subquestion-list,
.ls-answers thead th, table.questions-list th, .ls-answers td,
p, li, td, th, label, .answer-item,
.btn, .btn-primary, .btn-outline-secondary, #ls-button-submit,
.form-control, .form-select, textarea {
  font-size: 14px !important;
  line-height: 1.3 !important;
}
/* end v1.5 --------------------------------------------------- */

/* ---------- v1.6 (Build 2026-08-25#1) — Logo-/Header-Bereich Hintergrund #f2f2f3 (Gerin) ---------- */
#survey-nav.navbar.fixed-top,
header#survey-nav {
  background-color: #f2f2f3 !important;
}