/******************************************************************************
    GGD Limburg-Noord — huisstijlthema (LimeSurvey)
    ---------------------------------------------------------------------------
    Gebaseerd op de Gino-standaardtemplate (Fruity TwentyThree).
    Dit bestand wordt als laatste geladen en overschrijft dus alle andere CSS.

    Huisstijlkleuren (bron: officiële GGD-LN beeldmerk/stylesheet):
      - GGD blauw   #0062a7   (primaire actie: 'Volgende'-knop)
      - GGD oranje  #ec6608   (accent + geselecteerd antwoord + hover)

    Alle klantwensen uit melding BEH004-4683 zijn hieronder gebundeld en
    voorzien van commentaar zodat losse punten eenvoudig bij te stellen zijn.
******************************************************************************/

/* ===========================================================================
   1. Merkkleuren als variabelen
   ---------------------------------------------------------------------------
   Het moederthema (variatie "Apple") zet --bs-primary op groen (#14AE5C).
   Dat groen is precies de kleur die de klant bij een ingevuld antwoord zag.
   Door --bs-primary op GGD-oranje te zetten wordt het geselecteerde antwoord
   automatisch oranje (klantwens). De 'Volgende'-knop overschrijven we
   daarna apart naar GGD-blauw (zie blok 5).
   =========================================================================== */
:root,
.ls-fruity {
    --ggd-blauw: #0062a7;
    --ggd-oranje: #ec6608;
    --ggd-tekst: #1e1e1e;          /* uniforme, goed leesbare tekstkleur */

    /* Accent/geselecteerd antwoord -> GGD-oranje */
    --bs-primary: #ec6608;
    --bs-primary-rgb: 236, 102, 8;

    /* Legacy variabelen uit de oude Gino-template */
    --primary-color: #ec6608;
    --secondary-color: #ec6608;
    --previous-button-color: #0062a7;
}

/* ===========================================================================
   2. Lettertype: Calibri (klantwens "standaard lettertype: Calibri")
   ---------------------------------------------------------------------------
   Calibri is een systeem-/Office-lettertype. Op systemen zonder Calibri
   valt het netjes terug op Carlito (metrisch identiek) en Segoe UI.
   =========================================================================== */
:root,
.ls-fruity {
    --bs-body-font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
}
body,
html,
input,
select,
textarea,
button,
.btn,
h1, h2, h3, h4, h5, h6,
.survey-name,
.group-title,
.question-title,
.ls-question-text,
.answer-item,
.form-control {
    font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif !important;
}

/* ===========================================================================
   3. Achtergrond: wit + vast (niet-scrollbaar) licht achtergrondlogo
   ---------------------------------------------------------------------------
   Klantwens: "standaard achtergrond: wit" én een licht achtergrondlogo dat
   vast op de pagina staat (dus niet meescrollt).
   De witte inhoudsblokken zijn ondoorzichtig; het watermerk is dus vooral in
   de marge zichtbaar. Daarom staat het NIET gecentreerd (zou achter de brede
   vragenlijst verdwijnen) maar aan de rechterkant, zodat het zichtbaar blijft.
   Wil je het links: zet 'right center' om naar 'left center'.
   =========================================================================== */
html,
body {
    background-color: #ffffff !important;
    background-image: url("../files/watermerk.png") !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;   /* vast: scrollt niet mee */
    background-position: right center !important;
    background-size: auto 85vh !important;      /* hoogte ~85% v/h scherm */
}

/* De witte inhoudsblokken (klantwens: witte achtergrond voor de vragen) */
#surveys-list-container,
#limesurvey,
#main-row {
    background: #ffffff !important;
    padding: 15px;
    margin: 15px auto;
}

/* ---------------------------------------------------------------------------
   Breedte van de vragenlijst — net zo breed als het Gino-voorbeeld.
   Het moederthema plaatst de inhoud in een smalle kolom (.col-centered
   .col-xl-8). Die maken we volledig breed binnen een gecentreerde
   buitenbreedte van ~960px. Pas 'max-width' hieronder aan om breder/smaller
   te maken.
   --------------------------------------------------------------------------- */
#outerframe,
.ls-fruity .container-fluid,
.fruity .container,
body > div.ls-fruity,
body > article {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.col-centered,
.col-centered.col-xl-8,
#outerframe .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.row {
    margin-right: 0;
    margin-left: 0;
}

/* ===========================================================================
   4. Logo (klantwens: "logo is erg klein, kan deze iets groter (25%)?")
   ---------------------------------------------------------------------------
   Het GGD-beeldmerk is staand (portret). We schalen daarom op hoogte i.p.v.
   breedte. Pas 'max-height' aan om het logo groter/kleiner te maken.
   =========================================================================== */
.logo-container > img,
.navbar-brand > img {
    max-height: 130px !important;   /* ~25% groter dan de vorige weergave */
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}
@media (min-width: 283px) {
    .navbar-brand {
        display: block !important;
    }
}

/* Navbar zelf transparant houden (logo op witte achtergrond) */
.fruity .navbar {
    background: transparent !important;
    box-shadow: none;
}

/* ===========================================================================
   5. Knoppen
   ---------------------------------------------------------------------------
   Klantwens 'Volgende'-knop: standaard BLAUW, tekst WIT, hover ORANJE.
   'Vorige'-knop: rustige blauwe outline.
   Bootstrap 5 stuurt de knopkleuren via --bs-btn-* variabelen.
   =========================================================================== */

/* 'Volgende' / 'Verzenden' (primaire knop) */
.btn-primary,
.fruity .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ggd-blauw);
    --bs-btn-border-color: var(--ggd-blauw);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ggd-oranje);
    --bs-btn-hover-border-color: var(--ggd-oranje);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ggd-oranje);
    --bs-btn-active-border-color: var(--ggd-oranje);
    --bs-btn-focus-shadow-rgb: 0, 98, 167;
    --bs-btn-disabled-bg: var(--ggd-blauw);
    --bs-btn-disabled-border-color: var(--ggd-blauw);
    color: #ffffff !important;
    background-color: var(--ggd-blauw) !important;
    border: 2px solid var(--ggd-blauw) !important;
    border-radius: 4px;
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active {
    color: #ffffff !important;
    background-color: var(--ggd-oranje) !important;
    border-color: var(--ggd-oranje) !important;
    box-shadow: none;
}

/* 'Vorige' (secundaire / outline-knop): rustige blauwe outline */
.ls-move-previous-btn,
.btn-outline-secondary,
.fruity .btn-default {
    --bs-btn-color: var(--ggd-blauw);
    --bs-btn-border-color: var(--ggd-blauw);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ggd-blauw);
    --bs-btn-hover-border-color: var(--ggd-blauw);
    border: 2px solid var(--ggd-blauw) !important;
    color: var(--ggd-blauw) !important;
    background: #ffffff;
    border-radius: 4px;
}
.ls-move-previous-btn:hover,
.btn-outline-secondary:hover,
.fruity .btn-default:hover {
    color: #ffffff !important;
    background: var(--ggd-blauw) !important;
    box-shadow: none;
}

/* ===========================================================================
   6. Geselecteerd / ingevuld antwoord -> GGD-oranje (was groen)
   ---------------------------------------------------------------------------
   Klantwens: "na het invullen van een vraag krijgt een vraag de kleur groen;
   deze zien we liever in GGD-oranje."
   We dekken zowel de nieuwe (.answer-item) als de oude (.radio-item) opmaak af.
   =========================================================================== */
.answer-item input[type="radio"]:checked + label::before,
.answer-item input[type="checkbox"]:checked + label::before,
.radio-item input[type="radio"]:checked + label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--ggd-oranje) !important;
    background-color: var(--ggd-oranje) !important;
}
.answer-item input[type="radio"]:checked + label::after,
.radio-item input[type="radio"]:checked + label::after,
body .answer-item label::after {
    background-color: #ffffff !important;   /* witte stip in de oranje cirkel */
}
.answer-item input[type="checkbox"]:checked + label::after,
.checkbox-item input[type="checkbox"]:checked + label::after {
    border-color: #ffffff !important;       /* wit vinkje op oranje vlak */
}
.answer-item input:checked + label,
.radio-item input[type="radio"]:checked + label,
.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--ggd-tekst) !important;     /* labeltekst leesbaar donker */
}
/* Geselecteerde cellen in array-/matrixvragen */
.ls-answers .ls-selected,
table.ls-answers td.checked {
    color: var(--ggd-oranje) !important;
}

/* ===========================================================================
   7. Titels & vraagteksten in één, leesbare kleur
   ---------------------------------------------------------------------------
   Klantwens: "we zien een verschil in kleur tussen de titel (zwart) en de
   vragen (lichtgrijs). Deze 'titel' mag de kleur van de vragen krijgen."
   -> alle koppen en vraagteksten krijgen dezelfde donkere kleur (--ggd-tekst).
   (De oude template zette .group-title op wit; op een witte achtergrond
    zou de groepstitel dan onzichtbaar zijn.)
   =========================================================================== */
.survey-name,
.group-title,
.question-title,
.ls-question-text,
.question-text,
.fruity h1,
.fruity h2,
.fruity h3 {
    color: var(--ggd-tekst) !important;
}
.group-title {
    text-align: left;
}
table.ls-answers tr th,
.fruity a {
    color: var(--ggd-tekst);
}
.fruity a:hover {
    color: var(--ggd-oranje);
}

/* ===========================================================================
   8. Overige opmaak (structuur uit de Gino-template, kleuren op GGD-huisstijl)
   =========================================================================== */

/* Vraagcontainer: strak, wit, zonder zware schaduw */
.fruity .question-container {
    padding-top: 1px;
    padding-bottom: 8px;
    border: 0;
    background: #fff;
    box-shadow: none;
    border-radius: 5px;
}

/* Voortgangsbalk in GGD-blauw */
.top-container .progress {
    height: 40px;
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    box-shadow: none;
}
.fruity .progress-bar,
.progress-bar {
    line-height: 40px;
    background: var(--ggd-blauw) !important;
    font-size: 16px;
    min-width: 0% !important;
}

/* Meldingen */
.fruity .alert {
    background: #fff;
}
.fruity .alert-danger {
    border: 1px solid #ff2500;
}
.fruity .alert-danger,
.fruity .text-danger {
    color: #ff2500;
}
.fruity .text-danger {
    margin-right: 6px;
}
.fruity .well {
    background-color: #eaf1f6;   /* zeer licht blauw, past bij huisstijl */
    border: 0;
    box-shadow: none;
}

/* Privacy-/toestemmingsvinkje op welkomstpagina */
.privacy .checkbox-item label::before {
    border: 2px solid var(--ggd-blauw);
}
.datasecurity-checkbox-label a {
    color: var(--ggd-blauw);
}

/* Print-/beoordelingslinks */
.url-wrapper-survey-print a {
    color: var(--ggd-tekst);
}
.url-wrapper-survey-print a:hover {
    color: var(--ggd-oranje);
    text-decoration: underline;
}

/* Helptekst-icoon bij vragen */
.ls-questionhelp:before {
    font-family: FontAwesome;
    content: "\f059";
    color: var(--ggd-tekst);
}
.ls-questionhelp,
.emtip {
    color: var(--ggd-tekst);
}

/* Niet-gebruikte elementen verbergen (zoals in de standaard Gino-template) */
#navigator-container-clone {
    display: none;
}
.ls-link-action.ls-link-clearall,
.assessment-table,
.assessments-heading,
.assessments-container {
    display: none;
}