/* =========================================================
   HEALTHCHECK ONLINE — CUSTOM THEME
   Calm. Clear. Friendly.
   ========================================================= */


/* GENERAL */

body {
    background-color: #F5FAF8;
    color: #243B35;
}


/* BUTTONS */

.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-primary {
    background-color: #2E7D5B;
    border-color: #2E7D5B;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #236346;
    border-color: #236346;
}


/* PROGRESS BAR */

.progress {
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    background-color: #2E7D5B;
}


/* FORM FIELDS */

.form-control,
.form-select {
    border-radius: 10px;
}

/* =========================================================
   HEALTHCHECK ONLINE — CARDS & INTERACTION
   ========================================================= */


/* QUESTION / CONTENT CARDS */

.question-container {
    background-color: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #DCE8E3;
    box-shadow: 0 4px 14px rgba(36, 59, 53, 0.06);
}


/* MAIN SURVEY CONTENT */

.group-container,
#outerframeContainer {
    border-radius: 16px;
}


/* HEADINGS */

h1,
h2,
h3,
.question-title-container {
    color: #243B35;
}


/* =========================================================
   ANSWER BUTTONS
   ========================================================= */

.btn-check + .btn,
.answer-item .btn {
    border-radius: 12px;
}


/* BUTTON HOVER */

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(46, 125, 91, 0.25);
    transform: translateY(-1px);
}


/* =========================================================
   CHECKBOXES
   ========================================================= */

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
    border-color: #AABDB5;
    cursor: pointer;
}


.form-check-input:checked {
    background-color: #2E7D5B;
    border-color: #2E7D5B;
}


/* SPACE BETWEEN ANSWERS */

.form-check {
    margin-bottom: 16px;
}


/* =========================================================
   FOCUS
   ========================================================= */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #2E7D5B;
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 91, 0.15);
}

/* =========================================================
   HEALTHCHECK ONLINE — WELCOME PAGE
   ========================================================= */

.hco-welcome {
    max-width: 1100px;
    margin: 1rem auto;
    padding: 1.5rem 2.5rem;
}


/* TITLE */

.hco-welcome-title {
    color: #243B35;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 1.25rem;
}


/* DESCRIPTION */

.hco-welcome-description {
    color: #476058;
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 800px;
    margin-bottom: 1.5rem;
}


/* WELCOME MESSAGE */

.hco-welcome-message {
    color: #243B35;
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 850px;
}


/* QUESTION COUNT */

.hco-question-count {
    margin-top: 1.5rem;
    color: #6B7F77;
    font-size: 0.95rem;
}

/* =========================================================
   HEALTHCHECK ONLINE — MAIN CONTENT LAYOUT
   ========================================================= */

.hco-main-row {
    width: 100%;
}

.hco-main-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}