/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Images pasted into survey text (welcome/end screen, question text, etc.)
   must never render wider than their container -- otherwise an uploaded
   image at its native resolution (e.g. via SurveyImageUploader) overflows
   #welcome-container and other text areas at full pixel width. */
#welcome-container img,
.survey-question img,
.question-item img,
#end-survey img {
    max-width: 100%;
    height: auto;
}

/* Survey error page (layout_errors.twig): the "Click here to start the
   survey." restart link (aError.URL, rendered by core's
   application/views/survey/system/url.php as a plain <div class="url-wrapper
   url-wrapper-{type}"><a>...) is otherwise indistinguishable from body text.
   Styled here as a real button since the wrapper/type classes are the only
   theme-safe hook into that core-rendered markup -- matches the site's own
   Bootstrap --bs-primary token so it follows whichever colour variation
   (Apple/Blueberry/Grape/Mango) the survey is using. */
.error-page .url-wrapper {
    margin-top: 1.5rem;
}
.error-page .url-wrapper a {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background-color: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    border-radius: var(--bs-border-radius, 0.375rem);
    font-weight: 600;
}
.error-page .url-wrapper a:hover,
.error-page .url-wrapper a:focus {
    background-color: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    filter: brightness(0.92);
}