/* ===== Base ===== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
}

#main-content {
    flex: 1;
}

/* ===== Navbar ===== */
.qm-navbar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.qm-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: #4361ee;
    text-decoration: none;
}

.qm-brand:hover {
    color: #3a0ca3;
}

.qm-navbar .nav-link {
    color: #495057;
    font-weight: 500;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.qm-navbar .nav-link:hover,
.qm-navbar .nav-link:focus {
    color: #4361ee;
}

/* ===== Hero ===== */
.qm-hero {
    background: linear-gradient(135deg, #f0f4ff 0%, #fafafa 100%);
    border-bottom: 1px solid #e9ecef;
}

.qm-hero__headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a2e;
}

.qm-hero__sub {
    font-size: 1.1rem;
    max-width: 44ch;
}

.qm-hero__preview {
    max-height: 420px;
    object-fit: cover;
    border: 1px solid #dee2e6;
}

.qm-cta {
    background: #4361ee;
    border-color: #4361ee;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
}

.qm-cta:hover,
.qm-cta:focus {
    background: #3a0ca3;
    border-color: #3a0ca3;
}

/* ===== How it works ===== */
.qm-accent {
    color: #4361ee;
}

.qm-step-icon {
    font-size: 2.5rem;
    color: #4361ee;
    display: block;
}

/* ===== Features tease ===== */
.qm-feature-icon {
    font-size: 1.75rem;
    color: #4361ee;
    line-height: 1;
}

/* ===== Bottom CTA ===== */
.qm-bottom-cta {
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    color: #fff;
}

.qm-bottom-cta h2,
.qm-bottom-cta .text-muted {
    color: rgba(255,255,255,0.9) !important;
}

.qm-bottom-cta .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #4361ee;
    font-weight: 600;
}

.qm-bottom-cta .btn-primary:hover {
    background: #f0f4ff;
    border-color: #f0f4ff;
}

/* ===== Footer ===== */
.qm-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 0.9rem;
}

.qm-footer-link {
    color: #6c757d;
    text-decoration: none;
}

.qm-footer-link:hover {
    color: #4361ee;
    text-decoration: underline;
}

/* ===== Focus / Accessibility ===== */
:focus-visible {
    outline: 3px solid #4361ee;
    outline-offset: 2px;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 767.98px) {
    .qm-hero__headline {
        font-size: 1.9rem;
    }

    .qm-hero__preview {
        max-height: 260px;
    }
}

/* ===== Quill rich-text editor (question body) ===== */
.qm-quill-editor .ql-toolbar {
    border-radius: 0.375rem 0.375rem 0 0;
    border-color: #dee2e6;
    background: #f8f9fa;
}

.qm-quill-editor .ql-container {
    border-radius: 0 0 0.375rem 0.375rem;
    border-color: #dee2e6;
    min-height: 90px;
    font-size: 1rem;
    font-family: inherit;
}

.qm-quill-editor .ql-editor {
    min-height: 80px;
}

/* ===== Question dialog: constrain height for the scrollable lower section =====
   The question-type selector (with its Choices.js dropdown) lives outside this
   wrapper so its dropdown is never clipped by overflow: an overflow-auto
   ancestor clips out-of-flow descendants regardless of their positioning
   context, so the dropdown must not be a DOM descendant of the scroll area.
   padding-right keeps the scrollbar from obscuring right-edge controls
   (e.g. the CaseSensitive checkbox). */
.qm-question-dialog-body {
    max-height: calc(100dvh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    /* This wrapper carries Bootstrap's .row class for gutter spacing, but it must
       NOT be a flex row: as a flex container its col-12 children were stretched to
       the flex-line height, and the Quill editor's content (label + toolbar +
       container) then overflowed its own column and rendered on top of the
       following section (Fill-in-the-Blanks / Free-text AI), making those inputs
       unreachable. All children here are full-width col-12 that simply stack, so a
       normal block scroll container lays them out correctly with no overlap.
       The col gutter margins still apply because they are class-based. */
    display: block;
}

/* Prevent option-row text inputs from blowing out their flex container */
#qOptionsList .input-group {
    flex-wrap: nowrap;
}

#qOptionsList .input-group .form-control {
    min-width: 0;
}

/* ===== Choices.js question-type selector ===== */
.choices__list--dropdown {
    z-index: 1100 !important;
}

.choices__inner {
    border-color: #dee2e6;
    border-radius: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    background-color: #fff;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0.375rem;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 1rem;
}

/* ===== Quiz editor drag-and-drop ===== */
.page-items {
    min-height: 3rem;
}

.page-items.can-drop {
    background-color: rgba(13, 110, 253, 0.03);
    border-radius: 4px;
    outline: 1px dashed rgba(13, 110, 253, 0.25);
}

.qm-drop-target {
    outline: 2px dashed #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
    min-height: 2.5rem;
}

/* Picture Choice cards */
.qm-pic-card {
    transition: border-color 0.15s;
    cursor: pointer;
}
.qm-pic-card:hover {
    border-color: #0d6efd;
}
input[type="radio"]:checked + .qm-pic-card,
input[type="radio"]:checked ~ .qm-pic-card {
    border-color: #0d6efd;
    border-width: 2px;
}
/* The radio input itself is visually hidden, so give the card a visible focus
   ring when it's reached via keyboard (Tab) rather than only on click/hover. */
input[type="radio"]:focus-visible + .qm-pic-card,
input[type="radio"]:focus-visible ~ .qm-pic-card {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}