/* ───────── Demo section (responsive rebuild) ───────── */

/* ---------- layout shell ---------- */
.demo-section {
    max-width: 900px;
    width: 100%;
    padding: 0;
}

/* ---------- category buttons ---------- */
.buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--btn-gap);
    justify-content: center;
    margin-bottom: 2rem;

}

.demo-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #000;
    transition: transform .3s;
    -webkit-tap-highlight-color: transparent;
}

.demo-button:hover {
    transform: scale(1.1);
}

.demo-button.active .icon-circle {
    background: var(--webpage-main-color);
}

.demo-button.active .button-label {
    color: var(--webpage-main-color);
    font-weight: 700;
}

.icon-circle {
    width: var(--btn-circle-size);
    height: var(--btn-circle-size);
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    transition: background .3s;
}

.icon-circle i {
    font-size: var(--btn-icon-size);
    color: #fff;
}

.button-label {
    font-size: var(--btn-label-size);
    font-weight: 600;
}

/* ---------- text container ---------- */
.text-container {
    background: #f9f9f9;
    border-radius: 16px;
    box-shadow: 0 25px 20px rgba(0, 0, 0, .1);
    padding-bottom: 0;
    max-height: 700px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.scrollable-text {
    flex: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: .5rem;
    /* rhythm-friendly spacing */
}

.scrollable-text::-webkit-scrollbar {
    display: none;
}

/* ---------- Capibaira widget button alignment ---------- */
.text-container .cb-simplify-btn {
    align-self: center;
    margin: 1rem auto !important;
    /* centred horizontally, 1 rem vertical */
}

/* ─── TYPOGRAPHY ─────────────────────────────────────── */

/* --- base text block --- */
.demo-html-text {
    font-family: 'Prompt', sans-serif;
    letter-spacing: normal;
    font-size: var(--fs-300);
    /* uses token (14 → 16 → 17 → 18 px) */
    color: #444;
    line-height: 1.6;
    text-align: left;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0;
    /* start from a clean slate */
}

/* --- global margin rhythm (direct children) --- */
.demo-html-text>* {
    margin-block: 0 1rem;
    /* 1 rem gap below every element */
}

.demo-html-text>*:first-child {
    margin-block-start: 0;
}

.demo-html-text>*:last-child {
    margin-block-end: 0;
}

/* --- headings --- */
.demo-html-text h1 {
    font-size: var(--fs-300);
}

.demo-html-text h2 {
    font-size: var(--fs-300);
}

.demo-html-text h3 {
    font-size: var(--fs-300);
}

.demo-html-text h4 {
    font-size: var(--fs-300);
}

.demo-html-text h5 {
    font-size: var(--fs-300);
}

.demo-html-text h6 {
    font-size: var(--fs-300);
}

.demo-html-text h1,
.demo-html-text h2,
.demo-html-text h3,
.demo-html-text h4,
.demo-html-text h5,
.demo-html-text h6 {
    font-weight: 600;
    margin-block: 1.3rem 0rem;
    /* 2 rem above, 0.2 rem below */
    line-height: 1.3;
}

/* --- paragraphs & blocks --- */
.demo-html-text p,
.demo-html-text blockquote,
.demo-html-text pre,
.demo-html-text figure,
.demo-html-text table {
    margin-block: 0 1rem;
}

/* --- lists --- */
.demo-html-text ul,
.demo-html-text ol {
    list-style-position: outside;
    margin-block: 0 1rem;
    padding-inline-start: 1.5rem;
}

.demo-html-text ul ul,
.demo-html-text ol ul,
.demo-html-text ul ol,
.demo-html-text ol ol {
    margin-block: 0 1rem;
    padding-inline-start: 1.5rem;
    list-style-type: circle;
}

.demo-html-text li {
    margin-block-end: 0.5rem;
    /* space between items */
}

/* --- inline emphasis --- */
.demo-html-text strong,
.demo-html-text b {
    font-weight: 600;
    color: #444;
}

/* ---------- breakpoints (non-typography tweaks only) ---------- */

/* ≤ 1024 px: nothing to change in text sizing — tokens handle it */
@media (max-width: 1024px) {
    /* keep if you still need container tweaks later */
}

/* ≤ 765 px: just tighter padding */
@media (max-width: 765px) {
    .demo-html-text {
        padding: 0.6rem;
    }

    .text-container {
        max-height: 650px;
        padding: .5rem;
    }
}

/* ≤ 480 px: tighter container height */
@media (max-width: 480px) {
    .demo-html-text {
        padding: 0.6rem;
    }

    .text-container {
        max-height: 530px;
        padding: .3rem;
    }
}