/******************
    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
*/

/* aaroon.de inspired design for survey list page */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&family=Roboto:wght@300;400;500;600;700;900&display=swap');

/* Global styles */
body {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
    background-color: #ffffff !important;
    color: #3d3d3b !important;
}

body .top-container {
    margin-top: 5px !important;
}

/* Typography - Headings with Raleway */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1em !important;
}

h1, .h1 {
    font-size: xxx-large;
}

h2, .h2 {
    font-size: xx-large;
    color: #f20419 !important;
}

h3, .h3 {
    font-size: larger;
}



/* Override IBMPlexSerif and other fonts */
.font-ibmplexserif,
.font-ibm-plex-serif,
body.font-ibmplexserif *,
body.font-ibm-plex-serif * {
    font-family: 'Roboto', sans-serif !important;
}

/* Question titles */
.question-title-container,
.question-text,
.group-title,
.group-name,
.ls-heading,
.question-valid-container .question-text,
.em-question-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
}

/* Allow HTML formatting within question text */
.question-text b,
.question-text strong,
.question-help b,
.question-help strong,
.answer-container b,
.answer-container strong {
    font-weight: 900 !important;
}

.question-text i,
.question-text em,
.question-help i,
.question-help em,
.answer-container i,
.answer-container em {
    font-style: italic !important;
}

.question-text u,
.question-help u,
.answer-container u {
    text-decoration: underline !important;
}

.question-text span,
.question-help span,
.answer-container span {
    font-family: inherit !important;
    font-weight: inherit !important;
}

.question-container {
    margin-bottom: unset !important;
}

/* Preserve inline styles from WYSIWYG editor */
.question-text [style*="font-weight"],
.question-help [style*="font-weight"],
.answer-container [style*="font-weight"] {
    font-weight: inherit !important;
}

.question-text [style*="font-style"],
.question-help [style*="font-style"],
.answer-container [style*="font-style"] {
    font-style: inherit !important;
}

.question-text [style*="text-decoration"],
.question-help [style*="text-decoration"],
.answer-container [style*="text-decoration"] {
    text-decoration: inherit !important;
}

/* Font sizes from WYSIWYG */
.question-text [style*="font-size"],
.question-help [style*="font-size"],
.answer-container [style*="font-size"] {
    /* font-size: inherit !important; */
}

/* Help text should use Roboto */
.question-help,
.help-block {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
}

/* Question titles */
.group-title {
    margin-top: 5px !important;
    color: #3d3d3b; !important;
}

/* Survey title and welcome screen */
.survey-name,
.survey-title,
.survey-description h1,
.survey-welcome h1,
.survey-welcome .h1,
#surveyls-welcome,
#welcome-container h1 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
}

/* Navigation and progress titles */
.navbar-brand,
.progress-bar-title,
.surveytitle {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
}

/* Override any element with direct font-family style */
[style*="IBMPlexSerif"],
[style*="ibm-plex-serif"] {
    font-family: 'Raleway', sans-serif !important;
}

/* All other text elements with Roboto */
p, span, div, label, input, select, textarea, button,
.form-control, .form-label, .help-block, .text-info,
.answer-item, .radio-item, .checkbox-item,
.ls-answers, .answer-container {
    font-family: 'Roboto', sans-serif !important;
}

/* Buttons - aaroon.de style */
.btn {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 30px !important;
    height: 56px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
    border: 2px solid #3c3c3b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 56px !important;
    background-color: #ffffff !important;
    color: #3c3c3b !important;
}

/* Button hover state */
.btn:hover,
.btn:focus,
.btn:active {
    background-color: #3c3c3b !important;
    border-color: #3c3c3b !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* All button types - same base style */
.btn-primary,
.btn-secondary,
.btn-default,
.btn-light,
.btn-success,
.btn-danger {
    background-color: #ffffff !important;
    border-color: #3c3c3b !important;
    color: #3c3c3b !important;
}

/* All button hover states - same red background */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #3c3c3b !important;
    border-color: #3c3c3b !important;
    color: #ffffff !important;
}

/* Link buttons */
.btn-link {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #f20519 !important;
    text-decoration: underline !important;
    padding: 5px 10px !important;
}

.btn-link:hover,
.btn-link:focus {
    color: #d00416 !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* Small buttons */
.btn-sm {
    padding: 0 20px !important;
    font-size: 14px !important;
    height: 42px !important;
    line-height: 42px !important;
}

/* Large buttons */
.btn-lg {
    padding: 0 40px !important;
    font-size: 18px !important;
    height: 64px !important;
    line-height: 64px !important;
}

/* Button groups */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-radius: 30px 0 0 30px !important;
}

.btn-group .btn:last-child {
    border-radius: 0 30px 30px 0 !important;
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Focus state */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(242, 5, 25, 0.25) !important;
}

/* Navigation buttons (Next, Previous, Submit) */
#ls-button-previous,
#ls-button-next,
#ls-button-submit {
    min-width: 150px !important;
}

/* Submit button - same as all others */
#ls-button-submit {
    background-color: #ffffff !important;
    border-color: #3c3c3b !important;
    color: #3c3c3b !important;
}

#ls-button-submit:hover,
#ls-button-submit:focus {
    background-color: #3c3c3b !important;
    border-color: #3c3c3b !important;
    color: #ffffff !important;
}

/* Navigation items */
.nav-link,
.dropdown-item {
    font-family: 'Roboto', sans-serif !important;
}

/* Tables */
table, th, td {
    font-family: 'Roboto', sans-serif !important;
}

/* Lists */
ul, ol, li {
    font-family: 'Roboto', sans-serif !important;
}

/* Global override for any remaining IBMPlexSerif instances - but preserve inline styles */
body * {
    font-family: inherit;
}

/* Only for survey list page with centered logo - dark background */
body:has(.logo-container.d-flex.align-items-center.justify-content-center) {
    background-color: #3c3c3b !important;
    color: #ffffff !important;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

/* Logo container - full screen centered - ONLY for survey list */
.logo-container.d-flex.align-items-center.justify-content-center {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #3c3c3b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

/* Hide navigation ONLY on survey list page */
body:has(.logo-container.d-flex.align-items-center.justify-content-center) .navbar {
    display: none !important;
}

/* Sticky Navigation - aaroon.de style */
header#survey-nav.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #3c3c3b !important; /* Dark gray like aaroon.de */
    border-bottom: 1px solid #eaeaea !important;
    padding: 0 !important;
    z-index: 1030 !important;
    transition: all 0.3s ease !important;
    min-height: 80px !important;
}

/* Navigation container */
header#survey-nav .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 40px !important;
    height: 80px !important;
}

/* Logo in navigation */
header#survey-nav .logo-container,
header#survey-nav .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

header#survey-nav .logo {
    max-width: 199px !important;
    height: auto !important;
    max-height: 50px !important;
}

/* Force logo display even if theme option is off */
header#survey-nav .navbar-brand.logo-container {
    display: flex !important;
}

/* Add aaroon logo if no logo is set */
header#survey-nav .navbar-brand:empty::before {
    content: url('https://aaroon.de/wp-content/uploads/2022/08/aaroon_Logo_white.svg');
    display: block;
    max-width: 199px;
    height: auto;
}

/* Navigation menu button */
#navbar-toggler {
    background-color: transparent !important;
    /* border: 1px solid #ffffff !important; */
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#navbar-toggler:hover,
#navbar-toggler:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #f20519 !important;
    color: #f20519 !important;
}

#navbar-toggler span {
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Dropdown menu styling */
#main-dropdown {
    border: none !important;
    box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    padding: 15px 0 !important;
    margin-top: 15px !important;
    min-width: 220px !important;
}

#main-dropdown .dropdown-header {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    color: #3c3c3b !important;
    font-size: 0.85rem !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid #eaeaea !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#main-dropdown li {
    padding: 0 !important;
}

#main-dropdown a {
    font-family: 'Roboto', sans-serif !important;
    color: #3c3c3b !important;
    padding: 12px 20px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}

#main-dropdown a:hover {
    background-color: #f8f8f8 !important;
    color: #f20519 !important;
    text-decoration: none !important;
}

/* Active/current menu item */
#main-dropdown a.active,
#main-dropdown a:active {
    color: #f20519 !important;
}

/* Add padding to body when navbar is present */
body:not(:has(.logo-container)) {
    padding-top: 80px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    header#survey-nav .container-fluid {
        padding: 0 20px !important;
    }
    
    header#survey-nav .logo {
        max-height: 40px !important;
    }
    
    body:not(:has(.logo-container)) {
        padding-top: 70px !important;
    }
}

/* Logo link */
.logo-link {
    display: block !important;
    text-decoration: none !important;
}

/* Logo image - works for both class names */
.aaroon-logo,
.logo-link img,
.m-auto {
    max-width: 400px !important;
    width: 80% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .aaroon-logo,
    .logo-link img,
    .m-auto {
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    .aaroon-logo,
    .logo-link img,
    .m-auto {
        max-width: 250px !important;
    }
}

/* Hide footer ONLY on survey list page */
body:has(.logo-container.d-flex.align-items-center.justify-content-center) #beginScripts, 
body:has(.logo-container.d-flex.align-items-center.justify-content-center) #bottomScripts, 
body:has(.logo-container.d-flex.align-items-center.justify-content-center) footer {
    display: none !important;
}

/* Override welcome-container max-width from theme variations */
#welcome-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Modal dialog - 50% width */
.modal-dialog {
    max-width: 50% !important;
    width: 50% !important;
}

/* On mobile, make modal full width */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 90% !important;
        width: 90% !important;
        margin: 1.75rem auto !important;
    }
}

.col-auto {
    width: -webkit-fill-available !important;
}

.ri-more-fill::before {
  content: "\ef3e"; /* Unicode für ri-menu-line */
  font-family: 'remixicon' !important;
  color: silver !important;
}