/* ==========================================================================
   Noinoi theme for LimeSurvey (extends Bootstrap Vanilla)
   Brand reference: https://www.noinoi.kids/
   Colors and type pulled from the noinoi.kids shop frontend so the survey
   feels like part of the same brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@400;500;600;700;800&display=swap');

:root {
  --noinoi-navy: #1c323a;       /* primary brand color (buttons, text) */
  --noinoi-navy-hover: #182b31;
  --noinoi-navy-active: #16282e;
  --noinoi-petrol: #007686;     /* header / logo bar background */
  --noinoi-petrol-hover: #00636f;
  --noinoi-petrol-active: #00525c;
  --noinoi-blue: #006eb0;       /* secondary / action color (links, progress, focus) */
  --noinoi-blue-hover: #005e96;
  --noinoi-blue-active: #00588d;
  --noinoi-bg: #eceeef;         /* page background */
  --noinoi-surface: #ffffff;    /* card / question background */
  --noinoi-border: #dbdfe0;
  --noinoi-text: #002d33;
  --noinoi-muted: #4a545b;
  --noinoi-success: #267802;
  --noinoi-warning: #d93a00;
  --noinoi-danger: #e20000;
  --noinoi-radius: 1rem;
  --noinoi-radius-pill: 3rem;
  --noinoi-font: 'Parkinsans', 'Inter', Helvetica, Arial, sans-serif;

  --bs-primary: var(--noinoi-navy);
  --bs-secondary: var(--noinoi-blue);
  --bs-success: var(--noinoi-success);
  --bs-warning: var(--noinoi-warning);
  --bs-danger: var(--noinoi-danger);
  --bs-link-color: var(--noinoi-blue);
  --bs-link-hover-color: var(--noinoi-blue-hover);
  --bs-body-bg: var(--noinoi-bg);
  --bs-body-color: var(--noinoi-text);
  --bs-body-font-family: var(--noinoi-font);
  --bs-border-radius: var(--noinoi-radius);
  --bs-border-radius-lg: var(--noinoi-radius);
  --bs-border-radius-sm: 0.5rem;
}

html,
body {
  background-color: var(--noinoi-bg);
  font-family: var(--noinoi-font);
  color: var(--noinoi-text);
}

/* Content area (question groups, questions, survey list, ...): reinforce
   font and text color in case a more specific vanilla rule sets its own. */
#outerframeContainer,
#ls-content,
.survey-container,
.group-container,
.question-container,
#surveys-list-container,
h1, h2, h3, h4, h5, h6,
p, span, label, legend {
  font-family: var(--noinoi-font);
  color: var(--noinoi-text);
}

a {
  color: var(--noinoi-blue);
}
a:hover,
a:focus {
  color: var(--noinoi-blue-hover);
}

/* Focus ring, matches the noinoi.kids shop accessible focus treatment */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem var(--noinoi-navy);
}

/* --------------------------------------------------------------------
   Header / logo bar
   -------------------------------------------------------------------- */
/*
   The real navbar element is <div id="survey-nav" class="navbar navbar-light
   bg-light ...">. Bootstrap's ".bg-light" utility sets its background with
   "!important", so we need "!important" too - matching on the "#survey-nav"
   id keeps this scoped to our navbar only (nothing else using ".bg-light"
   elsewhere is affected).
*/
#survey-nav {
  background-color: var(--noinoi-petrol) !important;
  border-color: var(--noinoi-petrol) !important;
  border-radius: 0 0 0 2rem;

  /* Bootstrap 5 navbar theming variables - re-themes brand/links/toggler
     to white without having to fight individual Bootstrap classes. */
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
}

#survey-nav,
#survey-nav a,
#survey-nav .nav-link,
#survey-nav .navbar-brand,
#survey-nav .navbar-text {
  color: #fff;
}

#survey-nav .navbar-toggler-icon {
  /* Bootstrap's default toggler icon is a dark SVG; flip it to white. */
  filter: invert(1) brightness(2);
}

.logo-container {
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.logo-container > img {
  max-height: 56px;
  padding: 0;
  width: auto;
}

#survey-nav select.form-select,
#survey-nav select.form-control {
  background-color: var(--noinoi-petrol-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------
   Progress bar
   -------------------------------------------------------------------- */
.top-container .progress {
  height: 10px;
  border-radius: var(--noinoi-radius-pill);
  background-color: var(--noinoi-border);
  overflow: hidden;
}

.progress .progress-bar,
.progress-bar {
  background-color: var(--noinoi-blue);
}

/* --------------------------------------------------------------------
   Survey / question cards
   -------------------------------------------------------------------- */
#outerframeContainer,
#ls-content,
.survey-container {
  background-color: transparent;
}

.group-container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.group-container,
.question-container,
#surveys-list-container,
.surveys-list .list-group-item,
.panel,
.card {
  background-color: var(--noinoi-surface);
  border: 1px solid var(--noinoi-border);
  border-radius: var(--noinoi-radius);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
}

.group-title {
  color: var(--noinoi-navy);
  font-weight: 700;
}

.question-text,
legend {
  color: var(--noinoi-petrol);
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Buttons
   All variants (primary, secondary, outline, navigator "Next"/"Submit", ...)
   share this one style. Bootstrap routes every ".btn-*" variant's colors
   through the base ".btn" rule via CSS variables (--bs-btn-bg, etc.); since
   custom.css loads after bootstrap.css, plain (non-variable) values here
   win at equal specificity and apply to every variant automatically.
   -------------------------------------------------------------------- */
.btn {
  padding: 0.85rem 2.8rem;
  border-radius: 15px;
  color: #002d33;
  background-color: #ffe04d;
  border: 2px solid #ccb43d;
  box-shadow: 0 3px 0 0 #ccb43d;
  font-weight: 600;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

.btn:hover,
.btn:focus {
  color: #002d33;
  background-color: #7fbac2;
  border-color: #007686;
  box-shadow: 0 3px 0 0 #007686;
}

.btn:active,
.btn.active {
  color: #002d33;
  background-color: #ffd23d;
  transform: translateY(3px);
  box-shadow: none;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  transform: none;
  box-shadow: 0 3px 0 0 #ccb43d;
}

/* --------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control {
  border-radius: 0.6rem;
  border-color: var(--noinoi-border);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--noinoi-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 110, 176, 0.2);
}

.form-check-input,
input[type="radio"],
input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--noinoi-navy);
  border-radius: 0.35em;
  vertical-align: middle;
}

.form-check-input[type="radio"],
input[type="radio"] {
  border-radius: 50%;
}

.form-check-input:checked,
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: var(--noinoi-petrol);
  border-color: var(--noinoi-petrol);
  color: #fff;
}

/* The checkbox-item's check glyph is a FontAwesome icon inserted via
   label::after, not the native input rendering - recolor it directly. */
.checkbox-item label::after {
  color: #fff;
}

.form-check-input:focus {
  border-color: var(--noinoi-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 110, 176, 0.2);
}

/* --------------------------------------------------------------------
   Alerts / notices
   -------------------------------------------------------------------- */
.alert-success {
  color: var(--noinoi-success);
  border-color: var(--noinoi-success);
}

.alert-warning {
  color: var(--noinoi-warning);
  border-color: var(--noinoi-warning);
}

.alert-danger,
.text-danger,
.ls-errormandatory,
.form-control-feedback {
  color: var(--noinoi-danger);
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
#surveyListFooter,
.privacy-header {
  color: var(--noinoi-muted);
}

/* --------------------------------------------------------------------
   User custom CSS
   ---------------
   Add further tweaks below. This file is loaded last, so anything here
   safely overrides vanilla and the rules above.
   -------------------------------------------------------------------- */