/******************************************************************************
    Rheinland Studie — survey theme branding
    ----------------------------------------------------------------------------
    Child of fruity_twentythree. This file loads LAST (after base.css and the
    inherited theme_apple.css Bootstrap variation), so it overrides the parent's
    stock green (#14AE5C) with the Rheinland-Studie navy palette, swaps in the
    Utile / Open Sans webfonts, styles the survey navbar, and re-skins the form
    controls to the rs-booking field shell (square corners, grey→navy borders,
    no focus glow, 48px controls — see rs-booking form-styles-portable.{md,css}).

    Palette (mirrors rs-booking tailwind theme + typesetter brand.typ):
      navy (primary)   #062271   navy-dark (hover/active)  #04164A
      navy-700         #0A37B8   background accent         #D0DBE6
      background light #ECF1F5   orange accent             #F58220
      body text        #1A1B1F
******************************************************************************/

/* ─── Webfonts (shipped under files/fonts/, published as ../files/...) ────── */

@font-face {
  font-family: "Utile Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../files/fonts/UtileDisplay-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Utile";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../files/fonts/Utile-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Utile";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../files/fonts/Utile-Semibold.woff2") format("woff2");
}
/* Open Sans — Latin + Latin-ext, normal + italic (German/European surveys). */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../files/fonts/OpenSans-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../files/fonts/OpenSans-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../files/fonts/OpenSans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../files/fonts/OpenSans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Brand custom properties + Bootstrap primary tokens ──────────────────── */

:root {
  --rs-navy: #062271;
  --rs-navy-dark: #04164a;
  --rs-navy-700: #0a37b8;
  --rs-bg-accent: #d0dbe6;
  --rs-bg-light: #ecf1f5;
  --rs-orange: #f58220;
  --rs-text: #1a1b1f;

  /* Form-control shell tokens (from rs-booking form-styles-portable.css). */
  --rs-gray-300: #d1d3d8;        /* default field border                    */
  --rs-tertiary: #898e9c;        /* placeholder text + hover border          */
  --rs-gray-100: #f6f7f7;        /* disabled / read-only field background    */
  --rs-gray-400: #aeb1bb;        /* disabled text                            */
  --rs-error: #8b1a1a;           /* invalid border + error text (brand red)  */
  --rs-success: #167a45;         /* alert-success (not in brand docs; tuned)  */
  --rs-control-height: 3rem;     /* 48px inputs / selects                    */
  --rs-field-transition: all 300ms ease-out;

  /* Re-point Bootstrap's primary so every var()-based usage follows the brand
     (text-primary, bg-primary, nav, etc.). */
  --bs-primary: #062271;
  --bs-primary-rgb: 6, 34, 113;
  --bs-link-color: #062271;
  --bs-link-color-rgb: 6, 34, 113;
  --bs-link-hover-color: #04164a;
  --bs-link-hover-color-rgb: 4, 22, 74;

  /* Brand error red for all Bootstrap "danger" usages (text-danger mandatory
     notices, .btn-danger, validation). Parent's danger is a bright #FF515F. */
  --bs-danger: #8b1a1a;
  --bs-danger-rgb: 139, 26, 26;

  /* Brand navy for "info" (validation hint tips carry .text-info; parent's
     --bs-info is an off-brand violet). Error-state tips are reddened below. */
  --bs-info: #062271;
  --bs-info-rgb: 6, 34, 113;

  /* Square corners everywhere (brand). config.xml sets the theme's own
     cornerradius=0; this also flattens stock Bootstrap components. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
}

/* ─── Typography ──────────────────────────────────────────────────────────── */

body,
.fruity_twentythree,
.ls-content,
.question-container,
input,
button,
select,
textarea {
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important;
  color: var(--rs-text);
}

h1, .h1,
.group-container .group-title {
  font-family: "Utile Display", "Utile", sans-serif !important;
  font-weight: 400 !important;
  color: var(--rs-text);
}
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Utile", sans-serif !important;
  font-weight: 600;
  color: var(--rs-text);
}
/* Survey title in the navbar / header */
.survey-name,
.navbar-brand {
  font-family: "Utile Display", "Utile", sans-serif !important;
}

/* Question text: Utile medium, not the parent's heavy 600 + author <strong>
   (which compounds to ~700). */
.question-container .ls-label-question,
.question-container .ls-label-question strong {
  font-family: "Utile", sans-serif !important;
  font-weight: 500 !important;
}

/* ─── Links ───────────────────────────────────────────────────────────────── */

a,
.link-primary {
  color: var(--rs-navy);
}
a:hover,
a:focus,
.link-primary:hover,
.link-primary:focus {
  color: var(--rs-navy-dark);
}

/* ─── Primary buttons (Bootstrap core + LS override layer) ────────────────── */

.btn-primary {
  color: #fff;
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
}
.btn-check:focus + .btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary.dropdown-toggle.show,
.btn-primary.dropdown-toggle.show:focus {
  color: #fff;
  background-color: var(--rs-navy-dark);
  border-color: var(--rs-navy-dark);
}
/* Ring for keyboard focus only (mouse hover just darkens, like the fields). */
.btn-primary:focus-visible,
.btn-check:focus-visible + .btn-primary {
  box-shadow: 0 0 0 3px rgba(6, 34, 113, 0.35);
}
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
}

.btn-outline-primary {
  color: var(--rs-navy);
  border-color: var(--rs-navy);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
}
.btn-link {
  color: var(--rs-navy);
}
.btn-link:hover,
.btn-link:focus {
  color: var(--rs-navy-dark);
}

/* ─── Native check inputs: focus ring + checked state ─────────────────────── */
/* (Some LS question types use real .form-check-input checkboxes/radios; the
   text-field shell below uses a border change instead of a glow, but keep a
   small ring here for keyboard a11y on these small controls.) */

.form-check-input:focus {
  border-color: var(--rs-navy-700);
  box-shadow: 0 0 0 0.25rem rgba(6, 34, 113, 0.25);
}
.form-check-input:checked {
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
}

/* ─── Text fields / selects / textarea — rs-booking field shell ───────────── */
/* White box, thin grey border, 48px tall, border animates grey → mid-grey on
   hover → navy on focus with NO Bootstrap glow, brand-red on invalid. Mirrors
   rs-booking form-styles-portable.css. */

.form-control,
.form-select {
  height: var(--rs-control-height);
  border: 1px solid var(--rs-gray-300);
  transition: var(--rs-field-transition);
  box-shadow: none;
  color: var(--rs-text);
  /* rs-booking steps 0.875rem→1.063rem at 1024px; we keep ≥1rem on mobile so
     iOS doesn't zoom-on-focus (it does below 16px). */
  font-size: 1rem;
}
.form-control:hover,
.form-select:hover {
  border-color: var(--rs-tertiary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--rs-navy);
  /* Inset ring doubles the navy border to an effective 2px (a 1px colour
     change alone is a weak focus indicator) without the layout shift a real
     border-width change would cause. Still no outer glow. */
  box-shadow: inset 0 0 0 1px var(--rs-navy);
  outline: none;
}
.form-control::placeholder {
  color: var(--rs-tertiary);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--rs-gray-100);
  color: var(--rs-gray-400);
}
/* Textarea: same shell but auto height with a little extra top padding. */
textarea.form-control {
  height: auto;
  min-height: var(--rs-control-height);
  padding-top: 0.75rem;
}
/* Multi-row selects must not be squashed to the 48px single-line height. */
select.form-select[multiple],
select.form-select[size]:not([size="1"]) {
  height: auto;
}
/* Invalid state → brand-red border + error text. */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--rs-error);
}
.invalid-feedback {
  color: var(--rs-error);
}
@media (min-width: 1024px) {
  .form-control,
  .form-select {
    font-size: 1.063rem;
  }
}

/* ─── Input-group addons (token field show/hide toggle, prefixes) ─────────── */
/* Parent paints .input-group-text stock green (#14AE5C); make it navy. */
.input-group-text,
label .input-group-text {
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
  color: #fff;
}
/* The show/hide-code control is a <button> rendered as an addon. */
button.input-group-text:hover,
button.input-group-text:focus {
  background-color: var(--rs-navy-dark);
  border-color: var(--rs-navy-dark);
}

/* ─── Alerts ──────────────────────────────────────────────────────────────── */
/* The parent variation paints alerts as solid semantic fills with white text
   and a dark 1.33px border (.alert-info was a violet var(--bs-info)). The
   rs-booking portable docs don't spec alerts, so we rebrand all variants to a
   consistent soft-panel look: light tinted bg + semantic-coloured text, keeping
   the parent's 1.33px border but recoloured to match. Only .alert-danger uses a
   documented token (--rs-error #8b1a1a). */
.alert-info,
.alert-primary {
  background-color: var(--rs-bg-light); /* #ecf1f5 */
  border-color: var(--rs-navy);
  color: var(--rs-navy);
}
.alert-success {
  background-color: #e9f5ee;
  border-color: var(--rs-success);
  color: var(--rs-success);
}
.alert-warning {
  background-color: #fdf1e4;
  border-color: var(--rs-orange);
  color: #8a4b07; /* darkened orange — #f58220 text fails contrast on light bg */
}
.alert-danger {
  background-color: #f7eaea;
  border-color: var(--rs-error);
  color: var(--rs-error);
}
.alert-secondary,
.alert-light,
.alert-dark {
  background-color: var(--rs-gray-100); /* #f6f7f7 */
  border-color: var(--rs-gray-300);
  color: var(--rs-text);
}
/* Links inside an alert: inherit the panel colour, just bolder. */
.alert .alert-link {
  color: inherit;
  font-weight: 700;
}

/* ─── Question layout & spacing ───────────────────────────────────────────── */
/* The parent leaves empty help/validation containers that inflate the gap
   between a question's title and its answers until it rivals the gap between
   questions — so you can't tell which answers belong to which title. Collapse
   the empties, make the title hug its answers, and move the generous spacing to
   BETWEEN questions (brand --rs-field-gap = 3rem) so proximity groups each
   question. */

/* Collapse the validation container's reserved margin. LS keeps hidden
   .ls-questionhelp.hide-tip nodes inside it (display:none) plus a 10/20px
   margin, which opened a ~30px gap between the title and the answers. These are
   flex items in a Bootstrap .row, so the margin does NOT collapse — it shows in
   full. Zero it unconditionally; this is :has()-free so it holds on browsers
   without :has() support (the earlier :not(:has(…)) guard would silently fail
   there and the 30px gap would come back). When validation reveals a tip (JS
   drops .hide-tip), the tip itself gets breathing room below. */
.question-container .question-valid-container {
  margin: 0;
}
/* Any VISIBLE tip in the validation container (live hints, EM count/validation
   tips, error tips) gets a little breathing room from the help/title above —
   otherwise, with the container margin zeroed, they render flush. Hidden tips
   carry .hide-tip (display:none), so a margin on them costs no space. */
.question-container .question-valid-container .ls-questionhelp:not(.hide-tip),
.question-container .question-valid-container .emtip:not(.hide-tip),
.question-container .question-valid-container .em_num_answers,
.question-container .question-valid-container .ls-em-error {
  margin-top: 0.5rem;
}

/* One uniform vertical rhythm regardless of question type:
   title → (help hugs the title) → 1rem → answers, and 3rem between questions.
   The title→answers gap is centralised on .answer-container so EVERY type
   (radio, dropdown, numeric, …) matches. Without this, measured gaps diverged:
   radio/numeric 12px vs dropdowns 8px — the dropdown's inner Bootstrap .row.g-1
   carries a -4px gutter margin that ate into the gap, so we cancel it too. */
.question-container .question-title-container {
  margin-bottom: 0;
}
/* The title text is wrapped in a <p>, which carries Bootstrap's default
   margin-bottom:1rem BELOW the text. Help text is plain (no <p>), so a question
   WITHOUT help ended up 16px further from its answers than one with help. Zero
   the last title paragraph so the visible text→answers gap is uniform either
   way. (:last-of-type keeps the eyebrow <p>'s spacing and skips the trailing
   hidden change-note <div>.) */
.question-container .ls-label-question p:last-of-type {
  margin-bottom: 0;
}
/* Help text groups under the title (~8px) and clears the answers. Set
   unconditionally (no :has() needed): hidden help containers carry .d-none
   (display:none), so this margin is moot for them. */
.question-container .question-help-container {
  margin: 0.5rem 0 0;
}
.question-container .answer-container {
  margin-top: 1rem; /* uniform title/help → answers gap (verified 16px all types) */
}
.question-container .answer-container > .row {
  margin-top: 0; /* cancel Bootstrap's negative .g-1 gutter pull (dropdowns) */
}

/* Generous, consistent separation between questions (brand --rs-field-gap 3rem)
   so proximity groups each title with its own answers. */
.question-container {
  margin-bottom: 3rem;
  padding: 0;
}

/* Eyebrow / category label: surveys put a short category in its own <i>-only
   <p> above the question (e.g. "Familienstand:"). The parent renders it at the
   24px bold question size; demote it to a small, muted uppercase caption so the
   actual question stays the dominant line. */
.question-container .ls-label-question p:has(> i:only-child) {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rs-tertiary);
  margin-bottom: 0.2rem;
}
.question-container .ls-label-question p:has(> i:only-child) > i {
  font-style: normal;
}

/* Mandatory-question asterisk: the parent renders it as a stray glyph on its
   own line above the title. Shrink + brand-colour it (orange = required) and
   hang it in the left margin next to the question, only when present (:has). */
.question-container .asterisk {
  font-size: 1.1rem;
  color: var(--rs-orange);
}
.question-container .question-title-container:has(> .asterisk) {
  position: relative;
  padding-left: 1.25rem;
}
.question-container .question-title-container:has(> .asterisk) > .asterisk {
  position: absolute;
  left: 0;
  top: 0.35rem;
  line-height: 1;
}

/* ─── Error / (soft-)mandatory state ──────────────────────────────────────── */
/* When a mandatory question is left unanswered LS adds .input-error to the
   question and fills the validation container with a .ls-question-mandatory
   notice (+ a soft-mandatory "continue anyway" checkbox). With the container's
   margin zeroed those sat flush against the help above and each other; give the
   notice a soft brand-red panel and space the pieces. Colour comes from
   --bs-danger (rebranded above) via the .text-danger class. */
.question-container .ls-question-mandatory {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-weight: 500;
  background-color: #f7eaea; /* soft red, matches .alert-danger */
  border-left: 3px solid var(--rs-error);
}

/* Soft-mandatory "Continue without answering" checkbox: hidden, because
   scripts/custom.js auto-confirms it to restore the LS5 "re-submit = skip"
   behaviour. The explanatory .ls-question-mandatory notice above stays visible.
   (Hidden+checked still submits mandSoft[qseq]=Y.) */
.question-container .ls-softmandatory-input {
  display: none;
}

/* Text-input error: match the field shell's brand-red border instead of the
   parent's hard #FF515F offset shadow (radio/checkbox lists show the notice
   above instead). */
.input-error .form-control {
  border-color: var(--rs-error);
  box-shadow: none;
}
.input-error .form-control:focus {
  border-color: var(--rs-error);
  box-shadow: inset 0 0 0 1px var(--rs-error); /* keep the 2px focus ring, in red */
}

/* EM validation tips (e.g. "Choose one of the following answers") live in the
   .question-valid-container, which carries .text-info — so a tip inherits the
   info colour. In the error state it must be brand red; override the inherited
   .text-info (which is set with !important, so this needs !important too). */
.question-container .question-valid-container .emtip.error,
.question-container .question-valid-container .em_num_answers.error,
.question-container .ls-em-error {
  color: var(--rs-error) !important;
}

/* ─── Survey radio / checkbox answer indicators (LS .answer-item styling) ─── */

/* Selected option's label TEXT (parent turns it green). */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label,
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label {
  color: var(--rs-navy);
}
/* The ring / outline (::before). */
.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before,
.privacy .checkbox-item label::before {
  border-color: var(--rs-navy);
}
/* The filled dot / tick (::after) — set via background-color, not color. */
body .answer-item label::after,
.radio-item input[type=radio]:checked + label::after,
.checkbox-item input[type=checkbox]:checked + label::after {
  background-color: var(--rs-navy);
}

/* ─── Progress bar ────────────────────────────────────────────────────────── */

.progress-bar {
  color: #fff;
  background-color: var(--rs-navy);
}

/* ─── Sliders / ranking accents (carry the parent green by default) ───────── */

.slider-list .slider .slider-selection,
.slider-list .slider .slider-handle,
.ranking-advanced-style .ranking-advanced-sorted-items .sortable-item,
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
  background-color: var(--rs-navy);
  border-color: var(--rs-navy);
}

/* ─── Error page (layout_errors.twig) ─────────────────────────────────────── */
/* The parent hardcodes Arial and ships a stock green illustration. Bring it
   on-brand: Utile/Open Sans type, near-black title, navy contact link, and
   swap the stock error.png for our navy error.svg. (custom.css loads on this
   layout via the theme's CSS package — the same one that carries the
   body.error-page rules we're overriding.) */
body.error-page {
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
}
body.error-page .error-title {
  margin-top: 0;
}
body.error-page .error-title,
body.error-page .error-title p {
  font-family: "Utile Display", "Utile", sans-serif !important;
  color: var(--rs-text) !important;
}
body.error-page .error-content {
  color: var(--rs-text);
}
body.error-page .error-link {
  color: var(--rs-navy);
}
body.error-page .error-link:hover,
body.error-page .error-link:focus {
  color: var(--rs-navy-dark);
}
/* Replace the stock green error.png with the brand navy SVG by swapping the
   <img>'s rendered image (keeps the original layout: the image keeps its
   intrinsic 507×399 footprint and m-auto centering, so the columns size exactly
   as before — a background-image instead shrank the image and narrowed the text
   column). error.svg sits under ../files/, published with the theme assets. */
body.error-page .col.d-flex img {
  content: url("../files/error.svg");
  max-width: 100%;
  height: auto;
}

/* ─── Survey navbar — matches the rs-booking Header.svelte ────────────────── */
/* White bar, soft bottom shadow, navy controls hovering orange, navy logo. */

#survey-nav.navbar,
.navbar {
  background-color: #fff !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
  /* Reference Header.svelte centers the logo in a fixed ~100–114px bar, so the
     space around the ~73–91px logo is only ~12px — not py-6's 24px. */
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .survey-name {
  color: var(--rs-navy) !important;
}
.navbar .navbar-brand:hover,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--rs-orange) !important;
}
.navbar .navbar-toggler {
  color: var(--rs-navy);
  border-color: rgba(6, 34, 113, 0.25);
}
/* Brand logo: navy brain+wordmark, ~100px wide like the web header
   (w-20 → sm:w-[6.25rem]); aspect ≈ 1.1:1, so cap height to keep it tidy. */
.navbar-brand.logo-container {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand img.logo,
.logo-container img {
  width: 80px;
  height: auto;
  max-height: none;
}
@media (min-width: 768px) {
  .navbar-brand img.logo,
  .logo-container img {
    width: 100px;
  }
}