/* ================================================================
   Kulturpool — Nuxt UI inspired skin for fruity_twentythree/grape
   ================================================================
   Loaded LAST (see config.xml), so it wins over the inherited
   variation CSS and base.css.

   Architecture — 11 discrete layers, each driven from :root tokens:
     0  Tokens        design variables (single source of truth)
     1  Base + type   html root, body, heading scale, links
     2  Layout        column width, navbar stacking
     3  Surfaces      card shells, save-page wrapper, alert-warning
     4  Type roles    group title/desc, question prompt, completed, utility heads
     5  Form controls inputs, selects, bootstrap-select widget, labels
     6  Choices       radio + checkbox geometry redrawn for grape's anchors
     7  Answer layout stacked labels, 2-column option grid
     8  Buttons       primary (indigo) + secondary (white outline)
     9  Feedback      progress bar, validation, alerts
    10  Navigation    inline navbar, dropdown hover

   Brand note: grape's compiled CSS bakes #8146F6 as a literal into
   ~179 component rules and does NOT read --bs-primary. The per-
   component overrides below are what actually apply the indigo remap;
   the --bs-primary nudge in Layer 0 covers Bootstrap utilities only.
================================================================ */

@import "https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap";


/* ============================================================
   Layer 0 — Design tokens
   ============================================================ */
:root {
    /* Brand — Kulturpool indigo */
    --kp-primary:        #6366F1;
    --kp-primary-hover:  #4F46E5;
    --kp-primary-active: #4338CA;
    --kp-primary-rgb:    99, 102, 241;
    --kp-focus-ring:     0 0 0 3px rgba(99, 102, 241, .18);

    /* Surfaces */
    --kp-page-bg:        #F9FAFB;
    --kp-card-bg:        #FFFFFF;
    --kp-border:         #E5E7EB;
    --kp-input-border:   #D1D5DB;

    /* Text */
    --kp-text-strong:    #111827;
    --kp-text:           #374151;
    --kp-text-muted:     #6B7280;
    --kp-placeholder:    #9CA3AF;

    /* Feedback */
    --kp-danger:         #EF4444;

    /* Shape */
    --kp-radius-card:    10px;
    --kp-radius-control: 6px;
    --kp-shadow-card:    0 1px 2px rgba(16, 24, 40, .04);

    /* ── Type scale ────────────────────────────────────────────
       Base = 15 px  (html{font-size:93.75%} makes 1rem = 15 px)
       xs   12 px  ·  sm  14 px  ·  base 15 px
       md   18 px  ·  lg  24 px  ·  xl   27 px  ·  2xl  30 px   */
    --kp-fs-xs:   0.8rem;
    --kp-fs-sm:   0.933rem;
    --kp-fs-base: 1rem;
    --kp-fs-md:   1.2rem;
    --kp-fs-lg:   1.6rem;
    --kp-fs-xl:   1.8rem;
    --kp-fs-2xl:  2rem;

    --kp-lh-tight: 1.3;   /* headings and compact prompts */
    --kp-lh-base:  1.5;   /* body, inputs, labels         */

    /* Bootstrap utility vars (honoured by BS utilities but NOT by
       grape's compiled components — see brand note above)         */
    --bs-primary:          #6366F1;
    --bs-primary-rgb:      99, 102, 241;
    --bs-link-color:       #6366F1;
    --bs-link-hover-color: #4F46E5;
    --bs-border-radius:    8px;
    --bs-body-bg:          #F9FAFB;
    --bs-body-color:       #374151;
    --bs-body-font-size:   1rem;    /* override grape's 1.14 rem */
}


/* ============================================================
   Layer 1 — Base & type scale
   ============================================================ */

/* Pin 1 rem = 15 px.  93.75 % of the browser 16 px default;
   respects user zoom. Grape has no html rule, so this is ours.  */
html { font-size: 93.75%; }

body {
    font-family:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size:    var(--kp-fs-base);
    line-height:  var(--kp-lh-base);
    background-color: var(--kp-page-bg);
    color:            var(--kp-text);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Neutralise grape's fluid calc(rem + vw) heading scale with
   fixed rem. Grape caps at 2.85 / 2.28 / 1.995 / 1.71 rem
   at ≥ 1200 px — we replace with a calm, zoom-stable scale.   */
h1, .h1 { font-size: var(--kp-fs-2xl); }   /* 30 px */
h2, .h2 { font-size: var(--kp-fs-xl);  }   /* 27 px */
h3, .h3 { font-size: var(--kp-fs-lg);  }   /* 24 px */
h4, .h4 { font-size: 1.35rem;          }   /* 20 px */
h5, .h5 { font-size: var(--kp-fs-md);  }   /* 18 px */
h6, .h6 { font-size: var(--kp-fs-base);}   /* 15 px */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:    "Inter", system-ui, sans-serif;
    color:          var(--kp-text-strong);
    font-weight:    700;
    letter-spacing: -0.01em;
    line-height:    var(--kp-lh-tight);
    /* Wipe base.css margin-top:2rem on h1-h3 inside cards */
    margin-top:    0;
    margin-bottom: .5rem;
}

/* Secondary / helper text — grape mixes 0.855 rem and 0.9975 rem */
.ls-questionhelp,
.question-container .help-block,
.question-container .ls-question-message {
    font-size:   var(--kp-fs-sm);
    line-height: var(--kp-lh-base);
}

small, .small, .text-muted, .help-block {
    color:     var(--kp-text-muted) !important;
    font-size: var(--kp-fs-sm);
}

p, .text-body { color: var(--kp-text); font-size: var(--kp-fs-base); }

a {
    color:                var(--kp-primary);
    font-size:            inherit;
    text-decoration:      underline;
    text-underline-offset: 2px;
}
a:hover, a:focus { color: var(--kp-primary-hover); }

hr { border-color: var(--kp-border); opacity: 1; }

/* Grape sets font-size:0.9975rem on many selectors — normalise all to 1rem.
   (Selectors already covered by later layers are omitted here.)            */
.col-form-label-sm,
.form-control-sm,
.form-select-sm,
.input-group-sm > .btn,
.valid-tooltip,
.invalid-tooltip,
.btn-sm, .btn-group-sm > .btn,
.dropdown-header,
.pagination-sm .page-link,
.tooltip,
.popover,
#survey-nav .dropdown-menu > li > a,
.btn-xl,
.gender-button .ls-button-label,
.answer-container .bootstrap-select .bs-ok-default:after {
    font-size: var(--kp-fs-base);
}


/* ============================================================
   Layer 2 — Layout & column width
   ============================================================ */

/* Cap all screens (questions, welcome, register, submit, save…)
   at 620 px. They all flow through outerframe.twig > .col-centered. */
.col-centered {
    width:        100%;
    max-width:    620px;
    margin-left:  auto;
    margin-right: auto;
    float:        none;
}

/* Stack navbar: logo centred on top, action buttons below right.
   Covers the Bootstrap 5 container utility class variants.        */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
    flex-direction: column;
    align-items:    stretch;
    max-width:      620px;
    margin-left:    auto;
    margin-right:   auto;
    gap:            0.5rem;
}

.logo-container {
    margin:     0;
    align-self: flex-start;
}

#survey-nav #navbar-menu {
    align-self:  flex-end;
    margin-left: 0;
}

#survey-nav #main-dropdown { min-width: 0; }


/* ============================================================
   Layer 3 — Card surfaces
   ============================================================

   fruity structure:
     .group-outer-container (flex)
       └ .group-container (100 %)
           ├ .group-title-container
           └ .question-container  ← card goes here, not the group

   .completed-wrapper = thank-you, .survey-welcome = first page,
   .well + .jumbotron = register / list headers.               */
   /* .survey-welcome, */
.question-container,
.completed-wrapper,
.well,
.jumbotron {
    background-color: var(--kp-card-bg);
    border:           1px solid var(--kp-border);
    border-radius:    var(--kp-radius-card);
    box-shadow:       var(--kp-shadow-card);
    padding:          1.25rem 0.5rem;
    margin-bottom:    1rem;
}

/* Cancel the inset shadow / gray fill from base.css .well */
.well { min-height: 0; box-shadow: var(--kp-shadow-card); }

/* A .question-container rendered as Bootstrap .row carries
   negative gutters — cancel them so the card stays flush.   */
.question-container.row { margin-left: 0; margin-right: 0; }

/* Group header: plain title above the question cards         */
.group-title-container {
    padding:    0 .25rem .5rem;
    background: transparent;
}

/* "Später fortfahren" save page — wrap the form in a card.
   :has() scopes this to the save screen only.               */
.survey-form-container:has(.save-survey-form) {
    background-color: var(--kp-card-bg);
    border:           1px solid var(--kp-border);
    border-radius:    var(--kp-radius-card);
    box-shadow:       var(--kp-shadow-card);
    padding:          1.5rem 1.75rem;
}

/* Soften the loud default warning alert to a subtle amber     */
.alert-warning {
    background-color: #FEF9E7 !important;
    border:           1px solid #FDE68A !important;
    color:            #92400E !important;
    border-radius:    var(--kp-radius-control);
}


/* ============================================================
   Layer 4 — Typography roles  (mapped to the token scale)
   ============================================================ */

/* Group header — one clear step above body */
.group-container .group-title {
    font-size:      var(--kp-fs-lg);
    line-height:    var(--kp-lh-tight);
    font-weight:    700;
    letter-spacing: 0;
    margin-top:     0;
}

/* Group intro paragraph */
.group-container .group-description {
    font-size:   var(--kp-fs-sm);
    line-height: var(--kp-lh-base);
    font-weight: 400;
    color:       var(--kp-text-muted);
}

/* Question prompt — grape ships 24 px / 600 / 32 px line-height */
.question-container .ls-label-question,
.question-container .ls-label-question p {
    font-size:   var(--kp-fs-md);
    line-height: var(--kp-lh-tight);
    font-weight: 600;
}

/* Thank-you / completed — grape ships 2.85 rem title + 1.28 rem body */
.completed-wrapper .completed-heading {
    font-size:   var(--kp-fs-xl);
    line-height: var(--kp-lh-tight);
}
.completed-wrapper .completed-Content {
    font-size:   var(--kp-fs-base);
    line-height: var(--kp-lh-base);
}

/* Utility-page headings (save / load / clearall) ship in IBM serif ~40 px */
.large-heading {
    font-family:    "Inter", system-ui, sans-serif !important;
    font-size:      var(--kp-fs-lg) !important;
    font-weight:    700;
    letter-spacing: 0;
    line-height:    var(--kp-lh-tight);
    color:          var(--kp-text-strong);
}


/* ============================================================
   Layer 5 — Form controls
   ============================================================ */
.form-control,
.form-select {
    background-color: #fff;
    color:            var(--kp-text-strong);
    border:           1px solid var(--kp-input-border);
    border-radius:    var(--kp-radius-control);
    padding:          0.625rem 0.875rem;
    font-size:        var(--kp-fs-base);
    line-height:      var(--kp-lh-base);
    box-shadow:       none;
    transition:       border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kp-primary);
    box-shadow:   var(--kp-focus-ring);
    outline:      0;
}

.form-control::placeholder { color: var(--kp-placeholder); opacity: 1; }

.form-control:disabled,
.form-select:disabled { background-color: #F3F4F6; opacity: 1; }

textarea.form-control { min-height: 6rem; }

/* Grape applies a neo-brutalist 2px black border + 8px offset shadow to every
   .ls-important-field input (save form, captcha, etc.) with !important.
   Strip it back to our standard control appearance.                           */
.form-control.ls-important-field,
.form-select.ls-important-field {
    border:     1px solid var(--kp-input-border) !important;
    box-shadow: none !important;
    color:      var(--kp-text-strong);
}
.form-control.ls-important-field:focus,
.form-select.ls-important-field:focus {
    border-color: var(--kp-primary) !important;
    box-shadow:   var(--kp-focus-ring) !important;
}
.form-control.ls-important-field:disabled,
.form-control.ls-important-field[readonly],
.form-select.ls-important-field:disabled,
.form-select.ls-important-field[readonly] {
    border-color: var(--kp-input-border) !important;
    background-color: #F3F4F6;
}

/* Grape also forces #636363 on password inputs and textareas — normalise      */
input[type=password],
textarea { color: var(--kp-text-strong); }

label, .control-label {
    color:         var(--kp-text);
    font-weight:   500;
    font-size:     var(--kp-fs-base);
    line-height:   var(--kp-lh-base);
    margin-bottom: 0.375rem;
}

/* ── bootstrap-select widget (list-dropdown questions) ─────────
   LimeSurvey renders a styled <button> here, not a native <select>.
   Force full width and match our .form-control look.            */
.bootstrap-select.form-control,
.bootstrap-select.list-question-select { width: 100% !important; max-width: 100%; }

/* The .ls-answers flex item would otherwise shrink to widget's
   intrinsic width                                               */
.list-dropdown .ls-answers {
    flex:      1 1 100% !important;
    width:     100% !important;
    min-width: 0;
}

.bootstrap-select > .dropdown-toggle {
    width:            100%;
    background-color: #fff;
    border:           1px solid var(--kp-input-border) !important;
    border-radius:    var(--kp-radius-control);
    padding:          0.55rem 0.875rem;
    color:            var(--kp-text-strong);
    font-size:        var(--kp-fs-base);
    text-align:       left;
    box-shadow:       none;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder { color: var(--kp-placeholder); }
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--kp-primary) !important;
    box-shadow:   var(--kp-focus-ring);
    outline:      0 !important;
}
.bootstrap-select .dropdown-menu {
    border:        1px solid var(--kp-border);
    border-radius: var(--kp-radius-control);
    box-shadow:    var(--kp-shadow-card);
}
/* Remap grape's #8146F6 selected-item highlight to indigo     */
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active,
.bootstrap-select .dropdown-menu li.selected > .dropdown-item {
    background-color: var(--kp-primary);
    color:            #fff;
}


/* ============================================================
   Layer 6 — Choice controls  (redrawn for grape's geometry)
   ============================================================

   Two systems co-exist:
     (A) Bootstrap-native  .form-check-input   (consent / soft-mandatory)
     (B) LimeSurvey awesome-bootstrap-checkbox
           .radio-item    — circle + dot via label::before + ::after
           .checkbox-item — rounded box + Remixicon glyph \eb7b

   ── Grape geometry (theme_grape.css lines 13333–13456) ──────
   Radio
     label            padding-left:8px; position:relative
     label::before    19×19 px; left:0; top:0; margin-left:-20px
                      border-radius:50%; border:2px solid #6E748C
     label::after     9×9 px; left:3px; top:3px;
                      margin-left:-18px; margin-top:2px
                      border-radius:50%; transform:scale(0,0) → scale(1,1)

   Checkbox
     label::before    24×24 px; left:0; top:0; margin-left:-20px
                      border-radius:0; border:3px solid #6E748C
     label::after     left:2px; top:2px; margin-left:-20px
       (checked)      font-family:remixicon; content:"\eb7b"; font-size:20px

   ── My 18 px target — centering proof ──────────────────────
   Box (18×18): centre-x = −20 + 9 = −11   centre-y = 0 + 9 = 9
   Radio dot (8×8):
     centre-x = (left:3) + (margin-left:−18) + 4 = −11 ✓
     centre-y = (top:3) + (margin-top:2) + 4   =   9 ✓
   → Same left/top/margin-left/margin-top anchors work at 18 px.

   Checkbox glyph: overlay left:0; top:0; margin-left:−20px
   with explicit 18×18 container + line-height:18px centres the icon.
   ============================================================ */

/* (A) Bootstrap-native checks */
.form-check-input { border: 1px solid var(--kp-input-border); }
.form-check-input:checked {
    background-color: var(--kp-primary);
    border-color:     var(--kp-primary);
}
.form-check-input:focus {
    border-color: var(--kp-primary);
    box-shadow:   var(--kp-focus-ring);
}

/* (B-radio) Resize box and remap colours ─────────────────── */
.radio-item label::before {
    width:        18px;
    height:       18px;
    border-width: 1.5px;               /* was 2 px  */
    border-color: var(--kp-input-border); /* was #6E748C */
}
/* Dot: same offsets, scaled to 8 px (proved above)           */
.radio-item label::after {
    width:       8px;
    height:      8px;
    left:        3px;
    top:         3px;
    margin-left: -18px;
    margin-top:  2px;
}

/* Remap grape's #8146F6 brand to indigo                       */
.radio-item input[type=radio] + label::after         { background-color: var(--kp-primary); }
.radio-item input[type=radio]:checked + label::before { border-color:     var(--kp-primary); }
.radio-item input[type=radio]:checked + label::after  { background-color: var(--kp-primary); }
.radio-item input[type=radio]:focus-visible + label::before { box-shadow: var(--kp-focus-ring); }
/* Suppress grape's purple label text on selection             */
.radio-item input[type=radio]:checked + label         { color: var(--kp-text); }

/* (B-checkbox) Resize box and remap colours ─────────────── */
.checkbox-item label::before {
    width:         18px;
    height:        18px;
    border-width:  1.5px;              /* was 3 px  */
    border-color:  var(--kp-input-border); /* was #6E748C */
    border-radius: 4px;                /* was 0 px  */
    background-color: #fff;
}
/* Checked glyph: overlay the 18 px box exactly               */
.checkbox-item input[type=checkbox]:checked + label::after,
.checkbox-item input[type=radio]:checked    + label::after {
    left:        0;
    top:         0;
    margin-left: -20px;
    width:       18px;
    height:      18px;
    font-size:   13px;
    line-height: 18px;
    text-align:  center;
    color:            var(--kp-primary);
    background-color: transparent;
}
.checkbox-item input[type=checkbox]:checked + label::before,
.checkbox-item input[type=radio]:checked    + label::before { border-color: var(--kp-primary); }
.checkbox-item input[type=checkbox]:checked + label         { color: var(--kp-text); }
.checkbox-item input[type=checkbox]:focus-visible + label::before { box-shadow: var(--kp-focus-ring); }

/* Older bootstrap-checkbox variant (baked background)        */
input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
.checkbox-inline input[type=checkbox]:checked:after {
    background-color: var(--kp-primary);
    border-color:     var(--kp-primary);
}

/* Native fallback for plain radio/checkbox outside LS widgets */
.answer-item input[type="radio"],
.answer-item input[type="checkbox"] { accent-color: var(--kp-primary); }


/* ============================================================
   Layer 7 — Answer layout
   ============================================================

   Labels stacked above fields; multi-option answers in a 2-col
   grid.  :has() guards keep single-input questions full-width
   and leave array questions (<table>/<tr> children) tabular.  */

/* Multi-field rows: cancel Bootstrap .row negative gutters so
   the label sits directly above a full-width, non-indented input. */
.ls-answers .answer-item.row:has(.form-control, .form-select, .input-group) {
    margin-left:  0;
    margin-right: 0;
}
.ls-answers .answer-item.row:has(.form-control, .form-select, .input-group) > [class*="col-"] {
    flex:      0 0 100%;
    max-width: 100%;
    width:     100%;
    padding-left:  0;
    padding-right: 0;
}

/* Labels above their inputs (not indented) */
.ls-answers .answer-item:has(.form-control, .form-select, .input-group) .answertext,
.ls-answers .answer-item:has(.form-control, .form-select, .input-group) label.control-label,
.ls-answers .answer-item:has(.form-control, .form-select, .input-group) > label {
    display:       block;
    text-align:    left;
    padding-left:  0;
    margin-bottom: .375rem;
    color:         var(--kp-text);
}
.ls-answers .answer-item .form-control,
.ls-answers .answer-item .form-select { width: 100%; }

/* Label weight differentiation: field labels 500, option labels 400 */
.ls-answers .answer-item label,
.ls-answers .answer-item .answertext,
.ls-answers .answer-item .control-label  { font-size: var(--kp-fs-base); font-weight: 500; }
.ls-answers .radio-item label,
.ls-answers .checkbox-item label         { font-size: var(--kp-fs-base); font-weight: 400; color: var(--kp-text); }

/* Strip the bottom margin grape adds to list-item choice rows  */
li.checkbox-item,
li.radio-text-item,
li.checkbox-text-item { margin-bottom: 0; }

/* 2-column option / field grid — applied to whatever element
   directly holds 2+ .answer-item children.  Limited to
   .ls-answers / div / ul so array <tr> children stay tabular. */
.ls-answers:has(> .answer-item ~ .answer-item),
.ls-answers div:has(> .answer-item ~ .answer-item),
.ls-answers ul:has(> .answer-item ~ .answer-item) {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap:                   .4rem 1.5rem;
    align-items:           start;
    padding-left:          0;
    list-style:            none;
    margin-bottom:         0;
}

/* Textareas and "other" comment fields span both columns      */
.ls-answers .answer-item:has(textarea),
.ls-answers .answer-item.text-item-comment { grid-column: 1 / -1; }

/* Register page first/last-name row: tidy gutter at 620 px   */
.register-form-fruity .row,
#limesurvey .row { row-gap: .25rem; }


/* ============================================================
   Layer 8 — Buttons
   ============================================================ */
.btn {
    border-radius: var(--kp-radius-control);
    font-weight:   500;
    font-size:     var(--kp-fs-base);
    transition:    color .15s ease, background-color .15s ease,
                   border-color .15s ease, box-shadow .15s ease;
}
.btn:focus, .btn:focus-visible { box-shadow: var(--kp-focus-ring); }
.btn-lg { padding: 0.625rem 1.1rem; font-size: var(--kp-fs-base); }

/* Primary — indigo (overrides grape's baked #8146F6)          */
.btn-primary {
    background-color: var(--kp-primary);
    border-color:     var(--kp-primary);
    color:            #fff;
}
.btn-primary:hover {
    background-color: var(--kp-primary-hover);
    border-color:     var(--kp-primary-hover);
    color:            #fff;
}
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--kp-primary-hover);
    border-color:     var(--kp-primary-hover);
    color:            #fff;
    box-shadow:       var(--kp-focus-ring);
}
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--kp-primary-active);
    border-color:     var(--kp-primary-active);
    color:            #fff;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--kp-primary);
    border-color:     var(--kp-primary);
    color:            #fff;
    opacity:          .55;
}

/* Secondary / Previous — white outline.
   Also replaces grape's purple-gray #9094A7 cancel/secondary.  */
.btn-outline-secondary,
.btn-secondary {
    background-color: #fff;
    border:           1px solid var(--kp-input-border);
    color:            var(--kp-text);
}
.btn-outline-secondary:hover,
.btn-secondary:hover {
    background-color: #F3F4F6;
    border-color:     var(--kp-input-border);
    color:            var(--kp-text-strong);
}


/* ============================================================
   Layer 9 — Feedback  (progress, validation, alerts)
   ============================================================ */
.progress {
    background-color: var(--kp-border);
    border-radius:    9999px;
    height:           0.5rem;
}
.progress-bar {
    background-color: var(--kp-primary);
    border-radius:    9999px;
}

.has-error .form-control,
.input-error,
.form-control.is-invalid     { border-color: var(--kp-danger); }
.has-error .form-control:focus,
.input-error:focus           { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.text-danger, .asterisk, .required, .requiredmod { color: var(--kp-danger) !important; }

.alert {
    border-radius: var(--kp-radius-control);
    border:        1px solid var(--kp-border);
    font-size:     var(--kp-fs-base);
}


/* ============================================================
   Layer 10 — Navigation
   ============================================================ */

/* Force the navbar menu visible and inline                    */
#navbar-menu {
    display:     flex !important;
    align-items: center !important;
}

/* Hide the collapsed-menu toggle (three-dot button)           */
#navbar-toggler { display: none !important; }

/* Render the dropdown as an inline row, not a floating panel  */
#navbar-menu .dropdown-menu {
    display:        flex !important;
    position:       static !important;
    float:          none !important;
    border:         none !important;
    box-shadow:     none !important;
    background:     transparent !important;
    padding:        0 !important;
    margin:         0 !important;
    flex-direction: row !important;
    align-items:    center !important;
    gap:            0.5rem !important;
}

/* Section header inside the inline menu */
#navbar-menu .dropdown-header { display: none !important; }

/* Nav links — subtle pill */
#navbar-menu .nav-link {
    padding:       0.5rem 0.75rem !important;
    white-space:   nowrap !important;
    color:         var(--kp-text) !important;
    background:    rgb(240, 240, 240) !important;
    border-radius: var(--kp-radius-control);
}

/* Hover / focus → indigo pill with white text
   (default dark text on grape's indigo hover was unreadable) */
#navbar-menu .nav-link:hover,
#navbar-menu .nav-link:focus,
#main-dropdown .nav-link:hover,
#main-dropdown .nav-link:focus,
#main-dropdown a:hover,
#main-dropdown a:focus {
    color:            #fff !important;
    background-color: var(--kp-primary) !important;
}

/* Dropdown items (navbar + bootstrap-select option lists)     */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--kp-primary) !important;
    color:            #fff !important;
}


/* ============================================================
   Survey list page — layout overrides
   ============================================================ */

/* Remove LimeSurvey branding jumbotron, contact line, and footer */
#surveys-list-jumbotron { display: none !important; }
.survey-contact         { display: none !important; }
#surveyListFooter       { display: none !important; }

/* Center the heading and survey button list                    */
.survey-list-heading .form-heading {
    text-align: center;
}

.surveys-list-container {
    display:         flex;
    justify-content: center;
}

.surveys-list {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    padding-left:   0;
}

.surveys-list > li {
    width: 100% !important;
    max-width: 400px;
}


.mb-3 {
  margin-bottom: 0 !important;
}


#surveys-list-container {
  min-height: 0 !important;
}

li.radio-item {
  margin-bottom: 0;
}

.checkbox-text-item {
  grid-column: span 2;
}

.checkbox-text-item .checkbox-label,
.checkbox-item label {
  padding-left: 8px !important
}

#welcome-container >  .survey-welcome.form-heading {
  display: none;
}

.privacy p {
    line-height: 1.2;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.datasecurity-checkbox-label, .datasecurity-checkbox-label a.show-policy {
    font-size: inherit;
}