/******************
    User custom CSS
    Managed host-side and bind-mounted into the fruity_twentythree theme
    (see docker-compose.yml). Loaded last, overrides everything.

    REFOOD brand skin — per REFOOD Brandbook 2024:
    colors: Blue Violet #5B59DE, Deep Orange #FF4600, Lime #B8FF00,
            Silver #D2D2D2, White #FFF, Black #000 (text is always black).
    fonts:  Unbounded (titles, UPPERCASE), Overused Grotesk (body),
            Necto Mono (buttons/labels, UPPERCASE).
    Fonts + logo live in the persistent upload volume:
    ../files/fonts/ and ../files/images/
*/

/* Hide the "Per favore contattare ... per ulteriore assistenza" notice
   on the public survey-list / default landing page. */
.survey-contact { display: none !important; }

/* ---------- Brand fonts ---------- */
@font-face {
  font-family: 'Unbounded';
  src: url('../files/fonts/Unbounded-VF.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'OverusedGrotesk';
  src: url('../files/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'NectoMono';
  src: url('../files/fonts/NectoMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* bootstrap primary drives checked radios/labels: brand says text is always black */
  --bs-primary: #000000;
  --bs-primary-rgb: 0, 0, 0;
  --rf-blue-violet: #5B59DE;
  --rf-deep-orange: #FF4600;
  --rf-lime: #B8FF00;
  --rf-silver: #D2D2D2;
  --rf-white: #FFFFFF;
  --rf-black: #000000;
  --rf-font-heading: 'Unbounded', sans-serif;
  --rf-font-body: 'OverusedGrotesk', 'IBM Plex Sans', sans-serif;
  --rf-font-mono: 'NectoMono', monospace;
}

/* Body font when the Overused Grotesk option is selected (the compiled theme-color
   build sets body font-family after the font packages load, so the package rule alone
   loses the cascade; this class-keyed rule loads last and wins). */
body.font-overused-grotesk {
  font-family: 'OverusedGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base: white background, black body text ---------- */
body.fruity_twentythree {
  font-weight: 500;
  color: var(--rf-black);
  background: var(--rf-white);
}
.fruity_twentythree p,
.fruity_twentythree label,
.fruity_twentythree .form-heading {
  color: var(--rf-black);
}
.fruity_twentythree a { color: var(--rf-blue-violet); }

/* ---------- Top bar: lime band with black border ---------- */
.fruity_twentythree .navbar.fixed-top {
  background: var(--rf-theme, var(--rf-lime)) !important;
  border-bottom: 2px solid var(--rf-black);
}
.fruity_twentythree .navbar,
.fruity_twentythree .navbar .nav-link,
.fruity_twentythree .navbar-brand {
  font-family: var(--rf-font-mono);
  text-transform: uppercase;
  color: var(--rf-black) !important;
}

/* ---------- REFOOD logo in the top bar — EVERY page ---------- */
/* Shows only when the theme "Logo" option (brandlogo) is ON -> body.brand-logo, which
   also gates the .logo-container in nav_bar.twig. Painted as a CSS background, not the
   native <img>: LSYii_ImageValidator rejects SVG so brandlogofile renders empty. The
   navbar renders on every page, so this puts the logo on welcome AND inner pages
   (replacing the old welcome-only .survey-name::before logo). The wordmark is solid
   black — reads on the lime bar and any light theme-colour build. */
.fruity_twentythree.brand-logo .navbar .logo-container {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
}
.fruity_twentythree.brand-logo .navbar .logo-container::before {
  content: '';
  display: block;
  height: clamp(20px, 4.4vw, 30px);
  aspect-ratio: 1326 / 138; /* refood-logo.svg viewBox */
  background: url('../files/images/refood-logo.svg') left center / contain no-repeat;
}
/* Keep the native (empty, SVG-rejected) <img> hidden so only the CSS logo shows. */
.fruity_twentythree .navbar .logo { display: none !important; }

/* ---------- Headings: Unbounded Black, UPPERCASE, tight leading ---------- */
.fruity_twentythree .survey-name,
.fruity_twentythree .large-heading,
.fruity_twentythree .group-container .group-title,
.fruity_twentythree .group-title-container {
  font-family: var(--rf-font-heading) !important;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05; /* accented caps need >90% */
  color: var(--rf-black) !important;
}

/* Page titles: the theme hard-codes 2.85rem for both the welcome survey title
   (.survey-name/.large-heading) and every inner-page group title (.group-title),
   which is far too big for the long Italian titles on phones (they overflowed and
   auto-hyphenated, e.g. "PLANT-BASED" -> "PLANT-BA-SED"). Scale them down fluidly
   on narrow screens (desktop still 2.85rem = the clamp max) and never hyphenate
   mid-word. */
.fruity_twentythree .survey-name,
.fruity_twentythree .large-heading,
.fruity_twentythree .group-container .group-title,
.fruity_twentythree .group-title-container {
  font-size: clamp(1.5rem, 6.4vw, 2.85rem) !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  overflow-wrap: break-word !important; /* safety net for a word wider than the column */
}

/* Question text: Unbounded Regular (brand "subtitle" role) */
.fruity_twentythree .question-container .ls-label-question {
  font-family: var(--rf-font-heading);
  font-weight: 400;
  line-height: 1.15;
  color: var(--rf-black);
}
.fruity_twentythree .question-container .asterisk,
.fruity_twentythree .ls-required,
.fruity_twentythree .text-danger {
  color: var(--rf-deep-orange) !important;
}
.fruity_twentythree .ls-questionhelp,
.fruity_twentythree .questionhelp {
  font-family: var(--rf-font-body);
  color: var(--rf-black);
  opacity: .75;
}

/* ---------- Question cards: bordered rectangles ---------- */
.fruity_twentythree .question-container {
  background: var(--rf-white);
  border: 2px solid var(--rf-black);
  border-radius: 20px;
  box-shadow: none;
}

/* ---------- Inputs ---------- */
.fruity_twentythree input[type=radio],
.fruity_twentythree input[type=checkbox] {
  accent-color: var(--rf-black);
}
.fruity_twentythree .form-check-input {
  border: 2px solid var(--rf-black);
}
.fruity_twentythree .form-check-input:checked {
  background-color: var(--rf-black);
  border-color: var(--rf-black);
}
/* Checkboxes (privacy acceptance + multiple-choice): black box, REFOOD-lime tick.
   Overrides the theme's green and Bootstrap's white checkmark SVG. */
.fruity_twentythree input[type=checkbox].form-check-input {
  border: 2px solid var(--rf-black) !important;
}
.fruity_twentythree input[type=checkbox].form-check-input:checked {
  background-color: var(--rf-black) !important;
  border-color: var(--rf-black) !important;
  /* tick colour is supplied per theme-colour build (css/variations/refood_*.css) */
}
/* selected answer label: keep black, not theme green */
.fruity_twentythree .answer-item label,
.fruity_twentythree .answer-item input:checked ~ label,
.fruity_twentythree .answer-item input:checked + label {
  color: var(--rf-black) !important;
}
.fruity_twentythree .form-check-input:focus,
.fruity_twentythree .form-control:focus,
.fruity_twentythree .form-select:focus {
  border-color: var(--rf-blue-violet);
  box-shadow: 0 0 0 .25rem rgba(91, 89, 222, .35);
}
.fruity_twentythree .form-control,
.fruity_twentythree .form-select {
  border: 2px solid var(--rf-black);
  border-radius: 12px;
  color: var(--rf-black);
  font-family: var(--rf-font-body);
}

/* ---------- Buttons: pill, black bg, white text, Necto Mono ---------- */
.fruity_twentythree .btn {
  font-family: var(--rf-font-mono);
  text-transform: uppercase;
  border-radius: 999px;
  padding: .65em 1.6em;
}
.fruity_twentythree .btn-primary,
.fruity_twentythree .ls-move-btn.btn-primary {
  background-color: var(--rf-black) !important;
  border: 2px solid var(--rf-black) !important;
  color: var(--rf-white) !important;
}
.fruity_twentythree .btn-primary:hover,
.fruity_twentythree .btn-primary:focus,
.fruity_twentythree .ls-move-btn.btn-primary:hover {
  background-color: var(--rf-lime) !important;
  border-color: var(--rf-black) !important;
  color: var(--rf-black) !important;
}
/* Yes/No button-group answers (e.g. newsletter opt-in, display_type=0): the brand
   override above forces every .btn-primary solid black, which also masks Bootstrap's
   selected-button state (.btn-check:checked + .btn) — so the chosen option looked
   identical to the unchosen one. Give the checked button a lime fill (black text) so
   the selection is clearly visible. Higher specificity + !important beats the base rule. */
.fruity_twentythree .btn-check:checked + .btn,
.fruity_twentythree .btn-check:checked + .btn-primary {
  background-color: var(--rf-lime) !important;
  border-color: var(--rf-black) !important;
  color: var(--rf-black) !important;
}
.fruity_twentythree .btn-outline-secondary,
.fruity_twentythree .btn-secondary {
  background-color: var(--rf-white);
  border: 2px solid var(--rf-black) !important;
  color: var(--rf-black) !important;
}
.fruity_twentythree .btn-outline-secondary:hover,
.fruity_twentythree .btn-secondary:hover {
  background-color: var(--rf-silver);
}

/* ---------- Progress bar: lime on silver, black border ---------- */
.fruity_twentythree .progress {
  background-color: var(--rf-silver);
  border: 2px solid var(--rf-black);
  border-radius: 999px;
  height: 1rem;
}
.fruity_twentythree .progress-bar {
  background-color: var(--rf-lime) !important;
  color: var(--rf-black);
}

/* ---------- Alerts / validation ---------- */
.fruity_twentythree .alert-danger {
  background: var(--rf-white);
  border: 2px solid var(--rf-deep-orange);
  color: var(--rf-black);
  border-radius: 12px;
}

/* ---------- Mobile fix: hide filtered-out array rows ---------- */
/* Array questions with array_filter / subquestion relevance (e.g. WHOSE 285, FREQP 295
   gated by CTX) mark excluded rows tr.ls-hidden. On desktop the core .ls-hidden rule
   (display:none, specificity 0,1,0) hides them, but at mobile widths the theme's
   "no more tables" rule `table.ls-answers tr { display:block }` (0,1,2) wins the cascade,
   so excluded rows render fully yet inherit pointer-events:none from ls-irrelevant:
   visible but dead — taps do nothing. Restore display:none with winning specificity. */
.fruity_twentythree table.ls-answers tr.ls-hidden {
  display: none !important;
}

/* ---------- REFOOD legal footer — injected by scripts/custom.js on every page ---------- */
/* footer.twig is included on every page but is empty, and a child-theme override of it is
   never reached (relative include from the parent's layout_global.twig — see theme round-5
   notes). So the footer is built in custom.js and appended to <body>; this styles it. */
.rf-footer {
  margin-top: 2.5rem;
  padding: 1.25rem 1rem 2rem;
  border-top: 2px solid var(--rf-black);
  font-family: var(--rf-font-body);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--rf-black);
  text-align: center;
}
.rf-footer .rf-footer-inner {
  max-width: 62ch;
  margin: 0 auto;
}
.rf-footer .rf-footer-legal { font-weight: 600; }
.rf-footer .rf-footer-legal strong {
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rf-footer .rf-footer-meta { margin-top: .35rem; opacity: .8; }
.rf-footer a {
  color: var(--rf-blue-violet);
  text-decoration: underline;
}
.rf-footer a:hover { color: var(--rf-black); }


/* ============================================================
   Dish picker — photo card grid  (survey 900001, question 499)
   Dish subquestion labels carry:
     [<img class="dish-img">] <span class="dish-name">Name</span>
                              [<span class="dish-ing">ingredients</span>]
   → responsive grid of cards: photo (if any) full-bleed on top,
   bold dish name, muted ingredients line beneath. Selection = a
   corner badge + a lime ring (the theme's default checkbox glyph
   is hidden). Scoped to #question499 (a globally-unique live qid)
   so 636419 and every other multiple-choice question are untouched.
   DOM (multiplechoice/rows/answer_row.twig):
     li.answer-item > div.row > div.col-auto
        > input[checkbox](opacity:0) + label.checkbox-label(> img + spans)
   ============================================================ */
.fruity_twentythree #question499 ul.answers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .fruity_twentythree #question499 ul.answers-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
}

/* the card */
.fruity_twentythree #question499 li.answer-item {
  position: relative;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rf-black);
  border-radius: 16px;
  overflow: hidden;
  background: var(--rf-white);
  transition: box-shadow .15s ease, transform .15s ease;
}
.fruity_twentythree #question499 li.answer-item:hover { transform: translateY(-2px); }

/* neutralise the Bootstrap row/col wrappers inside the card */
.fruity_twentythree #question499 li.answer-item .row { margin: 0; --bs-gutter-x: 0; }
.fruity_twentythree #question499 li.answer-item .col-auto { display: block; width: 100%; padding: 0; }

/* the native checkbox is opacity:0 in this theme — take it fully out of flow
   so it never offsets the layout; the whole label toggles it via for= */
.fruity_twentythree #question499 li.answer-item input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* hide the theme's default checkbox glyph (drawn as label::before, top-left) */
.fruity_twentythree #question499 li.answer-item label.checkbox-label::before { display: none !important; }

/* label = the clickable card body; padding lives on the text spans so the
   photo can sit edge-to-edge */
.fruity_twentythree #question499 label.checkbox-label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--rf-font-body);
  line-height: 1.25;
  cursor: pointer;
}
.fruity_twentythree #question499 .dish-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
}
/* dish name (bold) */
.fruity_twentythree #question499 .dish-name {
  display: block;
  padding: 12px 14px 0;
  font-weight: 600;
  font-size: .92rem;
}
/* when there's no ingredients line, the name carries the bottom padding */
.fruity_twentythree #question499 .dish-name:last-child { padding-bottom: 14px; }
/* name-only cards (no photo yet): push the name below the corner badge */
.fruity_twentythree #question499 li.answer-item:not(:has(.dish-img)) .dish-name { padding-top: 46px; }
/* ingredients (muted, lighter, smaller) beneath the name */
.fruity_twentythree #question499 .dish-ing {
  display: block;
  padding: 3px 14px 13px;
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.32;
  opacity: .68;
}

/* corner selector badge — empty circle when unselected */
.fruity_twentythree #question499 li.answer-item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--rf-black);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  z-index: 3;
  pointer-events: none;
}
/* selected: lime badge + black check, and a lime ring around the card */
.fruity_twentythree #question499 li.answer-item:has(input[type="checkbox"]:checked)::after {
  background-color: var(--rf-lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}
.fruity_twentythree #question499 li.answer-item:has(input[type="checkbox"]:checked) {
  box-shadow: 0 0 0 4px var(--rf-lime);
  border-color: var(--rf-black);
}