/*  VKR-tema for LimeSurvey — matcher kllvg.no
    ------------------------------------------------------------------
    Palett/typografi speiler ../../../hjemmeside/styles/vkr.scss.
    Lastes som custom.css SIST i fruity_twentythree (Bootstrap 5), så disse
    reglene overstyrer variasjons-CSS-en (som setter grønn --bs-primary:#14AE5C).
    Kun kosmetikk — endrer ikke anonymitet, tokens eller spørsmålslogikk.  */

:root {
  /* VKR-palett (kilde: hjemmeside/styles/vkr.scss) */
  --vkr-dark:      #05353C;
  --vkr-primary:   #049D91;
  --vkr-secondary: #06D3C3;
  --vkr-accent:    #53FAED;
  --vkr-light:     #C5FDF9;
  --vkr-mint:      #A0E4DA;

  /* Overstyr Bootstrap-primær (variasjonen setter grønn #14AE5C) */
  --bs-primary:              #049D91;
  --bs-primary-rgb:          4, 157, 145;
  --bs-link-color:           #049D91;
  --bs-link-color-rgb:       4, 157, 145;
  --bs-link-hover-color:     #05353C;
  --bs-link-hover-color-rgb: 5, 53, 60;
}

/* ── Typografi (systemfont, som nettsiden) ──────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6,
.survey-name,
.group-title,
.question-title,
.ls-question-title {
  color: var(--vkr-dark) !important;
  font-weight: 600;
}

a          { color: var(--vkr-primary); }
a:hover,
a:focus    { color: var(--vkr-dark); }

/* ── Header-bar — mørk teal-stripe (som toppfeltet på kllvg.no) ─────── */
header#survey-nav.navbar,
#survey-nav.navbar.fixed-top {
  background-color: var(--vkr-dark) !important;
}
#survey-nav .navbar-brand,
#survey-nav .navbar-toggler,
#survey-nav .navbar-toggler .ri-more-fill,
#survey-nav a {
  color: var(--vkr-light) !important;
}
#survey-nav .navbar-toggler {
  border-color: rgba(197, 253, 249, 0.35) !important;
}

/* ── Knapper — Neste/Send teal, mørk ved hover (som .btn-primary) ───── */
.btn-primary {
  --bs-btn-bg:                 #049D91;
  --bs-btn-border-color:       #049D91;
  --bs-btn-color:              #FFFFFF;
  --bs-btn-hover-bg:           #05353C;
  --bs-btn-hover-border-color: #05353C;
  --bs-btn-hover-color:        #FFFFFF;
  --bs-btn-active-bg:          #05353C;
  --bs-btn-active-border-color:#05353C;
  --bs-btn-active-color:       #FFFFFF;
  --bs-btn-disabled-bg:        #049D91;
  --bs-btn-disabled-border-color:#049D91;
  background-color: #049D91;
  border-color:     #049D91;
  color:            #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #05353C !important;
  border-color:     #05353C !important;
  color:            #FFFFFF !important;
}

/* «Forrige» — teal outline i stedet for grå */
.navigator .btn-outline-secondary {
  --bs-btn-color:              #049D91;
  --bs-btn-border-color:       #049D91;
  --bs-btn-hover-bg:           #049D91;
  --bs-btn-hover-border-color: #049D91;
  --bs-btn-hover-color:        #FFFFFF;
  --bs-btn-active-bg:          #049D91;
  --bs-btn-active-border-color:#049D91;
  color:        #049D91;
  border-color: #049D91;
}
.navigator .btn-outline-secondary:hover {
  background-color: #049D91;
  color: #FFFFFF;
}

/* ── Framdriftsindikator ────────────────────────────────────────────── */
.progress-bar {
  background-color: var(--vkr-primary) !important;
}

/* ── Skjemakontroller / fokus ───────────────────────────────────────── */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--vkr-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--vkr-primary);
  box-shadow: 0 0 0 0.2rem rgba(4, 157, 145, 0.25);
}